Metro Pass 0004–Awww Snap!

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

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

Sorry about the title, but I couldn’t resist. The title “Snapping and Scaling” just wasn’t exciting to me.

Snapping and scaling is really all about allowing users to multi tasks and creating great experiences on every form factor.

Snapping

People naturally multitask, and they can run two apps side by side through snapping. All apps must implement a snapped state, and a great snapped state invites users to keep your app on screen longer. See the Guidelines for snapped and fill views.

• Design a useful Snap view that provides a functional view of the app. Preserve users’ context when they switch between view states.
• When snapped, the width of the app is fixed at 320 pixels but the height is variable. Pan vertically to avoid conflict with the edge and snap gutter.
• Other apps can be snapped as well when your app is on screen, so design your app to reflow fluidly from a minimum width of 1024 pixels.

Scaling

Scaling to multiple form factors   Your app has the opportunity to be used on hundreds of millions of PCs running Windows 8. These PCs will have a wide range of screen sizes and resolution, ranging from <10″ tablets to >27″ screens.

• Make the best use of on-screen real estate by using the fluid layout support built into platform controls. For example, the ListView will automatically reflow content based on available space.
• The platform provides automatic scaling based on device screen size and resolution. Provide 3 sizes of assets, or use scalar vector graphics to ensure your app always looks crisp and polished. See the Guidelines for scaling to screens and Guidelines for scaling to pixel density.
• Keep in mind that turning on Make everything bigger in Ease of Access effectively lowers the current resolution and you need to ensure that all UI is still visible and usable.
• Use the simulator in Microsoft Visual Studio to see how your app will look on different form factors.

The take away here is that your apps to work great on all form factors. You don’t want to get a review in the Windows Store that says something like the following:

This app looks/runs horrible on my {insert device name}! Do not buy!

Potential buyers will see a review like this and wonder how your app will run on their device if it didn’t work so well on another device. As a result, they may not buy it.

Next up, using contracts.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920