This post also appeared on the Shervin In The Loupe newsletter (July 2012), where I regularly contributes articles about various topics.

Back in the days when the web was mostly accessed using desktop or laptop computers, the amount of different screen sizes and resolutions a web designer had to worry about was very limited, and designing a website for the average desktop monitor environment was the default method for years.

Smartphones, tablets, ultrabooks, and even smart TVs, are part of the increasing array of devices and browsers used to access the web, and the chance of your website being visited by a device with a smaller screen is very high. Is your website ready?

Facing the changing landscape of new devices, designers are now confronted with a multitude of different screen sizes, resolutions, and even screen orientations (landscape vs portrait mode). This makes designing a great user experience across all devices a bit more challenging. Of course, most websites designed primarily for desktop computers can be viewed as-is by mobile devices without much problem. You might need to use a few zooming and panning gestures in order to read the text as it will most likely appear too small by default, but the situation is manageable.

If you wanted to improve the user experience of your visitors on mobile devices, your website could have a desktop version, then a separate mobile-optimized version designed for smaller screens (larger fonts, bigger buttons, smaller images, etc.). But as mentioned earlier, the landscape of new devices is changing rapidly and picking a default screen size to base your mobile-optimized site design on is almost impossible given the amount of different display sizes. Tablets are a great example of that: with an average of 7” to 10” displays, they are in between the smartphone 4” screen and a small laptop. This means that to improve the user experience on a tablet, you would need to have a tablet version of your site as well. Having separate versions of your site for desktops, smartphones, and tablets is technically possible, but it means that you have now multiple versions to maintain and update, which requires more resources to do so. Not the best case scenario, isn’t it?

Responsive Web Design comes to the rescue

So what is Responsive Web Design? Well, Responsive Web Design (RWD) is a method of web development where a website layout and its content respond to the device on which it is being rendered. While a website viewed in a traditional desktop/laptop browser might be rendered a certain way, a tablet or smartphone browser will render that same code differently in order to respond to the size and resolution of a smaller screen. This means that the text will reflow automatically, the images will shrink, the navigation will be optimized for the given screen size, some page elements might even be hidden entirely (sidebar, etc.), etc.

Rather than creating separate website designs, each tailored to a particular type of device, RWD can adapt and optimize the user experience for the device’s screen size and orientation. No need to have a separate “desktop” and “mobile” version, one unique version of the code can be aware of the environment it is rendered in and adapt the website layout to that environment, in real-time. If you are using a smartphone or a tablet, and you change the orientation of the screen, RWD can adapt to the change in screen orientation and display the layout optimized for either landscape or portrait mode. A similar behaviour can be triggered when you resize your web browser window on your desktop, as the RWD will reflow the content and change the page layout to adapt to the changing dimensions of the browser window.

Responsive Web Design vs Mobile version?

So, is having a separate mobile-optimized version of your website never a good idea? Well... in most cases, RWD will be the method of choice to deliver a great mobile experience at a reasonable cost. That said, in some cases having a separate mobile version of your site might be a better choice. It all depends on the type of experience you want to deliver to your mobile users. Here is a quick comparison:

• RWD is more cost effective than a separate mobile version as there is only one site to maintain.
• With RWD there is no need to keep up and upgrade when new mobile devices hit the market, as RWD responds to the size of the display and not to the specific make or model of the device. With a separate mobile version, your site needs to detect the device model and/or the mobile browser it uses, which means that you need to make sure new devices and mobile browsers are supported by adding them to the detection mechanism.
• With RWD, the content delivered to a mobile user is the same as the one delivered to a desktop user. It might be presented differently, and some of it might be hidden, but RWD alone is incapable of serving a totally different set of content to a mobile user. Here are some examples where this limitation can be an issue: 1) Although the dimensions of an image might be shrunk by RWD, its file size is still the same as the one viewed on a desktop computer. This can be an issue if you want your site to be extremely efficient on mobile networks with limited bandwidth (3G, 4G, etc.). 2) You might want to deliver a different user experience to mobile users by making the content they see more relevant to their situation: for example, if you provide transit services, chances are that a user accessing your site from a mobile device is on-the-go and is more interested by finding your bus routes and schedules than information related to your organization (news, “about us” section, etc.). A separate mobile version can deliver different content to mobile users if needed and can be fully optimized for mobile networks with limited bandwidth.
• In some extreme cases, designs with intricate graphic objects do not translate very well in RWD. In these cases, a hybrid solution can be implemented using one layout for desktops or laptops, and a layout using RWD without the intricate graphics that would be used for smartphones and tablets. The desktop-specific layout and the RWD layout would be accessing the same source of content, so maintaining both layouts would still be manageable with a limited amount of additional resources.

Is RWD right for your website?

Well... each website is different, has its own set of parameters to evaluate, and the mobile strategy should be made on a case-by-case basis... but given the many advantages of RWD, it offers a great solution in most cases.

Enough talking, here are some examples

If you are viewing this article on a desktop or laptop, resize your web browser window to mimic the screen sizes of a smartphone or a tablet, and see how the page layout adapts to change in window size. If you are viewing this article on a mobile device, change the orientation of your device and see how the page layout adapts to change. - Starbucks - http://www.starbucks.com/ - Sony (USA) - http://www.sony.com/index.php - The Boston Globe - http://www.bostonglobe.com/ - Staffanstorp (Swedish municipality) - http://staffanstorp.se/ - University of California San Diego - http://ucsd.edu/

For more great examples of Responsive Web Design, visit the Media Queries website.