Guidelines for resizing windows to tall and narrow layouts
[This documentation is preliminary and is subject to change.]
You can choose to support additional window size options for scenarios when users resize an app to a tall or narrow view. There are two scenarios:
- Design the app to switch to a vertical layout when the user resizes it so that the height is greater than the width (tall layouts).
- Modify the minimum width to 320 pixels instead of the default 500 pixels (narrow layouts).
Here is an app at 500 pixels wide.
And here is the app at 320 pixels wide.
If you keep the default minimum width of 500 pixels, you do not have to make any special considerations for your app at narrow widths. You simply design your app so that it adapts fluidly when the user resizes the app.
If you choose to support a minimum width of 320 pixels, you should make some design changes so that the app is functional and usable at narrow widths.
Additionally, you can choose to make design changes for the app any time it 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.
And here is the app when it is taller than it is wide and therefore, switches to panning vertically.
Choosing the minimum width
How do you decide if you should support a minimum width of 320 pixels? Consider the scenarios that you want your app to support. Here are some common scenarios in which you should support narrow widths, down to 320 pixels:
- Your app works well at narrow widths.
- 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.
Dos
Follow these guidelines when designing your app for narrow widths:
- Determine if you can keep full functionality or if you need to reduce functionality at widths less than 500 pixels. You should keep as much functionality as possible.
- If your app pans horizontally when it is at full screen, switch to panning vertically when the app window is tall. You decide the exact width that you want the app to switch the layout from horizontal panning to vertical panning. We recommend that you switch to vertical panning any time the app is taller than it is wide.
- When the app is at narrow widths, make additional design changes to accommodate the narrow size. You decide the exact width that you want to change to the narrow layout. We recommend that you make these changes when the app width is less than 500 pixels. The design changes include the following:
- 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.
-
If your app pans vertically when it is at full screen, scale down to a single column or pane when the app is at narrow widths. You decide the exact width that you want the app to switch to a single column or pane. In the single column or single pane view, make sure you include navigation from one pane to the other.
- Design your app layout and all controls to scale down to the minimum size and to be usable and well designed in both tall and narrow app windows. Important controls to consider are:
- App bars
- Nav bars
- Message dialogs
- Flyouts
- Settings panes
Don'ts
Here are some things to avoid when designing your app for different window sizes and devices:
- Don't navigate the user to a different part of the app when the window size changes to a narrow width.
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
Build date: 6/20/2013
