Creating web pages that are displayed in a usable manner on small screen devices is becoming increasingly important. With wireless abilities, increased memory and CPU speeds of small screen devices, users are no longer limited by location when accessing online information. This report identifies the key issues when designing for smaller screens as opposed to traditional desktops and introduces some design guidelines.
Mobile devices such as mobile phones, Personal Digital Assistants (PDA) enable users to access information and web based services from any location with relative ease. This means that users can access the internet using a desktop PC at home or at the office and use the same information on their PDA or mobile phone while commuting from/to home.
The mobile challenge
Most web pages are written for and tested exclusively on, desktop computers with large colour monitors. Despite technical and bandwidth enhancements, mobile devices are restricted by small screen sizes which limit the amount of information that can be displayed at one time. Some of the most important differences between application development for PCs/Web and for mobile devices include:
- As well as having smaller displays, mobile devices have a wide variety of display sizes.
- Current mobile devices with color displays support either 4,096 (12-bit) or 65,536 (16-bit) colors while some PCs are able to display over 16 million colors (32-bit).
- Text inputting is slower in mobile devices than it is with a full PC keyboard.
- Mobile devices usually have no mouse for activating an object, which limits the possible user interface components and slows down object activation.
- Some mobile devices and/or browser view modes support only vertical scrolling. Soft keys are used for activating commands in mobile devices; the number and purpose of soft keys vary between devices from different manufacturers.
- Connection establishment and data transfer between the terminal and the server is slower than in a fixed domain.
- The amount of data that can be stored in a mobile device is limited.
- The context of use cannot be predicted as easily as with, for example, an office PC application.
- Mobile users may have to pay for each piece of transferred data.
Original and linear views
When displaying content on mobile browsers, there are two main transformation methods for displaying content: direct migration and linear. For direct migration, there are no transformations made to the original web page. This means that direct migration shows the page in the format in which it was originally designed. For users who are familiar with the page, this means that they can anticipate where the information is located on a page. However, direct migration (example figure below– Edinburgh City Council’s website is problematic because reading long text rows can be laborious when the user needs to scroll back and forth horizontally. Also, if there are large areas with no content on the page, the user may get lost. The following screen shots have been taken from a PDA viewing the homepage of 3 different public sector websites using Internet Explorer for Pocket PC. The 3 public sector organisations shown here are: Edinburgh City Council (ECC), Glasgow City Council (GCC) and Highlands and Islands Enterprise (HIE), respectively.
For columnar (or linear) displayed pages, page areas are presented one after another in a single column. The layout of information from the website is changed to a long linear list that fits within the width constraints of the small device (GCC website). This format works best when the underlying document structure has been designed for it so that the user receives the most relevant content at the beginning of the screen directly after the heading of the page. Structuring the document according to this logic ensures that the page organisation makes sense.
Columns can be very long requiring extensive vertical scrolling. To minimise the amount of vertical scrolling, it is useful to implement ‘skip to’ links such as to main content or navigation areas of the page that would be displayed at the top of the screen (HIE website ). Websites such as the central government portal:UK Online employ XHTML, CSS2 (cascading style sheets) and CSS-P (cascading style sheet positioning) to position elements of the page. This means that content can be structured within the flow of the page separately from the display within the browser.
The main benefit to this approach is that horizontal scrolling is not required; however, there are some basic problems:
- The top of the page is often exactly the same on every page on a site. This means that users will not know if the page has changed at all because the first screen looks the same on a small screen.
- Images that are wider than the display are squeezed to fit in the screen. This is particularly problematic if there is text inside an image.
- Due to a change in the layout of content, it can be confusing and disorientating when revisiting web pages from the original large display on a small screen display.
Designing for small screen devices
The best way to guarantee that a mobile application provides the best user experience is to take the user into account in the design phase. Additionally, it is not enough to consider usability when developing the user interface – usability needs to be a factor in content development as well. Following basic guidelines, with a mobile-use context in mind is a good foundation for designing applications for browsers. Web-standards-compliant pages ensure that content can also be accessed on mobile browsers.
Consistency in alignment and layout of pages in a service is important because it increases learning – especially for users who return to use the service again. Aligning content to the left is recommended because it keeps the content readable. Also, keep descriptions as compact as possible.
Limit the number of different colours used on a page and maintain the same colour for the same page elements throughout the service. Not all mobile devices or browsers support colour. Colour will be converted to black by devices that only support black and white.
Avoid having too many text styles and text sizes on the same page. Implementing too many different text sizes and overuse use of text emphasis properties such as italics or underlining (use for links only) interferes with readability. Avoid using blinking text as this not only decreases readability but will make it harder for the user to focus on the surrounding content.
Create pages that are visually pleasing and be consistent in how content elements are separated from each other. Empty lines should be avoided between text sections as this will means more scrolling. Some users stop scrolling when they see an empty line, believing they have reached the bottom of the page.
This article looked at the main differences between viewing web pages on desktop computers and devices with small screens, such as mobile phones and PDAs. We also introduced some design guidelines and two methods that are currently used for transforming web pages between displays on desktop PC’s and small screen devices.
To conclude, the following small screen design tips can be applied:
- Design the small-screen version for maximum readability
- Be careful with the use of colours, font sizes, and alignment
- Design with document order in mind
- Only use images suited for a small screen, hide the rest
What Can you do next?
Read our blog post web pages and mobile phones
Read some more usability and accessibility articles.
Find out how usability testing can improve your mobile offering.
Attend one of our usability training courses and learn the tricks of the trade for yourself.
Want this article on your website?
If you liked this article, feel free to republish it on your own website. All that we ask is that you include the citation below, including links, at the end of the article.
This article was written by Chris Rourke. Chris is the Managing Director of User Vision, a usability and accessibility consultancy that helps clients gain a competitive advantage through improved ease of use.