Optimising websites for mobile devices such as tablets and smart phones is a must-do for today's marketers - but there is much more to consider than screen size...
Why optimise a website for mobile?
If you are reading this article, my guess is that you are already well versed in the necessity of optimising your online content for mobile devices (if you really need further convincing, check out this infographic by AF-Studio.pl and Super Monitoring).
But when it comes to mobile design, there is much more to consider than simply making sure your copy and images display in the right format on the variety of screen sizes that exist.
Optimising a website for mobile devices - approaches
There are three main methods used for delivering an optimised website for mobile devices such as smart phones and tablets. In each case, the website code detects the browser being used by the visitor before serving a layout that is optimised for the specific screen size being used:
- Mobile version – this is a separate website (URL) which the user is directed to, which is determined by the device they are using.
- Responsive design – serves the same HTML for one URL but uses CSS (design code) queries to decide how to display the content on the user’s device. This is Google’s recommended approach.
- Dynamic serving – delivers different HTML for one URL depending on the user’s device.
Mobile optimised vs responsive design - why it's not just screen size that matters
Responsive design will solve display issues for the end user, but it will not solve performance issues. Many websites deliver the same number of bytes regardless of screen size.
‘Conditional loading’ is one step you can take to help manage this issue – this is where the browser only parses the selectors and styles specific to the device being used. If conditional loading is not used, the browser will read all of the instructions for all other screen sizes before it starts to deliver the content in the correct format. Yes, we may only be talking about fractions of a second, but this matters to users on mobile devices – it can be the difference between them waiting for your site to load, and hitting the back button.
Is speed really an issue, with the increasing availability of 4G?
Connection speeds have a big impact on the user experience in terms of their ability to access large media files such as videos. This improvement in speed is related to bandwidth, which does not impact on the speed of downloading all the component files that are used to build and display a website – this is known as latency. Another way to think of this is the length of time it takes for a website click request to go from the users device, to the server, and back to the browser again (Round Trip Time / RTT)
“…for the majority of 3G phones and networks we could easily be looking at 5 - 10 seconds of delay to the page load time.” http://www.mobify.com/blog/web-performance-optimization."
Understanding latency, and the steps developers can take to decrease it, is important because it enables decisions to be made about how to improve the amount of data we try to serve to the end users based on the device being used.
Grouping devices by screen size
Simply delivering the same content at different resolutions may not be a workable solution. An example may be the inclusion of a diagram or mega-menu that simply would not be usable or accessible on smaller screen sizes. Grouping content by screen size, can help to overcome this – for example, for all screens over 8” show x content; for all screens below 8” show y content OR for screen over 8” display in portrait mode; for screens below 8” display in landscape mode.
Content above the fold
Think of your users as time poor, and make sure you deliver key messages above the fold - that is - before the user is likely to have to scroll on their 7" or 8" screen. For step by step guidance on how ensure your key messages are written into the opening sentences of your content, see my article on the inverted pyramid.
Next, visit the Google webmaster blog guidance on how to make your above the fold content load in under one second, whilst the rest of your webpage loads in the background.
Next, visit the Google webmaster blog guidance on how to make your above the fold content load in under one second, whilst the rest of your webpage loads in the background.
Pop-ups and overlays
Most sites have at least one pop-up or overlay, especially since the EU Cookie Directive made this a requirement. Compliance is good, and you should continue to be transparent about the data you collect from users, but pop-ups and screen overlays make for a frustrating end user experience. Make sure you test any pop-ups on a range of mobile devices, to ensure that they are easy to close down (for example, by using finger friendly sized buttons).