Here’s a thing on responsive web….

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:

 Pro’s:

-Same experience all around

-Less Maintenance

-It is more discoverable as Google’s search engine can more easily discover the content within it

Con’s:

-Affects performance

-More difficult to advertise

-Sacrificial Functionality

According to Muldoon(2013) Adaptive design:

Pro’s:

-Best experience all around

-Faster loading times

-Advertising monetization

Con’s:

-Bad for search engines

-Linking

-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]

 

Advertisements
Posted in Web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s