With Windows 8, you can use HTML to build Metro style apps. What you might not realize is that by using HTML controls directly, you automatically get the new Windows 8 experience. We have done work in HTML so that you can build industrial strength apps that have touch capability while still maintaining the great flexibility of using HTML. We want you to quickly and efficiently build apps that shine.
In particular, we want you to continue to take advantage of common HTML controls like
The Windows 8 team wants to make it as easy as possible for you to create great apps that your users will love to use. As a case study, we take one of the simplest controls,
The Windows 8 button
If you’ve seen some of our talks and design guidelines, you already know some of the design guidelines of a great Metro style app:
- Apply Metro style look and feel
- Design for touch
- Code with fundamentals (for example, globalization and accessibility) in mind
- Be fast and fluid
The updated HTML controls in Windows 8 help you follow these design guideline in a friction-free manner because we want you to fall into the pit of success:
The pit of success: In stark contrast to a summit, a peak, or a journey across a desert to find victory through many trials and surprises, we want our customers to simply fall into winning practices by using our platform and frameworks. To the extent that we make it easy to get into trouble we fail.
-Rico Mariani, Partner Architect in Internet Explorer
So, let’s examine how using
Apply Metro style look and feel
We wanted to make it easy for you to create a user interface using the Metro style design, while providing you the flexibility and power to customize that look to your app’s own unique brand and needs. If you tried creating a Windows 8 app with JavaScript and HTML using the VS templates, you noticed that all the standard HTML controls like
<button>Windows 8 Rocks!button>
Figure 1: Button by default in Internet Explorer 10 |
Figure 2: Button in Windows Metro style apps |
How does this work behind the scenes? Windows 8 has made two improvements here: First, we enhanced the styling capabilities provided for the HTML controls like
New HTML controls infrastructure
We have reworked how controls are built from the core to give you more flexibility for styling the controls. In fact, we use the same improvements to styling to define the default look and feel for all HTML controls in Windows 8.
Most browsers today render controls using previously generated images. Whenever you apply a style to a control, the browser discards the hardcoded image, re-renders the control in a simple baseline look, and then applies the style you want on top of this.
For the
<button>Normalbutton>
<button style="background-color: red;">Styledbutton>
Figure 1: Normal and styled buttons in Internet Explorer
The default look via hardcoded image has limitations in terms of styling. You can’t simply style directly onto of the new styles and it’s not immediately obvious what will happen to styling when you apply a style to a previously generated bitmap. Therefore, Windows 8 no longer provides the original look of HTML controls via a hardcoded image. We have rebuilt all HTML controls from the ground up to be rendered using vector based primitives, CSS, to allow you to directly style on top of the control.
We’ve added the ability for you to access the inner parts of the controls. For a control like the checkbox, you can select the inner check mark using the -ms-check pseudo-elements and style this inner element separately from the box.
input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}
For a full list of parts we’ve added to the HTML controls see Quickstart: styling controls (Metro style apps using JavaScript and HTML).
If you play with the CSS styling a little more, you can now get some pretty interesting styles out of the controls that weren’t possible before.
Figure 2: Styled checkbox examples
Take a look at the Common HTMS controls sample and check out Quick Start: styling controls for more info.
Another advantage to building all our controls out of CSS primitives is that we get great scaling. This is particularly important because Windows 8 supports a rich ecosystem of devices and it is imperative for the controls to scale for all screen resolutions and DPIs.
Using CSS primitives allows all our controls to automatically scale well and display more crisply for all screen resolutions and DPIs.
Figure 3: CSS drawn images remain crisp in every resolution
So, if you do choose to customize your controls, make sure you continue to use vector-based technology like CSS primitives or SVG. Using raster images will leave the controls looking pixelated when scaled and your app won’t look polished in all Windows 8 devices.
 Figure 4: Image looks blurry when minimized
