Guidelines for window sizes and scaling to screens(Windows Store apps)

Design apps that look good at any width, and you automatically get support for different screen sizes and orientations. Plan your app for resizing from full screen down to the minimum width so that the UI reflows gracefully for various screen sizes, window sizes, and orientations.

See these features in action as part of our App features, start to finish series:  Windows Store app UI, start to finish

• The user experience
• Support window resizing
• Automatic support for landscape and portrait orientations
• Use flexible controls
• Support different screen sizes
• Dos
• Don'ts
• Related topics

The user experience

Users can resize apps continuously down to a minimum width, and can display multiple apps side-by-side on the screen. The height of an app always fills the height of the screen.

If a user has multiple apps on the screen, there are some unique UI interactions:

• If a user invokes the charms, the charms apply to the last app that the user used, regardless of the size of the app or the position of the app on the screen.
• Between each app on the screen is a handle. Users resize app windows by sliding the handle. The handle also shows which app has focus.
• If a user grabs the handle between apps and tries to resize an app to a width that is less than the app's minimum width, the app leaves the screen.
• If a user rotates a device or monitor while multiple apps are on the screen, the apps do not switch orientation.

Support window resizing

The default minimum width of an app is 500 pixels. If your app works well at smaller sizes and you want to encourage users to keep your app on the screen, you can change the minimum width to 320 pixels. Apps must fill the height of the screen. The minimum height of an app is 768 pixels.

Design your app to be functional and well-designed at any size, down to the minimum. That means that the layout looks good, controls are functional and are well-placed or scaled down appropriately, and the user has the same great experience at any size.

Automatic support for landscape and portrait orientations

Users can rotate and flip their tablets, slates, and monitors. Windows handles both landscape and portrait orientations automatically. You only need to consider how the app's width and height affect its layout.

Use flexible controls

For maximum control over the UI and minimum development effort, you should use flexible controls, such as the XAML Grid control and CSS grid, wherever possible. Grids support flexible layouts intrinsically and can arrange and distribute their content automatically.

Grids help you account for variations in the dimensions of display devices:

• Grids can flex specific sections of your UI to fill available space depending on the screen resolution of the display device (such as 16:9 or 16:10).
• Grids can respond to dynamic changes in the windows size by assigning content to different cells based on the size.

Support different screen sizes

Windows Store apps run on a variety of screen sizes; from a small screen on a tablet, to a medium laptop screen all the way up to a large desktop or all-in-one screen. In general, larger screen sizes also have higher screen resolutions. The result is that on these larger screens there is more viewable area for your app to take advantage of.

The following terms are important for understanding scaling to different screen sizes.

The platform, controls, and templates have all been designed to accommodate different screen sizes. A lot of your app's layout will scale with little additional effort or code, some consideration needs to be made for your top-level layout, content regions, app navigation, and commands to ensure that they are placed predictably and intuitively on larger screens.

The following tables show the most important screen sizes to consider when designing your app.

Dos

Follow these guidelines when designing your app for different window sizes and devices:

• Use flexible controls to support content that reflows automatically.
• Design for different pixel densities. To learn more, see Guidelines for scaling to pixel density.
• Design your app layout and all controls to scale down to the minimum size. The UI and controls must be usable in any size window. Important controls to consider are:
  • App bars
  • Nav bars
  • Message dialogs
  • Flyouts
  • Settings panes
• Consider your design options for tall and narrow layouts.
• Develop your app to be fully functional down to the 500 pixel width.
• Make sure that users can continue their current tasks when they resize apps. For example, maintain the current page of the app, state of scroll bars, selection, and focus.
• Design your app to effectively use the space on a large screen and to have a layout that reflows automatically. Don't leave large empty spaces.
• Test that your app works well on the most important device sizes.
• Support charms from any size app. Make sure flyouts and panes are scaled appropriately.
• Specify a minimum size for all input fields. Minimum sizes ensure that the input fields don't disappear when the user resizes the window.
• Test that your app's input fields are not occluded by the soft keyboard.

Don'ts

Here are some things to avoid when designing your app for different window sizes and devices:

• Don't use absolute positioning because it constrains your UI from responding to changes in window size and orientation.

Related topics

Layout for windows that resize to 320 pixel width sample

Layout for windows that are taller than wide sample

Quickstart: Defining app layouts

Quickstart: Designing apps for different window sizes

Guidelines for scaling to pixel density

Choosing a layout

Touch interaction design

Guidelines for resizing windows to tall and narrow layouts

Build date: 6/20/2013