Build talk of the week: Beautiful apps at any size on any screen

Build talk of the week: Beautiful apps at any size on any screen

  • Comments 7
  • Likes

Many tasks performed on slates, laptops, and desktops require using more than one app. As a user, you may have found yourself referencing documentation while writing code, copying a funny quote from a website into an email, or comparing prices from different online stores. Windows 8 opened the door to this kind of multi-tasking by allowing users to put more than one Windows Store app on screen at the same time. Windows 8.1 Preview makes multi-tasking even better by allowing users to put more apps on screen (up to 4 on a large screen), as well as letting users choose exactly how to split the screen among your apps.


Windows 8.1 Preview lets users put more apps on screen and make each app just the size you’d like

Windows 8.1 Preview also opens opportunities to produce apps for a wide range of devices, including smaller tablets and higher resolution devices.

Your apps can shine on Windows 8.1 Preview (and appear more on users’ screens) by supporting fluid app layouts and high DPI.

From Windows 8 to Windows 8.1 Preview

The most impactful change that the multi-tasking model brings to developers is that, in order to allow more flexibility in arranging the screen, apps are no longer confined to discrete view states like “snapped” or “filled.” Instead, your app can be put in any size from 500x768 pixels on up (apps can optionally support sizes as low as 320x768 pixels; see Guidelines for resizing windows to tall and narrow layoutsfor more info). Design your app to fluidly resize at all sizes and orientations.

Be sure to continue to provide assets for your app at the 1.0x, 1.4x and 1.8x scaling plateaus. Test your app on a variety of devices, or by using the Visual Studio Simulator. For more info, see Guidelines for scaling to pixel density.

Resources for building a great multi-tasking app

I took the stage at Build 2013to discuss the window sizes, app layouts, and DPI scaling. In this talk, I outline design and development guidelines for building apps that are great for multi-tasking on a broad range of devices. You can view the talk below.

In addition to my talk, MSDN features many resources dedicated to scaling apps to different sizes:

· Guidelines for window sizes and scaling to screens

· Guidelines for resizing windows to tall and narrow layouts

· Sample- Layout for windows that resize to 320 pixel width

· Sample- Layout for windows that are taller than wide

Summing up

Multitasking is an integral part of Windows 8.1 Preview. Windows 8.1 Preview also allows your app to shine on a wide range of devices, including many with high resolution displays. You have a tremendous opportunity to deliver a beautiful app experience at any window size on any screen, leveraging the power of multitasking in Windows 8.1 Preview and incredible new displays.

-- Sarah McDevitt, Program Manager

You must be logged in to comment. Sign in or Join Now
  • jhoff80
    0 Posts

    As great as the new snap views are, it's a mistake to make the 320 pixel view optional, and an even bigger mistake to remove those great views from most Microsoft-built apps.  The best part about the old 320 pixel snap view is that the app reflows content to fit that small column.  It doesn't just work great for things like Twitter, but it works great for everything because the developer is forced to rethink how the app works to fit that column.  It ends up being a better user experience in a way that just shrinking the area down to 500 pixels isn't.

    After all, I can make a desktop IE10 window 320 pixels or 500 pixels wide, but both of those are a poor experience because the content doesn't change.

    That same dumb behavior now when I snap a desktop window to the side.  In 8, I have a list of thumbnails in the snap view so I can, for example, see when I get a new IM from the thumbnail, and quickly tap on that thumbnail to jump to a full view.  In 8.1, I just get a tiny view of the desktop.  It's functionally a step back.

    I also agree with GoodThings2Life on Metro IE's scaling... Which gets even worse when disconnecting and connecting an external monitor.  Once the user changes something (100% on external monitor, 125% on Surface display, for example), the OS should never try to out-clever the user and change it on its own.  (I currently can get 89/122% or 100/150% with the automatic changes).

  • The variable snap sizes are a nice improvement.  What I'd like to see is more apps support variable zooming like the PDF reader & Onenote - the problem now with the 8.1 preview is that a lot of apps only scale to 1/3rd, if you want something in between the standard snap sizes they just get surrounded by a black border.  Holding down cntrl+mousewheel to let the app fill/shrink to whatever snap size you want would be great.

    However, that's largely up to the app developers after 8.1.  A big problem I find with snapping apps to the desktop, especially now with more variable snap sizes, is that whenever the desktop is pushed aside to accommodate a snapped app, all of the windows on the desktop are truncated.  If you just quickly wanted to snap an app or try out various snapped sizes, every time you adjust the desktop window size your app windows become permanently shrunk and never automatically expand back to the size they were before.  So you have to adjust the desktop window, then re-adjust every single app window to be the size they were before.  Frustrating.

    Now to fix this of course is not easy with the legacy graphics system of the desktop, not sure it's even possible.  But it's another example of the disconnect between the desktop and the Modern environment - I hope with 8.2 we see some work on the desktop to make them fit together (at least make the icons more metro like so it doesn't look like Win7 with transparency removed and huge borders!).  Improving the interplay between the desktop and modern would go a long way towards rebutting the main criticism of Win8; in that it sometimes feels like two OS's quickly bolted together.

  • Cool... good to know! :)

  • Thanks for the feedback! Several good points about scaling across the system. I want to let you know that the fact that the PC Settings 'make things smaller' option doesn't stick after sleep/lock is a preview bug and will be fixed!

    Sarah McDevitt

  • Come to think of it... as I'm in Display Control Panel (Desktop), it would be helpful if there was some help or documentation on the subject and what to expect when the options are chosen... especially since they are different from previous versions. I'm particularly confused on the checkbox "Let me choose one scaling level on all my displays." If I uncheck that, why do I not get a slider for EACH of my displays? Ideally, I'd like Display 1 (Surface) at 125% and Display 2 (External) at 100% and just have it remember that.

    Also, I'm a little sad about the lack of others commenting on this post. In spite of the comments above, I actually REALLY like and appreciate the DPI scaling improvements (what I've been able to do so far), and I've been waiting on these, literally, for years in Windows. I just want some consistency in the option.

  • Oh, and one more thing... I'm confused about Surface Pro's handling of the higher DPI options. I can go into PC Settings and choose "show more" by force, and it will work and remember that until I put it to sleep or lock the workstation. As soon as I logon again, it's back to Default mode. Seems like if it's supported it should stick and if it's not supported it shouldn't allow me to choose the option.

  • I've been using the 8.1 Preview for a week now, and I really like it on Surface Pro with how it handles my desktop monitor, BUT... IE's handling of default zoom (150% on Surface main display) is obnoxious considering I have the DPI scaling at 125%. Why doesn't it default to 125% instead of 150%? Meanwhile, my external monitor 22" 1080p screen defaults to 100%.

    Bare minimum, I'd like an option to make IE pick a size and stick with it, otherwise better defaults are in order...