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.
The quirky, child-like design of the site, built by Oxford digital agency White October, is a delight. The illustrations are gorgeous, and work brilliantly with the subtle animations and transitions. Surprisingly, all the animations are handled by CSS, while JavaScript - no, not jQuery! - is used to switch classes to handle the page transitions.
Wonderland theme
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 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, so flat cardboard-like imagery would work well."
Illustrations
The agency commissioned and worked together with illustrator Sophie Klevenow 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 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."
Mobile strategy
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, 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: try these great tutorials
- Download the best free fonts
- Brilliant Wordpress tutorial selection
Have you spotted an impressive design event website? Let us know about it in the comments!
