Designing Windows Store Apps with HTML and JavaScript: An Overview

When you have a great idea for an app, it’s hard to resist the temptation to start up Visual Studio and begin working on the new app. Resisting that temptation is necessary for building a great app, however.

Windows Store apps are more than just a clever implementation; they require upfront design, during which you consider the design goals that Microsoft describes for them. Thinking about the goal of your app, designing a UI, and making sure that you follow the Windows Store design principles are only some of the steps you need to consider.

This chapter helps you design your app, from initial idea, to coding, and then planning for deployment. This chapter covers the first objective in the Exam 70-481 objective domain (and this major topic area makes up about 20 percent of the exam’s material). Although this chapter isn’t code-heavy, there is a lot of discussion about the process of designing an app.

Objectives in this chapter:

• Objective 1.1: Design the UI layout and structure
• Objective 1.2: Design for separation of concerns
• Objective 1.3: Design and implement Process Lifetime Management (PLM)
• Objective 1.4: Plan for an application deployment

Objective 1.1: Design the UI layout and structure

Designing your UI is the most important part of building a great app that appeals to users. When going through the Windows Store, most users skim through screen shots and a short list of features that your app has to offer. Making sure that you stand out, both graphically and in the features you offer, is the core requirement for building a great app.

Evaluating the conceptual design

The release of Windows Phone 7 started a new era for Microsoft because it released a version of Windows that showcases beautiful apps that follow a strict design philosophy. With Windows 8, this experience is expanded to other devices. Although the possibilities in your app and in the Windows ecosystem can be overwhelming, Microsoft offers clear design guidance that can help you transform your idea into a real app. Using these principles when evaluating your own design can help you develop and fine-tune your app until it becomes something that everyone wants to have.

Microsoft design principles

Microsoft’s five foundational design principles include:

• Pride in craftsmanship
• Fast and fluid
• Authentically digital
• Do more with less
• Win as one

When designing your app, be prepared to devote time to the smallest details of all parts of your app. Take pride in craftsmanship; see your app as a real work of craft. Make sure that you are using the correct fonts and typography, are aligning all your pixels correctly, and are taking pride in what you are doing.

Fast and fluid comes down to responsiveness and using the right animations. You have probably seen Microsoft PowerPoint presentations in which an author creates too many animations. Every slide comes in from a different direction, all elements appear with some kind of animation, and you are distracted from the real goal of the presentation. Your apps will also use animations, but animations and transitions should support the user experience, not distract from it. Making sure that your app is responsive and uses simple but direct animations to guide users through your app is what fast and fluid is all about.

What’s the icon you use to save a document in Visual Studio? It’s a floppy disk! Depending on your age, you might never have used a real floppy disk in your life. Maybe you save your files to a regular hard drive, to a solid-state drive (SSD), or directly to the cloud. Should the icon change depending on the location in which you save the file? Or should you accept the fact that the digital world is different from the real world? That’s what being authentically digital means. It can be a principle when designing small things such as adding a shadow to an element. Why mimic the real world by adding a shadow when the user knows there isn’t actually a shadow there?

Extending this principle, you can create digital experiences that are not possible in the real world. Semantic zoom is one such area. If you open the Weather app on your Windows 8 PC, you can use Ctrl+scroll wheel to zoom in and out. But instead of showing the information on the screen smaller or larger, the app switches to a completely new view. Within this view, you can pick a different category or switch dates. Although the process is different from what you expect in the real world, it is perfectly possible in a digital app.

Doing more with less is another core principle of designing a Windows Store app. Compare the screen shot of OneNote 2013 running on your desktop in Figure 1-1 to the screen shot of OneNote 2013 running as a Windows Store app in Figure 1-2.

The desktop app shows a lot more on the screen, but is that really beneficial? What is OneNote about? Isn’t it about taking notes, viewing pages, and easily jotting down your thoughts? The Windows Store app version of OneNote focuses on those things. It shows options for formatting and other commands only when you need them, so a much larger portion of the screen can be used to accomplish the goal of your app: showing notes. Reducing chrome and navigation elements is key. Of course, reducing elements shouldn’t be done so thoroughly that users are completely lost in your app. For example, Microsoft made the decision to add a search box directly to the interface of the Windows Store, as you can see in Figure 1-3. This search box immediately helps users find the right place to search for an app.

