You can optimize for the window size by adjusting the margins and size of UI elements. In this example design for a photo app, the photo app repositions its content on larger screens. When the app translates to a larger window, elements can take advantage of the wider window width. In this example, the smaller window stacks elements vertically. You can alter the location and position of UI elements to make the most of the window size. To create a responsive UI, we recommend checking out the UWP controls. Many UWP controls automatically implement these responsive behaviors. Here are six responsive design techniques you can use to customize your app's UI. When you optimize your app's UI for specific screen widths, we say that you're creating a responsive design. For example, if you place navigation elements at the bottom of the screen, they'll be easier for phone users to access-but most PC users expect to see navigation elements toward the top of the screen. The universal control library works with all input types (touch, pen, keyboard, mouse), but you can still optimize for certain input types by re-arranging your UI elements.

Your app can detect which capabilities are available and enable features that use them.

For example, laptops are likely to have a location sensor and a camera, while a TV might not have either. To take advantage of devices' capabilitiesĬertain devices are more likely to have certain device capabilities. For example, a shopping app might display one merchandise category at a time on a tablet, but show multiple categories and products simultaneously on a PC or laptop.īy putting more content on the screen, you reduce the amount of navigation that the user needs to perform. You can customize the app to display more content when the screen is above a certain size.

If you design an app to look good on a device that has a small screen, such as a tablet, the app will be usable on a PC with a much bigger display, but there will probably be some wasted space. To make the most effective use of space and reduce the need to navigate So, why would you ever want to customize your app's UI for a specific device family? UWP apps use effective pixels to guarantee that your UI will be legible and usable on all Windows-powered devices.

Breakpoints responsive design examples