|
Figure 5: Image looks pixelated when enlarged |
For more info on how to handle scaling, take a look at the Scaling SDK sample.
Internet Explorer 10 and HTML for Windows 8 shares the same HTML platform. This means all HTML controls for Internet Explorer 10 are also built using CSS and webpages, so they can also scale crisply across different screen resolutions and DPIs in Windows 8!
Metro style look by default
We provide the new Metro style look of all controls via a CSS style sheet. We want to transparently show how the new Windows 8 Metro style design is implemented and enable you to integrate your own brand into it, such as swapping out colors on the controls to use your own app’s branded color scheme. Take advantage of that flexibility! Here’s a link to Theme roller SDK sample that makes it easy to colorize the controls.
Now, to get the default look, you only need to pick one of the two default style sheets; the only difference between them is the color schemes they are based on. ui-dark.css contains control colors best suited for a dark background and ui-light.css contains control colors best suited for a light background. For apps that mostly display images or video, we recommend using the dark style sheet, and for apps that contain a lot of text, we recommend using the light style sheet. (If you're using a custom color scheme, use the style sheet that looks best with your app's look and feel.) You choose an app color scheme to start with by simply referencing one of these style sheets to your project using this HTML:
<head>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
—Other header content -->
head>
The easiest way to learn how to apply and build on top of the default style is to actually open the CSS default style sheet and look at the CSS styles in it.
If we go back to the original button example, when you have the same line of code as we saw earlier in a Metro style app, this is now what you get:
Figure 6: Normal and styled buttons
In Metro style apps, only the styles you applied are now overwritten. You can now easily brand your app while maintaining the new Metro style look and feel.
As you can see, you can now better style your controls and they will automatically scale crisply across multiple screen resolutions and DPI. We want to make it easier for you to get the look and feel you want in your app while maintaining the Metro style look and feel.
Design for touch
To help you create great apps, we wanted to make it simple to create a user interface that works for touch, mouse, and keyboard, and provides your users with the familiar set of interactions they can count on working consistently across the system.
Today, HTML controls already have great keyboard and mouse support. Because touch is a new interaction mode, we needed to enable better touch support across all the HTML controls. To code better for touch, you must first understand touch input’s unique challenges.
Finger is not precise
A finger is a less precise input mechanism compared to the pixel-precise mouse pointer.
|
Figure 7: The image shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm! |
 |
