We love digital

Call 0845 485 1219

We love digital - Call and say hello - Mon - Fri, 9am - 5pm

Responsive Web Design 101

Ringo Moss

by Ringo Moss on 26th June 2013

Responsive SitePlease join us in welcoming Ringo Moss from Nerv to the Koozai blog today, who is taking a look at the pros and cons of responsive web design and when the best time is for a brand to make the switch. 

So it’s over to Ringo.

Mobile Mania

If you work in digital marketing, e-commerce or the web in general, you will have seen the widely publicised prediction that by 2014 mobile Internet should overtake desktop Internet usage.

With tablet sales expected to near 300 million this year and the majority of subscribers now on smartphones instead of feature phones we are likely to see mobile traffic sources in our analytics grow quickly.

Mobile device usage has already transformed the way consumers access online content and services. In Europe the UK has the highest mobile browsing usage of any other country, with an average of 32% of page views coming from mobile traffic.

This means we all have to shift our thinking towards mobile or we may find our customers going elsewhere. Being behind the curve on mobile isn’t really an option.

Too Many Screens

Before responsive web design came along you had two basic options for giving your consumers a better experience on mobile:

Individual mobile specific (m dot) sites for each device and screen size you wanted to support or individual mobile apps for each major platform and device.

These options were ok when there were fewer devices to build for, but some sites are experiencing traffic from up to 2,500 different individual devices a month.

The simple fact is that there are just too many devices to support by building a specialist site or app for each now.

Responsive Web Design

Responsive web design represents a single solution that makes a website work equally well no matter what device it is being viewed on.

A responsively designed web site uses a fluid design grid and flexible, resizing images to rearrange and scale the layout of text, navigation and media within the page, based on the resolution of the device it is being viewed on.

A good way to demonstrate this if you are viewing this blog on a desktop computer is to resize your browser window. The good people at Koozai have designed this site using responsive web design, and as you change the size of the browser window, the content of this article and the navigation around it will change to give you the best reading experience possible.

Koozai responsive

Some sites also use this in combination with ‘adaptive design’, which changes functionality, for example, allowing swipe and other gesture based navigation on touchscreen devices.

Using responsive web design benefits designers as well as users because you only have to build one site, with one set of templates to support any resolution screen. This means that it is a sustainable design methodology; it will continue to support new devices as they are brought onto the market, with no update to the site being required.

Ethan Marcotte, who was the author of Responsive Web Design sums it up perfectly:

“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.’”

Other Advantages Of Responsive Web Design

Responsive web design brings with it a host of other advantages too:

User Experience
Responsive web design provides the best experience to the user in terms of navigability and readability across devices.

Frictionless
Responsive web design maintains design continuity and avoids redirecting users to mobile versions of websites, which users can find frustrating and often disorientating.

SEO
Responsive web design is Google’s recommended configuration to ensure your website is optimised in the best way for mobiles and for search engine spiders.

Link Building
Responsive websites attract more links to key pages. These websites have only one URL for each page, so the amount of links attracted to those pages are significantly higher than if the same page was accessible via multiple links.

CMS Simplicity
Responsive websites use one single source for data, which means that managing a responsively designed website does not incur the management overhead of multiple CMS systems or data interpreters.

Sounds Too Good to be True?

Responsive web design is the best option available for mobile optimisation, but it does come with a few minor drawbacks, which it would be unfair not to point out:

Load Times
Load times for sites that use responsive web design can be a little longer than for a standard site because they often need to load multiple versions of graphics and broader styling documents. However, browser manufacturers are improving workarounds for this and there are techniques that can be employed.

Design Time
Design, planning and signoff timescales tend to take longer than non- responsive web projects as the site must be designed and tested across a number of screen dimensions.

Development Time
Overall development time also takes a little longer, not least because the development team will need to test the site across a greater number of devices and browsers than a non-responsive project.

Expense
As a rule of thumb, responsive web design adds around 30% to the cost of a non-responsive web design project. However, the return you will see from making sure your user’s experience is mobile optimised should more than pay this back.

The Right Time To “Go Responsive”

Moving to a responsive web design is something that any business or marketer who is serious about their online business should be contemplating. However, there are a few things to consider that can make the move easier, and the timing more effective:

Review Your Analytics
Are there enough people currently visiting your website from mobile devices to make a shift to responsive cost effective? If your site receives less than 20% of mobile traffic, then it may be that an investment in improving the existing desktop experience might generate a better return on investment. If this is the case, you should continue reviewing your web statistics regularly to allow you to forecast when a mobile optimised experience will be necessary.

Demonstrate a Need
Don’t look at the analytics alone, look to see what sort of behavior your mobile visitors are displaying. If the majority of your mobile visitors are actually just checking your postal address, then you could perhaps put a responsive contact page in place as an intermediate measure. Make sure that any responsive redesign you undergo takes account of the different tasks your users are undertaking on each device.

ROI and Use Cases
Once you have demonstrated a need, try to assign values and goals to the use cases that you find. How transactional or valuable to your brand are these use cases? By assigning some financial value to each of them it will help you work out the ROI of a Responsive web design for your site.

Budget
Responsive web design tends to carry with it a premium cost, so make sure that any budget holders are aware of this. Make sure you have used the work you have done on your analytics, use cases and ROI to help gain budget sign-off for the work.

Timing
The best time to “go responsive” is when you can do a complete re-design of your site. Redevelopment of existing site architectures is possible, but it is often more cost-effective to re-design from the ground up. This will make it a more complete process for the user experience planning, design and development teams, and ultimately will yield a far more effective result.

Mobile Makes Sense

Whatever the circumstances of your brand and whether you plan to concentrate on mobile tomorrow, or next year, going mobile make sense.

We no longer get to decide when, where or which platform or device our customers will use to engage with our brands – they do.

All signs are pointing to Mobile becoming the main digital touch point for your brand. So if you haven’t already, its time to start thinking mobile, and start thinking responsive.

The views expressed in this post are those of the author so may not represent those of the Koozai team.

Image Sources

Fully Responsive Web Design by BigStock

Ringo Moss

Ringo Moss

Ringo has been working in creative digital for the last ten years and is an advocate and advisor on Responsive Web Design in Digital Marketing and its application to a client list including Rolls Royce, Deloitte and the BBC. In 2012 Ringo was invited to sit at the ‘Responsive Summit’ alongside Microsoft and Twitter to discuss browser evolution and processes for moving RWD forward. The agency Ringo works for, Nerv, are experts in Responsive Web Design, a top 100 UK full service digital agency, who help their clients to gain competitive advantage in the digital economy.

3 Comments

  • Ian 26th June 2013

    Hi Ringo,

    Great name. Great post.

    I wish I read this before I signed up for Wix.

    -Ian

    Reply to this comment

  • Danny Howard 27th June 2013

    Hey Ringo,

    We are just in the middle of redesigning our website with responsive in mind. We sometimes get people asking us where certain things are on our website, though it’s clear on a Desktop.

    Also we want to make the website Retina Display for maximum design and with the user experience in mind.

    We are only looking at IOS in mind such as iPad, iPhone etc… but with so many devices it’s going to be a long process :)

    Cheers

    Danny

    Reply to this comment

  • Gennie 5th July 2013

    I think nowadays its need of every website owner to create responsive website, because of the popularity of smartphones. This article may help those who dont know much about responsive web design.

    Reply to this comment

Subscribe To The Koozai Blog