Mobile Web design & HTML5: Setting the standard

Tablet computers and mobile devices are becoming ingrained in society. Image credit: Mike Licht,

As the tablet and mobile market continues to grow, fuelled by the hotly anticipated release of new versions such as the (new) iPad (3) and Android 4.0 (Ice Cream Sandwich), businesses are realising that the trend towards consumers buying online through an increasing number of devices (or m-commerce) is only going to grow with it. Recent studies have shown that conversion rates are much higher from mobile devices and tablets than on traditional platforms; a customer who visits a website or e-commerce application through such a device is already showing a certain level of increased engagement with the retailer. Customers using tablets spend more (up to 10 or 20 percent in some cases) than those using desktop computers, other studies have shown.

Retailers and other businesses dependent on their online systems for revenue must carefully consider these users, and make sure they are being properly catered for. A recent study published by Gomez, a division of Intechnica partner Compuware, showed that the top complaints of tablet users when viewing websites were slow load times, site crashes & errors, and problems with the format of the site. These bad experiences drive users away to competitor sites, and increase the risk of them never returning to your site.

The traditional building blocks for websites were simply not made to cope with screens than switch between portrait and landscape, relatively tiny or irregular screen resolutions, or touch screen actions. Performing tasks or even simple navigation of websites under these conditions can be a frustrating experience, where usability needs to be turned into an advantage. After all, shopping via mobile devices is often triggered by impulse, making for easy sales as long as the process is as simple as possible. In the past, shopping cart abandonment has been relatively high for these platforms, and part of this has to be down to the fact that many websites were not designed with these platforms in mind; nobody likes having to scroll across both axis and zooming in and out just to be able to touch the right button on a site. The solution lies in intelligently developing websites and applications to be compatible with these varying devices, platforms and screen sizes.

While old internet architecture was not built with such devices in mind, the latest set of standards, HTML5, is designed precisely for that reason. Rather than rebuilding a whole website, or building a separate site for each device (after all, each device will have different resolutions to contend with and a “mobile” version does not ensure compatibility on all devices), designers and developers can rewrite portions of a site in HMTL5, CSS3 and Javascript. While no browser currently supports every feature of the still developing HTML5 standard, it allows one single website to adapt across devices automatically via responsive design, making it much more “mobile friendly”. For example, sidebar content is automatically shifted to the bottom of the page, allowing the main article to span across the screen. This is a clever solution where “screen real estate” is reduced on smaller devices. HTML5 is also designed to be “touchscreen friendly”.

m-commerce is growing as more people take up the technology. Image credit: Per Olof Forsberg

HTML advancements aside, there are still many considerations to make when “mobifying” or “tabletising” a website or application. Even with a responsive design, where content shifts itself around to compensate for the screen resolution without compromising readability, in many cases there is simply not enough room on the screen to feasibly show everything. This is where careful consideration needs to be made on what is necessary to be shown on the site, and in some cases, where it would actually be more appropriate to shrink the content down and encourage zooming and scrolling. You could also try to think outside of the box; a wide table of data might need to be scrolled in portrait mode, but users could be able to view it more easily if flipped into landscape mode. It is even possible to show data in completely different ways depending on the size of the screen (see some clever examples here and here).

The considerations are different for each individual website or application, but as the new web standards develop, more and more opportunities to innovate are opening up. In the end, it’s all about ensuring quality and high performance for the end user, regardless of where they are or what they are using.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s