Nieuwe theme voor WithoutElephants.com

september 2015 - november 2015

Van september 2015 t/m november 2015 heb ik voor een verdiepingsopdracht voor mijn studie Kunst & Techniek gewerkt aan een nieuwe wordpress theme voor WithoutElephants.com. Hierbij was de doelstelling voor het product voornamelijk het verbeteren van de snelheid en SEO. Voor mij persoonlijk was de doelstelling om meer kennis op te doen op het gebied van PHP en wordpress.

homepage screenshot
De nieuwe homepage van Without Elephants!

Beschrijving Without Elephants

Without Elephants is een blog van Céline waarop zij schrijft over heel uiteenlopende zaken, van mode tot interieur en van recepten tot sport, alles komt aan bod. Hoewel deze blog inmiddels al meerdere jaren bestaat is het sinds januari 2015 officieel een bedrijf. Slow and steady wins the race gaat voor deze blog zeker op, de groei in bezoekersaantallen is zeer stabiel, maar een flinke boost kan natuurlijk nooit kwaad. Without Elephants is, als één van de weinige blogs van Nederland, gevestigd in Enschede en kwaliteit staat hoog in het vaandel.

Leerdoelen

De leerdoelen die van toepassing zijn op de hierna omschreven opdracht zijn:

  • Als developer wil ik minimaal 1 CMS beheersen zodat ik een website kan opleveren met een CMS optimaal geïntegreerd.
  • Als developer wil ik PHP beheersen zodat ik een website zo efficient mogelijk kan laten functioneren.
  • Als developer wil ik databases kunnen maken en beheren zodat ik uitgebreidere functionaliteiten kan inbouwen in een website.

De opdracht

De expertise van Céline ligt in het schrijven van teksten, fotografie en het managen van social media, daarom was zij op zoek naar iemand anders om de ietwat verouderde website eens flink op de schop te gooien. De oude wordpress theme is gemaakt met behulp van een theme bouw programma en bleek daardoor ongeschikt om te verbeteren. Er is besloten dat de nieuwe theme zowel qua design als qua development helemaal opnieuw gebouwd moest worden. Het design was reeds klaar bij aanvang van deze opdracht. De opdracht bestond dan ook uit het bouwen van de nieuwe theme, waarbij een aantal problemen van de oude theme opgelost moesten worden.

De belangrijkste focus punten voor de nieuwe theme waren:

  • Snelheid
  • Optimalisatie voor mobiele apparaten
  • SEO

Op basis hiervan heb ik een lijst samengesteld met Must have's, Should have's, Could have's en Won't have's.

  • Must have
    • Mobile first ontwikkeling
    • Werkend t/m IE10
    • Alle standaardelementen werkend
  • Should have
    • Google analytics metingen
    • Functioneel t/m IE8
    • Grote aanpasbaarheid via het aanpassen menu (geen statische elementen)
    • Shortcodes voor het embedden van Youtube video's
    • Plugin voor het direct editen van content (in-page)
  • Could have
    • Meertaligheid
    • Cookies om onderdelen in en uit te schakelen
    • Automatische handtekening onder post
    • Functioneel gebruik van Javascript (geen onnodige code)
    • Rich pins (pinterest)
  • Won't have
    • Accountregistratie

Van deze lijst zijn uiteindelijk slechts 3 dingen niet behaald, te weten: meertaligheid, rich pins en accountregistratie. Alle andere genoemde zaken zijn geïmplementeerd in de nieuwe theme.

MoSCoW

Op basis van de opdracht heb ik een lijst samengesteld met Must have's, Should have's, Could have's en Won't have's.

  • Must have
    • Mobile first ontwikkeling
    • Werkend t/m IE10
    • Alle standaardelementen werkend
  • Should have
    • Google analytics metingen
    • Functioneel t/m IE8
    • Grote aanpasbaarheid via het aanpassen menu (geen statische elementen)
    • Shortcodes voor het embedden van Youtube video's
    • Plugin voor het direct editen van content (in-page)
  • Could have
    • Meertaligheid
    • Cookies om onderdelen in en uit te schakelen
    • Automatische handtekening onder post
    • Functioneel gebruik van Javascript (geen onnodige code)
    • Rich pins (pinterest)
  • Won't have
    • Accountregistratie

