Defining layouts and views (HTML)
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
You can build Windows Runtime 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 phone, a tablet, or a large HD monitor, when they flip their screen to portrait, and when they resize the app. If you plan for the devices and views your users choose, your UI can elegantly reflow to match the user's choice.
.png "Fullscreen landscape, fullscreen portrait, and resized narrow width views")
Specifying the UI of a Windows Runtime 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 app 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 or resized
- 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 Runtime app requires familiarity with HTML, JavaScript, and CSS.
In this section
| Topic | Description |
|---|---|
You can define app layouts for any window size or orientation. |
|
When you design an app to look good and function well at any window size, you must choose if you want to create additional layouts to complement the default full-screen horizontal layout. |
|
You can help your users be more productive by allowing them to view multiple independent functions in separate windows. |
|
To provide the most flexible and adaptable user interface for the users of your Windows Runtime 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. |
|
You can use the layout pattern described here to lay out UI elements on your app pages. Following a consistent pattern for margins, page headers, gutter widths, and other such elements maintains unity across apps and helps people easily understand interactions across the system. |