As you’re probably aware, almost every person you meet whilst going about your day to day business carries with them a mobile phone, tablet, kindle or some other internet ready device. As a result of this you need to ensure that your site is readable on all of these various different screen resolutions and devices.
When we say readable we don’t mean that if you pinch and zoom your screen enough, you’ll eventually be able to read at least three words before having to scroll across the screen to read a few more! We mean that you need to come up with a way to allow your website to respond to whatever device is browsing it.
So if I view your site on a desktop I get a different experience to when I browse your site on my mobile. The best example of this really is the good old BBC site, view it on your desktop then view it on your mobile. It’s the same but different, you’ll notice the content is all aligned differently, most of the images tend to get stripped out and the text is bigger to account for the smaller screensize.
This is responsive web design.
There are a number of things to consider when embarking on making your website responsive.
You may have a very image heavy, hi-res images, on your site and whilst you’ll have already optimised them for the web (reduced their filesize…you will have, won’t you?!) they’ll still more than likely chew up the standard mobile browsers data package and they’ll not thank you the next time they see you, especially after you told them to go look at your site!!
In this instance we either remove some of the images whilst endeavouring to retain the main look and feel of the site, or create more mobile friendly (much smaller filesize) images which won’t destroy your visitors mobile data pacakges in one visit!
As an example of this view www.cantifix.co.uk on both desktop and mobile, the desktop site is quite image rich whilst the mobile version is a lot less so.
So the trick is striking that balance between look and feel and usage.
Like any design, the layout and user experience (how people interact with your site) is of utmost importance, after all if they can’t find your phone number on your site (for example) how are they going to phone you to order 1,000,000 of your finest widgets?!
So when designing responsively these elements are taken into consideration.
Unfortunately, as with most things that involve IT of any sort, it’s not a black and white process.
Not all websites are the same, and equally, not all responsive websites behave the same. At the most basic level a responsive website responds to the device screen it’s being viewed on to improve the readability of the site. However, there are so many more elements which can be interpreted differently on a site by site, client by client or indeed industry by industry basis.
For example, when you ask us for a responsive site are you expecting:
- Changing where the navigation is to allow for how people hold a mobile or tablet device.
- Reworking links and buttons to be more touch friendly (remember you can’t hover on a mobile!).
- Choice of fonts and then being able to dynamically resize them to work better at different screen resolutions.
- Optimising images for different devices and connection speeds.
- Making sure things like video resize (and work) properly rather than just removing them from the mobile version.
And on and on and on. The list is endless really, it’s where you draw the line at in terms of both cost and effort. For example if you’re a builder and 90% of people just want to get hold of you, you know who you are!, then making your phone number the most prominent element on the site no matter what device you view it on would be of primary importance.
In terms of cost expectations, to create a basic responsive site is relatively cheap, to create a good responsive site can be time consuming and therefore expensive. It’s down to striking a balance between requirements and budget.
As always we’re happy to help and if anything doesn’t make sense please let us know!