Responsive Web Design
How It Came About
A very clever chap called Ethan Marcotte wrote an article about responsive design on A List Apart. The article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today's needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea was to approach the issue the other way around - a very brilliant piece of lateral thinking. The genius was to say, why not use flexible and fluid layouts that adapt to almost any screen. And that article written in May 2010 started a revolution that has changed literally everything about how you consume information on the web.
Three key technical features are at the heart of responsive Web design:
Truly responsive Web Design requires all three features to be implemented.
The key point is adapting to the user's needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user's needs into account doesn't just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you'll present the information in a different order. Don't assume the user won't need access to all the site information because he or she is on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.
1-Media QueriesStarting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" ></link>
That was it end of story. Today though, this has been significantly improved on by the W3C media queries in CSS3, taking them a gigantic step forward.
There are three ways to implement media queries:
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten. If a document has more than one css style sheet applied to it, precedence will be given in their order of execution. The cascade (in css )defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.
Media Query Listeners
Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.
A Word about the ViewportWhen testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen. So do you think there isn't a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser's (chrome-less) window. Setting the width equal to the device-width works around the problem: Other viewport settings include maximum-zoom and initial-scale.
A flexible grid-based layout is one of the cornerstones of responsive design. The term "grid" is used rather freely and doesn't imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various Web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive Web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.
CSS3 Grid Layout
The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an "Editor's Draft." It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.
Flexible Images and Media
The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.
What about older browsers that don't support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.
Jumping on the responsive Web design wagon isn't something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.
This is a very brilliant piece on responsive design. Eloquently explained despite the complex technologies involved.
It is indeed very timely as well since Google the search engine giant is now implementing a new algorithm that relegate sites on its result pages which are not optimised for smart phones. In other words, not designed using Responsive Design Construct. Google gave plenty of warning, telling developers about the change in a blog post in February and providing a simple tool to check whether sites were mobile friendly.
Posted by: Epaka
I have learned a lot on reading this article.Now that Google is inexplicitly stating that "The Mobile First Paradigm" is the way to go you will be a fool not to overhaul your old web site.
Posted by: Fabian
This is thoughtful and very insightful. Responsive Design has changed everything due to the myriad of devices with varying screen resolutions and form factors.The guys at torometech do know their stuff
Posted by: Bon
A very thorough article on the subject. Learned quite a lot from it. keep it up ToromeTech
Posted by: Ambrose