To improve the precision of a users’ tap, Windows 8 HTML platform added these features:
- Controls are sized for touch
By default, Metro style HTML controls are sized to best fit the average fingers. This enables users to confidently target the controls. 7x7 mm is a good minimum size if touching the wrong target can be corrected in one or two gestures or within five seconds. In our default style sheet, all button controls have a minimum height and minimum width that gives you a minimum area of 7x7mm. Here is an example with the values from the default style sheet.
button, input[type=button], input[type=reset], input[type=submit]
{
min-height: 32px;
min-width: 90px;
}
- Touch retargeting
The Windows 8 touch targeting helps users by making the system find the closest control within the contact geometry and retargeting the touch point towards it.
- Touch disambiguition
The touch disambiguation engine added smarts in the system to help better determine where the users targets when the finger covers more than one control.
No aim feedback
When using a mouse, users can first aim the cursor, ensure that the 1pixel size point is accurately on what they want to activate and then click. But with touch, you have to hover over the screen with no feedback to indicate whether what you have hovered on is accurate. When you make contact with the screen, you immediately activate the UI. This means, with a mouse you get to ready, aim, then fire. Whereas with touch, you simply fire. Because you don’t get to aim, the margin of error for touch is much larger.
To allow users to use touch with confidence, Windows 8 has defined a set of interactive visual states for controls that indicates when the users are about to invoke a control. For example, the user will see the same visuals to let them know what was activated and again when they successfully cancel the activation if they change their mind. Windows 8 has baked these visuals directly into the controls via the default style sheet. Windows 8 has done this by mapping CSS states to the touch interaction states.Here’s an example of the CSS mapping for
Figure 8: CSS mapping of touch interaction states
Let’s take a closer look at the set of interaction states and how we baked the visuals into the controls.
Pressed state
Controls now give strong visual feedback when pressed, so that the user has confidence in which button the system has targeted.
Figure 9: Button touch state
When a user presses the button, we apply both :hover and :active CSS pseudo-states to the button, and provide visual feedback by styling background color and font color in CSS:
button:hover:active {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
We mapped both :hover and :active for touch down, and not simply :active state, so we can use a programming model that is similar to mouse. This way, you can easily use the same code for both input types. When you use mouse to click on a button, the mouse is usually already on top of the button and is already in the :hover state. When you click a button with the mouse, an additional :active is added.
Cancelling
If the user sees that they have touched the wrong button, they can drag their finger off and lift outside to cancel. As long as the finger is off the button, it goes back to its normal state to indicate that the interaction will be cancelled.
To achieve the deactivated visual, we keep :active applied to the button and invalidate :hover state, when the user dragged off the button. Because there’s no style for :active state itself, the control falls back to the normal style, which looks like the button has return to its resting state. This gives the user a visual indication that the button action was cancelled. This is really the existing behavior with mouse. In IE9 this was achieved by a private theme bitmap switching. In IE10 we expose the change through public CSS states so that you could achieve the same effect when you stylize the control.
When styling controls, make sure you don’t just style the :active state for your pressed style, as that state represents the cancel behavior and therefore must be the same style as the normal state. The correct state to use for activate is :hover:active state.
Figure 10: Button cancel state
You don’t want users to worry about where they lift off their finger to avoid accidentally activating a different control. For example, if the OK and CANCEL buttons are close to each other, and the user touched the OK button by mistake and wanted to drag off, they shouldn’t worry about accidentally triggering the CANCEL button. The CANCEL button must not light up with its active style in this case.
This works by default in the HTML platform because because
More than a click
Touch enables users to have more than one pointer on the screen at any time; this is known as multi-touch, and the direction and speed of touch input, known as gestures, have specific meaning. For example, a finger touching one side of the screen and moving horizontally across the screen is known as a swipe.
With multi-touch in the Windows 8 HTML platform, we now allow more than one control to have the :active state and click events at same time, so when a user touches the screen they can activate more than one control at the same time. A simple control like the
Additionally, the gesture detection allows us to recognize the different gestures and assign meaning to them for HTML controls. For example, a swipe on top of a button is quickly translated to panning of the page. And a swipe on top of the slider, , is interpreted as input for the control. This work will help apps to fluidly react to touch gestures regardless of what controls you happen to land on.
By making all our HTML controls default to a great touch experience via good visual indicators, built in touch targeting enhancements, support of multi-touch and fluidly reaction to touch gesture, your HTML Metro style app will automatically be touch enabled if you use the controls and follow the tips and tricks discussed here!
Fundamentals: globalization and accessibility
A great app should reach as many people as possible. This means the app needs be globalized and made accessible. To help you reach this goal, we have build these fundamental pieces into all HTML controls.
Font support
We built the right font support into the HTML controls. Even if you don’t plan on localizing your app, your app will still be able to display localized text in any of the languages Windows 8 supports. This is particularly useful whenever your app has to display text based on users’ input, for example, in a text box control. Your app will be able to correctly display the text because we’ve done the work to ensure that the control uses the font that supports those characters. We also provide the the preferred Metro style font that matches correctly to the localized version of Windows. Windows selects the preferred Metro style font for all languages. In short, we take the guesswork out of font support.
If you’d like to know how we did it, you can simply crack open the default style sheet again to see that, for many languages, we automatically set a list of fallback fonts. In the next example, for Japanese, the first font selected is Meiryo UI. But if your app has any Unicode characters that the Meiryo UI font doesn’t cover, then the next fall back font is Segoe UI, and if that is not sufficient, we use Ebrima, and so on. Therefore for most scenarios, your characters will be covered by the Windows Metro style preferred fonts. Even if we don’t have a default font for a particular language, we default to the fall back font in the web platform. Therefore, your users will never see placeholder characters in your controls!
body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja),
.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja),
.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}
Also, as you can see from the previous example, we didn’t only add this to the
element or just the HTML controls. We are also providing a list of typography styles that you can apply to your app content so that you can get this smart font selection automatically. For more info, see WinJS CSS classes for typography.Picking the right resources
We have created a resource loader that makes it easier for you to localize your apps. Use it to load the right set of localized strings for your app as works great for all the HTML controls. The resource loader provides fallback mechanism so that you don’t have to worry about the matrix of languages you need to support. You can now declaratively reference your resources in your HTML and resource loader automatically picks the right resource for you.
<button data-win-res="{textContent: ‘string2’}">OKbutton>
Built-in accessibility
To help your app reach a broad set of audience, all HTML controls have accessibility infrastructure built in.
First, because all HTML controls have semantic meaning, we built in narrator and screen reader support. The goal of a screen is to identify and interpret onscreen visuals for visually impaired users. For a