Digital Transformation - Shaping Your Digital Future
We can help you on your journey to successFind out More
Save 50% on Annual
Membership in August
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
Which of these design elements are you using to enhance your web experience and conversion? If you’re launching a new site or refreshing an existing site it’s important to ensure your site looks contemporary and appealing. Since website design styles …..
Optimize your customer experience on mobile to avoid being left behind Not long back, the secret of business success on the Internet seemed to be all about product and service quality. Whereas quality is an enabler of success, it’s not …..
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 …..
Landing page examples and best practice advice Discussion of web design in companies who don’t know the power of landing pages still often focuses on the home page. But savvy companies know that custom landing pages are essential to maximise conversion …..
Use the RACE Planning System to get ahead in your digital marketing The first edition of my book Internet Marketing: Strategy, Planning and Implementation from 2001 included a popular template for creating what we then called an Internet Marketing Plan. Today, …..