Guest Post: Improvements in mobile web access & what’s driving them

by Geoff Dennis – director with Insight Manufacturing & blogger on Swuse.com

Mobile devices come with a variety of screen sizes and resolutions, far more varied than those in use with desktop computers.To deliver web content at an acceptable resolution for reading on a mobile device, the standard approach for a long time was to determine what device type it is such as iPhone 3GS. Next, look up the properties of this device in a database, and deliver content in a form that would seem to be the best fit to those properties. With such a wide variety of devices to cater for, testing that the content is displayed properly is constrained to the most popular devices in use at any given time.

This approach has a number of consequences: -

• How content is displayed on many devices is never tested, due to the limited time and resources to do so
• The presentation of content on all devices other than the most popular is poor, since it will be driven by the lowest criteria that works across a set of similar devices for which formatting is not optimised
• When content undergoes major reformatting – such as in a major web site upgrade, re-testing content delivery is likely to also be focused only on the currently most popular devices, thereby missing device types on which delivery once worked well

Mobile-specific markup languages such as WML were supposed to help solve this problem. However, that meant that a completely separate version of the site had to be produced.

Also, the styling of sites was so basic (few, if any graphics, and smaller screen estate leading to lengthy pages to scroll through) that they never proved popular.

Even where the mobile version of a site was able to conduct a task rapidly, it was not an enjoyable experience.

Usability studies even as recently as 2009 described the mobile user experience as miserable – see Useit here.

With the advent of the iPhone and, more specifically, the 3G version, mobile internet browsing finally gained popularity.

Two major innovations helped the mobile browsing experience: -

Firstly, the use of the Apple Safari browser, in combination with the ‘pinching’ technique for zooming, meant that ordinary websites could be viewed on a mobile.

Secondly, apps were popularised, as downloadable programs to view web content optimally on the device.

Apps quickly became accepted, encouraging widespread development of what were, in effect, mobile versions of web sites.

The iPhone also led to a proliferation of portable devices, including the iPad and other tablet devices in multiple sizes, as well as the whole ‘smartphone’ genre.

Google’s Android OS came to dominate the non-iPhone mobile world.

This change gave rise to the need to cater for a number of platforms if you want your website to be accessible across mobile and portable devices.

Two further changes have since caused a re-evaluation of how content should be developed for mobile devices: -

Firstly, the proliferation of the use of portable devices rather than desktop computers to access the internet: -

Estimates vary but Gartner has just (October 2012) predicted that the number of people using portable devices to access the internet as their primary device will overtake the number using fixed internet computers by 2013.

This has led to developers advocating a ‘Mobile first’ design principle, where consideration of a mobile version of a web site is included at the outset of web site design, rather than the presentation of a cut-down version of fixed internet web sites.

Secondly, HTML5 support in the browsers of smartphones: -

HTML5, and its companion standard CSS3, can provide an optimal viewing experience across a wide range of devices.

Reading and navigation can be conducted with a minimum of resizing, panning, and scrolling.

This is made possible through the use of new programming features including, in particular, ‘Media queries’.

Using this feature, different formatting and layout can be presented according to, for example, screen size.

These two approaches are incorporated in a new design approach called Responsive Web Design, which will be described in my next article.

Author biog

Geoff Dennis is a director with Insight Manufacturing. Geoff is an IT project manager with a background in software development and methodologies in office and telecommunications software. For more How To’s see here.