Aarron Walter

The guys over at Mail Chimp have posted some info about how I use an Ajax mailing list sign up system on the home page of client sites to triple the number of sign ups we get. It’s been amazingly successful for my clients, so much so I wrote about how to do it at SitePoint. I recently began using the Mail Chimp API to send all sign ups directly to my managed lists on their server, which makes launching campaigns pretty simple later on.

Thanks, Mail Chimp crew, for sharing the info with all who are interested.

I ran across a very useful collection of compressed versions of popular JavaScript libraries today, including Scriptaculous, and Prototype. The Prototype library compresses down from 70k to 30k, which is pretty impressive. I’m becoming more persuaded daily that MooTools is a better option, though, as it offers you the ability to pick and choose which pieces of the library you wish to download, and offers compression on your custom built package resulting in vastly smaller file sizes than the Scriptaculous/Prototype combo.

If you want to compress your own JavaScript or CSS, there are a host of utilities out there for just this task. See comments on this blog post for a laundry list of options.

As Ajax and DOM Scripting have become en vogue, blind zeal and un-enlightened use of powerful code libraries have caused many to build web sites that may impress visitors with elaborate effects, but adopt a 1998 approach to development, ignoring accessibility and search engine optimization. I’ve fallen into that trap myself at times. It’s awfully tempting to focus on seductive interface design effects that will create an interesting user experience for some, and alienate others. If your site/web application uses JavaScript to navigate, or to dynamically load in/create content critical to the user experience, then it should take measures to gracefully degrade for search engine spiders and visitors using alternative devices to access the content. If you are not building your pages to gracefully degrade, your content is invisible to search engines.

Jeremy Keith, Bruce Lawson, Rob Cherney, and many other JavaScript developers have been advocating best practices that address this issue for some time. It seems 2006 was the year we sobered ourselves after binging on inaccessible scripting techniques. Many great articles were published bringing us back to our senses, preventing us from repeating our terrible development practices of the pre-standards 90′s. The resolution to the problem is to progressively enhance a web site that functions properly without JavaScript support.

Rob Cherney demonstrates how to progressively enhance an HTML form that will function with JavaScript turned off, and will be enhanced if JavaScript is available. I’ll demonstrate how to progressively enhance a text link that makes an Ajax call to the server. If JavaScript is enabled, the href attribute is disabled and Ajax will load content from another source into a div for display. If JavaScript is disabled, the hyperlink works as usual, and directs the browser to another page where the same content is viewable. A fancy interactive, animated interface created with DOM scripting could use this approach, and gracefully degrade to a typical multi-page site that search engine spiders would have no trouble crawling.

A hyperlink can be easily disabled with a “return false” event as is seen below.

[html]Have Your Cake and Eat It Too[/html]

The onclick event will call a function then return false, preventing the hyperlink from firing. This is a very simple demonstration of progressive enhancement in action, but we can do better still. A search engine spider would navigate to page.php where it could find more content to index, but in a real world implementation of this technique, it would be advisable to attach an event to the hyperlink unobtrusively from an external script rather than from an event handler that mixes behavior and structure. By assigning a class to the link and using JavaScript to find elements with this class name you can separate behavior and structure resulting in more maintainable code, and external code that can be cached or even skipped by search engine spiders resulting in faster parsing (spiders appreciate this). I’ll take the functionality a step further to display Ajax retrieved content in a div tag when the link is clicked.

[html]
Have Your Cake and Eat It Too

[/html]

[javascript]

[/javascript]

The id of the div is placed in the link tag using the rel attribute indicating the area to place the content returned by the loadContent() function. When attaching the click event to all hyperlinks with the class "progressive", the function also finds the id of the div where the Ajax content will display and passes it on the loadContent() function.

DMXZone.com has recently published an article of mine explaining how to parse RSS feeds using an open source PHP library called Magpie, and Ajax to handle the loading of the feeds. The feed reader is scalable to display as many or as few feeds as needed using an array to conveniently configure the script. If JavaScript is disabled or unavailable in the browser, the script gracefully degrades to offer a manual method of loading the feed headlines to the page rather than becoming disabled because of the Ajax calls that load them normally. Ajax is used in this example because fetching and parsing many feeds from many sources can result in an excessive page load delay as the script waits for all results to arrive. Using Ajax, you can display the headlines for each feed as they are received, resulting in an improved user experience.

You can take a look at the finished example, and download the code archive to see how it works.

