One life, One web – Responsive Web Design

Wednesday, December 18th, 2013
By Daniel Miller

Back in 2006, the W3C coined the term “One Web”. They went on to explain the term: “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.” The W3C are of course addressing the Responsive Design challenges that, at the time, were creeping up on developers.

With the explosion of mobile devices, tablets, internet enabled TVs, internet enabled gaming consoles, bigger screens in general and more laptops than you can shake a stick at, it is now essential that developers not only be aware of what Responsive Design is, but also how to utilise it effectively on the websites they develop.

Like many new technologies, Responsive Design can seem a little scary at first, but once you have a dig around you will find that there are two widely accepted techniques, hundreds of How To’s and many ‘helper’ code libraries that make your code work on older browsers, or indeed do the whole job for you with just a few initial set-up options.

The two techniques – Adaptive and Responsive

(1)  Responsive Design

Responsive Design is probably the most common approach at the time of writing, with the term attributed to Ethan Marcotte and referenced in his ‘Responsive Web Design’ article back in 2010. It relies on the use of CSS3 Media Queries to query the device that is rendering the site. If the whole idea of a media query is new to you, you may have already been using them without too much forethought:

<link rel=”stylesheet” type=”text/css” href=”site.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

A typical query could look like:

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”site.css” />

Essentially this query says if the media type is a screen and the horizontal width is equal to or less than 480px, then render the stylesheet. These queries can be inserted in the stylesheet link or in the CSS file itself – no matter which technique is used the result is the same. Most major browsers support media queries yet Internet Explorer 8 and older versions do not offer native support. Thankfully our ‘helper’ libraries come to the rescue: Respond.js and CSS3 Media Queries are two such examples.

ResponsiveDesign

Our reference example for responsive design in the UK estate agency market here is Foxtons. See the screenshots above (click to enlarge) for an example of how one of their list results pages would scale down depending on the device width.

Responsive Design has the advantage of being a ‘one size fits all’ solution, and whilst it may do for some companies, many will be put off by the daunting task that is reverse engineering their website to be responsive using media queries. In addition, many companies don’t want to just go responsive – they want to enhance the user experience along the way. Step in Adaptive Design…

(2) Adaptive Design

Adaptive Design builds on the principles of Responsive Design but doesn’t rely exclusively on media queries to slice ‘n dice the content. Instead, Adaptive Design will detect the user agent and serve up the best version of the site for that device. By targeting devices, developers can go above and beyond simply hiding or repositioning elements on a page – they can deliver device-optimised content e.g. a touch swipe carousel for tablet users or a simplified branch finder for mobiles.

There are other advantages too – not least being developers do not have to reverse engineer their entire website from the ground up to be responsive. In addition, the adaptive approach may help load times as only the images and code required for the user’s specific device are sent over the wire.

In Summary…

The proliferation of devices, particularly mobile, has forced companies to re-imagine their websites and invest heavily in making sure their site will render well no matter what the device or how much bandwidth is available.

We’ve not even mentioned the customer yet in this post so it’s worth mentioning that all of the design approaches and techniques must be focused on offering a great user experience. For businesses it’s about retaining the visitor, converting them to a lead or sale and most important – to win their loyalty.

Our Approach:

At Homeflow we believe there are pros and cons to both responsive and adaptive design routes. Having one homogenous, responsive site is obviously attractive and may help SEO by keeping everything on under one domain (no ‘m dot’ or ‘mobile dot’ subdomain).  So, there’s a strong argument that this is the best approach.  However, on the other hand, adaptive design can be the best tool for the mobile environment, as load times can be significantly reduced by sending only the code and images required for the device. This is important when you consider the limited bandwidth that is available to mobile web customers.

Whatever the solution, we can help agents build a beautifully designed, responsive and mobile-friendly website, or a desktop site with a deeply functional adaptive mobile site companion – both of which will give your customers a great experience. It really is a case of “take your pick”.

We’ve taken a technical approach to the topic here (you are in the tech section of our site after all!), however, our customer service team can explain it in layman’s terms.  So, if you want to talk about the pros and cons, in more detail, and in relation to your own specific situation, then please do get in touch.

Further Reading

Ethan Marcotte – ‘Responsive Web Design

Web Monkey – ‘The Two Flavors of a ‘One Web’ Approach: Responsive vs. Adaptive

Harvard Business Review – ‘Should Your Website Be Using Adaptive Design?