You'd expect the website of a jQuery conference to feature some clever web dev tricks - but you wouldn't necessarily expect it to be beautifully designed. The organisers of jQuery UK, though, have scored a direct hit on both fronts with their Alice in Wonderland-inspired website (opens in new tab).
We also love the way the design promotes the Oxford-based conference without opting for the clichéd ‘dreaming spires’ imagery associated with the city.
Wards explains how the Alice theme came about: "When we first visited the conference venue, we were struck by its riverside location, so a river theme seemed appropriate," he says. "We did some research and discovered that Lewis Carroll dreamed up Alice's Adventures in Wonderland (opens in new tab) while he boated down the river thorough Oxford with three little girls, the daughters of the University of Oxford’s Vice-Chancellor, one of whom was called Alice.
"We thought that the book would give us a rich source of imagery for the site, and offered plenty of opportunity for animation. We also wanted to play to the strengths of CSS animation (opens in new tab), so flat cardboard-like imagery would work well."
The agency commissioned and worked together with illustrator Sophie Klevenow (opens in new tab) to create the characters. "We re-read Alice in Wonderland and chose key scenes and characters to develop. Our brief to Sophie was to keep it dirty - we didn’t want it to be too cute.
"Our characters include the White Rabbit on a boat, the Mad Hatter having tea and of course the Jabberwocky, who breathes fire and flaps his wings. The Cheshire Cat has sharks' teeth - he appears and disappears throughout the site. He is also on the conference T-shirts as we know developers love cats!"
"We used CSS3 transforms, transitions and animations. It uses nested simple animations inside each other to produce more complex animations. LESS CSS (opens in new tab) was an essential tool for making this easy to understand and work cross browser. The produced CSS is much more complex to look at that our LESS files!"
The site works perfectly in Chrome, Firefox and IE10, as well as the latest version of Opera. "We turn off page transition effects for browsers that don't support what is known as 'pushState', however if they can handle the CSS3 we use they will see the animations."
The site was built with Twitter Bootstrap and the head image scales down on mobile browsers. "However we are finding that even if the browsers do support the CSS3 animations some of the older phones, especially Android (opens in new tab), become very unresponsive.
"We will probably need to disable the animations for these types of phones. On newer devices like the iPhone 5 and the Nexus 4 the animations work really well."
Liked this? Read these!
- How to build an app (opens in new tab): try these great tutorials
- Download the best free fonts (opens in new tab)
- Brilliant Wordpress tutorial (opens in new tab) selection
Have you spotted an impressive design event (opens in new tab) website? Let us know about it in the comments!