Inhoud
Je zou verwachten dat de website van een jQuery-conferentie een aantal slimme webontwikkeltrucs bevat, maar je zou niet per se verwachten dat deze prachtig is ontworpen. De organisatoren van jQuery UK hebben echter op beide fronten een voltreffer gescoord met hun door Alice in Wonderland geïnspireerde website.
Het eigenzinnige, kinderlijke ontwerp van de site, gebouwd door het digitale bureau White October uit Oxford, is een genot. De illustraties zijn prachtig en werken uitstekend samen met de subtiele animaties en overgangen. Verrassend genoeg worden alle animaties afgehandeld door CSS, terwijl JavaScript - nee, niet jQuery! - wordt gebruikt om van klasse te wisselen om de paginaovergangen af te handelen.
Wonderland-thema
We houden ook van de manier waarop het ontwerp de conferentie in Oxford promoot zonder te kiezen voor de clichématige ‘droomtorens'-beelden die met de stad te maken hebben.
Wards legt uit hoe het Alice-thema tot stand kwam: "Toen we de conferentieruimte voor het eerst bezochten, werden we getroffen door de ligging aan de rivier, dus een rivierthema leek ons gepast", zegt hij. 'We hebben wat onderzoek gedaan en ontdekten dat Lewis Carroll Alice’s avonturen in Wonderland bedacht terwijl hij de rivier door Oxford zeilde met drie kleine meisjes, de dochters van de vice-kanselier van de University of Oxford, van wie er een Alice heette.
"We dachten dat het boek ons een rijke bron aan beeldmateriaal voor de site zou geven, en bood volop gelegenheid voor animatie. We wilden ook inspelen op de sterke punten van CSS-animatie, zodat platte kartonnen afbeeldingen goed zouden werken."
Illustraties
Het bureau gaf de opdracht en werkte samen met illustrator Sophie Klevenow om de personages te creëren. 'We herlezen Alice in Wonderland en kozen de belangrijkste scènes en personages om te ontwikkelen. Onze opdracht aan Sophie was om het vuil te houden - we wilden niet dat het te schattig zou zijn.
"Onze personages zijn onder meer het Witte Konijn op een boot, de Mad Hatter die thee drinkt en natuurlijk de Jabberwocky, die vuur spuwt en met zijn vleugels klappert. De Cheshire Cat heeft haaientanden - hij verschijnt en verdwijnt overal op de site. de conferentie-T-shirts zoals we die kennen, ontwikkelaars zijn dol op katten! "
"We hebben CSS3-transformaties, overgangen en animaties gebruikt. Het maakt gebruik van geneste eenvoudige animaties in elkaar om complexere animaties te produceren. MINDER CSS was een essentieel hulpmiddel om deze gemakkelijk te begrijpen en te gebruiken cross-browser te maken. De geproduceerde CSS is veel complexer om te zien. bij dat onze MINDER bestanden! "
De site werkt perfect in Chrome, Firefox en IE10, evenals de nieuwste versie van Opera. "We schakelen pagina-overgangseffecten uit voor browsers die de zogenaamde’ pushState ’niet ondersteunen, maar als ze de CSS3 die we gebruiken, kunnen ze de animaties zien."
Mobiele strategie
De site is gebouwd met Twitter Bootstrap en het hoofdbeeld wordt verkleind op mobiele browsers. "We ontdekken echter dat zelfs als de browsers de CSS3-animaties ondersteunen, sommige van de oudere telefoons, vooral Android, niet meer reageren.
"We zullen waarschijnlijk de animaties voor dit soort telefoons moeten uitschakelen. Op nieuwere apparaten zoals de iPhone 5 en de Nexus 4 werken de animaties erg goed."
Vond dit leuk? Lees deze!
- Een app bouwen: probeer deze geweldige tutorials
- Download de beste gratis lettertypen
- Briljante selectie van Wordpress-tutorials
Heb je een indrukwekkende website voor designevenementen gezien? Laat het ons weten in de comments!
