Ajax overhaul, Part 2: Retrofit existing sites with jQuery, Ajax, tooltips, and lightboxes

Improve your user experience and simplify your navigation with tooltips and lightboxes

Brian J. Dillard (bdillard@pathf.com), VP, Ajax Development, Pathfinder Development

In his 12 years as a Web developer, Brian J. Dillard has built rich user interfaces for companies as diverse as Orbitz Worldwide, Reflect True Custom Beauty, Archipelago LLC, and United Airlines. Now serving as VP of Ajax Development at Pathfinder Development in Chicago, Brian builds rich Internet applications for a variety of clients, participates in open source projects, and contributes to the Agile Ajax blog. He is the project lead on Really Simple History, a popular Ajax history and bookmarking library.

Summary: Asynchronous JavaScript + XML (Ajax) techniques have changed the face of large, commercial Web applications, but many smaller Web sites don't have the resources to rebuild their entire user interface (UI) overnight. New features should justify their costs by solving real-world interface problems and improving user experience. With this series, learn to modernize your UI incrementally using open source, client-side libraries. In this installment, you learn to eliminate pop-up windows and navigational dead ends using simple lightbox and tooltip techniques. You learn to do so using the principle of progressive enhancement, guaranteeing that advanced UI features don't hamper your site's accessibility and adherence to Web standards.

View more content in this series

Date: 06 May 2008
Level: Intermediate
PDF: A4 and Letter (45KB | 10 pages)Get Adobe® Reader®
Activity: 1686 views
Comments:

About this article

This article walks you through the steps of retrofitting a Web 1.0 shopping site with Ajax techniques. You can download the before and after source code for the example application, and you can see both versions in action on the author's Web server. In addition to Ajax techniques and best practices, you will learn how Ajax can improve your user experience through principles of progressive enhancement.

This article assumes you have a solid grasp of HTML and CSS and at least a basic understanding of JavaScript and Ajax programming techniques. The example application is built using only client-side code; the techniques demonstrated can be adapted to any server-side application framework. To run the example site, you need at least a basic Web server running on localhost. Alternatively, you can just follow along in the source code and see the example site in action on the author's Web server.

Looking back at "Ajax overhaul, Part 1"

Part 1 of this series introduced the example application, Customize Me Now, and began the process of retrofitting it from a Web 1.0 version to an Ajax-powered Web 2.0 version. It discussed some of the business and usability reasons for doing so. It defined progressive enhancement and how its principles improve user experience. It also helped you set up several open source tools: the jQuery JavaScript framework and several plug-ins, including ThickBox, jQuery Forms, jTip, and GreyBox. Using ThickBox and jQuery Forms, you streamlined your user flow by turning navigational side streets into modal dialogs. But that was only part of the makeover. Now you'll use jTip and GreyBox to continue refining the site. When you're done, you can look at the before and after versions of the example application and review how you've improved it.

Converting pop-up windows into tooltips using jTip

Now that you've reviewed the modal dialog implementation from Part 1, you can continue to refine the navigation by turning all of the pop-up windows into tooltips using jTip. As with ThickBox, jTip is easy to implement. For each link that you want to transform, you merely add the following attributes:

A class attribute of "jTip." This is the magic word that alerts jTip's Document Object Model (DOM)-parsing routine that this link should be transformed into a tooltip. Even if the link element already has a class attribute, you can simply add "jTip" as an additional class.
An id attribute with a unique value for each link so jTip can grab an object reference to it. It doesn't matter what this id is, as long as there is one.
A name attribute that jTip uses to render a header inside the tooltip. Again, the value doesn't matter as long as the attribute exists. If you don't want a header to appear, you can simply set the value to an empty string.

When you're done adding these attributes to the markup, each pop-up link will look like Listing 1:

Listing 1. HTML code for jTip links


<a class="jTip" name="About Pizza" id="pizza" target="productPopup"
href="productPopup.html?product=A">Pizza</a>

Now you just need to tweak some CSS. The CSS file included with Customize Me Now 1.0 renders most link elements in underlined red text that changes hue when you hover over it. Users expect underlined links to be clickable, but these jTip links aren't; the tooltips are triggered when the user hovers over them. You should, therefore, probably style them a little differently from the rest of the links while still making sure they stand out enough to invite interaction. To that end, attach some custom styling to the jTip class with a new CSS declaration. Keep the red color, but get rid of the underlining and hover state. While you're at it, add a new CSS declaration to control the width of the tooltip content so it doesn't end up with a scrollbar. This new declaration relies on the fact that jTip wraps its tooltips in a div with an id attribute of "JT." Finally, create another declaration to hide the headline in the tooltip content; that way, you can use the header generated automatically by jTip from the link's name attribute. When you're done, the new CSS will look like Listing 2:

