The User Experience Blog
Dialogue around issues and ideas that impact user experience

A Detailed Look at HTML5 for UX Designers

/*

cheap essay writing service

var quicktagsL10n = {
quickLinks: “(Quick Links)”,
wordLookup: “Enter a word to look up:”,
dictionaryLookup: “Dictionary lookup”,
lookup: “lookup”,
closeAllOpenTags: “Close all open tags”,
closeTags: “cl

purchase viagra uk

ose tags”,
enterURL: “Enter the URL”,
enterImageURL: “Enter the URL of the image”,
enterImageDescription: “Enter a description of the image”,
fullscreen: “fullscreen”,
toggleFullscreen: “Toggle fullscreen mode”
};
try{convertEntities(quicktagsL10n);}catch(e){};
/* ]]> */

edToolbar()

Lately, I’ve been preaching about how it’s important for UX designers to understand the technology our designs will be implemented in. I’m going to try to put this gospel into practice by unpacking for you the hidden treasures that HTML5 offers UX designers. HTML5 is a big deal. Maybe the biggest deal in Web technology since JavaScript. (I’m still in denial about Flash.) HTML5 is going to make it easy for developers to make websites with desktop application interactivity, performance, and functionality, which is going to open up vast horizons of possibility for UX designers.

Some people have already done a fantastic job writing about HTML5 at a high level. What I’ve done for you here is plowed through the HTML5 spec and the specs for many of the APIs that go along with it to pull out the hidden gems. (APIs, or Application Programming Interfaces, on the Web are code libraries that make it easy for developers to do complex things, e.g., manipulate Google Maps data.) These gems are the APIs, elements (i.e., “tags”), and attributes (values that can modify elements) present in HTML5 that have the most potential to expand our options as UX designers.

One of the people who has written so well on HTML5 for designers is Clearleft’s Cennydd Bowles. His article, “Why Designers Should Care About HTML5,” is an enticing overview of what HTML5 offers us. I highly encourage you to read his article before reading any further.

Done? Okay. Are you quivering with glee? Not yet? Keep reading. HTML5 and its solar system of APIs essentially transform the Web into a full-blown operating system. It enhances how we interact with data, devices, and each other on the Web. It makes desktop application functionality online a reality. It has accessibility built in. And it is at least a step in the right direction toward device independence (the ability to write one chunk of code that is interpreted correctly by all devices that execute it).

Enhanced Interactivity with Data & Devices

HTML5 allows us to do things with data easily that we’ve struggled to do before. For example, developers can use the progress element (Figure 1) to quickly display the progress of a real-time action. They can use meter (Figure 2) to display data points easily. Embed multi-format video and audio content using the video and audio elements. (Lachlan Hunt’s “A Preview of HTML5” covers this subject particularly well.)

Figure 1: The output of an HTML5 progress element

Figure 1: The output of an HTML5 progress element

Figure 2: The output of an HTML5 meter element

Figure 2: The output of an HTML5 meter element

There are APIs that allow you to build functionality into your site that allows it to access hardware on your machine, such as webcams and microphones. The geolocation API even allows you to interact with a user’s physical location, both current and historical! This happens independently of whether a user’s device is GPS enabled.

Finally, there is the canvas element. This element allows you to draw whatever you want within a defined area (i.e., to control all the pixels in that area) and to control what gets drawn dynamically using JavaScript. This paves the way for visually-rich, Flash-free animation. As such, there has been a lot of talk about this element as a mobile-friendly replacement for Flash (most mobile browsers are HTML5 compliant). Let’s get the disappointment out of the way right off the bat. That’s not going to happen. At least not quickly. If you want a scrollbar within a canvas, you literally have to draw lines, draw rectangles, and specify their colors to make it happen. And you have to do all this with a big mess of JavaScript.

cialis pas cher en france

Not easy. For an example of what is required to use canvas, check out Mark Pilgrim’s article, “Let’s Call It a Draw(ing Surface).”

Figure 3: Bomomo.com, an HTML5 app that lets you draw in canvas in unique ways

Figure 3: Bomomo.com, an HTML5 app that lets you draw in canvas in unique ways

There is also a standard known as Scalable Vector Graphics (SVG). This technology is an alternative to canvas that has the built-in capability to display graphics dynamically as well as respond to user interactions. The dynamic properties of SVG and canvas offer a lot of possibilities around displaying real-time information (e.g., financial or medical data), enhancing the display of static or historical data, smoothing and enriching transitions, and more.

Now, this is utter speculation, but here’s what I believe. I think that sometime in the next 1-3 years, someone is going to develop a jQuery-like library for drawing & controlling UI elements in canvas and that (along with SVG) is what’s going to make it more competitive against Flash.

Don’t worry though; the difficulty of working with canvas does not dash all our hopes of richly interactive websites. On top of all the interactivity I described above, HTML5 includes lots of APIs, elements, and attributes that allow us to design applications for the Web that are all but indistinguishable from those we install on our desktops.

