Read it. Be informed. Stay frosty.
Responsive web design
Ethan Marcotte first defined the term “responsive design” and is still surprised at the reception the concept has had. (Marcotte, 2017) Responsive web designs and adaptive web designs are similar in the sense that their appearance changes along with the size of the screen. They are different in the sense that RWD changes appearance at all points of scaling and AWD only changes appearance at specific points when scaling screen size.(Graham, 2015) Generally speaking, responsive design holds one layout that looks good on many different scales and adaptive design has specific layouts that work for different screen sizes. This also means that an adaptive design takes in to account specific screen parameters whereas responsive does not. (Mozilla.org, 2017)
According to Muldoon(2013) Responsive design:
-Same experience all around
-It is more discoverable as Google’s search engine can more easily discover the content within it
-More difficult to advertise
According to Muldoon(2013) Adaptive design:
-Best experience all around
-Faster loading times
-Bad for search engines
-Incompatible for wrong versions
Layouts/Design can be tackled with two different methods. Progressive Enhancement or Graceful Degradation. Graceful Degradation is the practice of building a website that provides good user experience to modern browsers and then the experience degrades as the browser is older. including advanced features when browsers support it. Developers usually suggest the browser version required. Progressive enhancement is built in such a way that the site would give a base level of experience with many browsers and more advanced functionality would be added for newer browsers. The browser support level would be at a set level.
Here are some random facts that certain people interested in responsive web layouts can know:
A fluid grid layout is a layout that flows naturally with the resizing of a screen. This layout makes use of dynamic units in order to adapt at every point in responsiveness.
Media queries are a CSS3 module that make it possible for content to adapt to dynamic conditions such as screen resolution.
CSS breakpoints are points at which a browser will adapt a layout to a users specific screen size. The allow different CSS layouts to be used in order to provide functionality to multiple different platform interfaces. They tell a webpage at what point a certain CSS page must be applied.
Twitter’s Boostrap grid scales up to 12 columns.
A fluid image/media is media that scales along with a page in order to ensure a fluid responsive deign.
Responsive design has become very necessary with the development of new devices that have different screen resolutions and methods of interacting with the user. It is used when screens are scaled or when people what to make the user experienced optimized for most browsers.
Marcotte, E. 2017. “Ethan Marcotte”. [online]. Available at: https://ethanmarcotte.com [Accessed 12/05/2017]
Graham, G. 2015. ‘The difference between responsive and adaptive design”. [online]. Available at: https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ [Accessed 12/05/2017]
Mozilla.org. 2017. “Responsive design vs adaptive design”. [online]. Available at: https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design%5BAccessed 12/05/2017]
Muldoon, K. 2013. “The Pros’s and Con’s of Responsive and Adaptive Design”. [onlne]. Available at: https://www.wphub.com/blog/posts/pros-cons-responsive-adaptive-designs/ [Accessed 12/05/2017]