Innhold
Du forventer at nettstedet til en jQuery-konferanse inneholder noen smarte web-dev-triks - men du forventer ikke nødvendigvis at den skal være vakkert designet. Arrangørene av jQuery UK har imidlertid scoret en direkte hit på begge fronter med deres Alice in Wonderland-inspirerte nettsted.
Den quirky, barnlignende utformingen av nettstedet, bygget av Oxford digitalbyrå White October, er en fryd. Illustrasjonene er nydelige, og fungerer strålende med de subtile animasjonene og overgangene. Overraskende nok håndteres alle animasjonene av CSS, mens JavaScript - nei, ikke jQuery! - brukes til å bytte klasse for å håndtere sideovergangene.
Eventyrland tema
Vi elsker også måten design fremmer den Oxford-baserte konferansen uten å velge det klisjéformede 'dreaming spir' -bildet som er knyttet til byen.
Wards forklarer hvordan Alice-temaet ble til: "Da vi først besøkte konferansestedet, ble vi rammet av beliggenheten ved elvebredden, så et elvetema virket passende," sier han. "Vi undersøkte litt og oppdaget at Lewis Carroll drømte om Alice's Adventures in Wonderland mens han seilte nedover elven grundig Oxford med tre små jenter, døtrene til University of Oxfords rektor, hvorav den ene ble kalt Alice.
"Vi trodde at boken ville gi oss en rik kilde til bilder for nettstedet, og ga mange muligheter for animasjon. Vi ønsket også å spille til styrken i CSS-animasjon, så flate papplignende bilder ville fungere bra."
Illustrasjoner
Byrået bestilte og jobbet sammen med illustratøren Sophie Klevenow for å skape karakterene. "Vi leste Alice i Eventyrland på nytt og valgte nøkkelscener og karakterer å utvikle. Vår oppgave til Sophie var å holde den skitten - vi ville ikke at den skulle være for søt.
"Våre figurer inkluderer den hvite kaninen på en båt, Mad Hatter tar te og selvfølgelig Jabberwocky, som puster ild og klaffer vingene. Cheshire Cat har haientenner - han dukker opp og forsvinner over hele siden. Han er også på konferansen T-skjorter som vi kjenner utviklere elsker katter! "
"Vi brukte CSS3-transformasjoner, overganger og animasjoner. Den bruker nestede enkle animasjoner i hverandre for å produsere mer komplekse animasjoner. MINDRE CSS var et viktig verktøy for å gjøre dette enkelt å forstå og arbeide på tvers av nettleseren. Den produserte CSS er mye mer kompleks å se ut på det våre MINDRE filer! "
Nettstedet fungerer perfekt i Chrome, Firefox og IE10, samt den siste versjonen av Opera. "Vi slår av sideovergangseffekter for nettlesere som ikke støtter det som kalles 'pushState', men hvis de kan håndtere CSS3 vi bruker, vil de se animasjonene."
Mobil strategi
Nettstedet ble bygget med Twitter Bootstrap og hodebildet skaleres ned på mobile nettlesere. "Vi finner imidlertid ut at selv om nettleserne støtter CSS3-animasjonene, blir noen av de eldre telefonene, spesielt Android, veldig svarte.
"Vi må sannsynligvis deaktivere animasjonene for denne typen telefoner. På nyere enheter som iPhone 5 og Nexus 4 fungerer animasjonene veldig bra."
Likte dette? Les disse!
- Hvordan bygge en app: prøv disse flotte opplæringene
- Last ned de beste gratis skriftene
- Strålende Wordpress opplæringsvalg
Har du oppdaget et imponerende nettsted for designbegivenheter? Gi oss beskjed om det i kommentarene!
