Design considerations for Windows Phone 8.1

Windows Runtime XAML on Windows Phone 8.1 apps need to cope with a diverse set of display sizes and resolutions.

Figure 1. Different screen sizes and resolutions.

To avoid multiple separate designs, there is a scale factor introduced that can be used. The platform calculates the scale factor automatically. So, when designing, you shouldn’t worry about the "raw" pixels anymore but consider the "view" pixels, i.e. "raw" pixels divided by the scale factor.

Figure 2. "Raw" pixels vs. "view" pixels.

The Windows Phone emulator supports different screen sizes (in both physical and pixel size) - use it to test your design.

Note: There are three variants of the navigation bar on Lumia devices running Windows Phone 8.1; capacitive buttons (as in most Lumia phones, e.g. Lumia 930); fixed on-screen (always visible, e.g. Lumia 530 and Lumia 630); and dynamic on-screen (the user can hide or show the navigation bar by swiping, e.g. Lumia 730). The dynamic on-screen navigation bar may have an effect on how your application looks and behaves, because the available screen size depends on whether the navigation bar is visible or not. We recommend that you test your app to make sure that the user experience is flawless. Guidance on how to adapt the layout of your app to a navigation bar can be found from Layout and the Windows Phone navigation bar (MSDN).

What does an app need to do?

Provide bitmap images to work with the scaling system; the system uses scale factor to define which resource to bring in. If there is no exact match, the next best scale factor will be used.

Remember these tips when creating images
  • Variable size image (e.g. background) – design for a high resolution display (1080p). System will resize it.
  • Fixed size images – create different image files preferably for all scale folders.
  • Remember to use the correct naming convention.
  • On code level, only one line of code is needed; the system picks the correct image.
Build responsive UI that adapts to the screen size
  • Design for proportional layouts, not fixed sizes.
  • Consider portrait/landscape and use techniques (such as VSM) to handle.
  • Test on different device sizes/resolutions (including the emulators).
Make use of DisplayInformation for granular display information
  • Different layouts can be defined for portrait and landscape (hide & move elements).
  • Native&current orientation, scale value, real-world sizes.

Last updated 17 September 2014

Back to top