Skip to content

Latest commit

 

History

History
94 lines (81 loc) · 4.66 KB

screen-sizes-and-breakpoints-for-responsive-design.md

File metadata and controls

94 lines (81 loc) · 4.66 KB
author title description ms.author ms.date ms.topic ms.prod ms.technology keywords ms.localizationpriority
mijacobs
Screen sizes and break points for responsive design
Rather than optimizing your UI the many devices across the Windows 10 ecosystem, we recommended designing for a few key width categories called breakpoints.
mijacobs
08/30/2017
article
windows
uwp
windows 10, uwp
medium

Screen sizes and breakpoints

UWP apps can run on any device running Windows 10, which includes phones, tablets, desktops, TVs, and more. With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • Small (smaller than 640px)
  • Medium (641px to 1007px)
  • Large (1008px and larger)

Tip

When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

Breakpoints

This table describes the different size classes and breakpoints.

responsive design breakpoints

Size class Breakpoints Screen size (diagonal) Devices Window sizes
Small 640px or less 4" to 6" Phones 320x569, 360x640, 480x854
Medium 641px to 1007px 7" to 12" Phablets, tablets, TVs 960x540
Large 1008px or greater 13" and larger PCs, laptops, Surface Hubs 1024x640, 1366x768, 1920x1080

General recommendations

Small

  • Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • Dock app bars to the bottom of the window for improved reachability.
  • Use one column/region at a time.
  • Use an icon to represent search (don't show a search box).
  • Put the navigation pane in overlay mode to conserve screen space.
  • If you're using the master details pattern, use the stacked presentation mode to save screen space.

Medium

  • Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Put command elements like app bars at the top of the app window.
  • Use up to two columns/regions.
  • Show the search box.
  • Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • Consider further tailoring for TV experiences.

Large

  • Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Put command elements like app bars at the top of the app window.
  • Use up to three columns/regions.
  • Show the search box.
  • Put the navigation pane into docked mode so that it always shows.

Tip

With Continuum for Phones, users can connect compatible Windows 10 mobile devices to a monitor, mouse and keyboard to make their phones work like laptops. Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the size class.

Effective pixels and scale factor

UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. Users can override the default value and by going to Settings > Display > Scale and layout settings page.