×

Design considerations

When creating new apps for or porting existing ones to the 1080x1920 px resolution devices, check the things listed in this chapter to optimise your app's user experience. With these same modifications and optimisations you are also good to target the 720p screen devices.

Note that there are no new layouts introduced as such; the main thing to consider is filling the extra screen estate with beneficial content.

Figure 1. 480x800px 4.3 inch screen, 768x1280 px 4.5 inch screen, and 1080x1920 px 6 inch screen

Live tiles

Start screen has a 2 column grid in lower resolution devices; this is transformed into a 3 column grid in larger resolution devices. The tile sizes are getting a bit smaller in pixels to adjust to the added third column. The tiles you are using for the WXGA resolutions should work perfectly without any changes, as the OS scales them automatically. However, it is still advisable to check that everything looks as it should.

Figure 2. Tile sizes for 1080x1920 px 6 inch screen for reference

List layouts

In general, as the screen real estate increases, the additional space should be used to extend the content area; lists can, for example, show more items.

Figure 3. 4.2 inch and 6 inch screens

Figure 4 demonstrates a situation where there is now room for an additional preview line in a list. One should check if adding it would benefit the layout and bring added value.

Figure 4. 4.5 inch and 6 inch screens

Grid layout

While lower resolutions use 2 columns, the large display can accomodate three.

Figure 5. 4.3 inch screen with two columns, 6 inch screen with three and four columns

The 4-column layout will remain for all resolutions.

Figure 6. 4 column layout on 6 inch screen for reference

Font sizes

System fonts are automatically scaled by a 2.25 factor. For example, the text on a tile (PhoneFontFamilySemiBold, PhoneFontSizeMedium) is scaled from 22.667px in 480p resolution to 51px (22.667*2.25) in 1080p. Similarly, the pivot title (PhoneFontFamilySemiLight, PhoneFontSizeExtraExtraLarge) is scaled from 72 to 162 (72*2.25).

Other fonts however (like PhoneFontFamilyNormal, PhoneFontSizeMediumLarge) are scaled just to 80% of the 2.25 factor. So they are scaled from 25.333px to 46px (25.333*2.25*0.8) instead of 57px (25.333*2.25).

Custom font styles in applications should be adjusted accordingly.

Figure 7. Font sizes

Graphic assets

It is recommended to create graphics for the largest supported resolution; the graphics will then be scaled down to the correct sizes in smaller resolutions. If you are scaling graphics up from a smaller resolution to larger resolution, the end result can easily get foggy.

When scaling up from 768x1280 px resolution, you can use an image scaling factor of 1.5. The factor also applies to application bar graphics.


Last updated 12 February 2014

Back to top