You can build Windows Store apps that provide a fluid and harmonious experience across a variety of form factors, display sizes, and view states through consistent and predictable management of the user interface. You want your app to look great when users view it on a tablet or a large HD monitor, when they flip their screen to portrait, and when they change the view state. If you plan for the devices and views your users choose, your UI can elegantly reflow to match the user's choice.
Specifying the UI of a Windows Store app using JavaScript revolves around two primary factors: the views that the app supports and the layouts that it requires. You use Cascading Style Sheets (CSS) to get the job done.
CSS You describe and manage your user interface through standards-based CSS, which separates content from presentation; that is, it separates what is shown from how it's shown. This separation lets you deliver a consistent, usable, and enjoyable user experience that supports multiple devices, form factors, screen sizes, user preferences, and view states.
Layouts Layouts are mechanisms by which your app can accommodate the views it supports. You style, structure, and present your app content through Cascading Style Sheets, Level 3 (CSS3) layout modules such as grids, multi-columns, regions, and flexible boxes that can adapt to the way a user chooses to view the content.
An application that incorporates semantic zoom functionality can specify semantic thresholds where, depending on the granularity and quantity of information being presented, the UI can switch between a grid layout and a linear layout.
Views A view is the way in which app content is accessed and manipulated by a user.
- Landscape or portrait orientation
- Full screen, snapped, or fill view states
- Pannable, zoomable, scaled or resized UI surfaces
- Specific UI elements, like search results pane or a folder structure
Defining layouts and views for a Windows Store app requires familiarity with HTML, JavaScript, and CSS.
In this section
| Topic | Description |
|---|---|
|
You can define app layouts for each of the new Windows UI view states, including portrait, landscape, snapped, and fill. | |
|
To provide the most flexible and adaptable user interface for the users of your Windows Store app, you first need to decide on the layout mode most appropriate for your content and the views through which the content can be consumed. This topic describes the CSS3 layout features supported by Windows Store apps in Windows 8. | |
|
These guidelines can help you build applications that provide an elegant experience across form factors, display sizes, and view states through consistent and predictable management of the user interface. | |
|
These guidelines help you design forms that provide a great touch experience while optimizing the use of screen real estate and reducing the need to scroll. | |
|
These guidelines help ensure that your app looks great when Windows needs to resize it. Windows automatically resizes your app when the user changes the view state or calls up the soft keyboard. | |
|
These guidelines help you design the UI of your Windows Store app so that it adapts well to the snapped and fill view states. | |
|
Windows scales applications to ensure consistent physical sizes for UI elements regardless of the pixel density of the screen. This topic outlines how to build an app with a layout and images that look great when scaled. | |
|
This topic describes best practices for how to design and build a layout for your Windows Store app that scales to the different sizes of screens supported by Windows 8. | |
|
Describes best practices for interacting programmatically with the touch keyboard in Windows Store apps. |
Related topics
Build date: 11/28/2012
