2013 Responsive Design really exploded. It seems to have past the test of time and is here to say. Yes, it causes web developers a little more of a headache than a non-responsive site; however, the advantages it brings are well worth reaping. With the ever increasing number of mobile devices it is hard to ignore responsive design.
As boldly stated in this post’s title Responsive Design may not produce a mobile optimised site. In fact, quite often it doesn’t. Yes, responsive sites can look good and work on a variety of devices, but, looking good and being responsive is only half the story when claiming a site is mobile optimised. Going further to justifying this Blog’s title let us look at some of the best practises and benchmarking services that quantify this claim.
Mobile First Design
One of the first recommendation is to design for mobile first. This forces you to think about the user’s experience on the smallest devices whereas traditionally sites are designed for the desktop and certain parts are simply hidden or squashed down to fit the mobile devices.
It is a pet hate of mine when buttons or links are too small to click. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site.
Response with Appropriate Content
Another recommendation is to never scale down content because it fits the smaller devices. Sliders look grand on a full desktop or a high-end tablet; but, simply look squashed (and as a result are not legible) on smaller device. Take the following example which was taken from a popular site who sell themes:
The responsive theme above includes a rather eye catching image carousel. On the desktop the image rotates with a swish animation. Each image includes some prominent message to promote the site: in this case the message attempts to encourage visitors to buy! On the mobile the carousel is still present. The image from the desktop has been scaled down – I guess the image width is set to 100%. More concerning the text containing the message is that small it is unreadable. This instantly renders the impact of the beautiful carouse obsolete. I am not saying there is no place for carousels on smaller devices, but, if you are going to include one then use appropriate size images and adjust font sizes accordingly – respond appropriately.
The main reason for choosing responsive is to delivery the same site to multiple devices. In theory the end product should be optimised for each devices. This is a fair assumption to make when purchasing a template, or, parting with your hard earn cash and choosing a web agency to produce your site. However, going responsive alone does not deliver on this assumption. Part of the problem is performance is not easily measurable. When a site is delivered we generally feedback our praise and/or criticism on the visual aspects and usability. Performance is secondary and more subtle to gauge. Granted a slow site is easy to spot. But, in a world were milliseconds count the more effort the development team put into performance the better!
So, how do we measure performance. Thankfully there are several free on-line services that will do this for us. This includes Google’s Page Speed tool, Pingdom’s Website speed test and GTmetix’s Website Speed page. To re-enforce my previous statement about paid for responsive templates: a fair portion are not best optimized.
Here is the result for the theme above:
This is not uncommon, what seems like a cracking theme is let down by performance.
Responsive design is a huge step forward and a quick win. With little effort your site can reach the mobile world. But, if your going responsive ensure your developer/development team/web agency also optimise – and prove it. As a picture says a thousand words you should ensure you site hits the responsive sweet-spot which means combining Design, Ux, Performance and Content.