Ringo Moss

Responsive Web Design 101

26th Jun 2013 Brand 6 minutes to read

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.

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

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.

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.

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.

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

Share this post


What do you think?

Gary Hainsworth

SEO and AI Generated Content

Gary Hainsworth
2nd Feb 2023
SEO Blog
Kelly-Anne Crean

Ecommerce SEO and Beyond – The Complete Guide

Kelly-Anne Crean

SEO Blog

Digital Ideas Monthly

Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?

Free Digital Marketing Audit

Are you a UK business that needs some expert help to uncover what’s holding your digital marketing back? Let us show you for free!


Call us on 0330 353 0300, email info@koozai.com or fill out our Contact Form.

Map of Hampshire Digital Marketing Agency
Hampshire Digital Marketing Agency
Merlin House 4 Meteor Way Lee-on-the-Solent, PO13 9FU, UK
Map of Lancashire Digital Marketing Agency
Lancashire Digital Marketing Agency
Cotton Court Business Centre Church Street, Preston Lancashire, PR1 3BY, UK
Map of London Digital Marketing Agency
London Digital Marketing Agency
Albert House 256 - 260 Old Street London, EC1V 9DD, UK

Unlike 08 numbers, 03 numbers cost the same to call as geographic landline numbers (starting 01 and 02), even from a mobile phone. They are also normally included in your inclusive call minutes. Please note we may record some calls.

Circle Cross