Kickstart your digital marketing plan
Benchmark your current performance and identify your best opportunities with
our free and easy-to-use template!
The Olympics were fantastic this year, the atmosphere was electric and the performances were first class (not to mention Danny Boyle's staggering opening ceremony).
The only problem that I had was that I kept on missing the first and last 5 metres of each race. You see, my television is very old, and can’t cope with content that has been created for the panoramic screen. If only my television was as responsive as an increasing number of websites...
Responsive Website Design (RWD) is a concept widely attributed to Ethan Marcotte, who takes inspiration from the experimental movement Responsive Architecture (see pioneering Nicholas Negroponte for further reading).
The aim of RWD is to create one website design that adapts to each environment that it is being viewed in. Whether being viewed from a traditional PC browser, or perhaps a new android tablet, and not forgetting the ubiquitous smart phone (which, as we know, will be more commonplace than webcats).
So how is this achieved?
Responsive Website Design is made up of three key ingredients:
The grid is one element that has been consistently used throughout all design disciplines, from typography through to furniture design; and the web is no different (please do not employ the skills of a website designer who has no knowledge of this!).
Typically in website design, the grid is created in pixels, with 960 pixels being the preferred choice by most designers. As, amongst other reasons, it is a framework that streamlines the design process, and keeps in mind the classic design rule of thirds.
The fluid grid has fundamentally turned the website layout on its axis.
Instead of using pixel based layouts, the fluid grid uses percentages. This means that all of the elements within the website design are relative to the size of screen. Clever.
See this working fluid grid example.
The objective of media queries for RWD is to look at the capability of the device that is being used to view the website.
Media queries can be used to check:
Once the media queries have been determined, then the device will load the appropriate style sheet that has been called.
See a more in-depth example of media queries in responsive website design.
The aim for flexible media (specifically images) is to enable them to load differently on different devices.
An initial solution has been to simply set the image size to 100% on all devices, and leave it at that. However it isn’t necessarily that straight forward.
For example, an image on a mobile phone needs to be a small enough file size, so that it doesn’t eat up all of your expensive bandwidth; whilst it might also need to refine its message due to having a smaller screen size than a PC.
Adaptive Images, by Matt Wilcox, appears to be a more sophisticated solution. His approach is to ‘create, cache, and deliver device appropriate re-scaled versions of your web page’s embedded HTML images’. Thus saving you bandwidth issues.
The BIG question. Not necessarily. As with most developments on the web, there are many angles and arguments to be mindful of.
Here are my top 5 issues to consider:
There is more to consider than a pixel based website. Testing and refining the user experience on each device simple takes time.
As well as the additional time it takes to create a RWD, it is still at a relatively early stage of its lifespan, so not all website designers will be practicing these techniques (old-fashioned supply and demand applies here).
This can partly be because a RWD needs to work on the smallest screen size, which means that the design needs to be simpler. However, working within design constraints is part of the design process, so I would personally see this as an opportunity rather than a hindrance.
From an SEO perspective, having a single URL for both desktop and mobile content, is great for the user journey, and even better for search engine bots to index your content.
Read Google’s official statement with regards to Responsive Website Design.
Is there anything wrong with having to pinch and zoom in on your tablet or smart phone? Is that the extent of our first world dramas? An unresponsive website (if that’s now the correct term) looks great on smart phones, so what’s the big deal?
In my next post, I will be discussing the alternatives to Responsive Website Design - namely the pros and cons of a separate mobile optimised site, compared with mobile apps.
In the meantime, I will leave you with a mixture of both good and average examples of RWD, so please take a look through and let me know what you think.
By Expert commentator
This is a post we've invited from a digital marketing specialist who has agreed to share their expertise, opinions and case studies. Their details are given at the end of the article.
Start the discussion on our community and social networks
Recommended Blog Posts
You have holes in your funnel to fill – here is how you can fix them A lot of marketing attention these days is given to acquiring website traffic – organic, paid and social – and many companies and agencies …..
These are what some of the biggest websites looked like 20 years ago and you won’t believe it… Since the World Wide Web was invented in 1990 designers and web developers have been constantly working to improve its original clunky basic …..
Popular Blog Posts
Statistics on consumer mobile usage and adoption to inform your mobile marketing strategy mobile site design and app development “Mobile to overtake fixed Internet access by 2014” was the huge headline summarising the bold prediction from 2008 by Mary Meeker, an …..
Our compilation of the latest social media statistics of consumer adoption and usage Social networks are now so well established, that there is a core ‘top 5’ social networks that don’t change much from year-to-year. But, as we’ll see in …..
Amazon’s business strategy, revenue model and culture of metrics: a history I’ve used Amazon as a case study in my books for nearly 20 years now since I think all types of businesses can learn from their digital business strategy. From startups …..