Click here to Skip to main content
Click here to Skip to main content

Tagged as

What Makes a Well-Designed Windows 8 WinRT App?

, 4 Jun 2013 CPOL
A Chapter excerpt from Windows 8 Apps with HTML5 and Javascript.
Windows 8 Apps with HTML5 and JavaScript

By Dan Shultz, Joel Cochran, and James Bender, authors of Windows 8 Apps with HTML5 and JavaScript

There’s not a blueprint or "right way" to create a Windows 8 app or a checklist of features to implement that will officially qualify your application as a Windows 8 app. Windows 8 is about making an experience feel comfortable and familiar, and you, the creator, discovering what it takes to deliver it. In this article, based on chapter 3 of Windows 8 Apps with HTML5 and JavaScript, the authors discuss techniques and built-in elements that will help enable you to build a successful Windows 8 style application.

You may also be interested in…

What exactly can we do to make sure that our application adheres to Windows 8 principles and gives the user a quality experience? Let’s look at tools and techniques that are available to you, beginning with general font and typography guidelines. We will then look at the navigation models as well as some built-in controls that are available right out of the box.

Typography and Windows 8

Microsoft has redesigned its interface with a focus on clean design and typography using the International Typographic Style, also referred to as Swiss Style Graphic Design. The Swiss Style was originally developed in Switzerland in the ‘50s and emphasized simplicity and readability. Simple sans-serif fonts are traditionally used in Swiss Style design along with clean lines and simple, clear imagery. The elimination of extraneous elements is also an important part of the Swiss Style.

Figure 1 An example of the Swiss Style. Its cleanliness and readability makes it well suited for directional signage, especially in airports and other transportation systems.

If you’ve ever been in an unfamiliar place, especially if it’s a place that doesn’t use your primary spoken language, you may have already appreciated Swiss Style design. Most airport signage makes good use of the Swiss Style specifically for its simplicity and ease of understanding where there may be language barriers.

Microsoft was partially inspired by this clean, modern design style when they were developing the unique look of Windows 8.

Segoe UI

The actual font of choice in the Windows 8 look is Segoe UI—a font very similar to the one used in international signage. So when you’re experiencing a Windows 8 application, you’ll notice that a lot of the friendliness and ease of use feels very familiar.

The Segoe UI font is part of the Segoe font family that was designed by Steve Matteson/Agfa and specifically licensed to Microsoft for use in many products in addition to Windows 8, including the Zune and Windows Phone 7. Segoe UI is a sans-serif font very similar to the Frutiger font family developed in the mid ‘70s.

Segoe UI is the recommended font for UI elements and headings within a Windows 8 application. The Calibri font is recommended for editable elements such as email and chat controls, while the Cambria font is recommended for large blocks of readable text, such as text content for magazines or applications with written articles.

Figure 2 Example of the SegoeUI font.

Windows 8 font guidelines

Four different sizes of text in points (pt) are used in UI elements:

  • 11 pt Segoe UI Semilight for most text.
  • 9 pt Segoe UI, for small text elements such as captions on buttons.
  • 20 pt Segoe UI Light for text elements that need to draw user attention.
  • 42 pt Segoe UI Light for very prominent UI elements

You’ll want to make sure your larger elements fit on one line. There may be situations where 20 pt Segoe is just too "horsey" for your page. In these cases, use 16 pt Segoe UI Semilight, but make sure not to mix 20 pt and 16 pt on the same page; their similarity in size will be confusing for your information hierarchy.

Some other import things to remember when you’re dealing with the typography of your application:

  • Don’t italicize
  • Text opacity is 100%
  • Text opacity is 80% in hover state
  • Text opacity is 40% in pressed/active state (60% for colored text).

Also, as mentioned above, Cambria is the font of choice for reading text. In the print media industry, it is standard to use a serif font such as Cambria for body text. Here are some important things to remember when styling reading text, such as text within a magazine article:

  • Keep the column widths comfortably short—for very short articles, consider using the "alphabet and a half" rule.
  • Use the Windows 8 typographic grid.
  • For longer articles, make sure and break text up into sections and chapters.

Since we’re talking about font specs, let’s take a look at the HTML markup required:

<span style="font-face:Segoe UI;font-size:20pt;">Heading 1</span>

Or more correctly, referencing it in a style sheet (.css) file:

<span class="heading1">Heading 1</span>

