This topic describes best practices for how to design and build a layout for your Windows Store app that scales to the different sizes of screens supported by Windows 8.
Windows 8 runs 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. Windows Store apps can run on any of the screen sizes that Windows 8 supports. 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 used in this document.
| Term | Description |
|---|---|
|
Screen size |
The physical size of the screen, in inches. Usually measured on the diagonal. |
|
Screen resolution |
The number of pixels the screen supports, in horizontal and vertical dimensions. For example, 1366x768. |
|
Aspect ratio |
The shape of the screen as a proportion of width to height. For example, 16:9. |
Screen size
The biggest impact that screen size has on Windows Store apps is actually the screen resolution. On larger screens, there is a higher screen resolution, and therefore more available space or screen real-estate for your application. Users expect to see more content and more functionality on larger screens.
Managing this screen real estate takes consideration by the app developer and designer. How the app looks on large screens is defined by the parameters defined for the layout at design and development time.
The platform, controls, and templates have all been designed to accommodate different screen sizes. A lot of your app's layout will scale with little additional effort or code, some consideration needs to be made for your top-level layout, content regions, app navigation, and commands to ensure that they are placed predictably and intuitively on larger screens.
The following image demonstrates how large empty regions can be caused by not building an adaptable layout for large screens.
Minimum screen resolutions
There are two primary screen resolutions that your app should support:
- The minimum resolution in which Windows Store apps will run is 1024x768.
- The minimum resolution required to support all the features of Windows 8 (including multitasking with snap) is 1366x768. For more information on snap views, see Guidelines for snapped and fill views.
Windows Store apps cannot run on 1024x600 or 1280x720 resolutions.
The following table presents the practices recommended for the primary screen resolutions.
| Practice | Description |
|---|---|
|
Design for a minimum resolution of 1024x768. |
This practice provides the following benefits:
|
|
Design for an optimal resolution of 1366x768 |
This practice provides the following benefits:
|
Designing for larger screens
When designing an app for larger screens, you must consider how your app’s layout, aesthetic, proportions, and controls can be applied to a larger canvas. Additionally, any app can have any number of layouts of varying complexity. Each layout can be considered individually for larger screens.
The following table presents the practices recommended for larger screens.
| Practice | Description |
|---|---|
|
Fill the screen |
This practice provides the benefit of a user experience that is as immersive as possible regardless of the screen size. Apps should appear to fill the screen to the best of their ability and should appear to be thoughtfully designed for varying screen sizes. Users who buy larger monitors expect that their apps continue to look great on these large screens and fill the screen with more content, where possible. |
|
Determine whether your layout should be fixed or adaptive |
There are two techniques that can be used to build an app that scales to different screen sizes. The choice depends on the complexity of the layout and the usage scenarios. |
Fixed layout
A fixed layout is most often seen 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 (for example, a game board) where showing more content is not possible or may not add any more value. These layouts cannot, or will not, dynamically change or adapt to different screen sizes as they are designed using fixed pixel values. Windows 8 accommodates these apps with a "scale to fit" approach that is built into the platform.
Fixed layout: Scale to Fit
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 image.
The following table presents the practices recommended for apps that use scale-to-fit functionality.
| Practice | Description |
|---|---|
|
Start with the base resolutions. |
When designing a fixed layout, start by designing your layout for the baseline resolutions: 1024x768 and 1366x768. This is the layout that will be scaled to the larger screens. |
|
Place your fixed content within a ViewBox control. |
The ViewBox control scales a fixed layout to fit the screen. |
|
Avoid putting adaptive controls (such as the AppBar) in the ViewBox. |
These controls automatically adapt to different screen sizes. |
|
Define letterboxing style and color. |
Fixed app layouts do not dynamically change in response to aspect ratio or screen size changes, so the scale-to-fit technique will automatically center and letterbox (horizontally, or vertically) your app’s content. Defining a letterboxing style and color that complements the app or hardware color can provide a great experience. Letterboxing color is defined by your top-level app layout’s background color. We recommend choosing a dark color like black that will blend 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), XAMLExtensible 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).
|
Adaptive layout
Adaptive layouts are most often seen in content consumption, management, and creation apps. These layouts are most often made up of defined proportional elements with a top level wireframe. For example, a news reader app has a header, footer, and a content region in the center. These layouts dynamically change and adapt to different screen sizes and bring in more content and dynamically fill the space according to the rules of the layout. Windows 8 accommodates these apps with adaptive layout techniques discussed in more depth below.
Adaptive layout: manage the space
If you determine that your app layout can support adaptive layout to accommodate different screen sizes, use the following considerations to determine how your app can make use of all available screen space.
The following table presents the practices recommended for apps that use adaptive layout.
| Practice | Description |
|---|---|
|
Determine how each adaptive region can make use of the available space. |
For each cell that you’ve identified as being adaptive in the horizontal or vertical direction, determine how your app layout will make use of that space on a larger screen. |
|
Determine the top-level layout wireframe. |
This wireframe should describe what the top-level regions of your app are. This wireframe should include where your header, navigation, and content regions are. The following image demonstrates a top-level wireframe.
|
|
Determine which parts of the layout are fixed vs. adaptive. |
For each cell in your top-level wireframe, determine how each cell should size itself for both the vertical and horizontal dimension when your app is shown at different sizes. This top-level wireframe description and the sizing behavior can be used to define the parameters for a GridLayout.
|
|
Determine in which dimensions each adaptive region will adapt. |
For each cell that you’ve identified as being adaptive in the horizontal or vertical direction, determine how your app layout will make use of that space on larger screens. |
|
Determine how your app will make use of space in adaptive dimensions. |
After you’ve determined how each region of your app with adapt to different sizes, the next step is to consider how your app will make use of the space. There are many techniques that your app can use and combine to make use of the space; all of which are supported by the Windows 8 platform and controls. |
|
Ensure the width and height of all collection views are sized to 100%. |
A ListView control automatically fills available space with more items.
|
|
Use Multi-column Layout for text, where appropriate. |
Multi-column Layout automatically adds columns for readability and flows content to fill available space.
|
|
Use a canvas for images, where appropriate. |
A canvas automatically expands to fill available space.
|
|
Show more whitespace. |
Maintain the amount of app content you show by compensating with extra whitespace.
|
|
Show more app. |
Show more of the content of the app. Depending on how you reflow your content, you can also show more whitespace —or not.
|
Testing your app layout
It is important to test apps on different screen sizes. We realize that most people don’t have many devices at their disposal, so we build support for testing apps on different screens into tools such as Visual Studio 11. This offers the Windows Simulator which allows developers to run their apps on a variety of screen sizes, orientations, and pixel densities, as shown in the following image.
Blend for Microsoft Visual Studio 2012 for Windows 8, shown in the following image, offers a platform menu that enables developers to design their app on different screen sizes and pixel densities on the fly. The Blend canvas updates dynamically based upon the screen option chosen from the platform menu.
Related topics
Build date: 11/28/2012
