Mobile interfaces – the main considerations

Aspects of good mobile solutions

Good mobile solutions of today are preferably developed for optimal user experience on user’s target devices.

Before we do anything with our mobile solution we should be able to server-side detect the mobile device in use and redirect the user to relevant mobile solution for that device.

Mobile solutions are much different from desktop solutions, so providing the same web site on mobile as on desktop will usually result in deteriorated user experience for mobile users.

This is one of the reasons why most big web sites now provide mobile specific solutions for mobile users (e.g. FaceBook, Google, BBC, etc.).

Small page weight

Mobile connections are still relatively slow and it takes a fairly long time to load up even a relatively small web page weighing in at 26KB on a typical mobile connection.

This is one of the main reasons why I would discourage use of JQuery and heavy CSS web pages on mobile platforms.

Aiming to achieve as small a page weight as possible on a mobile interface is a must.

It  enables mobile users to download pages within 1-4 seconds, rather than half a minute, which is usually the case when loading desktop web sites on a typical BlackBerry today for example.

One column layout

Mobile interfaces are small and best suited for a one column layout, which can fit nicely across most mobile devices.

It’s worth considering how the one column layout will stretch across a mobile interface so experimenting with percentage based widths might be a good idea.

However, there is an issue around how compatible this may be across different mobile devices with varied CSS support.

Simple navigation

Within one column layout there is little or no room for navigation, so keep the number of navigation links well below 7 and make them available on top and bottom of all your mobile pages.

This is done to increase usability and offer quick access points to various pages from any page within the mobile application.

Screen and font sizes

Due to having much smaller screens, mobile devices are more difficult to read from.

This means that it’s a good idea to increase the default font size for increased readability.

I have found it to be the case that font size of 18 pixels is not too large for my BlackBerry device and makes text on screen much easier to read.

Font size is also important in context of selecting links as having  larger area for clicking onto improves usability significantly.

Form layouts

The main observation regarding forms on mobile devices is that the label for the given field is probably better off being placed above the form field, rather than to the left of it (which is traditional for desktop applications).

This approach allows creation of reasonably large enough form input and text area fields for viewing the input while keying it in.

The downside is that for even slightly longer forms, the user will have to scroll down to the submit button on the given form page.

JavaScript support (iPhone vs. BlackBerry)

This is arguably the most interesting aspect of mobile application development at the moment.

JavaScript support on BlackBerry devices for example is erratic, even when using JQuery.

If we take iPhone and BlackBerry Bold as examples of advanced mobile devices, their interaction methods are rather different.

iPhone is a touch based devices which supports dragging and dropping, while on a ‘nipple’ based BlackBerry this is impossible.

This means that many JavaScript interactions will need to possibly be thought about in at least two different ways or not implemented at all.

The easiest development approach is probably to implement a solid solution based on Web 1.0 approach to web development (i.e. no JavaScript or minimal JavaScript use).

Native apps vs. internet solution

Modern mobile devices also support the concept of on-board applications which are native to the device and require to be developed using a specific SDK for that device.

Apart from learning overhead, native applications also need to go through approval process to be made available to end users on the mass market.

This process is usually slow and rigorous, which does not fit the work flow of modern, agile development.

Native applications offer better interaction integration, which is the main point I can see as an advantage.

Developing solutions which are internet based means mobile software developers can roll out updates many times per day seamlessly, still support majority of the functionality and reach the market much quicker than through some form of an app store.

Layout (CSS and HTML)

It is the case that BlackBerry Bold web browser supports web standards to much lesser extent than iPhone browser for example.

This means that often a time even the most common visual user interface development techniques fail miserably on BlackBerry.

As an example, CSS sprites do not work at all on BlackBerry as the background images all show at ones in every example I have seen so far.

This means that the use of CSS and HTML for mobile device development needs to be kept very simple.

Using only core CSS and HTML features will ensure that the solution works fine across many devices without major hacking for each device.

This approach, however, does sometimes feel like we are developing for Internet Explorer 5 on Windows 98 even in year 2010, but it reminds us that good coding practices are always a good idea.

References

Phil Archer’s talk at London Web Standards

Mobile Web Best Practices

Detecting Mobile Browsers with PHP

Written by Jason Grant, BSc, MSc on 5th February 2010

You can leave a response, or trackback from your own site.