.heading1 {
    font-size: 20pt;
    font-family: 'Segoe UI';
}

The Visual Studio templates for HTML/Javascript projects already come with two stylesheets built in: ui-dark.css and ui-light.css. These two stylesheets contain, obviously, recommended styles for applications using either dark, or light backgrounds and already contain many of the classes and font-specs you’ll need. So make sure to be familiar with the styles that already exist in these stylesheets before you start writing your own.

Advanced typography tips

Even though the use of Segoe UI gives your application instant recognition as a Windows 8 Windows 8 app, your app may have specific font requirements depending on its branding needs. Or you may find that Segoe UI just plain limits the uniqueness of your application. Should you decide to use third-party fonts in your application, make sure to adhere to the same sizing standards, and keep in mind that your typography should help to reinforce your application’s information hierarchy. Also remember that many third party fonts may not have the degree of hinting as Segoe UI, so make sure to view them at the specific font sizes you’ll be using. And make sure that the font license allows it to be embedded within an application.

If you do use Segoe UI, think about incorporating some of the OpenType features to your text, especially kerning. Kerning refers to the space between letters. By using the –ms-font-feature-settings "kern" setting to your styles, you’ll see an improvement in the letter spacing, especially at larger font sizes. Awkward letter pairs will automatically have space added/removed to improve the appearance and readability of the text.

<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'kern' 1;">
    You Should Kern Your Text
</p>
Normal Kerning Applied
Figure 3 Examples of text without any kerning adjustment and the same text with –ms-font-feature-settings kern setting set to true. Notice the tightening of space after letters "Y" and "T" when they are followed by letters that give the appearance of extra space. The Segoe UI font takes care of pair-kerning issues such as these when the kern setting is applied.

Improving Your Typography With Unicode

There are several Unicode symbols that can greatly improve the quality of your text, by using the proper characters, rather than the clumsy ASCII values, for things like quotes and apostrophes.

Here’s a list of characters you’ll want to consider replacing the ASCII values for:

Character Normal Kerning Applied HTML character ref
1/2 symbolDouble quotesTime semicolonTimes symbol 2 is 1/2 of 4"quotes"It is 3:002x2 = 4 2 is ½ of 4"quotes"It is 3∶002×2 = 4 &#x201C;, $#x201d;&#x201C;, $#x201d;&#x2236;&#x00D7;

Customization

If your application contains magazine-style articles, or large amounts of text, you may want to consider allowing the user to customize the reading experience. Some readers may prefer to view dark text with a light background for high readability, or light text on a dark background to avoid the strain from the brightness.

A good concrete example of this would be a sample NetFlix application I discuss in Windows 8 Apps with HTML5 and JavaScript. In this app, we have a scrollable grid of movies that are retrieved via the NetFlix API and, when we drill into a particular movie, we get to its synopsis. This area can contain several paragraphs of readable text, so we want to be sensitive to our user, who has now switched from navigating and interacting, to now reading the content of our app.

Fortunately, customizing the user experience could be as simple as swapping the dark and light stylesheets that come with the Windows 8 project templates. Depending on the mode of navigation of the application, we could do this "brute-force", swapping between similar pages with different style sheets or just handle it programmatically via JavaScript:

<head>
//default stylesheet
<link id="myStylesheet" rel="stylesheet" type="text/css" href="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css">

<script type="text/javascript">
function swapStyleSheet(sheet){
   //Swap out this page’s stylesheet
   document.getElementById('myStylesheet').setAttribute('href', sheet);
}
</script>

</head>
<body>
<button onclick="swapStyleSheet('//Microsoft.WinJS.1.0/css/ui-dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet(‘//Microsoft.WinJS.1.0/css/ui-light.css')"> Light Style Sheet</button>

Figure 4 Example body text using the default Windows 8 Light stylesheet

Figure 5 Customizing the readability by swapping the stylesheets. Page text readability is completely customizable, using any available CSS3 capabilities.

We’ll look at more code for this application when we discuss navigation, but for now one caveat for using dark text on a white background is that you may want to avoid a purely white background and instead set the background color to 5 to 10 percent grey, just to soften the contrast. Even on a page with traditional HTML controls it may be a good idea to keep away from the stark white background, just so that the white HTML input controls "pop" more, or are more instantly recognizable as editable areas.

