Designing for Portrait and Landscape Screen Display

  • Article

Designing for Portrait and Landscape Screen Display

Overview of designing for portrait and landscape screen display.

To exploit the broader reach of Tablet PC in pen and speech computing, design your application to take advantage of both portrait and landscape orientation.

Consider different usage scenarios when you design your application. Group together the tools that are used for a single activity. This ensures that users can easily employ annotation and browsing features or editing and design features at the same time. Make it easy for the user to change layout with something like saved views, maybe even auto-switching to a different view when screen orientation is changed. Remember, however, that consistency within your application is important, and a core set of functionality should be accessible in a similar way, regardless of window size.

Remember to review your user interface (UI), content, and Help content, and ensure that it has a good layout at 768x1024 pixels. This is the minimum resolution in portrait mode. Although you may not want to optimize for a layout this narrow, ensure that your help content is not broken and that users do not need to scroll right to see key links that are hidden.

Other recommendations for exploiting your screen layout for either orientation include the following:

  • For window panes, or any UI elements that take up a significant amount of horizontal space on the screen, support both horizontal and vertical docking of these elements in your overall user interface. Change the docking automatically when orientation changes, or provide the user with an easy way to change the docking through direct manipulation. The first of the following images, for example, shows a pane that is positioned along the left side when the screen is in landscape mode. The second image illustrates a layout of this pane that is optimized for portrait mode, in which the pane is positioned along the bottom.

    tpcsdkua_tpc_uxdg_ffpi_app-landscape.jpg

    tpcsdkua_tpc_uxdg_ffpi_app-portrait.jpg

  • Persist the user interface layout for each orientation independently, and restore it for the user when the screen orientation changes. Ensure that you do not have features that reduce the useful space to a bare minimum.

  • If you support different views or zoom levels of documents for your application, consider screen orientation when you design these. Provide views that work for either orientation, keeping the users viewing experience from degrading significantly in one orientation as compared to the other. As an example, if your application usually displays document pages that are a consistent portrait orientation, provide a full-screen, single-page view that is great for portrait mode. For the same application in landscape, consider a side-by-side, two-page layout. Alternatively, you can design a half-page view (to optimize for larger text) for landscape mode. Ensure that users can easily discover how to change views in your UI.

To react to orientation change, your application must respond to the Microsoft® Windows® message WM_DISPLAYCHANGE.

To detect the current orientation, make the following system calls:

  • Call EnumDisplaySettings().
  • Check dmFields for the DM_DISPLAYORIENTATION flag.
  • If the flag is set, test dmDisplayOrientation for DMDO_DEFAULT, DMDO_90, DMDO_180, DMDO_270.

For a display to be in portrait mode, your application must check that either DMDO_90 or DMDO_270 is set and that the width of the screen resolution is less than the height (such as 600x800 versus 800x600, which is landscape).