Blog: the latest and greatest from the Twisted crew. Hier tref je regelmatig onze updates aan: Wat zijn we aan het doen? Wat houdt ons bezig? Nieuwe klanten die we verwelkomen. Of gewoon een goed recept of lekkere olijfolie.

17 oktober 2011

Het proces achter de Twisted site.

“Ik wil een vette site.”

Als bureau doe je altijd nét iets te lang over je eigen site. Daar worstelt de hele branche mee. Voor Twisted werd het dus hoog tijd. Hoewel klanten nog steeds enthousiast zijn over de vorige (zwarte) site, waren wij al geruime tijd bezig met een volledige herziening van onze website.

Na jaren in een zwarte webomgeving te hebben geresideerd, was er nu de wens om meer open te treden. In kleur, typografie, beeld en ontwerp. ‘Wit is het nieuwe zwart’, dus daar lag onze designfocus.

De wens.

We wilden een toegankelijkere, meer corporate uitstraling. Voorzien van een rustig, helder ontwerp. Daarnaast alleen relevante content in ons portfolio, dus niet ál ons werk online. Er moet tenslotte nog iets overblijven om tijdens presentaties mee te pronken. De site moest plezierig zijn om doorheen te browsen. Minder clicks, maar meer rijke content op één pagina.

Andere vereisten: géén Flash, goede weergave op de iPad, HQ video streaming, supersnel en uiterst goed vindbaar. SEO toepassen zonder het ontwerp onrecht aan te doen.

Trots op ons werk.

Goed werk spreekt voor zich en trots als we zijn prijkt op onze homepage een selectie van ons portfolio werk. Zoals een teaser of magazinecover die laat zien wat je mag verwachten van de inhoud. De pagina past zich moeiteloos aan naar een lichte of donkere variant afhankelijk van het werk dat getoond wordt.

De dood van flash en de opkomst van webfonts.

De tijd dat ontwerpers alleen gebruikmaakten van standaard fonts die op elk systeem beschikbaar zijn, is gelukkig voorbij. Webfonts hebben al enige tijd geleden hun entree gemaakt en daar zijn wij als ‘typophiles’ erg blij mee. Google heeft inmiddels al een aardige bibliotheek fonts beschikbaar gesteld op www.google.com/webfonts. Hier hebben we de PT sans als basis font gevonden. Dan nog een sterke header: een font dat zowel nieuw, als sterk en tijdloos oogt. Op basis hiervan vonden wij de ‘Proxima Nova’ uit 2005 een geschikte kandidaat. Hij doet denken aan classics als de ‘Akzidenz’ en ‘Futura’ met een sterk karakter.

Grote en duidelijke headers voor grote en duidelijk statements. Met deze typografische basis zijn we aan de slag gegaan met de content. Waar de oude site veelal verdeeld was in pagina’s, hebben we hier gekozen om dit samen te voegen waar mogelijk. Dus geen pagina per discipline maar één discipline pagina. Dit bevordert het lezen en maakt alles sneller toegankelijk. Het geeft ook meer ruimte om te spelen met indeling van een pagina. Dividers met anchors naar de verschillende koppen binnen een pagina voor diegene die toch nog graag op knopjes drukt. Aangevuld met elementen uit het rijke portfolio van Twisted.

Een doorsnede van ons werk.

Twisted heeft als bureau door de jaren heen al heel wat werk verzet. Doel dus om in het portfolio daar een goede doorsnede van te laten zien. Niet elk project wat we gemaakt hebben komt aan bod, maar je krijgt een aardig beeld van de disciplines die Twisted zoal beheerst. Om het ontwerp in de juiste context te laten zien is er voor gekozen om het ontwerp ook in het medium te laten zien (b.v. een website in een beeldscherm, laptop of iPad). Een klein informatief tekstje over disciplines en verder het werk laten schitteren.

Het omarmen van social communities.

