Adaptive layouts using responsive web design. Helpful notes for clients?

Responsive web design is the science* of creating the components of a website to adapt to the device it’s being displayed on. From mobile to tablet to desktop and beyond. By adaptive layouts, we mean the mark-up (HTML) and the stylesheet code (CSS) combine to give an optimised presentation of page content regardless of resolution or device. Components on the page are context sensitive and adapt to their surroundings.

This need for adaptive layouts is driven by the problem faced by many site owners and webmeisters, which is. With thousands of devices already out in the market and more smart phones and tablets being launched, it’s impractical to keep redesigning sites for these devices.

So, web developers, needing to deal with the situation yet still offer affordable solutions to their clients have a new tool up their sleeves adaptive layout techniques.

Adaptive layouts

Adaptive layout techniques (more explanation of which below) are used to enable websites – running from a single codebase – to resize, morph, add, remove, modify and tweak the display of content to suit the end user on their web browsing devices. And by devices, I mean, mobile, tablet and desktop, which can cover a huge range of resolutions and formats.

Hicks Design. One of the original innovators of responsive web design. Watch how the page transforms when resized.

In theory, you can design your website once and have it flexible enough to cope with any screen resolution or ratio that it encounters. In theory…

So, web developers, needing to deal with the situation yet still offer affordable solutions to their clients have a new tool up their sleeves adaptive layout techniques.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.
John Allsopp, “A Dao of Web Design”

Dedicated Mobile vs Mobile-optimised: The Options

So what’s a client to do? if you want your site to look good on every available device then you need to take action. It’s a no-brainer stat that more and more people are using mobile and wi-fi enabled mobile devices and tablets to access the web. So what are the options?

Tweak the existing code with a few simple techniques to cover some basic requirements
Implement an adaptive layout, to optimise display on devices using responsive web design techniques
Build a specific mobile/device optimised site
Dedicated App

: What are the costs of Increasing mobile support? Image Source: Smashing magazine

Tweaks are good, but they are only short term holding measures.

The second option, ‘Adaptive layouts‘ is probably the most cost effective and sensible first step to take. Although options of burying heads in the sand are hoping the problem goes away are also applicable. I shan’t discuss the consequences of this as it’s outside the scope of this article

Nay-sayers will argue that content needs to be tailored to the target user and that their needs will be different depending on where they are browsing and on what device. These people are advocates of the dedicated mobile site.

For example, someone with an iPhone may actually want to use your site to find contact details, a store locator and nothing else. Your analysis may lead you to the conclusion that these users don’t care about the latest product news and in-depth articles. But the problem is, who gets to make these assumptions? Mobile users may just as well be using the site from home on wi-fi because its convenient. Who’s to say what their goals are then – surely the same as a desktop user? Should their experience be guessed at or hindered because it is assumed they are out and about?

There are plenty more discussions to be had about whether or not a client should opt for a mobile specific site or even go down the dedicated App route. These approaches can and do tailor a completely different experience from the desktop audience and I would not argue with this as a strategy if your audience bears this out. In many cases supplying a completely different set of content and call to action to a mobile user is the right thing to do.

However, the main reason for going down the ‘optimised’ route rather than ‘dedicated’ is that it’s expensive to build and maintain a dedicated mobile site and who isn’t on a tight budget these days?

…the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years.
Ethan Marcotte

So how responsive is your website?

If you run or are responsible for a website, think back to when it was designed or when you had your last overhaul. Chances are if it was a pre 2010, you have an older fixed width site that is non-adaptive. It is a therefore a wise idea to audit how the site performs on various devices and resolutions. Moreover how the presentation of your brand and message is being interpreted by your site users. Once you see the scope of the problem and how your site looks to this audience you can look at taking action.

Media queries and other fun jargon, why haven’t I heard of this?

When developers talk adaptive layouts, you will often hear them wax about topics such as ‘responsive web design’, ‘media queries’, ‘javascript shivs’, ‘mobile up approach’ and ‘progressive enrichment’. These topics do deserve much discussion (there are some excellent resources but we’ll leave the full explanation of these for now). As I’ve mentioned somewhere before in this article – adaptive is about utilising all of these to provide users with an optimised experience for your site on as many devices as possible.

Almost everything you’ll read about responsive web design is about layouts that change depending on screen size. Source: Mobile screen size trends. Morten Hjerde

You may be in the dark on this. Why I haven’t I heard about this before is a common reaction? The truth is that adaptive layouts have only become possible recently. There is also still work going in web development land to refine and hone techniques. More importantly, getting it ready for a production site throws up a number of challenges, particularly when dealing with an older CMS. However, this doesn’t mean it’s not ready. The web design world is hot with the work of implementing adaptive layouts. And it’s happening everywhere now, right now.

The other thing of course is that your agency is/ or was gearing up to tell you. It’s not an easy sell either. Until you actually see it in action it doesn’t seem initially to have immediate benefits or offer any return in ROI. Yet, increasing support across mobile devices, improving customer experience and perception of your brand, improving mark-up to help organic SEO and reducing maintenance costs are all direct benefits.

What’s involved?

We’re talking about the re-engineering of your front end code.

Upgrading to HTML5 markup, simplifying all markup and making semantically correct
Using CSS3 to take care of the presentation and effects (progressive enrichment)
Utilising media queries to serve different presentational code to different resolutions
Using Javascript shivs such as moderniser and selectivizr to plug holes in IE6-8.
Using well coded JavaScript to serve more complex presentational components to more capable browsers

You don’t even need to change the design, although web agencies may try and twist your arm on this issue!

Adaptive layouts using responsive web design. It’s not a completely pain-free journey, but the benefits far outweigh the risks. Can you afford for your site to be ignored or worse snubbed by users on non desktop devices? As for me, I would urge you to at least consider getting your site designed with an adaptive layout.

From here on in all websites will be designed responsively, it’s no longer an option for web companies that are worth their salt.

Well Studio

Designing websites responsively