A Designer's Guide to Prototyping Ajax

By Kevin Hale
2007-11-23


XHTML Skills

Good prototypes are built on good wireframes and good wireframes come from those who have made markup their proverbial bitch. You’re going to want to put your XHTML understanding on lock and the best place to start is with the source. I’ve said this time and time again, but reading w3c specifications, while mind-numbingly boring at times, is the best way to master this craft. I learn something new every time I go back to read them and honestly, it’s all good stuff. The following are the sections I’ve found most useful for those designing interfaces for Ajax applications.

Difference between an id and a class

Simple enough concept, but we’ll go over it for good measure. An id is applied to a unique object (no two elements can have the same id on a page) and classes can be applied to multiple objects. Many browsers do not enforce this rule but it’s a basic rule of HTML/XHTML and should ALWAYS be observed. IDs are extremely important for your programmer because they allow them to hone in on that element like a laser. How you work these throughout your markup will often guide how a developer can make it come to life.

Multiple Class Names on One Element

Yes, you can do this and not enough people who know how, do. Leveraged appropriately, multiple class names are ridiculously useful for turning wireframes into prototypes. I couldn’t live without them. For example, let’s look at the following structures:

<div id="message1" class="notice">The monkey is in my house.</div>  
<div id="message2" class="error notice">The monkey is angry.</div>  
<div id="message3" class="hide error notice">I forgot to feed it.</div>

We see class names here are semantically rich enough to indicate not only how we might set the CSS rules for these classes, but how we should tell the functional story and properties of these elements to a programmer. This is all done by adding and removing appropriate class names. I’ll go over this in more detail in the second part of this series.

Form Elements

Forms are the original gatekeepers for user input and the traditional methods for transmitting and communicating information back to the server. In most cases, they’re the degradable solution for every Ajax transaction. Most of the structural mistakes I’ve seen usually take place in forms because they’re tedious and boring. You’ll want to know how to take advantage of every element (form, fieldset, legend, input, textarea, select, button) and attribute (method, action, readonly, disabled). Forms can be fun. It just takes time.

Anchors/Links

Anchors or <a> elements are the other traditional points of contact for user interaction on a web site. They are the only elements that have usable pseudo classes (:hover, :active, :visited, :focus) to hook into via CSS on all browsers. This is useful for those that find certain JavaScript pseudo-class solutions incompatible with a project. Links possess a surprising number of valid attributes that can be used to store a number of alternative sources of information that can later be utilized with DOM manipulation. In addition to href and title, we have name, rel, rev, accesskey and type to store variables that can be passed on to a JavaScript function. Nicer Titles, for example, use the title attribute to store additional info about a link and Lightboxes use the rel attribute to process which links should behave in a specific manner.

Tutorial Pages:
» Introduction
» There are No Heroes in Prototyping
» Relationship Skills
» XHTML Skills
» CSS Skills

Related Tutorials: » Getting Started with AJAX in jQuery » GWT Basics: AJAX Programming with Java » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » Ajax Wireframing Approaches