News:  Responsive Design: Mobile Sites (08/08/2012)

The ratios of the differing categories of devices accessing content over the Internet has changed significantly over recent years. The chief impacting form factor here is the smartphone, with Apple driving matters with the iPhone and Android taking over in market share terms more recently, and there are other players who will continue to attempt to challenge the current market dominance of the ‘big 2’ with perhaps the best bet being Microsoft, though they have failed to make any significant impact with Windows Phone 7.X, and this won’t change until the imminent v8 release.

If you have a website that is a few years old there is a significant chance that a user browsing your site via a mobile device is receiving an unacceptable experience. This situation is only going to get worse. The problem is potentially that your website will have been designed and implemented for a set of requirements which will not have included providing a good browsing experience for users of mobile devices. This is no sleight against those who produced your website – this simply wasn’t a requirement a couple of years ago. However, if your visitor profile matches national trends 20% of your sites visitors will be viewing your website via a mobile browser. I suggest you verify this against your google analytics or other form of website access statistics.

The chief issue here will be screen capital - your site will probably have been designed for a horizontal resolution of 800-1000 pixels as this is the resolution most people view your site at. Key in the absence of alternate requirements at the time of development would be that the site layout will not adapt well to lower resolution displays, e.g. smartphones. There are other issues involved but we’ll concentrate here on the screen capital issue.

There are technologies out there to assist. You can create apps to access your website content – this may be a good idea for certain types of content but, on average, is probably a bad idea (I’ll return to the subject of 'Apps' in a subsequent article). You could create a mobile specific version of your website, a common option a few years ago when mobile devices were less capable, but this is generally accepted in most cases to be an unnecessary overhead nowadays. Instead you, or your site developers at least, can use CSS3 (Cascading Style Sheets v3) media queries, in combination with CSS more generally as well as HTML5, to adapt the styling of your site to the different display sizes and resolutions.

For example via media queries you can, for different screen sizes:

• Change the sizes of fonts
• Change the sizes of images
• Change the layout of content to be more appropriate to the device, e.g. drop from 3 column layout to 1 column
• Render a menu differently, e.g. as a single drop down list allowing easy selection via a touchscreen

This last point raises a further consideration as well as the difference in available screen capital the very nature, including resolution, of the user-device interaction differs – compare using a mouse and 24 inch monitor with your finger on a 3 inch phone display!

If interested in upgrading your website to a responsive design that offers better access to mobile devices contact us. If you are wondering why we haven’t yet employed the above techniques for our website, you have a good point but we will get to it when client projects permit!

Chris Sully Back to News