Or you may also want to give the user greater customization and allow the user to be able to specify the fonts and sizes, much like the options that are available on many e-reading devices. If you do want to implement this type of elaborate customization, you’ll probably want to get an e-reader and get a real feel for what sorts of reading options these users are accustomed to.

Navigation

We’ve already talked about using the templates built into Visual Studio – one of the features built into most of the templates is navigation. For implementing navigation in a Windows 8 application, there are two types of navigation models: the multi-page navigation model and the single-page navigation model.

Multi-page navigation model

The simplest navigation model is the multi-page navigation model. If you’ve written a web page in the last 15 years, you’ve probably used it. The HTML hyperlink is the most common form of navigation in most HTML web applications. The following code creates a hyperlink that navigates to a page titled content.html.

<a href="content.html">Main Content Page</a>

It's a relative link, so the system assumes that content.html is a local page that’s in your app relative to the current document. If the link is on a page at /home/index.html, clicking the link takes you to /home/content.html.

In a Windows 8 Application, you can specify a fully qualified URI for a local file in your application by using the ms-appx URL:

ms-appx://package/path-to-file

In fact, you don’t even need the package name:

ms-appx:///path-to-file

Here’s a sample multi-page hyperlink, using a fully qualified URL to reference another page within the application:

<p><a href="ms-appx://myapplication/content.html">Main
Content Page</a></p>

This multi-page navigational model is simple and allows for traditional HTML applications to easily be ported into a Windows 8 HTML application. In fact, that’s one of the great stories about Windows 8 HTML apps that isn’t really being played up as much as it should—the fact that portability of traditional web applications into a Windows 8 HTML project is fairly seamless. As a web developer, one of the things that first impressed me about Windows 8 was the ease of running a traditional HTML application within a default new Visual Studio HTML project. After merely adding the traditional app’s .html, .css, and .js files to the new, empty application, the only thing that prevented it from running as a full-screen Windows 8 app was the fact that the required references to the WinJS JavaScript files needed to be added. Once these three JavaScript includes were added to the page, the application was instantly running full screen, like any other Windows 8 application. Here are the required .js files:

    <!-- WinJS references --> 
    <link href="http://www.codeproject.com/Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="http://www.codeproject.com/Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="http://www.codeproject.com/Microsoft.WinJS.1.0/js/ui.js"></script>
    <script src="http://www.codeproject.com/js/default.js"></script>

Of course, these WinJS requirements exclude the reuse of this HTML code outside of the Windows 8 environment. But the "portability in" story is still nice—I say this as a web developer who originally came across Windows 8 as part of an experiment in HTML portability. By the time I ended up deploying my first application to the Windows Store, I found building Windows 8 HTML apps to be a great developer experience and an excellent environment to polish and master HTML5 and JavaScript skills, even while working in the Microsoft development stack.

Anyway, getting back to the issue of implementing navigation within a Windows 8 application, let’s take a look at the recommended system of navigation: the single-page navigation model.

The single-page navigation model

We’ve looked at the simple multi-page navigation model that performs top-level navigation using HTML hyperlinks. This works well in web pages, but it’s not the recommended method of navigation in Windows 8 for several reasons:

  1. The blank screen "flash" when the next page gets loaded.
  2. The context of our scripts is disposed and then reinitialized. There could be system events being sent to our app but if our script context is in the state where it has been destroyed but not yet reinitialized, we’ll miss the opportunity to handle the event.
  3. In general, single-page navigation will give you better performance and provide an experience more app-like than web-like. Plus with Multi-Page navigation, you’ll need to create your own navigation system, and as we will soon find out, WinJS gives us some great built-in navigational tools. So unless you’re porting in a pre-written application, you don’t want to reinvent that wheel. Also, your app manages its lifecycle in the start page—startup behavior, shut down behavior, handling suspension, and so on. So if you have multiple top-level pages, you’ll have to handle the lifecycle and state of your app in each page. Not very DRY*.

For one last note on Windows 8 navigation, let’s look at the styling of the ubiquitous back arrow. This simple snippet of HTML displays the Windows 8 back arrow using the win-backbutton css class:

<button class="win-backbutton" style=" position: absolute; left: 40px; top: 100px;" aria-label="Back">

Figure 6 The familiar Windows 8 back arrow.

Regardless of the navigation mode, this arrow icon is an immediately understood symbol representing the ability to navigate to the previous screen.

Fast and fluid animations

