Progressive enhancement has become a buzzword of late in front end web development, and is about taking a set of web pages, and first making them work for everybody, right down to web crawlers, then adding pieces on top using css and javascript to enhance the user experience. If you were to look at this site in a browser with all css and javascript turned off, it would look like a set of text documents, but still work, which search engines like. We then add css on top of this that is tailored to make the pages look the same across all browsers, and attractive, which our visitors (hopefully) like. Lastly, we layer a set of javascript functions utilising the jQuery javascript library on top, that further enhance the experience. We load our pages via AJAX, so only the content that changes on each page is loaded, increasing the speed. We add custom histories to the visitors browser, which allows them to still use the back button they are used to, and we add special effects to the portfolio, to make it a richer user experience. This final layer gives the site its best look.
Therefore however the visitor likes to surf the web, be they human or machine, they get the best experience tailored for them.
UPDATE (July 2010): In adding this WordPress blog to the site, we’ve learnt a lot about ajax-ifying a wordpress blog. The short answer is it is tricky, and has prompted a project to redesign the site, possibly using other techniques to speed up page loading (and also because we like the idea of an updated look). We’ll keep this site somewhere if we can for reference when the new one goes live, but for now, this is how we did it;
We use a jquery function once the page has loaded to hijack all the a tags in the page that we are looking for, like so;
$('#main a').each(function() {
if ((!$(this).hasClass('comment-reply-link')) && (!$(this).hasClass('non-blog'))) {
$(this).addClass('ajaxlink').attr('rel','blog-'+$(this).attr('href'));
}
});
We exclude the comment reply links, and any internal links to non-blog pages via the hasClass method, as we handle and ajax-ify those in a different way. The function adds an additional class to all the a tags in our page that are not comment reply links, adds the url we would want loaded if a visitor clicked that link and then passes off to the main page load function that runs throughout the rest of the site. This avoids us having to mess around with the wordpress templates and means if the visitor has javascript turned off, everything still works.
The main page load function then adds an event listener to all a tags within the entire page that have the class ‘ajaxlink’. This hijacks the link click event, and loads the central section of the page using an xmlhttp request instead, so we only bring back the central page content, and the header and footer do not require reloading. We then use the jQuery history plugin to add the page requested to the hash in the visitors browser, so if they click back they end up back in the right place in there browser history. Thus improving page load times and giving that one-page feel to the blog that the rest of the site already has.
For the comments, we hijack those links in a different way, adding an additional hidden field to the built in form, and editing the wordpress file wp-comments-post.php, to make it able to understand if we have sent our comment via ajax or via a standard form post. It only requires a small code change in this file, changing the final line from;
wp_redirect($location);
to;
if (isset($_POST['ajaxsubmission'])) {
echo('location='.$location);
} else {
wp_redirect($location);
}
This makes the comments post process return the location we want to load as a response, rather than a redirect when the form is posted via ajax, handing off the location back to the custom page loading function, so we can then load the new page along with the comment in the same progressively enhanced way.
And that’s how we did it!
