Entity view (Content)

Redesigning your site: starting from a mobile perspective

By kritland
Apr. 24, 2013
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 pure Javascript on the device to do processing that may have otherwise been done through an AJAX call
  • 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!
After the page has loaded, the constraint of the mobile device’s screen size is another major thing to consider. Due to the smallness, most mobile sites go with a one-column page layout, with quick navigation links on top to jump around the page, or blocks that use Javascript transitions to hide and show different sections. With this lack of screen space on most mobile devices, a focus on functionality becomes paramount. Identify what the average user would do when visiting, and making it easy to accomplish ensures an enjoyable experience. Note that this applies to your desktop site as well! Finally, branching from mobile back to desktop presents the concept of responsive design, which is providing ideal viewing experience from mobile to desktop. Using the css @media rule 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.
Post Tags: