Responsive design and form factors

Applies to Windows and Windows Phone

Store apps are at home on desktops, laptops, tablets, and phones. Design your app to handle all these different form factors gracefully. Your users can move between different devices, switch input method, change the screen orientation, or shut everything off and on, and your app needs to move, change, and react with them.

 

Alarms app on different form factors

 

Fluid views of your app

Windows puts users in charge. You want your app UI to shine on any device, using any input mode, in any orientation, in whatever circumstance the user decides to use it.

When you design your app with fluid views, your app UI reflows gracefully in response to changes in the orientation of the user's monitor, their mobile device, or their input method. Windows manages these behaviors for you.

Orientation

Alarms app in landscapeLandscape   Design for landscape view so your app looks good on all form factors. Consider how different form factors affect the landscape view. New types of devices can mean changes to screen real estate.
Alarms app in portraitPortrait    Remember that some devices are more commonly used in portrait orientation, and many devices rotate. Optimize the layout of your content when in portrait view and retain functionality whenever possible. Switching from landscape to portrait changes the app width by almost a third so it's important to think about how the design will look in a vertical format.

 

  • Applies to Windows

Fluid layout with multiple apps

Windows: Design your app to embrace the flexibility of resizable windows. The key to looking good no matter how the user resizes your app is to define layouts for specific, unique views and use flexible controls that arrange and distribute content automatically.

Calculator app, Bing Weather app, and Great British Chefs app, resized, side by side on the screen

 

Built-in graphical scaling

If users can access your app on multiple form factors, does that mean you have to design a different UI for every potential screen size Windows works on? That's a lot of different screen sizes! The answer is, not necessarily. Built-in scaling means your app and content always look great, whether on a small 7" device or on a big 30" monitor. You just need to use a fluid layout and make sure the graphics in your app look good when scaled.

For more info, see Guidelines for scaling to pixel density.

photo at 2420 pixels and at 920 pixels

 

  • Applies to Windows

Input patterns

Windows: When you design your app for touch interactions, you get support for pen, mouse, and keyboard interactions for free. Your users can switch from one input method to another and not miss a beat of the app experience. Plug a keyboard into a tablet? No problem. Your app responds consistently and predictably to your users' choices.

For more info, see Touch interaction design and Responding to user interaction.

Device capabilities

Great apps take full advantage of the devices they run on. Windows 8.1 has built-in support for these device capabilities.

sensor iconAccelerometers and other sensors  Devices come with a number of sensors nowadays. Your app can dim or brighten the display based on ambient light, or reflow the UI if the user turns the display, or react to any physical movement. Learn more about sensors.
geolocation iconGeolocation   Use geolocation information from standard web data or from geolocation sensors to help your users get around, locate their position on a map, or get notices about nearby people, activities, destinations. Learn more about geolocation.
camera iconCameras   Connect your users to their built-in or plugged-in cameras for chatting and conferencing, recording vlogs, taking profile pics, documenting the world around them, or whatever activity your app is great at.
proximity iconProximity   Let your users connect devices, by physically tapping the devices together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games). Learn more about proximity gestures.

 

When planning your app's features, consider the devices your app might run on. Are some device capabilities required for your app to work well? Or can you get by without some? You have to declare which capabilities your app supports in your app manifest, but in the app itself, you can create fallbacks for optional capabilities. For example, let's say a travel mapping app lets users track their travels on a map, tag sites, include journal comments, send to social media, and add photos or videos from their trip. Geolocation would be a mandatory capability, but camera support could be optional. If the device doesn't have a camera, users could upload videos or photos taken on another device. Great apps cover all the options.

Roaming data

What if your users go from their work desktop to their tablet at home? Their files, app state, and app preferences go home with them. They can pick up right where they left off, across different machines and user sessions.

Learn more about roaming and Managing app data.

Related topics

Guidelines for window sizes and scaling to screens
Guidelines for resizing to tall and narrow layouts
Choosing a layout

 

 

Show:
© 2014 Microsoft