Ajax Wireframing Approaches

By Kevin Hale
2007-11-23


Using Useful Class Names

Before we get into any JavaScript, I want to talk about how we’re going to keep things simple. When I’m using the Stacking or TOP approaches, it is necessary for me to selectively hide and show certain elements so I can debug a design for the prototyping step. Instead of going in and changing the CSS property of an element every time I need to get at something underneath or below, I create a few useful CSS classes to streamline my workflow:

.hide {display:none} 
.show {display:block}

.invisible {visibility:hidden}
.inline {display:inline}

Then, whenever I need something out of my way, I just add a class of hide or invisible to the element. These aren’t truly universal and should definitely be customized to your project’s needs. There are cases when you might want an element to hide itself in a different manner. For example, in IE when you set a Flash object to display:none, the Flash movie will reset to the first frame when you change the display to block again. Annoying. The way to get around this is to just set the height of the Flash movie to 0, which would redefine our hide class like so:

#flashObject.hide{
    display:block;
    height:0;
}

Because of CSS specificity this rule will override the more generic .hide class above whether it appears above or below the rule. No !important property necessary. Other useful class names that we use in our wireframes are:

.on     .push       .focused    .error
.off    .clicked    .activated  .highlight  

Tutorial Pages:
» Introduction
» Keyframing
» Stacking
» Turn On Possibilities (TOP)
» Using Useful Class Names
» CSS Boolean

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 » A Designer's Guide to Prototyping Ajax