In korte tijd zijn platforms zoals Facebook en Twitter de dominante communicatievorm van internetgebruikers aan het worden. Twisted voelt zich hier erg in thuis en wil dit dus ook omarmen. De mogelijkheid tot het delen, liken of tweeten is dan ook aanwezig waar relevant maar geen overkill aan like/tweet buttons. Ook het gebruik van de creatieve Vimeo community om ons beste motion-, en videowerk te showcasen bestempelt onze liefde voor deze communities.

Natuurlijk is Twisted ook aanwezig op deze social platforms bezoek ons op:

      

Na Design komt Development.

Na het ontwerp wordt het geheel doorgeschoven naar de developmenttafel. Daar wordt gekeken welke technologieën er gebruikt worden om onderdelen te realiseren en wat er nu precies met de ideeën van de designer gedaan moet worden. Omdat de wens er was om de site levendig te laten ogen door middel van animaties en dergelijke, was het zaak om deze eerst te bespreken voordat deze uitgewerkt zouden worden. Ook moest er een beslissing gemaakt worden in welke mate de site dynamisch opgebouwd werd. Hiervoor is gekozen voor Symphony CMS. De website met bijbehorend CMS is gebouwd met behulp hiervan.

Content management met Symphony CMS.

Symphony fungeert als een generator van XML waar we aan de hand van XSL templates de HTML pagina’s kunnen vormen. Omdat XSL flexibel is en je daar eenvoudig de stijl van losse, dynamische, elementen op de pagina kan aangeven, was het vormgeven van de pagina’s te doen vanuit de aangeleverde content door Symphony. Dit zorgt ervoor dat een initieel XML document naar elk ander XML formaat document omgezet kan worden; en HTML is een XML formaat (en RSS en sitemaps etc. ook.).

Omdat Symphony een volledig CMS pakket is, was het niet meer nodig om een eigen content management systeem te bouwen. Dit zorgt ervoor dat de wens naar informatie aangegeven kan worden en het invoeren daarvan meteen gedaan kan worden door de door Symphony gegenereerde pagina’s. Gelukkig heb je als ontwikkelaar nog de vrije hand om deze pagina’s in te delen en te zorgen dat de invoer van informatie logisch verloopt.

Nog een groot voordeel is dat Symphony wordt ondersteund door een groot open-source community. Daar leveren de gebruikers van het pakket zelf suggesties voor verbetering en breiden het pakket uit waar het nodig is. Wij zelf delen hier aan mee, zodat we samen met anderen een stabiel en mooi product in de lucht houden.

Dynamische elementen met behulp van Javascript.
Een site kan fijn ogen, maar ook fijn aanvoelen en daar is waar het een stap verder gaat. Hier en daar moeten elementen bewegen, reageren op de acties van de gebruiker en content moet doen wat de gebruiker zou verwachten. Om dit te realiseren is gekozen voor het gebruik van Javascript voor de effecten en voor video’s de Vimeo player. Omdat Flash niet op elke apparaat werkt is het tegenwoordig helemaal not done om dit nog in te zetten voor de leuke effecten die plaatsvinden op je webpagina’s. Sinds lange tijd is Javascript hier al een vervanging voor, en door de laatste ontwikkelingen in browsers kunnen we steeds meer toepassen.

Hier en daar zijn op de site geinige effecten gemaakt op elementen waarbij als je er met je cursor overheen gaat worden geaccentueerd. Deze effecten zijn net iets anders dan op de meeste website te zien zijn en geven daarom juist nèt dat beetje extra. Ook het portfolio heeft het nodige aan technische snufjes gekregen. Zo kan er per onderdeel gebladerd worden tussen de verschillende items, hiervoor is een geheel eigen slider gemaakt die de onderdelen over het scherm laten bewegen.

Verder is er om de laadtijd in te korten gekozen om een “endless scrolling” in te bouwen. Dat wil zeggen dat als je ver genoeg scrollt automatisch de pagina aangevuld wordt met nieuwe content. Dit zorgt voor een naadloze ervaring en geeft de gebruiker sneller de informatie die hij wil zien zonder naar de volgende pagina te navigeren.

