Ajax Makeover, part 3rd: Improving existing sites with jquery, Ajax tabs, and photo carousel

Ajax technology has changed the face of large commercial web applications, but many small Web sites do not have the resources needed to rebuild the entire user interface. The new features should be able to address real-world interface problems and improve the user experience to prove their value. This series explains how to incrementally improve the user interface with open source client libraries. In this installment, learn how to use DHTML and Ajax to transform slow, confusing, annoying product detail pages into fast, elegant pages. We will use incremental improvements to ensure that all user agents still have access to your site.

About this article

This article explains the steps of using Ajax technology to improve a Web 1.0 shopping site. You can download the sample application source code before and after the improvement. You can also see the results of these two versions on the author's Web site. In addition to Ajax technology and best practices, learn how to improve the user experience with Ajax with incremental improvements, ease-of-use, and user experience Design (UxD) principles.

This article assumes that readers have a good understanding of HTML and CSS, and at least a basic understanding of JavaScript and Ajax programming techniques. The sample application is built using only client code, but the techniques demonstrated can also be applied to any server-side application framework. To run the sample site, you need to run at least one basic WEB server on the local host. You can also study the source code and see how the sample site works on the author's Web site.

Review part 1th and part 2nd

Parts 1th and 2nd of this series describe the sample application Customize Me now and begin the process of improving from web version 1.0 to the Ajax-supported version of Web 2.0. They discuss the business reasons for this improvement and the reasons for ease of use. They also help you set up several open source tools, including the JQuery JavaScript framework and several of its plug-ins. By using these libraries, the pop-up messages, outbound links, and navigation Sidebar are replaced with modal dialogs, ToolTips, and Lightbox, thus improving the user action flow of the Customize Me now. In this process, the progressive improvement principle is adopted; When JavaScript is disabled, pages of an improved Web 2.0 application are automatically degraded to the Web 1.0 experience.

Objective of Part 3rd

In this installment, we'll put the content of the product detail page into a tabbed interface to improve its manageability. Also in an image carousel to display the product image, so as to improve the control of the image. You'll learn how to apply both technologies with simple Dynamic HTML (DHTML) or more complex Ajax code. Whichever method you use, incremental improvement is applied so that the page remains accessible when you disable JavaScript. To achieve these goals, you will use another two jquery plug-ins: the Jcarousel for implementing the image slides and the JQuery UI Tabs for implementing the tabs.

To understand the concept of this term, take a look at Customize Me now 1.1, which is a slightly improved version of the original example site. We will create Customize Me now 2.1 by modifying version 1.1, which contains all the improvements that the entire series describes.

Two Product detail Pages: single page and multiple pages

One of the most complex parts of an E-commerce Web site is the Product Details section. The site gathers a lot of information about the product, from simple descriptions and technical specifications to content collected from the user community (such as user reviews). Of course, there are product images, and each product often has multiple images. From a user experience perspective, the challenge is to show users the data they need to buy a product, while avoiding too much information to haunt users.

In a way, Customize Me now 1.0 is easier to do with Ajax. The product details that it displays are easily placed on a single page. In Customize Me now 2.0, by using JQuery and Thickbox, replace the original page with a modal dialog box. This helps improve the user action flow from search to purchase.

Now, however, demand has changed. Customize Me Now 1.1 displays more detailed information than the 1.0 version. These include many long blocks of text and many large photos (images from the popular Web 2.0 photo sharing site Flickr). Before the advent of Ajax technology, there were two ways to show so much: a long scrolling page (see Figures 1 and 2), or split the page into smaller pages with one page per block or photo (see Figure 3 and 4).