Archive for February, 2012

First thoughts on optimising a site for the mobile web

Having recently been involved in building an e-commerce website aimed at a mobile audience I thought it would be worthwhile posting a couple of lessons learned from the result.

1.Smaller is better
It really is hard to underestimate the difference it makes to the site, when initially launched although we had used minified javascripts and CSS the pages were not as quick to load as expected. Adding additional compression to the images and enabling gzip output compression (we were using a standard LAMP, Linux, Apache, MySQL, PHP stack so this was trivial to do with mod_gzip) made the pages much snappier and our initial fears about placing an extra load on slow mobile CPUs proved unfounded as well as saving our visitors bandwidth allowances.

2. Don’t get Cached out
When we first launched we experienced a weird phenomenon with images looking distorted on some phones but not others, after much research we discovered that this was not down to the phones but instead the mobile networks and not something we had spotted when testing primarily on Wi-Fi enabled phones. Many of the UK mobile networks perform on-the-fly compression of all images which can result in some nasty compression artefacts. Adding

Header set Cache-Control "no-transform"

to the apache .htaccess (or virtualhost) disables this network compression – you do need to ensure that you are compressing the images as much as possible first  – remember, smaller is better.

3. Touch, don’t hover
This is probably an obvious one in hindsight – touch devices make navigation systems with a hover state (or drop-down menu’s) very awkward for the user as many phones don’t offer a hover state. Does make it more challenging when trying to use the best of responsive design principles to enable a site for mobile and desktop viewers however.

4. Pan & Zoom
Mobile devices allow the ability to zoom into an area of content or indeed to zoom out to view a whole page, it is quite possible to build a site which tries to take advantage of media queries or similar to force your visitor to see what you want but in your efforts to show them this are you preventing them seeing what they actually want – basically don’t try to get too clever with your rescaling or you might actually hide the very item they are looking for. When a mobile device zooms in and out the screen size it reports to the JavaScript/CSS engines changes so you can get a mobile device with an apparent screen resolution of well over 1,000 pixels in width yet only poses a 3″ screen and 30 seconds later that same device could report a 200 px wide display – test, test and test again.

5. Getting to Scripts with your tech
There are a number of mobile frameworks such as Sencha Touch or jQuery Mobile, each of these has positive and negative sides and I’m not going to try and compare them here but do some research before you start, they are all rapidly updating and have very structured ways to work which can bite the unwary in unexpected ways – try adding Google Analytics to a jQuery Mobile site by simply pasting the code into the header of your HTML for example can result in very odd behavior due to the way in which the page is built using AJAX.

6. Want some ‘m’ with that?
Many sites have traditionally used m.<domain name> for the mobile content with the main, desktop, site remaining on www.<domain name>, this used to be an excellent way to customise content to the audience however more and more I believe it is misguided and the addition of the ‘request desktop version’ menu item on Android devices which are unable (without some clever server-side detection) to switch from m. to www. confirms this belief, there is also an ever closing gap between the resolutions of phones, tablets and desktop computers and deciding which type of display is most suited to which becomes ever harder – it is possible to detect the display and handle the output via JavaScript or CSS (with media queries) whereas server side code has no native ability to know the screen resolution of the visiting browser.

7. Where am I?
With the advent of mobile geo-IP technology it is quite easy to be drawn into telling users exactly where they are and for some audiences this is highly valuable (e.g. if you’re in a store locator) but many visitors are looking at your site with far more interest in what you can offer online than having any desire to come into your physical shop – respect this and don’t try to force them into giving away their location and/or tell them where they are, it can be really offputting and actually lose you business.

Building an e-commerce site for a mobile audience has been an interesting and fulfilling experience which I intend to work on further, I hope if you’re reading this you will enjoy it also and perhaps learn from some of my mistakes rather than finding them out yourself. If you think there is anything important which I’ve omitted please feel free to add a comment below.

No Comments