It’s been a long time in coming, but we’ve finally launched an all-in-one dynamic javascript slider based page.
We’ve looked at using this technique a number of times, mostly on our own Mogul site. The new version of the Mogul site started at the end of 2010, but alas our website is much like the builders house or the mechanics car, never quite ready for public launch as we’re far too busy working on clients sites instead!
The simple brief from the client was to create something “whizzy-bangy”. It seemed like the perfect opportunity to use the all-in-one concept, so Louie pulled some of the ideas from the archives and built on them significantly to produce the site you see today.
We’re certainly big fans of the jQuery library here at Mogul, and this site includes one of my personal faves, Modernizr but the real star of the show is Ariel Flesler’s jQuery ScrollTo plugin. This allowed us to present the entire site on one page and scroll the viewport around – the obvious benefit of which is the user doesn’t need to reload a new page in their browser as they are navigating the site. It’s certainly proved to be a complete mind bender from a development point of view with the most complex concept being the way the content moves. In spite of the fact that it looks like the whole page is scrolling around when the user clicks on internal links, the body element of the page is in fact constantly set to 100% height and 100% width and the content scrolls around behind it. That main vertical scroll bar you can see? It’s not on the html or the body, it’s on the maincontent element inside the body. The dimensions of the page proved to be an interesting challenge too, so we’ve used a bit of responsive layout by combining some jQuery resizing tricks with a few @media queries. Take a look what happens when you resize the homepage – restore it then drag to change it’s width. Holy disappearing lawyers, Batman!
The problem weighing in the back of my mind during most of the planning was SEO. How do you get good SEO on a single page? Well that’s simple… You don’t. Each page zone that exists on the dynamic slider page also exists as it’s own single page, with it’s own page titles and descriptions. This actually solves two problems – most importantly the SEO issue, but also for users that don’t have Javascript enabled (I’m guessing they still watch black and white TV while surfing via dialup at 14.4kbps too), the sliding page just wouldn’t work. So now, if a user finds Mr. Patterson in a Google search, they’ll be directed to the static page which uses javascript to redirect them to the correct zone on the all-in-one slider.
The next issue faced was working within the two dimensions of a flat website. The sitemap of the website is pretty simple and only two deep, i.e. it’s a collection of top level pages with a number of children pages each, so this works fine from a layout point of view… until we scroll across to the blog page. On the blog page we’ve got an index (latest articles), single blog posts, categories and tags. Even if we could bust into a 3rd dimension for layout, we’ve now got 5 or six dimensions to have to contend with. Luckily for us, jQuery include the ajax .load() method. This allows the blog page to go off and grab content from a static version of the blog index and each of the single posts, category and tags pages. To wrap it all as eye-catchingly as possible we’ve animated the transitions to fade the blog in and out during load times.
It’s been a fun challenge and I’ve certainly enjoyed finally bringing this concept to fruition!
