How Important is Mobile?

There are 6.8 billion people on the planet, only 3.5 billion use a toothbrush, whilst 4 billion of them own a mobile phone, most of which are smartphones (Hubspot). The rise and rise of mobile devices over the more traditional desktop passed a couple of major milestones earlier this year.  For the first time, we saw the number of searches on Google initiated from tablets and mobile phones, exceed the number initiated from desktop devices. That in itself marks a significant change, but perhaps even more important is that the value of ecommerce transacted from mobile devices recently overtook that from desktop devices.
 
It is not just ecommerce websites that are affected by the increased use of smartphones and tablets. The rise of search and of ecommerce reflect a change that is taking place across the web. These two parameters; search engine use and ecommerce, are easily measured and provide useful indicators of an underlying trend.
 
It is tempting to look at website analytics in order to help decide what approach to take to this rise in the use of mobile. Don’t be fooled by the analytics however, since unless you already have a mobile friendly website, it is likely that the number of users wishing to visit your site will be under reported. It’s a chicken and egg situation - a site which is not user friendly will fail to attract mobile users and so the statistics will misrepresent the desire of mobile users to use the site.
 
The days when you can get away with redirecting users to a mobile version of a website are long gone. Mobile users need to have an experience which is as rich, if not more so, than that of the desktop. Besides, operating a separate mobile site in this way is a disaster from an SEO perspective. Mobile first design, where the functionality of the site is designed around the capabilities of the mobile device, rather than the desktop, has emerged as a way forward.
 
Having decided to adapt to this new world of mobile first at a strategic level, what are the implications and practicalities of designing for mobile devices?
 
Mobile devices operate with fixed browser dimensions. Generally, the browser on a mobile device fills the screen except for artefacts such as the title and status bars.  However, there are no universal standards and so screen sizes can vary from device to device. To add to this complication, most mobile devices can be rotated between portrait and landscape modes. This means that the site must render sensibly in different aspect ratios.
 
Mobile devices use touchscreens as their pointing device. Concepts such as dragging and dropping and right clicking, which are familiar to desktop users with a mouse, are simply not available on smartphones and tablets.
 
Most mobile devices do not have a physical keyboard and use soft keyboards instead. While these can be an advantage when dealing with some foreign languages, they are not suitable for inputting large volumes of text. Forms in general and text input in particular can be difficult to get right on a mobile friendly site.
 
Screen real estate is at a premium on mobile devices, particularly on smartphones in portrait mode. Avoid pages with too much text and images that are of too high a resolution. Being able to pinch and zoom can help with presentation of text, but it is surprising how many sites disable this feature. Text is still important for driving search engines but large volumes of text can be difficult to present.
 
The plethora of mobile devices, each with their own display characteristics and the speed with which new devices comes along has made it impractical to design a site around specific device types. As a result, the concept of designs which are responsive to the characteristics of the device has emerged. With a responsive design the basic idea is that the layout and physical appearance of the page is linked to just one or two parameters which are characteristic of the device. Normally this is the width of the viewing rectangle, usually the screen width. Some designs might also take into account the aspect ratio as a secondary parameter. With this, page layouts are produced around a set of so called breakpoints, so for example there might be a page layout for rendering the page on a device with a screen width up to 320 pixels, one for screen widths between this and 720 pixels and so on. In between these hard breakpoints, the various elements on the page are rendered in a way that is elastic or fluid, their size varies in such a way as to preserve the overall appearance of the page.
 
The rise of the mobile device is inexorable and so site operators need to shift the way they view their website(s) from a desktop centric to a mobile centric view. 
 
This article featured on www.digitalmarketingmagazine.co.uk