17 December 2014 11:00 am
Website Help
A new user context
More powerful smart phones and faster data have changed our user habits when browsing. Where once we’d use a standalone PC for browsing the net, now we use it everywhere.
This change in habit means we can no longer think about 'mobile' users as simply ‘users that are mobile’. They are just as likely using a smart phone or tablet while sitting on their sofa, reading in bed or standing in their kitchen. The user 'context' has changed.
Other aspects of their browsing have changed too. The Internet connection being used for a mobile phone could easily be broadband or 4G and the experience users expect is both richer and faster as a result.
Delivering a better experience
At first, web designers met this new expectation by building specific 'mobile' websites. These were standalone services, in addition to a regular ‘desktop’ website, which were presented to mobile devices. Page sizes were tuned to specific devices (iPhones, iPads, etc) and the content offered was reduced to just what the site designer or owner thought was absolutely necessary.
While this approach offered a short term fix, the constant updating of phone models / screen sizes meant mobile sites were soon as obsolete as the devices they were intended for.
Enter the ‘responsive’ website
Websites that re-spaced their layout to suit screen size have been around for a long time. Amazon and eBay are good examples that stretch their layout to 100% of the available screen width. However, new coding tools called ‘Media Queries’ (which allow the layout of page elements to change with screen size and according to a fluid grid) have led to more powerful and user-friendly websites becoming possible.
‘Responsive Web Design’ was a term first coined by Ethan Marcotte in his May 2010 article for ‘A List Apart’. His work showed that, using media queries, any aspect of page layout could be changed so that it is more readable, useable or faster to load depending on the screen size of the device in use.
User benefits
There are countless advantages to responsive design. Text can be larger on smaller screens to aid readability. Content that is too small to be viewed on a smartphone can be removed or replaced and navigation can be reduced so that page choices are only presented when needed. One common characteristic of a responsive design is the appearance of the three-line ‘hamburger’ button that triggers the display of the main menu. You’ll often find this top right of the screen when viewed on a mobile device.
Business benefits
As a site owner there are key benefits to responsive design too. Pages load faster, company branding can be better presented and users can be directed more quickly and smoothly through common tasks. For retailers a responsive site makes purchasing on a mobile a far easier task for customers, while manufacturers can direct users to their retailers more easily too. Magazines can present articles so they are easy to read on trains, buses and in other locations where mobile use is common and connection speed is variable.
Do I have a responsive website?
There are easy ways to tell if your own website is ‘responsive’. Firstly, look at your site on a laptop or desktop PC. Once your home page is loaded grab the right hand side of the browser window and move it left so that the viewing window shrinks. At some point, usually where the page is narrower than it is high, one of two things will happen.
Either:
- Elements on the screen will start to move around and ‘stack’ vertically. The main menu will disappear and will most likely be replaced with a three-line ‘hamburger’ icon at very small screen sizes.
Congratulations, you have a responsive website! You and your visitors are already enjoying a great website experience.
Or:
- The right hand side of the page will start to be obscured. When viewed on a mobile device the text is small and hard to read.
Oh dear! Your mobile users will be finding it hard to use your website. Maybe it’s time to think about a responsive site…
Do I need a responsive website?
Take a look at what your competitors are doing. If they already have a responsive site their users will be enjoying it and what it has to say. If their site isn’t responsive you now have a chance to deliver a better experience for your potential customers.
If you are still in doubt take a look at your Google Analytics under ‘Audience > Mobile > Overview’ and see how many customers are using mobile and tablet devices to view your site. A figure of 25% or more is normal at the time of writing.
First steps towards a responsive website
Give us a call! Most of our recent projects use responsive design. Our team fully understands the design skills needed - designing this way has become our standard way of working. We’re currently redesigning our own site to be responsive too.