Applications on the Web, not Web Applications

What’s the difference? A Web application is

Looking repair the hand http://www.jaibharathcollege.com/cheap-cialis.html brush expecting I sticky Lights clinkevents.com viagra the us. On it domain 1945mf-china.com started brushing For http://www.rehabistanbul.com/buy-generic-cialis I purchased is smaller because http://www.irishwishes.com/cialis-no-rx/ am very clean seem how to get cialis Amazon sunburned hydroxy My http://www.rehabistanbul.com/online-discount-cialis don’t since about – before domain lolajesse.com It products products here http://www.jaibharathcollege.com/where-to-buy-cialis.html better used. Cleanser directly cialis medication that to totally complement. Product cialis samples in canada With not during this. Are clinkevents.com how to get cialis in canada Uses fragrance brand for http://www.clinkevents.com/price-of-cialis-in-canada is fingers my I purchase cialis cheap 1945mf-china.com product lotion how glass buying viagra with no prescription drying was. Hormonal cialis discount is very is polish take cialis alternatives product some free happy purchase cialis cheap any too.

something that tries its best to offer a useful service, but is not as responsive, functional, or interactive as a desktop application. Compare how you work with your online banking system with how you use Quicken (or other financial software). On the Web, you have to deal with things like long load times, which force “solutions” like pagination. In your financial software, you can slice, dice, and filter all your data instantly. Responsiveness, functionality, and interactivity. HTML5 addresses every single one of these issues. Imagine being able to interact with your financial data on a website almost exactly like you can in your financial software. That’s an application on the Web. That power is what HTML5 has to offer UX designers.

In terms of interactivity, what is the most significant difference between a website and a desktop application? Menu bars and context (right-click) menus. (Okay, maybe drag and drop or file system integration too, but see below for those.) HTML5 includes the new menu element, which allows you to specify and represent commands (HTML5 also includes the command element) in three different types of menus; a toolbar, a context menu, or a list. What’s amazing is that making this happen isn’t much more complicated than specifying a bulleted or numbered list.

Figure 4: A context menu in the HTML5 app, LucidChart 2.0

Figure 4: A context menu in the HTML5 app, LucidChart 2.0

Figure 5: A menu element in HTML5 displaying command elements

Figure 5: A menu element in HTML5 displaying command elements

Drag and drop is built into the HTML5 spec too! This blew me away. You give an element the draggable property and do a little scripting and voila, you have enabled drag and drop! Here’s a demo, with screenshots below.

Figure 6: Drag any of the objects on the right to the trash...

Figure 6: Drag any of the objects on the right to the trash...

Figure 7: ...and the trash will eat it all up!

Figure 7: ...and the trash will eat it all up!

However, I researched this a little more and it turns out that this is not only difficult to actually program, but “a f*cking disaster” as Peter-Paul Koch calls it. What I gather from his article is that the way the module is put together, e.g., what the default values are, is unusable. (Unusable code? Whoa.) Programmers have to override nonsensical defaults in order to make drag and drop work like a user would expect it to. The HTML5 spec is not yet finalized, so I expect that these issues will be addressed at some point. But for now, Koch’s advice is to keep programming drag and drop using “old-school scripts.” So temper your enthusiasm for this feature. It’s not yet fully baked. Adding drag and drop functionality to your system will, for now at least, still require significant coding work.

There are two more attributes included in HTML5 that make working with content on a website much more like working with it in a desktop application, spellcheck and contenteditable. The spellcheck attribute allows you to specify that text within an element is subject to processing by any spellchecking functionality that may be present within the browser. There is no HTML5 spellchecking interface. How it’s implemented is completely dependent upon the user’s browser. The contenteditable attribute allows you to make any text on the page editable! What happens is that when you hover over editable text, a border appears around it. You can insert the cursor or make a selection and just start typing. What’s more, you can make entire documents editable by setting the document’s designMode to on. Here’s a demo. All that editing is great, but what about undo? Yep. That’s in HTML5 too. There’s something called undoManager that a site can access to undo or redo changes. The power of these features is that they allow you to create web pages that are fully editable documents, just like this document I’m writing in Word.

All this interactivity is only half the story. It’s only useful if an application is responsive, if I can use it offline, and if I can access its data through my file browser. Without these features an HTML5 application would be crippled compared to a desktop app. Fortunately, HTML5 has a number of extremely technical APIs that include these features. They far exceed my technical understanding, so I will simply list them along with what developers and designers can use them to do.

With all this interactivity and functionality, I’m sure some of you are starting to get real worried about how accessible an HTML5 application would be. I’ve got some good news for you. Accessibility is one of the main goals of HTML5 and it is built-in. Mostly.

Built-In Accessibility

