Our recently released site howarths.nl has generated quite alot of interest, especially for its graceful degredation and deep linking for content. Howarths was built on an agile version of the “hijax” methodology – i.e. a working site was built using the open source Drupal CMS before all links on the site were “hijacked” to allow for the ajax and animation to take over.
When each link is hijacked (the link returns false and the url passed to a handler), the page request is then modified to include certain parameters that remove the header and footer from each page and only display the juicy bits in between, which is then inserted into the DOM.
The benefits:
- SEO – having a standard, non-ajax version of the site means that all content is available to search engines and standard robots.txt rules etc can be applied as they never even see the javascript.
- Accessibility – rather like search engines screen readers, elderly browsers and users with javsacript turned off never need know the functionality they are missing out on.
- Flexibility – the various content types can be delivered using various url parameters to allow the pdf stock list, for example, to be generated using the same framework.
All navigation is handed over to the excellent SWF Address library to allow the back button to function. The structure of the SWF Address anchors were kept identical to the actual page, allowing the server to check for javascript whenever a regular deep link is used (i.e. from a google search), and if detected convert the url to the SWF Address pattern and redirect to the homepage. You can see the effect here: http://www.howarthsnl.com/?q=products/category/50 and with a normal SWF Address deep link here: http://www.howarthsnl.com/#/products/category/50 . To most users, no difference!
There are many other cool little features around the site, including a custom image magnifier, prettified select lists (using a modified version of the jQuery selectbox plugin), a custom setpped coda page slider for navigating through product lists and an also heavily modified jQuery cycle plygin was used throughout to manage gallery transitions.
All in all, an exciting project to work on!
