Hoe de site van Rock Werchter tot stand kwam

22 november 2012 Inzichten /

Soms passeren er projecten de revue die net dat extra beetje aandacht vergen. Er wordt een hoog bezoekersaantal verwacht, of het moet uitermate vlot werken op verschillende toestellen. Beide criteria waren van toepassing op de nieuwe website van Rock Werchter, een evenement dat België in het buitenland even goed vertegenwoordigt als frieten, spruiten, witloof, bier, het Atomium en chocolade.

Vernislaag

Ons eerste probleem was het hoge aantal verwachte bezoekers. Om deze op te vangen dachten we meteen aan Varnish, de reverse proxy die HTTP requests cachet. Hun slogan “Varnish makes websites fly” is niet gelogen; ze claimen met hun software een prestatiewinst tussen 300x en 1000x snellere requests naar webpagina’s.

Voor de configuratie van Varnish hebben we samengewerkt met Openminds, verdeler van groene snoepkikkertjes en leverancier van hosting extraordinaire. We volgende hun expertise en raad op, met als gevolg een geweldig resultaat. Op de launchdag haalden we zomaar eventjes een hit-rate (aantal succesvolle requests naar door-Varnish-gecachete webpagina’s) van 99%.

Fork CMS werd hiervoor zo veel mogelijk geoptimaliseerd zodat de cache tijdig opnieuw werd aangemaakt bij aanpassingen (verder meer hierover) en dat er zo weinig mogelijk tot geen gebruik wordt gemaakt van cookies of sessies omdat we niet willen dat andere gebruikers jouw persoonlijke gegevens zouden te zien krijgen, of de pagina hierdoor niet cachebaar is.

Brothers in arms

Omdat we héél zeker wilden zijn dat er geen enkel moment van downtime zou zijn aan onze kant, werd er ook gekozen om niet vanaf 1 server, maar vanaf 2 servers simultaan te hosten. Dat is de eerste keer dat we ons vertrouwde Fork CMS hierop hebben moeten afstemmen in combinatie met Varnish.
De grootste uitdaging hierbij bestond er in om er voor te zorgen dat die twee van elkaar wisten en er vrij gemakkelijk een extra server kan aan worden toegevoegd, ongeacht via welke server een bezoeker op de site kwam. De gemeenschappelijke bestanden zoals (cache en dergelijke) zetten we op een shared drive die door alle servers bereikbaar is. Hier zit een kleine vertraging op maar dank zij Varnish is dit verwaarloosbaar.
Hierbij mochten we dus ook niet uit het oog verliezen dat aanpassingen in 1 keer op alle nodige plaatsen kwamen te staan (deployen). Voor de database is het verhaal vergelijkbaar, met dat verschil dat hier de sync tussen de servers automatisch loopt.

Om te deployen maken we gebruik van Capistrano. Indien correct ingesteld, is het een kwestie van het juiste commando op te geven en al de rest gaat van zelf. Dit systeem laat moeiteloos toe om naar verschillende servers over te zetten. Er zijn echter wel enkele taken die maar 1 keer kunnen uitgevoerd worden, zoals de database aanpassingen of het instellen van een tag op ons versiecontrolesysteem (git) wanneer iets live komt. Hiervoor gebruiken we verschillende roles per server. Hiermee maak je Capistrano wijs wat wel en niet mag uitgevoerd worden.

Wat we in dit proces niet mogen vergeten is dat, wanneer op de server iets is aangepast, ook de Varnish cache moet geleegd worden. We laten dat ook door Capistrano afhandelen door als laatste stap een script uit te voeren. Openminds heeft ons voorzien van de nodige commando’s om de purge via wildcards uit te kunnen voeren per server zodat we niet elke file 1 voor 1 moeten purgen, maar toch kunnen specifiëren wat wel en niet mag heringesteld worden.

Een soortgelijke bewerking maken we in het CMS, wanneer iemand iets aanpast. Het systeem werd aangepast om uit te zoeken welke modules beïnvloed worden, en op welke url’s die modules ook effectief worden gebruikt. Dit werkt ook taalafhankelijk, ongeacht dat sommige onderdelen van de website taalonafhankelijk zijn.

Puur voor de sport en de gezelligheid hebben we tijdens de drukke periodes nog gedeployed terwijl de bezoeker niets merkte van de aanpassingen en de servers op geen enkel moment stotterden.

Mobile

De volgende uitdaging was de mobiele weergave van de website. Rock Werchter is mee met hun tijd, en dus was voor hen de mobiele ervaring even belangrijk als de desktop-versie. Dank zij onze expertise op vlak van responsive design leverden we een modern en functioneel resultaat af waar we als Belgen trots op mogen zijn.

Onder het motto “less is more (on mobile)” verdwijnt de hoofdnavigatie in functie van de zoekfunctionaliteit. De verschillende inhoudsblokken worden onder elkaar geplaatst, en de slideshows worden herschaald naar een kleiner formaat.

Omdat de site veel en grote foto’s bevat moesten we op zoek naar een oplossing voor responsive images. Op die manier laden we een kleinere of grotere afbeelding in afhankelijk van de schermgrootte van het toestel waarmee de gebruiker surft. Sterker nog, we wilden de juiste afbeeldingen asynchroon inladen zodat de site niet moet wachten op alle foto’s. Met behulp van een javascript plugin worden afbeeldingen afhankelijk van de schermgrootte “lazy” ingeladen.

Technisch vergden vooral de slideshows wat extra aandacht. We hebben gekozen voor Flexslider, een responsive slider plugin gebouwd op jQuery. Deze heeft support voor swipe movements op touch-toestellen, en past via JavaScript zijn functionaliteiten aan naargelang het toestel waarmee je surft. En dat ze “on top of things” zijn bewijst het volgende voorval: De dag voor de launch hadden we een probleem op een android toestel met links op slides die magisch verdwenen na de eerste transitie; een week eerder bleek de auteur reeds een oplossing hiervoor te hebben geschreven in een recente update. Crisis averted.

IA

Omwille van de ongebruikelijk korte doorlooptijd hebben we beslist om de verschillende processen zo veel mogelijk parallel te laten lopen.
De interactie met development en design werd geoptimaliseerd door tijdens de IA de interactie met elkaar al zo groot mogelijk te maken en development al te laten starten waar kon.
In plaats van het prototype in verschillende fasen te laten verlopen met telkens goedkeuring en feedback hebben we bij de eerste voorstelling de klant er al bij gehaald en gezorgd dat alle feedback verwerkt was voor die ons kantoor terug verliet.

Launchday

De lancering van de website verliep zeer vlot. Varnish presteerde enorm goed dankzij de gecombineerde effort van Openminds en ons development-team.

Om geen last te hebben van DNS-aanpassingen wanneer we van de vorige hosting overstapten naar de hosting bij Openminds, werd beslist om de nameservers al een paar dagen op voorhand aan te passen en een proxy de request te laten afhandelen. Op die manier merkte de bezoeker geen verandering tot op de laatste seconde. Enkele minuten later was “onze” site live.

De volgende grote drukte konden we verwachten bij het van start gaan van de ticketverkoop. Na de vlotte launch hadden we er het volste vertrouwen in dat onze site hier geen probleem mee ging hebben. Op basis van een door de klant in te geven tijdstip zorgde het systeem dat de url’s automatisch correct werden gezet op het juiste moment. De eigenlijke ticketverkoop verloopt via een externe website. Bij ons liep alles perfect, maar de reservatie-servers hebben even gestotterd en afgezien door de massale toeloop.

Al bij al mogen we spreken van een geslaagde lancering.

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.