Skip to main content

jQuery site channels the spirit of Wonderland

The website for the jQuery UK conference has a beautiful child-like quality

The website for the jQuery UK conference has a beautiful child-like quality

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).

The quirky, child-like design of the site, built by Oxford digital agency White October (opens in new tab), 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 (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.

A range of characters from the classic children's novel make an appearance

A range of characters from the classic children's novel make an appearance

"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!"

Tweedledee and Tweedledum share space with the Walrus

Tweedledee and Tweedledum share space with the Walrus

"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."

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 (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!

Have you spotted an impressive design event (opens in new tab) website? Let us know about it in the comments!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.