Mobiele optimalisatie.

We leven in een periode waarin veel informatie ter beschikking is via mobiele apparaten. Dat heeft als gevolg dat website’s hier ook beschikbaar voor moeten zijn. Wij kunnen met onze website natuurlijk niet achter blijven. De grootste wens was daarin om de site optimaal werkbaar te maken voor de iPad.

Om dit te realiseren moet er vooral rekening mee gehouden worden dat het een touch-device is en er geen cursor gebruikt wordt om het apparaat te besturen zoals meestal op de computer. Dat zou betekenen dat er verschillende onderdelen die pas zichtbaar worden wanneer een cursor over een element zou zweven niet meer van toepassing zijn.

Daarom is de ervaring op de iPad net weer wat anders dan in de traditionele browser. Zo is het mogelijk om in het portfolio de verschillende onderdelen van een slide door middel van een veeg op het scherm te verwisselen. Hierdoor krijg je het gevoel alsof het werkt als andere iPad applicaties zonder de stijl van de website tekort te doen.

Splashpages.

Een leuk oogappeltje wat we nog aan willen kaarten zijn de splashpages. Hier kan tussen verschillende openingspagina’s geschakeld worden zodat de pagina een nieuwe look krijgt. Hierbij wordt de nieuwe pagina geladen en komt hij over de huidige pagina heen te liggen. Doordat er geen refresh in de browser plaatsvind is het alsof de pagina langzaam veranderd in de andere en de daar bijbehorende kleuren en afbeelding.

Website op de snelheid van het licht!

Toen we de site voor het eerst “live” bekeken waren we supertrots op wat we zagen maar minder blij met de laadtijden. Al die fonts, plaatjes, scripts en HTML staan aan de andere kant van de wereld op onze eigen server bij MediaTemple. Nu is MediaTemple al jarenlang een zeer bekende naam in hoge kwaliteit webhosting en bieden ze precies wat wij nodig hebben, het blijft toch een eind weg.

Al het moois van onze website verdient het om supersnel de weg naar je browser te vinden, dus lieten we het er niet bij zitten. We zijn gaan zoeken naar oplossingen binnen onze eigen code en naar manieren om de content dichter bij de bezoeker te brengen. Het is duidelijk dat we daarin geslaagd zijn. We comprimeren de CSS, Scripts en HTML. De bestandsgrootte van de plaatjes zijn nog nét iets kleiner geworden en we maken optimaal gebruik van de browser cache.

Daarnaast hebben we een content distributie netwerk ingeschakeld. Dit wil zeggen dat de content van onze website niet langer vanuit LA hoeft te komen maar dat ze al klaarstaat in Amsterdam. En Frankfurt, Parijs, Singapore, Hong Kong, Tokyo, San Jose, Dallas, Chicago, Newark en Washington… we kunnen dus wel zeggen dat we wereldwijd snel en altijd toegankelijk zijn en dat is een prettige gedachte.

Dankzij dit alles kunnen we stellen dat de site gemiddeld 2x sneller laadt, 60% minder bandbreedte gebruikt en 65% minder connecties hoeft te maken met de server. Dit is goed nieuws, ook voor onze mobiele bezoekers die net zo snel kunnen genieten van alles wat we gemaakt hebben zonder dat de databundel in no-time op is.

Vette site.

En dit is het resultaat. Een vette site, in ieder geval volgens ons. Design, usability, vindbaarheid, niks is aan het toeval overgelaten. Wij vinden ‘m goed gelukt en hopen uiteraard dat jij als gebruiker dit ook vindt en vaak terug zult komen om ons laatste werk te checken of de nieuwste blogs te lezen. Dus vind je onze site goed? Zeg het tegen anderen! (en like ons) Vind je dat onze site beter kan? Zeg het tegen ons!