Building Great Web Applications

Developers can create rich immersive experiences by using:

1. 1.Real time drawing surfaces that are interactive and relevant to users.
2. 2.Fonts and other typographic features that enhance the readability of content.
3. 3.Textures, gradients, and shapes that increase the visual appeal of your application without distracting from the content.
4. 4.Graphics and images with animations to help users understand what is going on and inform them that the application is working.
5. 5.High quality and high resolution images that will look good no matter how users size their browser window.
6. 6.Real world graphics, illustrations and icons to provide a level of familiarity and realism. If people understand how to use those materials in the real world, they should be easily able to translate those experiences to the web application.

Use the whole screen

One big distinction between web pages and web applications is the way that they use the screen real estate available to them. Like client applications, great web applications use all of the space available to them.

When creating a great visual design, designers should:

1. 1.Build your app to look like an application,, instead of a website with margins on the left and right.
2. 2.Create a visual design that uses all of the space available to it. Because you can’t count on a specific size, size the content based on screensize, support window resizing and apply scrolling when needed.
3. 3.Avoid fixed width layouts that have margins on the left or right side of the application which may remind users too much of web pages.
4. 4.Use the Full Screen API that is available in many modern browsers to provide a full screen interface when appropriate.

Web apps that use the whole screen include:

• Gojee
• New York Times Web App
• Word²
• GitHub Issues
• 60 Minutes

Make it easy to try & use

People are quickly turned off by complex or lengthy sign-up processes. If your application requires people to log in, it should be an easy process that requests only the minimal information to get started. If possible, make it easier for people to sign up by leveraging an existing OpenID provider. Users will appreciate having fewer accounts and passwords.

To help decrease the bounce rate, and make the sign up and sign in process easy:

1. 1.Provide an experience for people who choose to not log in or create an account.
2. 2.Reward users who choose to create an account and sign in with additional features and more integrated services.
3. 3.Provide support for signing in via an OpenID provider such as a Google account, thereby reducing the number of usernames and passwords people need to remember.
4. 4.If you already have a login system consider correlating the OpenID provider to the user account in your system.

Web apps that do this well today include:

• EtherPad - EtherPad allows users to start using the app immediately, and requires users to sign in only when they want to save.
• Picnik - Keeps the barrier to entry low and allows users to edit and save their photos without ever having to log in or create an account.

Provide an offline experience and improve performance

Developers can provide offline experiences and greatly increase the performance of their applications by caching data locally and only retrieving what’s necessary when they are connected.

To help improve performance and provide an offline experience:

1. 1.Use Application Cache to ensure that the browser caches any necessary application code like HTML, CSS and JavaScript.
2. 2.Leverage Web Storage to store small amounts of data that you’ll need quickly or might otherwise put in cookies.
3. 3.Put structured data into a web database like IndexedDB which allows you to store significant amounts of data that is efficient to query and iterate across.

Web apps that do this well today include:

• Amazon Kindle Cloud Reader - uses AppCache, local storage and WebSQL to provide an experience that works on iOS and desktop browsers.
• SpringPad - uses AppCache, local storage and WebSQL to provide an experience that works both online and offline.
• The New York Times Web App - uses AppCache and WebSQL to provide an offline experience that works on iOS and desktop browsers.

Provide automatic data persistence

Web applications allow users to keep their data in the cloud. Users should feel confident that their work is safe. They should not have to think about where or when they saved their data, or if they have the latest version at hand. Web applications enable users to concentrate on their work without worrying about whether or not their work is safe.

To provide a great experience, web applications should:

1. 1.Save data locally and sync to the cloud as often as possible because people shouldn’t have to worry about their network connection or what happens to their data if they leave the application.
2. 2.Start in the same place that the user was when they left the application and enable them to pick up and be productive in the same place as when they left the application.

Resources To Help You

Tutorials

• Working Off the Grid with HTML5 Offline
• An Introduction to Application Cache
• Using IndexedDB

Keep the user informed with notifications

A client application keeps a user informed about what it’s doing through status messages, progress bars, notification dialogs, and other methods; web applications should be no different.

Keep people informed about what’s going on in web applications by:

1. 1.Show loading indicators so people understand that a task is in progress.
2. 2.Use HTML Notifications to provide toast like notifications for important information that people might want to know about in real time.
3. 3.Use the HTML5 progress element to show either determinate or indeterminate progress.
4. 4.Show modal dialogs to prevent users from moving on until they either provide specific information or the application completes any processing it needs to complete.
5. 5.Animate actions that might have a real world analogue to help relate the progress to something people understand.

Treat performance like a feature

Nothing is more valuable than people’s time. People expect client applications to start fast, and be immediately responsive to their use. Web applications should be no different. Web applications should start fast and always be responsive to their users.

When designing around fast, web applications should:

1. 1.Load your application first, then load the user's data. By caching your application code locally with AppCache, you reduce the number of network requests needed to start your application. Because the application is cached locally on the device, your application can start immediately. Use loading indicators as you retrieve any data needed to enable your application.
2. 2.Follow best practices for building fast web sites and applications. Your web application is still based on the web and you should continue to leverage those best practices.