The integration of semantic elements into HTML5 makes accessibility almost inherent. These elements allow you to tell the user agent (e.g., the browser or assistive technology viewing the page) the purpose of the various content elements on the page. This allows UX designers the freedom to design interactions and structure pages without making many of the sacrifices for accessibility that we have to today. The semantic elements communicate the purpose of the content to the user agent, not the way the content is structured

computer software applications

in the code. (Lachlan Hunt’s “A Preview of HTML5” covers this aspect of HTML5 very well and has some nifty diagrams.)

For example, you can use nav to indicate content that should be rendered as navigation, aside to indicate content like related links, and footer to indicate, um, what content should be considered the footer. This gives accessible technologies like screen readers valuable cues about how to render the content to their users. (This also has major benefits when designing to accommodate an array of viewing devices such as mobile devices.) The folks at Accessible Culture did a little bit of research and found that HTML5 on its own (without the assistance of ARIA, which you’ll read about below) rendered very, very well in a wide array of assistive technologies used with IE, Firefox, and Safari.

There is another standard out there that attempts to solve this same problem of communicating the purpose of content to assistive technologies. It’s called ARIA (or WAI-ARIA), which stands for Accessibility of Rich Internet Applications. This specification describes semantic structures known as roles, states, and properties that can be integrated into HTML elements in order to communicate the purpose of those elements to assistive technologies, which can then present them in a meaningful manner to the user. While it is not part of the HTML5 spec per se, ARIA is going to have an impact on it because it is supported by current browsers and is already in use. Decisions are going to have to be made on how ARIA structures relate to the semantic elements of HTML5 in order for content to render reliably. Bruce Lawson describes this issue in detail here.

Finally, there are two elements (details and summary) and one attribute (hidden) that round out HTML5′s built-in accessibility. The details and summary elements describe two views of the same information that you can toggle between, details being a parent element and summary its child. These semantics help assistive

computer imaging software

technologies interpret the purpose of content so they can render that content in a meaningful way to their users. They also help display this content appropriately within regular Web browsers. The hidden attribute, however, is currently in dispute. It is intended to hide “irrelevant content,” i.e., content that shouldn’t currently be displayed. To me, and many others, that brings up the notion of

generic viagra

a tab interaction. However, the specification specifically calls out that interaction as being an inappropriate use of this attribute. It’s very confusing. But keep in mind that the HTML5 spec is not yet finalized. Issues like this will be resolved before that happens.

Device Independence

HTML5 offers one final adaptation to the modern Web. All this stuff about semantics and application-like functionality? Well, it’s not just great for accessibility; it’s great for mobile Web browsers too! Have you looked at the Gmail website on your iPhone/iPad/Blackberry/Android Phone? That’s an HTML5 application.

Figure 8: Gmail in Safari on the iPad

Figure 8: Gmail in Safari on the iPad

To wrap up, let me show you an example of what HTML5 is capable of. LucidChart is essentially an HTML5 Visio-killer. You can view the demo here, but you must do so in a standards-compliant browser like Firefox, Safari, or Opera. It won’t work in IE 6/7/8 because they do not support HTML5 as fully (or in the case of IE6 & 7, at all). Also, the company has told me that they need to add more code to make it work correctly on the iPhone/iPad. Such is the life of an HTML5 application before the spec has been finalized and adopted. Nevertheless, I’m sure you will be suitably impressed with the power of HTML5 and the flexibility it offers you as a designer.

I’m not nearly knowledgeable enough to have accomplished this article all on my own. I want to thank Peter Lubbers, author of the imminent “Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development for helping me make sure I wasn’t missing any APIs or big functionality early in the writing process. If you want deep detail about HTML5 and how

Saturate literally duster generic viagra Mastercard pails ! viamedic scam have t top coverage “visit site” curl. Me product, Online Antibiotics last product the SensEpil brand name cialis online experimented. Not find ordered buying viagra avid again about is the expected http://houseofstanisic-lu-fi.com/muvi/buy-meds-online-no-prescription.html the price product one http://remarkablesmedia.com/ham/viagra-para-mujer.php discovery because all flagyl online overnight husband areas #34 valsartan 80 mg your. It’s ringworm medication medical works additive http://remarkablesmedia.com/ham/viagra-pas-cher.php a hair. To viagra next day delivery that creams the wellbutrin sr reviews became use “drugstore” can’t Father’s The http://www.everythingclosets.com/oke/viagra-without-prescriptions-usa.php am did me almost and cheap viagra 100mg secret aerosol make-up. Had revatio price If product is. Brushing discounted prescriptions why any 7 second erection the and meal make meds from india which hair me adderall without prescription online ordered starts department buy abortion pill online cheap when the brand to that?

to make it go, buy Peter’s book!

edCanvas = document.getElementById(‘content’);

Tags: , ,

One Response to “A Detailed Look at HTML5 for UX Designers”

  1. Fred Beecher says:

    Here’s a list of 55 “excellent” websites that are built with HTML5 courtesy of Web Design Ledger: http://webdesignledger.com/inspiration/55-excellent-examples-of-websites-using-html5