Guidelines for resizing windows to tall and narrow layouts
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.
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.
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:
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.
- Don't navigate the user to a different part of the app when the window size changes to a narrow width.
- 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:
- For specific guidance about designing games for narrow layouts, see the Games idea book.
- 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: 12/16/2013