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.
- The user experience
- Support window resizing
- Automatic support for landscape and portrait orientations
- Use flexible controls
- Support different screen sizes
- When to use fixed layouts
- Related topics
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.
Note In Windows 8, users could resize apps to only three view states: full screen, snapped, and fill. In Windows 8.1 users can resize apps to any width from full screen down to the minimum width.
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.
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.
For maximum control over the UI and minimum development effort, you should use flexible controls, such as the XAML Grid control and CSS grid, or the CSS Multi-column layout, wherever possible. Flexible controls 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.
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 physical size of the screen, in inches. Usually measured on the diagonal.
The number of pixels the screen supports, in horizontal and vertical dimensions. For example, 1366x768.
The shape of the screen as a proportion of width to height. For example, 16:9.
The platform, controls, and templates have all been designed to accommodate different screen sizes. Although much of your app's layout scales with little additional effort or code, you must consider 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.
|Fullscreen screen size (effective pixel resolution)||Device description|
|1366x768||Slates, convertibles, and many laptops (16:9 aspect ratio)|
|1920x1080||Large laptops and devices (16:9 aspect ratio)|
|800x1280 and 1280x800||Portrait-first small devices (16:10 aspect ratio)|
|1024x768 and 768x1024||Landscape-first small devices (4:3 aspect ratio)|
|1371x857 and 857x1371||Small devices (16:10 aspect ratio)|
|2560x1440||Very large all-in-one device (16:9 aspect ratio)|
|Split screen size (effective pixel resolution)||Description|
|672x768||Screen split in half on a 1366x768 device|
|500x768||Default minimum size for app; Screen split in half on a 1024x768 device|
|320x768||Minimum size for apps that support 320 pixel minimum width|
For most apps, you design a layout that adapts to the window size or screen size and reflows content automatically. But in some cases, you need to design a fixed layout. A fixed layout is most often used in games or game-like apps that are composed primarily of bitmap images. Most often, these types of layouts have a fixed amount of content, such as a game board. Showing more content isn't possible or doesn't add any more value. These layouts don't dynamically adapt to different screen sizes. They are designed using fixed pixel values. Windows 8 accommodates these apps with a "scale to fit" approach that is built into the platform.
If you determine that your app requires a fixed layout that can’t adapt to different screen sizes, you can use a scale to fit approach to make your fixed layout fill the screen on different screen sizes, as shown in the following images.
To implement the scale to fit approach, do the following:
- Start by designing your layout for the baseline resolution, for example, 1366x768. This is the layout that will be scaled to the larger screens.
- Ensure that the ViewBox control is sized to 100% width and height.
- Define the fixed size properties of the ViewBox to the fixed pixel sizes of your layout (for example, 1366x768).
- Don't place adaptive controls, such as the app bar, in the ViewBox.
- Choose a letterboxing color. Fixed controls do not dynamically change in response to aspect ratio or screen size changes, so the scale-to-fit technique automatically centers and letterboxes (horizontally, or vertically) your app’s content. Your top-level app layout's color determines the color of the letterbox bars. We recommend choosing a dark color like black that blends in with the hardware, a neutral color like grey that looks intentional, or a color that matches your app content color.
Provide vector or high-resolution assets. The scale-to-fit technique scales your application to varying sizes up to 200% of the design size for your app on a large desktop monitor. Vector assets like Scalable Vector Graphics (SVG), Extensible Application Markup Language (XAML), or design primitives scale without scaling artifacts or blurriness. If raster assets (such as bitmap images) are required, provide images that are twice as large as the design size so they can be scaled down instead of scaled up.
The following images demonstrate how scalar images (right) degrade when scaled up in size compared to vector images (left).
Follow these guidelines when designing your app for different window sizes and devices:
- Use flexible controls to support content that reflows automatically.
- Don't use absolute positioning because it constrains your UI from responding to changes in window size and orientation.
- 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:
- 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. In addition to testing your app on actual devices, you can use the Microsoft Visual Studio simulator for Windows Store apps to simulate running your app on different physical screen sizes, resolutions, and orientations.
- 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.
- 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
- Games idea book
Build date: 11/16/2013