Ajax Wireframing Approaches

By Kevin Hale
2007-11-23


CSS Boolean

If you’ve ever created CSS navigation that highlights the link representing the current page based off a body id, then you’ll find the following concept pretty familiar. CSS Boolean is an example of how to conditionally present specific sections of HTML with CSS. In the following example, I’ll use it to show whether an Option is in the On or Off state. Here’s the CSS:

.ifTrue, .ifFalse{
    display:none;
}
.true .ifTrue{
    display:inline;
}
.false .ifFalse{
    display:inline;
}

#option{
    font-size:.8em;
    color:#444;
}
#option .ifTrue{
    color:green;
}
#option .ifFalse{
    color:red;
}

And here’s the markup:

<a id="option" class="false">
    <img class="ifTrue" src="/images/icons/star.gif" alt="Bright Star" />
    <img class="ifFalse" src="/images/icons/stardim.gif" alt="Dimmed Star" />
    Option
    <span class="ifTrue">(On)</span>
    <span class="ifFalse">(Off)</span>
</a>

When we change the class of the link to “true,” the image of the Bright Star becomes visible and the “(On)” is displayed in green text while the image of the Dimmed Star and the red “(Off)” goes away. There are many variations of this concept. You could, if you wanted to be more efficient, specify that the false state is shown on default and change when a class of true is applied. I don’t always use this method with the same syntax (most of the time I’m using show/hide or on/off rather than true/false), but it illustrates how you can take the useful class names mentioned above to condense and present various Ajax states with CSS and XHTML.

Why would you want to use CSS Boolean? Because it will help you easily conceptualize before writing a single line of JavaScript what exactly needs to be done to make your page come alive. If you know that manually changing a class of an element to “show” or “activate” makes the feature appear properly on a page, then you also know that your equivalent JavaScript function for your prototype need only do that same simple task.

And that concludes the second part of A Designer’s Guide to Prototyping Ajax. Be sure to come back next Monday for the last part of our series, where we’ll finally dive into some JavaScript functions and techniques to help transform our wireframe foundations into dynamic application previews.

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