The last design principle, Win as one, is about integrating with the existing Windows 8 ecosystem. Users learn that they can change settings for applications by using the Settings charm, they expect to swipe up to open the app bar, and they can integrate with other apps that are installed on their device. Making sure that your app immediately feels familiar helps them use your app and ensures that they will return to it.

These five principles should guide you through the design of your app. Try to keep these design principles in mind and let them guide every decision you make during development.

Creating a vision

Look at the design principles that should guide your app. Your app shouldn’t be a monolithic, giant application that can do everything a user will ever want. Focus on the experience that you want to offer instead of the features. This is where a vision comes in. You should have a clear idea of what your app is great at. Imagine that someone comes to you with the idea of building a ToDo app. They visualize that users should be able to add tasks, mark them as complete, and see a quick overview of what they still have to do. Try to determine what the experience is that you want to give to users instead of only a list of features.

Why would a user use your app? What’s your app all about? After some brainstorming, suppose that you come up with the following list:

• Add new tasks
• Mark tasks as completed
• Collaborate with others on some tasks
• Remove tasks
• Get a list of uncompleted tasks
• Search through tasks
• Specify deadlines for tasks

Take a step back from this list of features and think about what would make your app great. What scenario would make your app stand out from the competition?

One scenario that jumps out is the one about collaborating on tasks. Maybe you can think of other scenarios that could be even better, but try to pick one single scenario to guide your app.

Next, formulate your apps vision in a great at statement:

• My ToDo app is great at letting people work together on a list of tasks.

Suddenly you have a clearer vision of your app. You can now check each feature that you think of against your vision. Does it help with your vision or distract users from it?

The second step is deciding what user activities to support. Which steps are important for users reaching the scenario of working together on a list of tasks? What is the ideal flow that they should go through? Maybe you come up with something like this:

• Create a new task list
• Add tasks
• Share it with another user
• Report progress

These are the basic steps that form the flow of your app.

Now that you know what you want and which user activities you want to support, you should start researching your platform. Windows 8 offers a broad set of capabilities that you can use—from different controls and animations to ways to integrate with other applications. For example, you can use the Share contract to implement the idea of sharing a task list with someone else. You can use built-in controls to show a list of tasks and use the standard touch gestures to let users select tasks and mark them as completed by clicking a button in the app bar.

And there are many more possibilities! This book is about all the options that Windows 8 gives you when building apps, from tiles to notifications, from form factors to contracts. Many things are possible when developing Windows Store apps, and you should be aware of those that can help you with your design.

Now your app idea is coming together. You have a clear vision, you have targeted activities that you want to support, and you understand the wealth of options that you can use when coding your app.

But before you start developing, you should create some prototypes of your app. You might start with simple sketches on paper, but you can also use tools such as Expression Sketchflow or even PowerPoint with the Storyboarding plug-in.

Figure 1-4 shows an example of what a prototype can look like in PowerPoint. The advantage of these types of prototypes is that you can have users test them and give you feedback without having to do any time-consuming development.

After following these steps, you will have some clear prototypes of your app and you can start thinking about implementation.

Deciding how the UI will be composed

When creating a new Windows Store app in Visual Studio, you have several different options. Figure 1-5 shows the project templates from which you can choose.

Deciding on the template to start with is an important step. If you have created some sketches, you probably have figured out what the flow of your application will be. Choosing a template that matches your flow closely can save you a lot of work.

The available templates are the following:

• Blank App
• Grid App
• Split App
• Hub App
• Navigation App

Selecting the right template depends on the type of navigation that you want to support. You can choose a flat navigation if all content resides on the same hierarchical level (Internet Explorer or a game, for example). If you have content that is hierarchical, such as categories and items, you can choose for a hierarchical navigation pattern.

The Blank App template is the only template that comes without a navigation model. This template gives you an empty app with only HTML, cascading style sheets (CSS), and JavaScript files, together with some required files for a package manifest; a file to sign your app; and some default images.

