Getting ready for Windows 10 with responsive design

Windows 10 desktop
Standard

Possibly the biggest change for modern Windows developers that comes with the Windows 10 system is that we no longer need to support just a few aspect ratios and scales, we have to support almost any possible aspect ratio at any scale. This is thanks to the ability to have Windows Store apps run in their very own windows in the desktop, which makes absolute sense for keyboard and mouse users.

We could argue that the snap view possibilities in Windows 8.1 already started this layout, but the difference with snap is we had a relatively guaranteed minimum size on the vertical plane, and could focus on layouts which showed more or less on the horizontal plane. This approach was closer to adaptive design, and had the benefit of always having a large vertical plane available (minimum of 768 pixels).

Now that users are able to resize and change the window across both axis, we have to start considering how we as developers should support this concept. This of course isn’t a new problem, just look at how web design has changed over the last few years, and even before then we have traditional Windows Forms apps which worked in the same way. That said it is at least partially new for XAML in Windows Store apps.

In this piece I will explore how we can take inspiration from Responsive web design and apply those lessons to current Windows Store apps so that they are ready for use on the desktop in Windows 10.

Fixed design

The classic way to deal with this problem is to simply show more of your UI as the user expands, even if that means just having a lot of white space. This very simple option is great if you can guarantee a minimum size, and is the approach many websites took in the days before responsive design, where simply centre aligning the content and using the whitespace for adverts was surprisingly effective.

This will also work for apps which focus on only showing content, not controls. That is, there are very few UI elements on screen, with the user being shown a simple view (such as a Grid view), which can adapt to show more items per column or row depending on the size of the screen. If you keep your commands to the command bars, and prompt users with a hint so they know they exist, this method can work. But things aren’t always that simple, in fact that app experience is likely to be a little poor with keyboard and mouse, begging the question of why is it available on the desktop in the first place?

Twitter on Windows 8

Twitter on Windows 8 – expandable but for what purpose?

Looking at Twitter above as an example, one simple long list view, with minimal controls around the edge, surrounded by useless white space. It will actually work quite well as a windowed desktop app, yet there’s nothing to gain as a user by making this app larger.

So we should perhaps instead look to a more recent web trend, responsive design.

Responsive design

In Responsive web design, a site will adapt layout according to the screen size available. To define the core technical features of responsive web design we can refer to this Microsoft page:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

Media queries don’t directly apply to working with XAML, they are a way of changing styles of websites based on the screen real estate, so instead we can use the Visual State Manager to make some simple changes, more on that later.

A flexible grid based layout should be familiar to anyone who has spent any time working with Windows 8 apps, but if you’re not certain head to this MSDN article and brush up on the “Dynamic layout” section. There are very few circumstances where your column and row definitions should not be Auto or Star sizing. In fact I’d go so far as to say if you need to set a fixed value, consider using auto and then having your child element at fixed width so the column/row will collapse if your child element needs to.

Finally, flexible images can be a little tougher with XAML. If you are using icons in your UI that need to scale, it’s worth using vectors in a Path element wherever possible, they scale perfectly and take less resource than an image. A ViewBox can serve you well if you’re wrapping an icon, just remember to set a maximum so you don’t end up with a pixelated mess, also never use a ViewBox to wrap an entire adaptive control. For content images look at examples like Bing News below, if you have high definition images great, scale them down and let them uniform stretch to fill, otherwise keep the image at a reasonable size and fit other content around.

Using Visual State Manager to adapt your layout

Having a look at one of the best examples of a responsive scaling app in Windows 10 right now: the Microsoft Mail app; you can see that as the width available changes, the app shows and hides different UI elements, or expands the buttons to display more information when the screen real estate is there.

Windows Mail

Windows Mail – a perfect illustration of responsive design

It’s worth noting that this works well for the Mail layout because the app is generally reliant on vertical scrolling. That means the content shown can easily expand as the vertical plane does, and the horizontal can change in a responsive manner. Make sure you consider which direction your content is going to flow when deciding how your layout may adapt.

I decided to spend a few minutes constructing a simple demonstration solution on how this system can be implemented in any app. You can find the complete and simple source code here, but I’ll break it down below.

