Using HTML controls to create great Metro style apps

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 <button> so that you can create great Windows 8 experiences with your existing expertise. Windows 8 enables this with new implementations of the standard HTML controls that have Windows 8 experiences built into them. By default, all these standard controls have the new look and feel of Windows 8, a great touch experience, and strong localization and globalization support. By using these standard HTML controls, you can build great Metro style apps your customers will love, while still maintaining the flexibility you want from HTML.

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, <button> , and walk you through how the new <button> in Windows 8 improves your productivity. With the tips and tricks discussed here, we’ll help you to get the most out of the HTML for Windows 8 to create a great Metro style app.

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 <button> enables your apps to fall into the pit of success and naturally achieve the traits of a great Metro style app.

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> come with the Metro style design by default, as seen here:

<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 <button> to give you more flexibility than ever before via CSS to provide visuals for the different parts and visual states that you see in controls. Second, we provided default Metro style visuals for all the HTML controls via two out-of-the-box default style sheets that are part of the Windows Library for JavaScript (WinJS) and included by default in all the VS Templates.

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>, you can see that even though you have only applied a background color, the second button now has a border with a 3-D bevel look. This 3-D border is part of the baseline look:

<button>Normal</button>

<buttonstyle="background-color: red;">Styled</button>

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.

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.

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>

<!-- Dark Style Sheet reference -->

<linkhref="//Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet">

<!-- or Light Style Sheet reference -->

<linkhref="//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.

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 <button>:

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:

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 <button> captures touch input. Therefore, as long as the touch down is on the button, the user can comfortably drag off without worrying about triggering something else by accident.

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 <button> can be used for scenarios like keys on a keyboard app or controls for a game!

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, <input type=”range”>, 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!

Also, as you can see from the previous example, we didn’t only add this to the <body> 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.

<buttondata-win-res="{textContent: ‘string2’}">OK</button>

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 <button>, a screen reader can let the end user know that the app expects an action. and a similar looking button built using a <div> doesn’t. So in order for screen readers and narrator to work properly with a <div>, you need to add your own ARIA attributes.

Secondly, we ensure all HTML controls continue to support high contrast. High contrast is designed for people who have vision impairment. High contrast color schemes can make the screen easier to view for some users by increasing screen contrast with alternative color combinations.

We have built these colors into the default style sheet and the controls automatically switch to high contrast colors when Windows is set to appear in high contrast themes, enabling your app to be high contrast-compliant by default. So even if you have styled and updated the colors of the default intrinsic controls, as long as the selectors you use are the same specificity, Windows ensures that the right high contrast colors shows up. You can learn more about this from our BUILD talk Stand out in styling for your HTML app.

We achieve high contrast switching by simply adding a media query for high contrast mode and defining all the necessary colors for each of the intrinsic controls in the default style sheet. If you are curious what these colors are, simply open the default style sheet and take a look.

@media (-ms-high-contrast) {/* high contrast definition */ }

By including great font support, a resource loader to help pick the right localized resources, and building in accessibility we make it as easy as possible for your apps to reach the broad set of Windows users.

Make your app fast and fluid

To ensure your HTML app will perform great across all Windows 8 devices (including ARM), we want to make sure the building blocks of your apps, the controls, perform great.

Windows 8 includes an HTML engine that powers both browsing experiences (the Metro style one and desktop one) and Metro style apps that use HTML5 and JavaScript. The common HTML engine provides consistently fast, safe, and powerful support for Web standards and the Web programming model, for both browser experiences and for Metro style apps. This means HTML Metro style apps have all the performance benefits of IE10. Here are some highlights that affect HTML controls:

Direct2D hardware acceleration

Because the controls are native to the HTML platform, we are able to take advantage of the HTML platform’s Direct2D hardware acceleration. We can now use the GPU for all graphics and text in your Windows 8 HTML app. The GPU can use specialized hardware to efficiently update the screen. By using the GPU for visual rendering, we free up the CPU to perform other operations like JIT(Just-in-time) compiling of your JavaScript code that can further improve the performance of your app.

Independent touch

One of the areas we enhanced the performance of the web platform is panning and zooming. We’ve done a lot of work to make sure the controls work seamlessly with the optimizations we made for panning and zooming. For example, if you use a standard button control on a panning region and the user starts to pan, the system will process the touch action on the panning region and the button in parallel. Therefore, end users will get no slow down because we have extra controls to process and panning actually begin the pan just as quickly as it would have if there weren’t a button there. We worked to ensure using the controls don’t cause any speed bumps unlike what might have happened with some simpler implementations of controls.

Touch robustness for controls

To ensure great performance for touch, we made adjustments to the system so it is more robust. One example is that in <button> we introduced a delay in bubbling up the press state to allow other touch-related gesture like tap or swipe on the <button> to be processed first. This way, we don’t have to immediately do the complicated and CPU intensive parent layout calculations for every interaction. The result is that if the users intend to only tap the button, then the button will move in and out of the press state quickly and back to normal without needing the parent containers to update its layout. Small adjustments like this help the overall robustness of your HTML apps.

Integrated tooling

In addition to all the great platform features we have outlined here, we also provide first class tooling for the HTML controls.

Here are highlights of some of the tooling enhancement in our tools Visual Studio and Blend:

In both Visual Studio and Blend, you have first class intellisense for HTML, CSS and JavaScript. For example, in Visual Studio when you indicate you want to set a background color, instead of just text-based intellisense, we now have a color picker.

Figure 11: Inline color selector in Blend

In Blend, you can now drag and drop all the controls from the toolbox directly onto the design surface. Additionally, you can now lay out and resize the controls directly on the design surface. This way you can visually lay out the controls in your app.

Figure 12: Button in Blend design surface

In Blend, you can style the controls using the styling panel.

For example, you can use the built in color picker to set background and foreground color.

Figure 13: Styling panel with color picker in blend

Or you can do more complicated actions like setting transitions on the control.

Summary

In this post, I talked a lot about the <button> control, but all the great functionality that applies to <button> applies to all the other native HTML controls too.

We made lots of investments to fine tune HTML controls for you to build Metro style apps. These controls now work great on a wide variety of form factors, can bring users a better experience, and increase the reach of your app. Some of the major apps available on the Release Preview mainly use HTML controls, such as the Windows 8 App Store and the Mail, Calendar, and Photo apps. By using these controls your app can get the Metro style look and feel for free and you can focus on the core value of your app.