Listing 2. CSS for jTip


/*restyle tooltip links*/
#CMN a.jTip {
 text-decoration: none;
 color: #930;
}
/*narrow the width of pages that will be rendered by jTip*/
#JT #main.popup {
 width: 200px;
 padding: 4px;
}
/*hide the headline of pages that will be rendered by jTip*/
#JT #main.popup h1 {
 display: none;
}

If you look at the 2.0 Search Results page in a Web browser and hover over the names of the products or product options, you can see jTip in action. It should look like Figure 1:

Figure 1. Screenshot of jTip in action

Converting off-site links into lightboxes using GreyBox

Now that you eliminated the navigational side streets, Customize Me Now 2.0 is starting to shape up. All you need to do now is handle the off-site links. The Search Results page still features pop-up links to the manufacturers' Web sites. Unlike the pop-up windows you replaced earlier with jTip, these links go to fully functioning Web sites that aren't under your control. They're too big to render as tooltips, and they're too separate from the rest of the application to make sense in a modal dialog. That's where GreyBox comes in.

Unlike the versatile ThickBox, which can handle iframe windows, Ajax data, image slideshows, and many other types of content, GreyBox is stripped down and single purpose. It's designed to cover your Web site with a translucent overlay, and then open another Web site on top. The difference between this lightbox treatment and a modal dialog is subtle, but the look is striking. You could use ThickBox for these links, but it wouldn't provide such clean separation between the two sites. You want your users to know they're looking at a completely different site.

The process of enabling a link with GreyBox should be familiar by now. Simply add a series of attributes to the link:

title: This gives the GreyBox overlay a caption.
rel: You'll add this little-used HTML attribute and give it a value of "gb_page_fs[]" — once again, a special attribute that kicks the open source library into action.

When you're done adding these attributes to the off-site links, each pop-up link will look like Listing 3 (though in the real world, Google probably wouldn't be manufacturing pizzas):

Listing 3. HTML for GreyBox links


<a target="_new" href="http://www.google.com" title="Let's Pretend Google Is
Our Product's Manufacturer" rel="gb_page_fs[]">manufacturer's website</a>

Once again, you can see GreyBox in action by viewing the Search Results page of Customize Me Now 2.0 in a browser and clicking a link to a manufacturer's Web site. It should look like Figure 2:

Figure 2. Screenshot of GreyBox in action

What you've gained

That's it; you're done. But how has this Ajax overhaul changed Customize Me Now, and what are the benefits?

Improved user experience

To understand the benefit of the changes, just look at Figure 3, the site map of the original 1.0 version:

Figure 3. Customize Me Now 1.0 site map
screenshot of Customize Me Now 1.0 site map

Now look at Figure 4, the revised site map of the 2.0 version. The navigational path now provides a straight line from search through purchase. This is the classic funnel paradigm that site owners use to increase conversion and make their process comprehensible for users. You still have access to all the same information, but additional data now pops up within the process rather than taking the user out of context.

Figure 4. Customize Me Now 2.0 site map
screenshot of Customize Me Now 2.0 site map

Progressive enhancement

You've also managed to enhance the application without breaking it for JavaScript Luddites. To see this in action, just disable JavaScript execution in your browser and interact with the 2.0 site. It should work almost exactly like Customize Me Now 1.0. Some links look a little different, but otherwise it works the same.

What you've skipped

A lot has changed between the 1.0 and 2.0 versions of Customize Me Now. But there's plenty of work you could still do to improve the application.

Classic Ajax functionality

You might have noticed that the tooltips and modal dialogs aren't really traditional Ajax calls. You're loading complete HTML documents where typical Ajax functionality loads small chunks of XHTML, XML, or JavaScript Serialized Object Notation (JSON). ThickBox and jTip do support this more common form of Ajax. But by loading complete documents, you're able to use the same URL for both the Ajax and non-Ajax version of each page. Given the goal of progressive enhancement, this is the easiest path. For traditional Ajax, you'd have to make changes to the server-side template framework. You'd also have to write custom JavaScript code to append rendering logic to the URLs so the servers could return both a full-page and a content-only version of each page. Thanks to the power of jQuery, this wouldn't take many lines of code. But for the purposes of this client-side demo, it's not necessary.

Security measures

There's one aspect of Ajax development that isn't tackled at all in this demo: security. Web application security is an enormous topic in its own right and outside the scope of this article. In one sense, by focusing only on client-side code, this example has cheated. Many security measures must be implemented on the server. That said, developers at every level of the technology stack must take personal responsibility for the security of the entire application. Front-end developers aren't exempt, for many malicious hacks can be carried out by exploiting vulnerabilities in JavaScript code, CSS, and markup. For more about this topic, see the Resources section.

