How I Describe My Thoughts

An Overview of Responsive Web Design: From Theory to Practice

by ALKAL on February 21, 2013 , No comments

responsive-web-design-tutorialIt is commonly known that the shift to mobile devices is happening at an extraordinary speed and smartphones and tablets revolution brings new features to the web development. As a million screens have bloomed, there is the need to create websites and services that work equally well on every device.

As a result, a new tactic called “Responsive Web Design” was raised. Ethan Marcotte started the responsive web design trend back in May 2010. He wrote an article about the need for a more flexible approach to web design, “Responsive Web Design”, for A List Apart. Put simply, Responsive Web Design is about adjusting layout based people’s various screen resolutions, using “media queries” to figure out what resolution of device it’s being served on. It can be argued that, responsive design personalises layout more than content and adjusts to the device more so than the person.

At this point, it is needed to be referred that some people have begun to conflate responsive design with the broader concept of personalisation. Personalisation is really just an umbrella concept in which responsive design represents one tactic. Nearly any piece of data that can communicate any context about the user or her environment can be used to personalise an experience. Other tactics include geotargeting (Yelp), autocomplete (Google), collaborative filtering based recommender systems (Amazon, Netflix) and behavioral targeting (interest based advertising) (Bluekai, DoubleClick).

All the above was only the theory… in this post also an example is provided, which is based on HTML5 and CSS3 standard, using also the jquery scripts Modernirz and FitVids. More specifically:

  • Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser, mainly works well with IE9 which not support the CSS3 @media property.
  • FitVid, a jQuery plugin for fluid width video embeds.

Finally, you can check more than 60 responsive web design tutorials as a kick-off to learn and create your personal responsive website or application.

Reference: .Net, Mashable, TripwireMagazine

ALKALAn Overview of Responsive Web Design: From Theory to Practice

Join the conversation