What is Responsive Design and Why Should I Care?
Last week I published a short video (see end of post) in which I tried to explain what 'responsive design' is, and why website owners should care about it. Now that the website I used in the video is live, I thought I'd share it in a blog post, with some images from my phone and tablet, so you can really get a grasp of this technique, and understand how it would benefit your website, if it's not already responsive.
In a Nutshell
In a nutshell, responsive design is a technique whereby the website designer specifies different sets of styling rules for a website which are used when the website detects (via the browser) that is is being viewed on a screen of a certain size.
The designer dictates that the different rules come into effect at certain 'break points' - literally, the point at which the website layout breaks.
An Example
I've just re-designed the website for the Boulmer Guesthouse here in Whitby. They wanted something really simple, which highlighted their online booking function, and provide an excellent experience for visitors on all kinds of devices (laptops, desktops, mobiles and tablets).
Desktop Experience
This website is a relatively simple 2 column layout. On a large screen (a screen with a high resolution is actually more accurate) it looks like this:
As the screen size reduces, the margins reduce until the website fills the width of the page.
Tablet Experience
On my tablet (a Google Nexus 7) the website fills the width of the screen. In landscape mode it looks like this:
You can see the margins have completely disappeared but the 2 column layout remains.
If I rotate my tablet to landscape (which I actually find I'm doing more and more often, as it fits in my hand better that way round), I get this layout:
You can see in this orientation the website has now changed quite dramatically. Here are the things which have changed:
- The sub heading has been removed from the header to reduce the amount of content before the page content begins. This is quite important for ensuring your visitor gets to the information they want as quickly as possible.
- The headline text size has reduced. This is so that it remains on 1 line, for the same reason as the above point.
- The navigation has split into two columns. I did this so that the link text size can remain large (good for tapping with chubby fingers).
- The main page content has changed its layout to a single column. This is so that the paragraph width remains a good reading length. The right hand column has simply dropped down beneath the first column.
On a Phone
On my phone the website looks like this:
It is mostly just a narrower version of the portrait tablet layout, although the header text has been reduced further to keep it on one line, and the navigation is now a single vertical column of links.
Why is this important?
Firstly, there was a time when you could expect 99% of your website's visitors to be using the same screen resolution. This is why a lot of websites are a fixed width (usually around 960px wide).
However, in this age of tablets, laptops and phones, all of different screen sizes and resolutions, we cannot know what screen resolution are visitors are using - there is simply too much variation.
Responsive design gives us the ability to change the layout of a website to be suit the size of screen it is being viewed on which ultimately provides a better experience for the visitor and hopefully a better chance that they're going to buy whatever you're selling.
Secondly, Google 'recommends responsive design'. Google wants to serve the best content to its users. As such, if your site is not responsive but Google offers it as a result to a user on a mobile device, chances are they're going to be annoyed at your site, and annoyed at Google for suggesting it. I haven't read this anywhere, but you can bet that if Google is recommending something publically, there's something in their search algorythms which favours responsive sites. So, responsive design is good for SEO.
'Oh no, my site's not responsive - can it be changed?'
The short answer is yes. Most sites can be adapted to provide a responsive layout without needing an entire re-design. However, it's best to consider how a site will change when it is viewed on smaller screens before it is built - so it may be that your site will need a bit more than a few extra styling rules to make it truly responsive. If you'd like a more detailed appraisal, please call me on 01947 878108 and let me know your website address so I can take a look.
The Video
If you can bare to listen to my monotone voice, please watch the short video below.
Comments? Questions?
Use the comments box below to discuss. And don't forget, if you've found this at all interesting or useful, please share with your friends on your preferred social media platform, using the links to the right. Thanks!
And if you're still confused - this might help (it's fun, promise!)