Windows 8 to 8.1 App Considerations: Screen Size

One of the most frequent questions/concerns I’m seeing in community is:  what application changes do I need to consider for Windows 8.1 development?   Is there anything I should be doing today in my Win8 apps to make it easy to move to 8.1 in the future?

There’s a ton of great info that came out of the recent //build conference.  In my opinion, the main design consideration to take into account with applications in Win8.1 is to handle multiple screen sizes and states effectively.  Conceptually, this is nothing new:  when developing web applications or desktop apps, you have to assume the application will be viewed on a variety of form factors and handle the layout effectively.

When Windows 8 first shipped, apps would run either full screen or in snapped view.  Further, the minimum resolution requirement were 1366x768, and snapped applications have a width of 320px and full height.  This simplified the design slightly, and as a result, many samples had code like the following (C#):

 private void Current_SizeChanged(object sender, 
  Windows.UI.Core.WindowSizeChangedEventArgs e) {

    if (Windows.UI.ViewManagement.ApplicationView.Value ==
        Windows.UI.ViewManagement.ApplicationViewState.Snapped) {

        //handle snapped view -- hide stuff, etc.
    }

}

Here, we’re handling the screen size changed event and if the view is snapped, rearranging/hiding elements as necessary, or if it’s not snapped, doing something equally appropriate.  A far better approach, though, is to not worry about snapped view specifically, and simply return to the tried and true method of examining the current app dimensions and scaling appropriately.  In JavaScript, we can do something like:

 window.addEventListener("resize", handleResize);

function handleResize(eventArgs) {

 var screenWidth = window.outerWidth;
 var screenHeight = window.outerHeight;

 if (screenWidth <= 320) {
     //should be snapped
 }

 //handle other combinations

}

 

This is a far more flexible approach, and because Windows 8.1 will support a wider array of screen dimensions and snapped combinations, it’s just best to consider how your app will work at any given resolution.  Particularly for HTML/JS apps, it’s just smarter, too, as we don’t have to have any Win8 specific code and instead can leverage the same logic regardless of platform.

To test your apps, I enjoy using ModernMix from Stardock.  ModernMix is a tool that allows you to run Windows 8 modern/store apps in a window on the desktop.   While you can also use the Windows Simulator to simulate different resolutions, ModernMix is lightweight and also allows you to instantly resize your apps, making it easier to test/debug screen and layout issues.  I like using it to debug non-screen issues, also, as it minimizes the flipping back/forth from desktop to full screen modern apps on a single monitor.  The simulator is still very useful for a variety of other scenarios, like screen rotation.  Disclosure: I paid for my own copy of ModernMix, and this is solely my opinion on its use as a tool for helping to build applications.  Use at your own risk.

Effectively handling virtually any screen size is the best way to future proof an app.  You don’t necessarily have to handle every conceivable screen resolution – put the plumbing in place now to make it easier as the platform evolves.  You’ll be glad you did.