Guidelines for resizing to narrow layouts

Applies to Windows only

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:

    Here's the Calculator app at a normal width:

    Calculator app sharing the screen with Bing Travel app

    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.

    Calculator app at 320 pixel width, smaller header and margin
  • 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.

    Vertically panning app at full screen with two panes

    Vertically panning app at a narrow width with a single pane

  • 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.

Related topics

For developers (HTML)
Quickstart: Defining app layouts
Guidelines for resizing
Guidelines for scaling to pixel density
CoreWindow.SizeChanged
OffsetWidth property
For developers (XAML)
Quickstart: Designing apps for different window sizes
Guidelines for resizing
Guidelines for scaling to pixel density
CoreWindow.SizeChanged
Windows.UI.Xaml.VisualStateManager
Samples
Layout for windows that resize to 320 pixel width sample
Layout for windows that are taller than wide sample

 

 

Show:
© 2014 Microsoft