It 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.
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
Join the conversation