Movement is an important part of Windows 8 design. Well-designed animations bring a polished, professional feel to apps, and help immerse the user in the application.

  • Use meaning animations to help guide the user throughout your application. Every animation should have a purpose, and cue the user as to what’s next.
  • The animation library has tons of animated controls designed to clarify salient items in your application. Users are familiar with motions learned repetitively via other Windows 8 apps, and are already confident using them, so leverage it in your app.
  • Don’t forget to also provide an alternative, accessible way to convey the same information when you use animation to communicate something particularly important in your app.

Built-in controls

Windows 8 includes a library of built-in controls that give you fluid and consistent animations and touch events are already built in. Here are a few examples:

  • The cross-slide gesture is built into the ListView control, which is built into many of the templates. If you have a very long list, you can enhance it with Semantic Zoom to let users more easily navigate the list.
  • Other view controls, such as the FlipView have animations built in for when the user drags to move between items.

The standard HTML controls like buttons and checkboxes all have feedback built in and execute only on touch/mouse up. More advanced controls such as the rating and slider provide similar built in functionality and also allow users to cancel the action by dragging away. There is plenty of documentation for these controls, as well as many others on the MSDN site.

By default, all of these controls are accessible to you. So make sure you’re aware of all the controls at your disposal, before you think of writing your own—they’re all highly customizable even if they don’t exactly fit your needs. In fact, you’ll always want to customize these controls to fit in with the look of your application. But for the same reason you should use the project templates, you’ll want to get as much out of these controls as you can—don’t reinvent the wheel!—focus your development energy instead on what’s unique to the particular application you’re building.

Figure 7 A small sample of common Windows 8 controls that come with animation, touch and other functionality built right in.

One slightly confusing thing about these controls is that they don’t all exist in the same place, and the markup syntax varies between them. For instance, the "standard" HTML controls all exist in the toolbox—checkbox, button, select box. Dragging them from the toolbox onto the form will automatically add them to the page using the same HTML syntax you’re already familiar with:

        <input id="Checkbox1" type="checkbox" />

        <input id="Button1" type="button" value="button" />

        <select id="Select1">
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
        </select>

These tags obviously generate their according HTML controls, but controls like the progress bar and the range control, which are HTML5 specific, aren’t in the toolbox. You’ll just need to know the know the code to write that’s supported in a Windows 8 HTML application:

<progress id="progressRing" class="win-ring win-large withText"></progress>

<input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50" />

Note that the range control is just a new HTML5 type of input—it’s just the type="range" attribute set on an HTML <input> tag.

How do you know what HTML5 controls you can use? Any HTML5 capability that is supported in IE10 is fair game. A good reference of the HTML5 features that IE 10 currently supports can be found at http://msdn.microsoft.com/en-us/library/hh673546(v=vs.85).aspx.

The last two controls, the Rating control and the DatePicker control are actually controls written in WinJS which also are not in the toolbox, To use them, you’ll need to bind them to a <div> tag

 <div data-win-control="WinJS.UI.Rating" data-win-options="{enableClear: false}"></div>

 <div data-win-control="WinJS.UI.DatePicker" data-win-options="{enableClear: false}"></div>

And finally, in your codebehind, you’ll need to call WinJS.UI.processAll();. Once the application is initialized:

Function initialize(){
           WinJS.UI.processAll();
}

Document.addEventListener("DOMContentLoaded", initialize(), false);

I’m sure all of these controls will eventually exist in the same place, or at least be grouped together in a more intuitive way. Our XAML-coding brethren do have the luxury of having their UI controls one convenient namespace. For now, you’ll need to be familiar with standard HTML controls, HTML5 Controls available to Internet Explorer 10 and the Controls in the WinJS.UI namespace. The upside is our flexibility to use HTML standard controls along with the custom controls built into WinJS. And of course we’re going to need to think about how to position these controls on the page as well. Fortunately, Microsoft has given us an excellent layout framework—the Windows 8 Page Grid.

Summary

We’ve looked at some of the design elements that comprise a successful Windows 8 application. In particular, we looked at some of the typographical concepts, many of which are rooted in the Swiss Style typography.

Here are some other Manning titles you might be interested in:

Windows 8 XAML in Action
Pete Brown

Windows 8 Apps with HTML5 and JavaScript
Dan Shultz, Joel Cochran, and James Bender

AOP in .NET
Matthew D. Groves

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manning

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 4 Jun 2013
Article Copyright 2013 by Manning
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid