Assignment 07, Website Development, CCV Spring 2017

Research - Reactive/Responsive:



Question 1:

RESPONSIVE DESIGN, REACTIVE/ADAPTIVE DESIGN, PROGRESSIVE ENHANCEMENT, & MOBILE FIRST

Reactive/Responsive

Responsive Design

Responsive design is designing a website so that the content flows to fill the screen regardless of the screen size. When the screen size changes, the content flows dynamically to fill the screen, moving the elements as necessary to allow the webpage to be viewed on any size screen with no horizontal scrollbars.

Reactive Design

Reactive Design is a type of website design that takes a set width point that is assigned to a page, and snaps the content to fix inside it as it changes. It is not fluid like Responsive design is, rather, as the screen size changes, it sees a certain point, and snaps the content to fit inside of it at specific size dimensions assigned for each format. For example, designer could say, for PCs, size the site to 1200 pixels wide; for tablets, size the site to 500 pixels wide; for mobile devices, size the site to 150 pixels wide. When the viewer views the site, it will snap to fit these predefined sizes, rather than dynamically resizing to fit the screen. Adaptive is another word for Reactive design. A great example of how this works can be seen here: http://blog.froont.com/9-basic-principles-of-responsive-web-design/.

Progressive Enhancement

Progressive enhancement is designing a website that prioitizes core content, before design elements. The basic concept is to design a webpage that works for the lowest common denominator in regards to browsers. To design progressively, one would start with HTML, then add CSS, then add JavaScript or other enhancing elements to the content. In this way, even people using the most basic of browsers are assured that they can access the basic content of the website. I feel there is some value to the concept. For example, if a viewer does not have javascript, that would render many websites nonfunctional. To design a site that works without javascript, then add the javascript elements as add-ons to a functional site, makes perfect sense. You're left with a site that has basic functionality for everyone. Another modern example is the use of Flash video on websites. Flash video is outdated, and w3c has recommended everyone switch to HTML5 video format quite some time ago. I personally disable Flash in my browser, because it has many security vunuerablities. Because of this, I am often on websites were I cannot see any of the content, because it is FALSH video content. Designing in HTML5 would be an example of Progressive enhancement design, because all browers display HTML5, whereas many do not display Flash.

Mobile First

Mobile first is a design concept where you begin, from the very planning stages of your website design, to design a website that works flawlessly on mobile devices. From that bas site, you then scale it up for larger screens and desktop systems. It's based on the concept that most internet browsing occurs on cell phones, and serving content that is assessible to those users is the highest priority. I don't necessaryily agree with that, but I have been on some websites that were frustratingly difficult to do anything on with a mobile device, so I definitely want to consider these viewers when designing.

Links:

http://mickkenyon.com/Micks_Blog/responsive-vs-reactive-websites/
https://www.goldhosts.com/Reactive-Website-Design/
http://www.phinsband.com/2017/01/main-reasons-why-reactive-web-design/
https://99designs.com/blog/tips/responsive-web-design-key-tips-and-approaches/
http://www.business.com/web-design/tyler-horvath-responsive-web-design/
https://www.drupal.org/docs/7/mobile/responsive-web-design
https://en.wikipedia.org/wiki/Progressive_enhancement
https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt-dead-but-it-smells-funny/
https://codemyviews.com/blog/mobilefirst
https://redesign.responsivedesign.is/strategy/page-layout/mobile-first/
https://www.nngroup.com/articles/mobile-first-not-mobile-only/