From feature phones to smartphones, small tablets to large tablets, desktops to netbooks and ultrabooks, the variety of devices people use to access web content is growing rapidly.  Times have changed from the days of just computers and smartphones. Even then, optimizing content for site visitors was a bit of a challenge. The first initial attempt was building a separate mobile website.

So, you had your regular desktop-based website and your separate mobile website, and maybe even different content between the two. You may have been dealing with different tools and different content management systems serving both. This approach was a maintenance nightmare, since in some cases, you were maintaining essentially two separate websites.

Then web content management systems got a little smarter.  You could identify the type of device your visitors were using, then present either a mobile or desktop optimized view of your content. This approach was certainly an improvement and worked well in an environment where you only had two types of devices to worry about – desktops/laptops and smartphones.

Where both of these approaches fail is in addressing the large number of devices that fall between a traditional computer and smartphones – TABLETS.

So now you don’t have the big screen and the little screen, you have a whole continuum of screen sizes and resolutions in between. The big problem is this: How do you optimize that experience for all of those different devices, without having to build 5 different websites?

One potential solution is responsive web design (RWD). 

 responsive web design

How does it work?

The responsive approach is not focused on identifying the type of device, but rather the screen resolution of the device. The device itself doesn’t matter but the approach is to create a site design that automatically adjusts to the resolution of your screen.

The benefits of this approach:

  • You’re not dependent on identifying the site visitor’s device
  • You have the ability to provide an optimized experience for any device that the visitor may be using with one design that adjusts to fit various screen resolutions and screen sizes

When the content is rendered, modern browsers, with the help of CSS3 media queries, can modify the layout of the page on the fly. What may be displayed as a 3 column layout on wider devices, can be altered dynamically as the screen width narrows. Normally this is done by collapsing the columns from the layout to render below the most important content on the page.

From the content management perspective, designers have the ability to design their templates in a way that they can define, “if a resolution is this, then this is what it should look like”. So if you’re looking at a site on an iPad in portrait mode and you switch to landscape mode, the design will adjust so that it’s optimized for that resolution.

With this approach, you don’t need a separate mobile site or mobile template; you just build your site and template in a manner that’s fluid to fit the browser’s frame. Right now we are in a transition state because for content authors, some of the technology used to make responsive work is not supported by older browsers. So there’s some trade off there. CSS media queries are supported by Firefox, Chrome, the latest version of IE, IE 9, but are not supported by earlier versions of IE. Fortunately we can get around this with some JavaScript trickery.

Why should I care?

With RWD, you can build websites that are optimized for the variety of devices in use as well as those yet to be conceived since we’re optimizing for screen resolution not device. It really allows the information to be presented in a way that is aligned with the individual user’s device. We also have the ability to not only move elements around, but to also hide certain types of content. For example, if you have a large background image, it may look great on a desktop, but you may not want to show that on say, a smartphone, because you only have so much screen space and it’s really not a critical piece of content. To create a streamlined view, for example, a visitor on your site using a smartphone who wants to find information fast, you can either re-order your navigation menu or hide the navigation items that you think may not be relevant. This type of flexibility enables you to create a better overall user experience.

Is it Easy?

Responsive design is fundamentally no more difficult to implement than any other website design, it’s just a matter of understanding how to code for it. You must also take into consideration during the planning process how you want that design to degrade for various screen resolutions. There are several common resolutions you will want to optimize for, so deciding how you want to present your site for each one of those resolutions does take a little time. So it’s not that it’s a significant degree of technical difficulty, but more planning is required during the design phase.

Next Steps

Take a look at your site analytics. What devices are most of your visitors using to access your site? If you are seeing a large or growing number of users accessing your site with a variety of mobile devices, the best way to create a great user experience is through responsive web design.

Get in touch.  Our web consultants can help you provide the best user experience for your site visitors.

Related Links: