Responsive design and form factors
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.
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.
|Landscape 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.|
|Portrait 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.|
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.
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.
Great apps take full advantage of the devices they run on. Windows 8.1 has built-in support for these device capabilities.
|Accelerometers 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 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.|
|Cameras 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 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.
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.
- Guidelines for window sizes and scaling to screens
- Guidelines for resizing to tall and narrow layouts
- Choosing a layout