Designing appealing mobile web pages
Designing effective web pages for mobile is challenging because of the slow and often costly Internet connections and varying device screen sizes. There are also differences with the support for advanced technologies, such as Java or Flash. Despite the large variety of devices and feature sets, there are some guidelines for designing web pages optimized for mobile devices. In addition to this article, you may also find more information in the introductory article to mobile visual design (Design and User Experience Library: A guide for newcomers).
Mobile optimized web pages
To ensure a good website user experience for the mobile Internet users, there should be a mobile optimized website available. The mobile optimized web pages should contain only the type of content that can be viewed with the user’s device (e.g. Flash or Java). Is there anything more irritating than trying to access a page that you cannot view after all? If essential content is presented with for example Flash, a version for the devices not supporting the used technology should be available.
The page content can be encoded so that for example logos, banners and graphics in the headers are scaled to fit the screen size. Sometimes it’s not possible to include all the content from a full website to a mobile website. In that case, the functionality and the content must be simplified or some content should be left out. It is however recommended that a link to the full content is always also available.
For example for devices with small screens, the graphics can be scaled down or left out completely to free space for the actual content. To make optimizing the websites for mobile easier Nokia Developer has provided a set of templates, which enable web developers to easily adapt their website for mobile using these easily customizable components. Take a closer look at the Nokia Mobile Web Templates and browse through the introductory article to see if those templates could benefit your project of making a website optimized for mobile.
In some cases, the full web page (i.e. designed to be used with PC web browser) is served to the user by default, even though the user is entering the website via mobile client. If a mobile website is available it might be behind a link, ideally in a location so the mobile user need not scroll unnecessarily. From the user’s point of view, the experience is more pleasant, if the client is automatically recognized and the most suitable web page is offered for downloading. In that way, the user isn’t forced to download the extra data of the full web page.
It should be taken into account that screen sizes and resolutions of the devices vary. To make sure that the content looks unbroken and fits the screen well, the pages should be made scalable. (For more information about screen sizes, see Design and User Experience library: Screen size).
There are plenty of different screen sizes in the market, for example Nokia phone resolutions starting from 176 x 144 pixels up to 800 x 480. It should be noticed though that when designing mobile web pages, the screen width is more important than the height since the screen can always be scrolled up/down. To keep the navigating and scrolling easier, it is advisable to use horizontally scalable screen elements and to avoid horizontal scrolling.
In some of the new devices in the market, the screen is automatically rotated from portrait to landscape and vice versa. In landscape mode there is less vertical space in use, but the space left in the sides can be utilized by re-organizing the view for example into columns.
Maximum page weight is 20 kB
The page weight in the websites meant to be used via PC web browser is not a as big issue today than it was still a couple of years ago, because of the growing popularity of broadband and flat-rate data connections. The situation in the mobile devices is however more complicated; even though many devices have a support for WLAN and 3G, the connections are often relatively slow. If the user doesn’t have a flat-rated data connection, the usage is charged by the amount of data traffic. That’s one of the reasons, why it is important to keep the mobile optimized web pages light-weighted. According to the W3C recommendation, the maximum total page weight is 20 kilobytes (Refer to W3C Recommendation for Mobile Web Best Practices).
In a web page users should always be informed of where they currently are in the page structure in order to avoid them from getting lost in the navigation. There are several ways to make the website structure visible to the user, for example using tabs or linked paths.
The pages should be kept relatively short. In many cases pagination (dividing content to several pages) is more recommended than making users endlessly scroll down. It is also useful to allow users to navigate the website from the bottom of the page or to allow an access to the beginning of the page. That way the user won’t have to scroll the page back up to enter the next page. If there is a certain order with the pages in the website, using links to get forward (next) or backward (previous) might be a good idea.
Minimize effort in user input
The URIs and page names should be kept as short as possible, because the space for showing them in the web browser and e.g. in the bookmarks list is limited. It is also a fact, that typing the URI to the web browser is often more difficult than with PC. Automatic filling of the fields should be used where it’s possible. Also the principle of “rather select than type” should be followed all over the website. For example let user select a country from a list rather than make him to type the country and then check, if the value is valid and in worst case make him re-type the country.
There are plenty of guidelines for web design and advices for achieving a visually attractive layout. Here are still a couple of short advices and examples to present some tips for achieving a visually nice layout.
- Less is more! Don’t put everything into one page. Utilize the magic of empty space.
- Scalability and alignment. Scale and align screen elements so that it looks good in all screen sizes.
- Use images to make it interesting! The page with no graphics can sometimes give an impression of a rather poor design. Images can be used for giving extra information and for making the content more interesting and also visually better looking. But remember, that images are there only for extra information; the actual content should always be available in textual form in case the user doesn’t want to download images. Keep also in mind that images will grow the web page weight, so the size and the amount of images in one page has to be considered carefully.
- Add a little WOW! In the devices with support for Java (e.g. jQuery), it is possible to use different transitions e.g. a slide transition for changing from page to another.
- Indicate progress. A progress animation on the page indicates to the user, that something is happening on the page
All devices don’t have support for the advanced technologies
Newer devices have support for advanced technologies, such as Flash or Java. These technologies can be utilized when designing more interactive and visually attractive websites.
It should be taken into account when designing mobile optimized web pages, that all devices don’t have the support for the advanced technologies. It should be noticed also, that the user might have for example disabled Java from the settings. That’s why the relevant content should be available for also devices not supporting the advanced technologies.
Quick guide / Summary
- Detect the device!. In order to automatically serve optimized content. However, always provide also link to the full version.
- Keep pages small!, 20kB is maximum page weight.
- Keep pages short!, to prevent extensive scrolling. Divide into pages and provide visible, intuitive and easy to use navigation instead.
- Less is more! Don’t stuff the pages. Utilize the magic of empty space.
- Design to scale! Scale and align screen elements so that it looks (automatically) good in all screen sizes.
- Minimize effort in user input! Keep names short. Utilize automatic filling of the fields and select options where possible.
- Use images to make it interesting (and for extra information)! But keep in mind that images increase the page size and some people may choose not to download images, in which case the page should still function properly.
- Add a little WOW!
- Indicate progress!
- Nokia Mobile Web Templates
- Mobilising your Web Service
- Detecting Mobile Devices on Web Services
- Simple Web Runtime Design Patterns Using jQuery
- Mobile Web Design Pattern: Grid
- Mobile Web Design Pattern: Horizontal List
- Mobile Web Design Pattern: Vertical List
- Mobile Web Design Pattern: Tabbed List
- Mobile Web Design Pattern: Expanding List