Metro Pass 0020 – Scaling

July 31, 2012

metro-pass-0020

(For an overview of this series, please read this post.)

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

While Windows 8 provides developers with the opportunity to distribute their apps to millions of users around the world, it also presents challenges when it comes to making it great looking apps. The primary challenge has to do with the fact that Windows 8 will run on a wide variety of form factors. I harken back to the days of Windows Mobile (not Windows Phone) development where, more often than not, developers would need to create a UI for each device their apps would target. Not an ideal scenario. Will developers need to do the same for Windows 8 Metro style apps? Not necessarily. After all, Windows 8 offers built-in scaling out of the box to ensure that apps and content look great. To ensure apps look great when scaled, developers just need to make sure they use a fluid layout and scalable graphics.

Below is a list of what to do and not to  do when it comes to scaling on Windows 8:

Do Don’t
Use scalable vector graphics Don’t use smaller images that are scaled up
Use resource loading for bitmap images in the app package Don’t use larger images that are scaled down
Use the resolution media query for remote web images Avoid specifying sizes that aren’t multiples of 5px
Use the File Access Thumbnail APIs for user images on the file system  
Manually load images based upon scale percentage at runtime  
Specify width and height for your images  
Use typographic grid-units and sub-units  

For details about about each of these, visit the MSDN source links.

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

Just a quick note, I’ll be taking a break from the Metro Pass series for the next couple of weeks as I have a number of other topics I’d like to cover.