Blog

People on a mobile device are not ‘browsing’, but rather they are looking for a specific piece of information. 
Use the clearest and simplest language instead of a discursive style for site content.

Divide pages into usable but limited size portions.

If pages are too large they will take a long time to load. There are limitations on some mobile devices as to the largest page they can accommodate. Also, we don’t want our users taking a big hit on their (sometimes) limited data plans.

On the other hand, if a page is too short then the user may require multiple page requests to read the relevant information.

Scrolling

The layout of the page should be such that the user can use a simple repeated scroll. The majority of mobile sites scroll vertically, so elements should be “stacked” in this way. Some content requires a secondary scroll, such as maps or some images, but should be avoided wherever possible.

Navigation

Many sites are designed with significant navigational and other elements at the top of the page, such as Menu bars, Breadcrumb Trails, Search Functions, etc. While this is important for the full display of a site, on a mobile device with a small screen this can result in the navigation appearing instead of the actual content of the page when the page is first retrieved.

It is important for the user to gain an idea of the content on the page on the initial view. There should be a minimal amount of clutter preceding this. Avoid things that are not central to the user’s experience of the page. The user should not have to scroll significantly to find the primary content of the page.

Menu’s can be placed further down the page with a simple link at the top of the page to jump to the navigation.

Color

Because mobile devices are often used in conditions where screen brightness is an issue (ie: outdoors), avoid highlighting content in color. Do not use blue or purple text, as some mobile devices do not underline hyperlinks and it would be impossible to distinguish text from hyperlinks in this case.

Background Images

Unless absolute necessary, avoid the use of background images as this can cause contrast issues on some devices.

Measurements

Avoid fixed width elements. This allows the different browsers and devices to adapt content to the display. Widths should be set by percentages and not pixels, and layouts should be fluid. The exception to this is designing a site for a specific mobile device, such as an iPhone - where the maximum pixel resolution is 480 x 320px.

Content Types

Flash is not supported on mobild devices. Also avoid the use of JavaScript or AJAX as this is not well supported on most mobile devices either.