Guidelines for resizing to narrow layouts

Article
07/22/2015

Design your app's UI to adjust when a user resizes it to a tall or narrow view. The guidelines in this topic apply if you plan to:

Modify your app's minimum width to 320 pixels instead of the default 500 pixels (narrow layout).
Design your app to switch to a vertical layout when the user resizes it so that the height is greater than the width (tall layout).

For more general recommendations, see Guidelines for supporting multiple screen sizes. For specific guidance about designing games for narrow layouts, see the Games idea book.

If you'd like to see these guidelines applied in a sample, see:

Examples

Narrow layouts

The default minimum width for a Windows Store app is 500 pixels. Here is an app at 500 pixels wide.

App at default minimum width of 500 pixels.

And here is the app at 320 pixels wide.

App at narrow minimum width of 320 pixels.

If you choose to support a minimum width narrower than 500 pixels, you should make some design changes so that the app is functional and usable at this size. Follow the Dos and dont's to ensure that your app is effective at widths narrower than 500 pixels.

Tall layouts

Additionally, you can choose to make design changes when your app is taller than it is wide. For example, you can design the app to pan vertically instead of horizontally when it is taller than it is wide.

Here is an app that pans horizontally when it is at full screen.

App that pans horizontally, at fullscreen

And here is the app when it is taller than it is wide. The app now pans vertically.

App that is taller than it is wide and pans vertically.

Should my app support a minimum width of 320 pixels?

Whether you should support widths narrower than the default minimum depends on what you expect users to do with your app. Here are some common scenarios in which you should support narrow widths, down to 320 pixels:

Multitasking is important for your app.
You want users to keep your app on the screen.
Your app works with another app in a companion scenario.
Your app adapts well to narrow widths.

If you keep the default minimum width of 500 pixels, you don't have to make special considerations for your app at narrow widths.

Dos and don'ts

If your app pans horizontally when it is full screen, switch to pan vertically when the app window is taller than it is wide.
To accommodate the narrow size, make following design changes when your app width is less than 500 pixels:
- Use the smaller back button style. For more info about back button sizes, see the Symbol icon list.
- Use 20 pixels for the left margin.
- Use 20 pt size for the app's header.
- Use the smaller offset values for page transition animations and content transition animations.
Here's the Calculator app at a normal width:

Here's the same app at 320 pixels wide. Its left margin is now 20 pixels and its header font was reduced to 20pt size, per the narrow layout recommendations.
If your app pans vertically when it is full screen, scale down to display a single column or pane when the app is taller than it is wide. You decide the exact width at which the app switches to a single column or pane. In the single column or single pane view, make sure you include navigation to let users move from one pane to the other.
Design your app layout and all controls to scale down to the minimum size and to be usable in both tall and narrow app windows. Important controls to consider are:
Don't navigate the user to a different part of the app when the window size changes to a narrow width.
Don't support widths narrower than the default minimum (500 pixels) if you can't preserve most of your app's functionality at narrow sizes.