Iconography is internationalized, but open to misinterpretation. Language & speech is more accurate, barriers still exist. A floppy disk is still the save icon in most applications. Iconography allows you to have a wider reach.

Push button, receive bacon.

Endearing messages. Existentialist chalkboard on Flickr. WILF’ing – What was I looking for? Thanks to hyperlinks.

Avoid functionality based  mouseovers, hovers, drop-downs, etc. Consider using a click to reveal information, as done on desktop. Not all devices have hover. Use for non-critical functionality. Progressive disclosure using onclick, not hover or mouseover.

Moved from JavaScript to CSS for hover styles. From procedural to declarative. You’ll see this same thing evolving throughout the web.

Machine Tags

Example: book:author=zeldman

Breakdown by tag on another page.

Forms Suck

Think about how we use forms in the real world. It’s rarely something pleasurable. Huffduffer sign-up form takes a different approach, you fill in the blanks instead of the top to bottom hierarchy of real life forms.

We’ve also come to the conclusion that id’s should not be used for styling/CSS purposes. Classes are for adding semantics and ID’s are for making something addressable.

Form validation is moving from JavaScript to HTML5. Many more input types available, including number, search, range, email, date, url. Using the date type in a form will immediately show a date widget.

Safe Defaults

HTML > CSS > JavaScript – Take away one and the other should work.

“Javascript is like the electricity of the web, but you have to consider what to do when it’s not available.” -Jeremy Keith

Ajax should always be added last. Make the site work fine and then hijack the forms with JS to add the interaction.

Feedback

When clicking a link, you get immediate feedback. Waving flag in IE, lighthouse in Netscape, status bar. Be sure your feedback is subtle and friendly. It shouldn’t get any the way of the core task or next interaction.

Inspiration from desktop, be careful, there are some good ideas, but not all translate to the web. Example: show password checkbox when typing password into sign-in forms. We can be inspired by other mediums and borrow from them, but we don’t have to emulate them.

Build it first, the normal way, with links and forms, then add the ajax. Requires feedback to the user that you did something, too.

Richness & Interactivity

We can now interact at a distance and over time. What makes this medium great, isn’t the technology, it’s the ability to connect people. That is something wonderful and something you should remember.

Twitter isn’t graphically or interactively rich, but it connects people. One of the greatest achievements of all time.

Question & Answer

What’s your favorite color? ”Blue, the color of hyperlinks.” -Jeremy Keith

There are Web sites we use because we have to, those we use because we want to and those we use because we’re delighted by and we love. -Jeremy Keith

“I would push back on the idea that everyone needs the same experience. Everyone needs to be able to achieve the same things.” – Jeremy Keith

Tags: aea