Where to go from here

Now that you've untangled the customization process, there's a lot more you can do with the application. Here are just some of the additional enhancements you can tackle with additional JavaScript and CSS tweaks:

Skin the jTip, ThickBox, and GreyBox dialogs with custom CSS so they mesh better with the site's look and feel.
Add visual transitions to jTip and ThickBox using jQuery and its various effects plug-ins. The dialogs could dissolve, telescope, or otherwise "pop" each time they're launched or closed.
Break the Product Details content into separate components and provide separate links to each type of content: user reviews, image galleries, and so on.
Retrofit the Confirmation page with cross-sell content. Right now, it just plays back order details. You could hide all of that in a ThickBox window and use the screen real estate for something more useful.

Final thought: Use, don't abuse, your Ajax features

With all the work you've done to add Ajax to the application, it might seem like Ajax is the solution to all of your problems. It's not.

Modal dialogs and tooltips made sense for Customize Me Now because the content rendered inside them was manageable in size and employed a simple scrolling interface. Lots of pages wouldn't make sense inside a modal dialog. If your page uses complex Dynamic HTML (DHTML) tabs or complicated, interactive UI widgets, it should probably remain a page in its own right. You don't want to pile Ajax features on top of one another without careful consideration of the user experience.

Likewise, you should save ThickBox for informational pages rather than process pages. Sure, you could have stuffed the Customization page into a ThickBox window and popped it up on the Search Results page. But how would users react to such an interface — and how would you code for it? If a user customizes a product inside a ThickBox window and clicks Submit, will the shopping cart appear inside the same ThickBox window? Will the page underneath be updated dynamically? More importantly, will the users lose track of where they are in the customization process?

Advanced Ajax applications can provide rich interactivity inside a single screen. But such applications are typically built from the ground up. They require careful planning, information architecture, and user experience design. When retrofitting an existing application, less is often more. The goal of this exercise was to add a little bit of Ajax magic to an otherwise traditional Web site. If you want an entirely Ajax-based interface, you'd probably start from scratch.

Downloads

Description	Name	Size	Download method
Source code for the original demo app	wa-aj-overhaul2OnePointZero.zip	24KB	HTTP
Source code for the retrofitted demo app	wa-aj-overhaul2TwoPointZero.zip	88KB	HTTP

Information about download methods

More downloads

Demo: Customize Me Now 1.0¹
Demo: Customize Me Now 2.0²

Notes

See the application in action on the author's Web site.
See this version of the application, with all the changes, in action on the author's Web site.

Resources

Learn

Participate in the jQuery community and access tutorials and forums at the Learning jQuery Web site.
Get to know the jQuery API at the Visual jQuery Web site.
Continue your Ajax education with additional articles such as "Simplify Ajax development with jQuery" (Jesse Skinner, developerWorks, April 2007).
Learn how to implement lightboxes and tooltips with the Prototype JavaScript library in "Ajax for lightboxes" (Jack D Herrington, developerWorks, September 2007).
Get started with jQuery with the help of the book Learning jQuery (PACKT Publishing, July 2007).
For additional jQuery help, check out the book jQuery in Action (Manning Publication Co., February 2008).
For a more general jQuery resource, turn to the jQuery Reference Guide (PACKT Publishing, July 2007).
Check out Brian Dillard's blog, Agile Ajax, for more on jQuery and other UI topics.
For an exhaustive overview of best practices for the security of Ajax applications, see Billy Hoffman and Bryan Sullivan's recent Ajax Security (Addison Wesley Professional, December 2007).
Browse the technology bookstore for books on these and other technical topics.
The developerWorks Web development zone is packed with tools and information for Web 2.0 development.
The developerWorks Ajax resource center contains a growing library of Ajax content as well as useful resources to get you started developing Ajax applications today.

Get products and technologies

Learn all about jQuery and find additional plug-ins at the jQuery Web site. The current version as of this writing is 1.2.1.
jTip, a jQuery plug-in, allows you to replace the informational pop-up windows with simple, cross-browser tooltips.
The ThickBox plug-in allows you to load the Product Details and Comparison pages inside a modal dialog. The example in this article uses version 3.1.
Because the Comparison page in this article's sample application requires some form parameters, you need to write a bit of custom JavaScript code to render it with ThickBox. Luckily, the jQuery Forms utility library does most of the work for you.
GreyBox, another jQuery plug-in, allows you to link to the manufacturer Web sites in a simple, gorgeous lightbox. The version in this article's example is 5.53.

Discuss