Van deze lijst zijn uiteindelijk slechts 3 dingen niet behaald, te weten: meertaligheid, rich pins en accountregistratie. Alle andere genoemde zaken zijn geïmplementeerd in de nieuwe theme.

Resultaat

Uiteindelijk zijn bijna alle MoSCoW onderdelen voltooid en is de theme volledig functioneel. Om te bekijken hoe groot de verbetering is op het gebied van snelheid, heb ik een aantal snelheidstest gedaan. De eerste test is de Google Pagespeed Insights test, deze test kent de website een score tussen 0 en 100 toe op 3 gebieden: desktop, mobiel en gebruikerservaring. Bij deze testresultaten moet opgemerkt worden dat deze tests uitgevoerd zijn op een development versie van de nieuwe theme waarbij nog geen compressie op de afbeeldingen is gebruikt, de css en javascript bestanden niet gecomprimeerd zijn en er geen gebruik gemaakt is van browsercaching.

Oude theme Nieuwe theme
Mobiel 51/100 68/100 +17
Desktop 60/100 75/100 +15
Gebruikerservaring 63/100 100/100 +37

Er zijn dus flinke verbeteringen behaald ten opzichte van de oude theme. Daarnaast is er nog een test uitgevoerd om de laadtijd van de website te vergelijken. Hierbij is een onderscheid gemaakt tussen de eerste keer dat iemand op de website komt (first view) en iemand die al eerder is geweest (repeat view), dit in verband met caching van de browser.

Oude theme Nieuwe theme
First view 8027ms 4529ms 177% sneller
Repeat view 4438ms 2418ms 183% sneller

Functionaliteit

Naast de hiervoor genoemde meetbare verbeteringen zijn er ook enorm veel verbeteringen qua functionaliteit. Een aantal belangrijke verbeteringen zijn:

  • Lege p tags worden automatisch verwijderd
  • De auteursnaam zal automatisch onder de post geplaatst worden
  • De afbeelding in het "blokje" op de homepage is automatisch geselecteerd
  • De samenvatting zal automatisch worden gegenereerd wanneer deze afwezig is
  • Een responsive youtube player wordt automatisch gegenereerd op de plaats van een url

Naast deze nieuwe functionaliteiten heb ik een plugin geschreven waarmee het mogelijk is om content aan te passen zonder hiervoor naar de wordpress omgeving te gaan. De plugin werkt door (als admin) dubbel te klikken op het onderdeel van de post dat aangepast moet worden. Vervolgens kan er hier aangepast worden, wanneer de persoon daarna op save klikt zijn de wijzigingen opgeslagen. Deze plugin is ideaal voor kleine aanpassingen (spel/tikfouten) en bevordert de workflow enorm.

Research

Aangezien ik voor aanvang van dit project voornamelijk kennis had van front-end development moest ik een behoorlijke hoeveelheid research verrichten om dit project tot een goed einde te brengen. Door deze research heb ik mijn kennis enorm kunnen uitbreiden, vooral op het gebied van PHP en wordpress. Een aantal dingen waar ik voor deze opdracht bijna niets over wist, maar die ik nu effectief kan toepassen in websites zijn:

  • Wordpress plugin API
  • Wordpress functions
  • Wordpress shortcodes
  • Wordpress customization API
  • The Loop
  • PHP
  • Cookies

Deze opdracht is zeer nuttig gebleken en het heeft mijn kennis op het gebied van wordpress en php enorm vergroot. Klik hier om naar de website te gaan

Contact

*Verplichte velden