Jeremy Keith of Clear Left has written a new book that will be released soon entitled Bulletproof Ajax. I’m sure you’ve heard of or hopefully read Dan Cederholm’s Bulletproof Web Design, which examines methods of building sites that prevent the display from breaking in all situations. This new book is along the same lines, but focused instead on some new ideas behind the use of Ajax. Jeremy Keith is also the author of the popular book DOM Scripting: Web Design with JavaScript and the Document Object Model, which leads me to believe this forthcoming book will be equally as useful and well written. What’s interesting about Bulletproof Ajax is it will be, to my knowledge, the first book on the market that discusses graceful degradation of Ajax functionality (dubbed Hijax by Kieth himself). Keith has a nice presentation he gave at Web Directions South this past September that sums up the core concepts of Hijax that is a good read as you wait for his book to be released. An MP3 of the presentation was to be released as well, but as of yet is not out. You may also want to check out Kieth’s original article about graceful degradation of Ajax, the follow up where the term Hijax is coined, and his sample application which puts into practice these concepts.

Adobe has thrown their hat in the JavaScript framework ring (which is getting pretty flooded) with the introduction of Spry. What differentiates it from the dozens of other frameworks out there is the focus on XML as a central, dynamic data source fetched by Ajax. Their demos include some very slick utilities including a photo gallery, an RSS reader, and a product display system. The implementation of these complex utilities appears to be very simple. They highlight key sections in the their source code to make clear the ease of development. Of course, they also have the very familiar effects library that is virtually identical to its predecessors.

Because they are a bit late to market with their framework, I’m not sure how willing most people who are already using frameworks will be to abandon the ones they have already grown accustomed to, but people who are just getting started with JavaScript frameworks and Ajax may find this option especially enticing for its ease of use. Here’s how Adobe wants to position themselves in the framework world:

‚ÄúAs we looked at the landscape of Ajax frameworks, we realized that many of them were more oriented to the skills of a programmer and were focused on application development. Based on the needs of the design community, we wanted to put forth an approach that is very “HTML-centric” to help them add basic interactivity to their page designs.‚Äù

Spry FAQ

Jeremy Keith did a nice job at Web Directions South in his talk entitled “Explaining Ajax” of gently introducing those unfamiliar, and familiar alike to Ajax and the concepts that make it tick. His presentation walks through the history and evolution of Ajax, and concludes with a fun game of identifying Ajax at work (the audience was surprisingly wrong on a few occasions). The presentation podcast and slides are free to download.

You may also find his presentation on Hijax equally as interesting, which identifies the Accessibility and Usability shortcomings of Ajax and offers an alternate way of using it to be backwards compatible and allows it to gracefully degrade.

A couple of my readers from my recent SitePoint article have asked me about how they could extend the Ajax mailing list sign up system to receive further inputs like the user’s name and phone number. It’s actually pretty simple. If you have additional fields in your form, just modify the parameters string in mailingList.js. Here’s an example:

var pars = 'address='+escape($F('address')) + '&firstName='+escape($F('firstName')) + '&lastName='+escape($F('lastName')) + '&phone='+escape($F('phone'));

You can see that you can append as many or as few inputs from your form by just extending the GET string passed to the PHP script. Notice I’ve added the “&” before the next parameter names as is required in any GET string with more than one variable included. Of course you would need to adjust your MySQL table to include these fields, and change storeAddress.php to receive the values as well.

$address = $_GET['address'];
$firstName = $_GET['firstName'];
$lastName = $_GET['lastName'];
$phone = $_GET['phone'];


$addresscheck = mysql_query("SELECT * FROM mailinglist WHERE email='" . $address . "', firstName='" . $firstName . " ', lastName='" . $lastName . "', phone=' . $phone . "' ");

It’s also quite easy to modify this technique to work for things like contact forms, or user input in a CMS by simply adjusting your form, and the references to the field names. The principles are still the same.

If you are interested in other useful Ajax tools, you may want to check out Dustin Diaz’s Ajax contact form. It’s pretty clever, and packed with nice effects, but seems to struggle to work in Opera. It’s a pretty sophisticated example of a contact form.

A word of caution, it’s pretty easy to get swept up by the allure and ease of implementation of many Ajax/DOM scripting tricks. Always ask yourself how it benefits or hurts the user experience. If you find yourself adding features because they are cool, yet they negatively impact findability, accessibility, or cross-browser use then you probably should reconsider. James Edwards has written a sobering article about Ajax and screen readers (lump search engine spiders in that group too as they are equally as blind) that may bring you back down to earth about the Ajax trend. I should also mention that my article is actually backwards compatible for those without JavaScript enabled, giving us the best of both worlds. The article also uses Ajax specifically to enhance the user-experience by making the impulse action of signing up for a mailing list faster and more convenient.