Although it is not recommended to start with the Blank App template, you can use it if you need a simple environment to test some features or if you have layout requirements that don’t fit in the standard Windows Store model.

The Grid App template is the basis for apps that let the user browse through categories and then navigate to individual items (a shopping or news app, for example). After creating this project, you have a default structure of categories with items in them shown in three layers: overview, category details, and item details. It implements navigation between pages and comes with some sample data that you can customize.

The Split App template combines showing a list of items with item details on one page. Think of it as a master-detail view of your data. It can be useful for building a blog reader app, for example.

The Hub App template was added to Visual Studio 2013 with the release of Windows 8.1. This template shows content in a horizontally panning view. The Hub App template is different from other project templates because it uses a mix of sections that represent the items in your app. Whereas the Grid App and Split App templates have a very specific way of showing items, the Hub App template mixes all those approaches to create a compelling UI.

One aspect of the templates in Visual Studio that might not be immediately obvious is that those templates implement a single-page application (SPA) structure. Regular websites use multiple pages and hyperlinks to navigate from one page to another. While the page is loading, your screen refreshes and a complete page is loaded.

An SPA uses a different architecture. Instead of having multiple pages, you load one page when it starts and then use JavaScript to enable and disable elements. This process avoids complete page reloads and gives your app a more fluid interface. When composing your UI, keep this important aspect in mind. You can reuse the skeleton of your page and switch different elements when navigating from “page to page.”

After you select your project template, you can use several item templates, as shown in Figure 1-6. Those templates help you implement specific functionality, such as contracts, in your app.

Designing for the inheritance and reuse of visual elements

When building software, you can easily fall into the trap of simply copying and pasting elements (HTML, CSS, or some JavaScript) whenever you need them. However, although simply duplicating code can give you some velocity, it slows you down in the end.

The more code you have in your project, the harder it is to understand. Maintainability also becomes an issue; making a change to each copy of an element is not only cumbersome but can also lead to errors when you forget to change a copy.

During the design phase, you can easily see where certain elements will be repeated, so make sure from the start that you find a suitable solution instead of a plain copy-and-paste process.

Of course, remember principles such as Keep It Simple (KIS) and You Aren’t Gonna Need It (YAGNI), which remind you that you shouldn’t go overboard planning to reuse elements that you will never reuse. Instead of wasting time on creating complex controls that can easily be reused but never will be, start with a simple solution and make sure that you adapt it whenever the requirements change.

Using HTML, CSS, and JavaScript for your app development gives you ample opportunities for reusing elements in your app.

CSS is probably the easiest to reuse. You should move styles that are used in multiple places in your app to a common file and then reference that file whenever needed. Especially because you are using the SPA architecture, you can load CSS elements once and then reuse them throughout your application.

JavaScript is also easily reusable. You can include certain utility functions in your JavaScript and call them from anywhere in your application. The next objective looks at structuring your JavaScript in a reusable way.

You can also reuse HTML by using JavaScript controls. For example, HTML PageControl enables you to reuse HTML pages by loading them through JavaScript. You can also build custom controls if you want to create a reusable unit of HTML, JavaScript, and CSS.

These options are discussed in more detail throughout the book.

Designing for accessibility

Imagine using your app if you are colorblind or completely blind. What if you are deaf or can’t use a mouse or touch device easily? Keeping users’ disabilities in mind is very important for the design process.

Maybe you are faced with legal requirements that force you to make your app accessible. Or maybe you are just thinking about all the possible users who can’t use your app if you don’t design for accessibility.

Fortunately, implementing accessibility in your app isn’t difficult. HTML already has good support for creating accessible websites, and your Windows Store app can expand on that foundation.

Make sure that your HTML not only looks nice but also specifies what it does. Accessible rich Internet applications (ARIAs) are defined for this purpose. An ARIA defines a set of special attributes that can be added to your HTML. Those attributes describe the description and role of elements that can be used by screen readers—for example, to help a user understand what an element does.

Next to using ARIA attributes, you should also make sure that your app is accessible only by using a keyboard, which means thinking about the tab index of elements, making sure that a user can use the arrow keys to navigate and implement accelerator keys.

You should also test your app under different conditions. The testing could be with varying resolutions and when using high-contrast teams or a larger font.

