Website Gareth Emery

Website Gareth Emery

Gareth Emery is een Engelse trance, house en progressive producer en DJ die sinds 2006 is te vinden in de DJ Mag Top 100, met als hoogtepunt #7 in 2010. Met een #1 album in de US iTunes, 5 miljoen verkochte releases en meer dan 100 miljoen YouTube views was het tijd voor een bijpassende site.

  • Datum Juni 2015
  • Rol Interaction designer, Front-end developer
  • Klant Dancefoundation
  • URL www.garethemery.com

Social content in een eigen stijl

Gareth Emery heeft sinds 2002 een enorme fanbase opgebouwd en heeft via social media in totaal 3 miljoen volgers. De website is dan ook gebouwd rond de social kanalen van de DJ. Content van onder andere Instagram, Twitter, YouTube en Bandsintown wordt in de website verwerkt, zodat de site actueel en relevant blijft.

Hover over onderstaande afbeelding en zie hoe de homepage is opgebouwd uit social media content

De homepage toont een overzicht van laatste social updates, optredens en releases
Instagram
Bandsintown
YouTube
De homepage toont een overzicht van laatste social updates, optredens en releases (hover over de afbeelding)

Responsive grid op maat

Content wordt weergegeven in een op maat gemaakt grid. Voor verschillende schermgroottes is een ander grid ontworpen, zodat content er op elke schermgrootte perfect uitziet. Deze aanpak vraagt meer flexibiliteit van content dan een standaard website, daarom is er een API gebouwd om content en opmaak van elkaar te scheiden.

Van alle afbeeldingen worden verschillende resoluties opgeslagen en via het nieuwe <picture> element ingeladen in de browser. Dit zorgt voor een snellere laadtijd van de site, omdat gebruikers alleen de kleinst mogelijke afbeelding downloaden.

Voor elke pagina en schermgrootte is een grid indeling op maat ontwikkeld

Flexibele accentkleuren

Een opvallend detail is dat de accentkleur te wijzigen is. Hierdoor kan het kleurenschema van de site eenvoudig worden afgestemd op bijvoorbeeld het artwork van een nieuwe release.

› Blauw › Rood › Groen › Roze › Paars
  • Een accentkleur op maat zorgt voor een kleurenschema die aansluit op bijvoorbeeld het nieuwste album van Gareth Emery
  • Een accentkleur op maat zorgt voor een kleurenschema die aansluit op bijvoorbeeld het nieuwste album van Gareth Emery
  • Een accentkleur op maat zorgt voor een kleurenschema die aansluit op bijvoorbeeld het nieuwste album van Gareth Emery
  • Een accentkleur op maat zorgt voor een kleurenschema die aansluit op bijvoorbeeld het nieuwste album van Gareth Emery
  • Een accentkleur op maat zorgt voor een kleurenschema die aansluit op bijvoorbeeld het nieuwste album van Gareth Emery

Geoptimaliseerde snelheid door Isomorphic Single Page Application

De website is ontwikkeld als single page application (SPA). Dit houdt in dat alleen bij het eerste bezoek aan de site het raamwerk wordt gedownload. De gebruiker navigeert vervolgens zonder de pagina te herladen binnen dit raamwerk. Dit resulteert in een extra snelle ervaring voor de eindgebruiker.

Zoekmachines en web crawlers kunnen dynamische content uit een SPA vaak niet verwerken, daarom is gekozen voor een Isomorphic opzet. Dit houdt in dat de server bij het eerste bezoek aan de site het raamwerk alvast invult met de juiste content. Alle verdere interactie wordt dynamisch uitgevoerd zonder de pagina te herladen. Deze hybride opzet zorgt voor betere SEO indexering en een snellere laadtijd.



www.garethemery.com