Designing for Varying Display Sizes

Mobile PCs include a wide range of display configurations. People may use your application on a variety of displays, from small built-in displays on an Ultra-Mobile PC (UMPC), to large external displays plugged into a docking station. The screen size can change when users plug or unplug displays, switch between portrait and landscape mode, or change display settings.

There are three minimum display configurations that you should design for:

• 800x600 pixels, 96 DPI, landscape mode
• 1024x768 pixels, 120 DPI, landscape mode
• 768x1024 pixels, 96 DPI, portrait mode

The following illustrations show the space that the taskbar and Windows Sidebar occupy in different display configurations.

 

 

Supporting task scenarios for small displays

Consider the tasks that your users are most likely to do while they're away from their desks, when they're using the built-in display on their mobile PCs. Are these tasks easy to accomplish when your application is confined to a small display? Can the mobile PC user easily access the menus, buttons, and other user interface elements that support these tasks? Even when away from a larger display, your users may need to perform functions that they would normally do at their desktop on a large display.

Design your application so that it is functional on all of the minimum display configurations:

• Make sure that dialog boxes and forms fit on the display, or have scrolling or paging controls.
• Check toolbars and palettes to make sure that they remain visible. Be sure to check status indicators or buttons that appear on the bottom or right side of the display.
• Provide the ability to zoom in on content so users can adjust the size of the content to fit the display.

For more information, see Designing for Direct Manipulation.

Supporting task scenarios in portrait mode

Tablet PCs are required to support portrait mode, in which the screen rotates vertically. Some Tablet PCs include hardware buttons that rotate the screen orientation. Other Tablet PCs can detect their orientation of the computer and switch automatically when you hold them vertically. Users often work in portrait mode when doing the following activities:

• Taking notes
• Drawing
• Reading and annotating

The following screen shots show how the Ribbon changes as the window narrows in Microsoft Office Word 2007.

 

 

Consider the following guidelines for supporting portrait mode:

• If you enable your users to customize the user interface, save two sets of customizations: one for landscape mode and one for portrait mode.
• If your application saves the size and location of the application when it closes, consider saving that information in two variables, one for the last instance of portrait and one for the last instance of landscape orientation.
• Given the reduced width and increased height of portrait mode, rework user interface elements that occupy valuable screen real estate on the sides of the display. Can these elements be hidden, reduced in size, or moved to the top or bottom of the frame where there's more room? For example, you might change a columnar display of values into a series of rows with side labels.
• Use a two-row display, a vertical toolbar, context menus, or radial menus instead of a horizontal toolbar.
• Finally, test your application in both portrait and landscape modes to make sure that user interface elements are accessible in both screen orientations.

 

 

Send comments about this topic to Microsoft

Build date: 2/8/2011