We start by creating a new class for all pages to extend. I’ve called it “ResponsivePage” but you can re-use the code in any base page implementation you may already be using.


public ResponsivePage()
{
    this.SizeChanged += ResponsivePage_SizeChanged;
    this.Unloaded += ResponsivePage_Unloaded;
}

It doesn’t need to do much, just hook on to the Size Changed event and make sure to unload that event handler when it is no longer required. Then the size changed event can trigger moving between different sizes of the Visual state manager:


private void ResponsivePage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
    if (e.NewSize.Width > 1170)
    {
        VisualStateManager.GoToState(this, "Large", true);
    }
    else if (e.NewSize.Width > 970)
    {
        VisualStateManager.GoToState(this, "Medium", true);
    }
    else if (e.NewSize.Width > 650)
    {
        VisualStateManager.GoToState(this, "Small", true);
    }
    else
    {
        VisualStateManager.GoToState(this, "ExtraSmall", true);
    }
}

If you’re wondering where these values come from, I spoke to some of my designer colleagues at UI Centric who pointed me to the commonly used Bootstrap framework guidelines, I’ve lowered the extra small threshold to 650px as the original 750px felt too high in my testing but further testing on more devices may change my mind.

I should also point out that the above values depend on a display which is not scaled. You’ll find that on high definition, but smaller displays these values are not properly honoured. Luckily I have a helper class you can download here which will convert the e.NewSize.Width values for you.

With this simple framework in place we only need to define each of the visual states in any page’s XAML and we can start adapting layouts. In the sample provided I’m simply hiding some aspects of controls as the visual state moves to the smaller scale. At a very small scale all on screen controls are hidden and instead made visible in the command bar, if you’re going to use a command bar you need to make sure you have an AppBarHint control in place so keyboard and mouse users know these controls are available to them. The code for an AppBarHint is included in this sample and comes courtesy of Johnny Westlake, with a minor modification to the template to closer match the look of Microsoft’s control.

ResponsiveDemo.Windows

A very simple demonstration app adjusting layout based on size

Adapting layouts is only one part of the puzzle. Whilst it’s a good idea to consider if small parts of your UI can be modified to make use easier or less cluttered, you don’t want to go overboard. Remember that allowing your existing UI to expand and contract naturally should be your first step.

Scrolling

When critiquing the Windows Mail app I mentioned that it’s use of vertical scrolling over the more common Windows 8 standard of horizontal scrolling makes for a more logical adaptation of the UI as horizontal space increases. One option for adapting your UI to a narrower view is to consider changing the content to a vertically scrolling view.

Changing to vertically scrolling content has the benefit of familiarity to a user on the desktop, where most other applications will follow the same pattern, as well as making more sense on portrait oriented tablets such as the flood of “Windows 8.1 with Bing” devices which hit the market late last year.

CBS news article page

The CBS news article page changing layout

You can see an example of this layout change in the CBS News app: the article reading page adjusts from a full screen, columned layout in horizontal mode, to a more traditional vertically scrolling pattern when the view is narrow enough. CBS’s app also adjusts the top app bar layout as the horizontal space declines, allowing the user to still access as many controls as possible until the space becomes too small and scrolling must be introduced.

Further reading and next steps

I’ve taken a look at how we might scale Windows applications for use in a desktop environment. Microsoft has yet to provide guidelines for how apps should layout in Windows 10, yet many of the lessons in the article: Guidelines for supporting multiple screen sizes are highly applicable and well worth your time to read in detail.

The best we can do now is start to test apps on the Windows 10 platform, there are bound to be small bugs which crop up, or tricks that worked with a fixed layout that fail when your app is quickly or frequently resized vertically. As always, testing is the answer!

If you are unable to install Windows 10 to test out how apps respond, you may want to consider a third party alternative such as Modern Mix, which brings Windows Store apps into the desktop, letting you test your UI layouts on Windows 8 or 8.1.

2 thoughts on “Getting ready for Windows 10 with responsive design

  1. Ax Plains

    Hello, I am looking to replicate this responsive “Windows 10 Mail interface” approach to a “web” application instead of a “desktop” application (I am using VS2013).
    Is it possible to replicate the structure of the XAML to something more HTML/CSS based (or Twitter Bootstrap based)?
    Thank you for your insight.
    Ax

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>