Mobile users are a rapidly growing part of web traffic today. Since the start of the decade, mobile traffic has increased over 100%, surpassing traditional desktop browsing in some countries (source). When redesigning your website, it is very unwise to ignore these users, who will be put off by attempting to view your non-mobile site on their devices. Why not start redesigning from the idea that is is not the desktop that is the to design for, but the mobile device? One of the major things to consider for mobile is the general responsiveness of the site. While the desktop user may have the option to switch to another tab or window while the page loads, the mobile user’s device may make this far more difficult, causing disengagement waiting for lagging pages. You should keep the user waiting for less than a second while experiencing your content, ideally less than half a second. On a 3G connection, that's less than 24 KB, assuming your server can generate the page instantly! To keep loading times down, here are some suggestions:
- Use HTML5 and CSS3 features to do more processing on the client side to keep server request time low
- Use less pages by loading more content per page – some sites (for example, those built on Sproutcore) go as far as to use exactly one "page" for the entire site
- Minimize the use of images and similar objects – CSS3 can offer many things only images could offer in the past, such as drop shadows, background gradients, rounded corners, text effects…
- Don’t load large images and other objects in the initial page load, and get them later after the user is able to see content
- Try to make your pages as cache-able as possible, to bypass loading or server processing completely
- If a long load is unavoidable, try an initial ‘Loading’ screen to keep the user entertained in the meantime
- If you are using Drupal, more optimization has been previously touched upon in this blog
- Get faster servers!
@mediarule to allow different layouts for different screen sizes is a major step, as well as using grid based layouts such as the scaffolding component of twitter’s Bootstrap, or The Grid from Foundation. Overall, when designing for mobile first the concept of 'progressive enchantment' (as opposed to very opposite 'graceful degradation') should always be kept in mind – create the minimum markup needed for the least capable device, and then overlay complexity as the capability of the device improves.