The Master-Detail Pattern and 'effective pixels'

Published by at

Like me, you may have wondered about how developers code their user interfaces for UWP applications such that they scale gracefully from phone portrait screens up through tablets and then laptops? There's a useful developer piece on the Windows blog right now, looking at the so-called Master-Detail Pattern and looking at the exact screen resolutions (in 'effective pixels') at which the various patterns should kick in. Even if you're not a programmer, it's worth flicking through, to get an idea of how modern data-driven scaleable UIs work.

Master-detail

From the article:

Master-detail modes

The master-detail pattern works well on a wide range of device types and display sizes. However, you should consider how you want to use the pattern on different display sizes.

There are two popular modes that will help with this:

  • Side-by-side
  • Stacked

The determination between which approach to take comes down to how much horizontal room your app has. Here’s a table of typical effective pixels available per “size class” (if you’re not familiar with Effective Pixels (epx) see this one minute video).

Size class   small medium large
Typical screen size (diagonal)   4″ to 6″ 7″ to 12″, or TVs 13″ and larger
Typical devices   Phones Phablets, tablets, TVs PCs, laptops, Surface Hubs
Common window sizes in effective pixels   320×569, 360×640, 480×854 960×540, 1024×640 1366×768, 1920×1080
Window width breakpoints in effective pixels   640px or less 641px to 1007px 1008px or greater


UWP Community Toolkit

If you’re building an application that could benefit from a master-detail implementation, you can skip a lot of the work by using the MasterDetailView control in the UWP Community Toolkit. With as little as a few lines of code and a couple DataTemplates (one for the master’s items and the one for the detail view), you can be up and running quickly.

The articles in this series have been top notch and I've been impressed by how they're understandable at a basic level by even laymen. 

Of course, not all UWP applications fall into a Master-Detail model, so it very much depends on the content being presented. Still, next time you use such a UI you'll appreciate it that little bit more, hopefully?

Source / Credit: Windows blog