The Windows software development kit (SDK) comes with two tools that you can use to test the accessibility of your app: Inspect and UI Accessibility Checker (AccChecker). Of course, you can also do some manual testing: Unplug your mouse, change your color theme, and adjust font size. Narrator is an application that verifies your app can be used with a screen reader.

If you have followed the guidelines for accessibility, you can submit your app to the Windows Store as being accessible, which helps users with disabilities find your app more easily. Of course, Microsoft checks to see whether your app is accessible before allowing it.

Deciding when custom controls are needed

When building your app, you’ll use standard HTML elements and prebuild Windows Library for JavaScript (WinJS) controls created by Microsoft. With only these controls, you can build most apps without many problems. They can be styled with CSS, and you can often attach JavaScript to extend the behavior.

Sometimes you might need a custom control. Perhaps you want a calendar, some graph controls, or something else that’s completely specific to your app.

First, see whether someone has already built your custom control. Companies such as Telerik create control suites for all types of applications. A good starting point is http://services.windowsstore.com/. You can find custom controls in the Controls & Frameworks section.

A basic reusable piece of code can be created by using HtmlControl or PageControl. More-complex controls can be implemented the same way as WinJS controls.

Using the Hub App template

You have learned about composing your UI and choosing a template. The exam specifically focuses on the Hub App template, so make sure that you understand how it works.

The Hub App template is an implementation of the hierarchical navigation pattern. The Start screen is shown in Figure 1-7.

The template has a horizontal layout that shows the sections you defined. Within those sections, you can show individual items. A user can select sections marked with > to view all the items in that section. When you select an individual item, a details page displays.

Figure 1-8 shows the initial files created by the template. The most interesting part is the Pages folder, which contains the Hub, Item, and Section pages. The data for Section and Item pages is loaded from the static data.js file in the js folder.

Adapting the template is easy. Get some meaningful data in for your app, which can be static test data that you put in the data.js file or that is asynchronously loaded by the app from an external data source.

Adding your own styling and behavior is just as important, of course. Using the Hub App template as a foundation for your app steers you in the right direction for an attractive app!

Objective summary

• When designing your app, make sure to follow the Microsoft design principles: pride in craftsmanship, fast and fluid, authentically digital, do more with less, and win as one.
• Make sure that you have a “My app is great at” statement to focus your app on one single user scenario and implement it fully.
• Visual Studio offers project templates that you can use as a starting point for your app: the Blank App, Hub App, Navigation App, Split App, and Grid App templates.
• You can easily reuse HTML, CSS, and JavaScript throughout your app to create a consistent look and feel and to ensure maintainability.
• Accessibility is important for creating an app that can be used by users with disabilities.
• Custom controls that you create can be used to reuse HTML, JavaScript, and CSS.
• The Hub App template is a new template in Windows 8.1 that you can use to create attractive apps that use a mixed mode of showing content to the user.

Objective review

Answer the following questions to test your knowledge of the information in this objective. You can find the answers to these questions and explanations of why each answer choice is correct or incorrect in the “Answers” section at the end of this chapter.

1. You are developing the ToDo app in collaboration with designers who are new at Windows Store development. They encourage you to use animations in your app. What should you do?

   1. Explain that animations are of the past and are distractions that Windows Store apps should avoid.
   2. Agree with them and let them describe a list of animations that they want to use.
   3. Refer them to the documentation and show them the list of animations used in Windows Store apps.
   4. Meet with the designers and create custom animations that are useful for your application.

2. Why is the “great at” statement so important for an app?

   1. A great at statement isn't important; apps are not allowed to become popular because the platform doesn't support it.
   2. A great at statement isn't important because apps are only allowed to have limited functionality.
   3. Without a “great at” statement, you can’t follow the Microsoft design principles.
   4. It creates a vision that you can use to guide the development of your app and make sure your app truly excels in your supported user goal.

3. Which of the following Microsoft design principles are important when designing your app? (Choose all that apply.)

   1. Pride in craftsmanship
   2. Integrate with the cloud
   3. Fast and fluid
   4. Authentically digital
   5. Do more with less
   6. Win as one