locked
WP 8.1 scale factors have changed in Blend RRS feed

  • Question

  • For WP8, Blend allows you to choose between three different screen resolutions/scale factors. With WP8.1 (WinRT), not only have these changed but their behaviour is quite different.

    480x800 used to be 100%, but now it's classified as 120%. This means if you had font that was 32pt before, it seems you now need to set it to 26.666pt.

    Before when you switched between the sizes, the design surface remained the same size on screen but the content of the page was scaled differently so you could see how it looked. With 8.1 the design surface changes size on screen, which isn't at all useful.

    What documentation is there on what has changed and how we are supposed to approach design with regards to this change? Page layouts brought over from WP8 are quite messed up in WP8.1.

    Thursday, June 5, 2014 12:06 PM

Answers

  • You have to understand that SL apps display content fundamentally different than WinRT in two ways.

    First, there's effective resolution. WinRT uses Window's effective resolution for scaling (Window's effective resolution is 1366x768). But Windows has a lot of real estate because it's intended for tablets and PCs. Because of this, the effective resolution was chopped up to a good size (meaning running an app built for Windows unchanged on a phone would at least be readable with the font sizes used). They ended up with an effective resolution of 384x640 instead of SL's 480x800. To match the common resolutions of existing devices, they have to scale up this new effective resolution. 120% results in 480x800.

    The other main difference is that SL apps scaled its effective resolution solely on device resolution and will always scale up so 480x800 fits into the device's resolution with no additional space introduce (the one exception to this is if the phone has a different aspect ratio; height will expand to screen on apps targeting WP8+). This means that all SL apps look the same on all devices (except for minor differences in aspect ratio). With WinRT, apps scale based on device resolution AND screen sizes. This means that WinRT will scale up but only until everything is big enough for readability. This is why there are two 1080p emulators with two scale factors (5.5" 1080p @ 240% vs 6" 1080p @ 220%). Not scaling up all the way so the effective resolution fill whole screen means more screen real estate is being introduced. Some consumers expect to have more real estate on a physically larger device even if they have the same resolution.

    Now that we have some background out of the way, here are some guidelines:

    -Design your WinRT app to have a dynamic layout since apps will scale differently on the same resolution resulting in more space on the screen depending on the physical size of the device. (A fixed width image will have more available space around it on a 6" device than a 5" device)

    -Design your WinRT app based on an effective resolution of 384x640 instead of 480x800. This means any hardcoded value affecting layout used in a SL app will need to be multiplied by 0.8. These values include margins, paddings, heights/widths, and vertical/horizontal offsets.

    -If you look at the latest WinRT Phone templates, page margins are 19px while SL apps had 24px. A good designer in a WP SL app are used to using common margin values like 12px and 24px (standard page margin). Moving to WinRT Phone, be used to using values of 9.5px and 19px. If you extract standard styles out (buttons, Pivots, etc), you'll see commonly used values like 2.5px, 9.5px, and 19px. Be familiar with these values! If you want to space items out, try it with multiples of 9.5px.

    -Moving an app from SL to WinRT should be thought of as porting the app. This means you should not expect your layouts to work gracefully without some change.

    Also, here's some links that may be helpful:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465349.aspx


    Improve your Windows Phone UX: get proper templates, styles, and samples at http://modernography.wordpress.com/


    • Edited by Q Dev Thursday, June 5, 2014 6:40 PM
    • Marked as answer by --Tom-- Friday, June 6, 2014 11:48 AM
    Thursday, June 5, 2014 6:32 PM

All replies

  • You have to understand that SL apps display content fundamentally different than WinRT in two ways.

    First, there's effective resolution. WinRT uses Window's effective resolution for scaling (Window's effective resolution is 1366x768). But Windows has a lot of real estate because it's intended for tablets and PCs. Because of this, the effective resolution was chopped up to a good size (meaning running an app built for Windows unchanged on a phone would at least be readable with the font sizes used). They ended up with an effective resolution of 384x640 instead of SL's 480x800. To match the common resolutions of existing devices, they have to scale up this new effective resolution. 120% results in 480x800.

    The other main difference is that SL apps scaled its effective resolution solely on device resolution and will always scale up so 480x800 fits into the device's resolution with no additional space introduce (the one exception to this is if the phone has a different aspect ratio; height will expand to screen on apps targeting WP8+). This means that all SL apps look the same on all devices (except for minor differences in aspect ratio). With WinRT, apps scale based on device resolution AND screen sizes. This means that WinRT will scale up but only until everything is big enough for readability. This is why there are two 1080p emulators with two scale factors (5.5" 1080p @ 240% vs 6" 1080p @ 220%). Not scaling up all the way so the effective resolution fill whole screen means more screen real estate is being introduced. Some consumers expect to have more real estate on a physically larger device even if they have the same resolution.

    Now that we have some background out of the way, here are some guidelines:

    -Design your WinRT app to have a dynamic layout since apps will scale differently on the same resolution resulting in more space on the screen depending on the physical size of the device. (A fixed width image will have more available space around it on a 6" device than a 5" device)

    -Design your WinRT app based on an effective resolution of 384x640 instead of 480x800. This means any hardcoded value affecting layout used in a SL app will need to be multiplied by 0.8. These values include margins, paddings, heights/widths, and vertical/horizontal offsets.

    -If you look at the latest WinRT Phone templates, page margins are 19px while SL apps had 24px. A good designer in a WP SL app are used to using common margin values like 12px and 24px (standard page margin). Moving to WinRT Phone, be used to using values of 9.5px and 19px. If you extract standard styles out (buttons, Pivots, etc), you'll see commonly used values like 2.5px, 9.5px, and 19px. Be familiar with these values! If you want to space items out, try it with multiples of 9.5px.

    -Moving an app from SL to WinRT should be thought of as porting the app. This means you should not expect your layouts to work gracefully without some change.

    Also, here's some links that may be helpful:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465349.aspx


    Improve your Windows Phone UX: get proper templates, styles, and samples at http://modernography.wordpress.com/


    • Edited by Q Dev Thursday, June 5, 2014 6:40 PM
    • Marked as answer by --Tom-- Friday, June 6, 2014 11:48 AM
    Thursday, June 5, 2014 6:32 PM
  • Q thanks very much for providing this clear explanation of the concepts I was missing. I'm still learning to navigate the combined W8.1/WP8.1 documentation, the pages you link to are obviously what I was missing.

    Great to see your blog covering the template variances from native too. I would always see that my layouts don't match system layouts and would wonder why. I'll certainly be following for updates, thanks again!

    Friday, June 6, 2014 11:41 AM