Golfclub Semslanden – Moderniseren van een oude Website + Bouwen Custom WordPress Golf Agenda Module

Ruiter Fotografie - Nieuwe responsive website

De uitdaging: Een jarenoude WordPress website naar 2019 halen. Oh en of we ook iets konden bedenken voor de golf-agenda.

De uitdagingen die deze ogenschijnlijk simpele vraag met zich meebracht waren daarnaast niet op een hand te tellen. Want ja er waren een aantal commissies (20+) met leden die af en toe nieuws moesten kunnen plaatsen, er was een gigantische website met nieuwsberichten van jaaaaren terug (die uiteraard allemaal bewaard moesten blijven) en meer dan 100 content-pagina’s waarvan er een onderverdeling is gemaakt welke al dan niet beschikbaar moeten zijn voor leden of juist voor niet-leden. Het inloggen moest gelinkt zijn aan eGolf4U, een gedeelde agenda moest beschikbaar worden gemaakt; het liefst bewerkbaar voor het secretariaat en niet zoals voorbeen met Google Calendar (waardoor er veel dubbele boekingen ontstonden). Oh en uiteraard ook een plattegrond van de gehele baan met fly-over video’s en uitleg per hole. De mogelijkheid om lid te worden, aanbiedingen te kunnen plaatsen naar de leden, startlussen te kunnen weergeven, meldingen bij slecht weer of veranderende speelomstandigheden en uiteraard de mogelijkheid voor leden om hun scorekaarten, wedstrijdschema’s en dergelijke bij te houden.

Als bovenstaand nog niet voldoende uitdaging was kregen we ook nog het verzoek om de site, die in 2012 deels responsive was opgeleverd, volledig responsive te maken, het menu te herzien en vanuit een mobile first gedachtegang het hele ontwerp ‘op te frissen’.

Onze oplossing: Starten met een opschoon-actie, dan een mobile-first menu, een custom WP-plugin en vervolgens alle resterende templates ombouwen naar nieuwe code.

De website draaide al op het CMS (Content Management Systeem) WordPress. Omdat WordPress van oorsprong een blogging-platform is, is het al ingericht op meerdere auteurs (redactie), plaatsen van berichten in verschillende categorieen en heeft het uitgebreide mogelijkheden tot koppeling met social media (reageren op berichten via facebook). Daarnaast leent het zich goed om er ook custom aanpassingen in te bouwen, die, zoals je kunt lezen in het eisenlijstje wel nodig waren!

Omdat de website geen moment offline mocht zijn (vanwege het intensieve gebruik door alle leden) hebben we gekozen voor een traject waarin de gewenste aanpassingen stap-voor-stap zouden worden doorgevoerd. De cultuurshock zou dan voor de (toch vaak wat oudere) doelgroep minder groot zijn en zo kon de website stukje bij beetje worden verbeterd.

We hebben de website op een development, een acceptatie en een live-omgeving laten draaien. Elke wijziging die af was werd als aparte GIT-commit live gezet. Grote wijzigingen kwamen in een GIT-branch en voor de ontwikkeling van de Custom Plugin is er een aparte omgeving opgezet om te kunnen ontwikkelen en testen. Ook hebben we de website voorzien van een Semantic versioning systeem; elke wijziging moet dan een afgeronde feature of fix moet zijn bij de livegang en we bepalen dan opnieuw het versienummer.

Project details

Klant Golfclub de Semslanden
Datum augustus 2018 tot april 2019
Skills development & design
Tools Sketch / Invision / WordPress
Bekijk live project »

Kickoff & Opschonen

Het eerste dat we bij aanvang van het project hebben gedaan is alle oude code testen en weggooien wat we niet meer nodig hadden. We zijn gestart met één onoverzichtelijk CSS bestand met meer dan 3000 regels code en een wildgroei aan media-queries en hebben dit omgezet naar een overzichtelijk Sass structuur.

Mobile First Development

De bestaande website is vervolgens omgebouwd van een website uit de periode waarin Responsive Design en Development nog in de kinderschoenen stond (2012) naar een Mobile First ontwikkelde website.

Dit wil zeggen dat de CSS is opgebouwd vanuit het principe dat je begint te stylen voor alle kleinste schermen. Die stijlregels zet je in een base.scss bestand. Deze stijlregels gelden voor alle schermen vanaf het kleinste scherm (in de praktijk vaak nog 320px als minimum breedte).

Vervolgens maak je voor elk breekpunt een nieuw bestand, in deze bestanden komen de uitzonderingen voor elk scherm dat een maatje groter is. Dus minimaal heb je tablets&up (768px en hoger) en desktops&up (1025px&up) nodig.

Daarnaast heb je nog een aantal scss bestanden nodig voor wordpress, normaliseren van je browsers en voor je mixins en kleuren. (zie afbeelding.)

Custom WordPress Plugin EGolf4U TeeTime Kalender

Op het moment van starten draaide de Semslanden met twee golf kalenders. Eén kalender in de TeeTime module van eGolf4U (de applicatie waarin Golfers hun scorekaarten en handicaps kunnen bijhouden) en één om de baanbezetting te kunnen weergeven op de website. Uiteraard was dit geen wenselijke en werkbare situatie voor het secretariaat. Zij beheerden twee agenda’s en dit was erg foutgevoelig.

Ontwerp & Ontwikkeling

De custom WordPress plugin voor de weergave van de baanbezetting moet communiceren met de API van eGolf4U. De samenwerking met eGolf4U verliep verder prima en we hebben de Semslanden kunnen voorzien van zowel een visuele kalenderweergave als een lijstweergave.

Custom Tijdsegmenten

Om de gereserveerde tijvakken in de Golf kalender te kunnen weergeven zoals deze ook werden gereserveerd in de EGolf4U module hebben we de gehele kalendertabel zelf opgebouwd uit custom tijdsegmenten. Op basis van een shortcode in de WordPress plugin kan de kalender in dezelfde tijdsegmenten worden opgebouwd als die in eGolf4U zijn ingesteld door de Semslanden. Het kleinste segment is 1 minuut. Het segment waaruit de kalender op Semlanden is opgebouwd is 10 minuten. De reserveringen kunnen dus op 10 minuten nauwkeurig worden gereserveerd en ook getoond in de kalender.

We hebben er voor gekozen om de tabel zelf op te bouwen omdat de meeste online kalenders niet precies genoeg visualiseren welk tijdvak er is gereserveerd. Dit komt omdat vrijwel alle kalenders een html-tabel opbouw gebruiken en vervolgens met losse javascript de kalender-items er overheen plaatsen. Dit geeft twee problemen:

1. Je kunt niet in 1 oogopslag zien hoe lang een reservering duurt (alle items zijn visueel even lang).
2. Om het geheel responsive te krijgen heb je erg veel javascript nodig, voor elk scherm moet de weergave namelijk op een andere plaats komen.

Dit kan handiger dachten wij. Daarom hebben we de kalenderopbouw in flexibele instelbare tijdvakken gemaakt. Op basis van een reservering krijgen de tijdvakken zelf een aparte kleur (corresponderend met de legenda) en kun je dus in één oogopslag zien hoe lang een reservering duurt en wanneer de baan weer vrij is.

Lagere werkdruk voor Semslanden

Het is ons gelukt om de werkdruk op het secretariaat te verlagen met onze custom WordPress plugin. Er is nu slechts nog 1 plek waarbinnen de reserveringen en baanbezetting en toegankelijkheid van de baan kan worden beheerd. Voor een grote golfbaan met twee lussen van allebei 9 holes, een par-3 baan en een driving range een absolute must!

TV Scherm

De visuele kalenderweergave was ook belangrijk als toevoeging op het tv-scherm bij de receptie van Semslanden. Zo kunnen leden en bezoekers in een oogopslag zien of de baan vrij is om te bespelen. We hebben persoonlijk getest of het scherm naar behoren werkte en alles goed getoond werd. (Op de foto staat Vita bij het scherm).

Responsive Tabel

Tijdens de ontwikkeling liepen we tegen een aantal uitdagingen aan. Zo moest de agenda (zowel de visuele weergave als de lijstweergave) beschikbaar zijn op mobiel. We kwamen er toen achter dat er eigenlijk nog geen goede oplossingen waren gemaakt voor het makkelijk responsive stylen van een tabel. De oplossingen die veelal gebruikt werden gingen er van uit dat je een tabel moet kunnen ‘draaien’ en dat de weergave van de tabel-headers (in ons geval de dagen van de week) vervolgens aan de linkerkant komen te staan. Wij wilden graag dat ‘onze’ tabel zou blijven staan gewoon met de dagen er boven en de uren links en dat dan de inhoud op je mobiel zou meescrollen.

Mobiel menu

Het eerste onderdeel dat voor de bezoekers van de semslanden werd aangepakt was het mobiele menu. De site had een verouderde oplossing van het menu gebaseerd op javascript en een verouderde plugin.

Allereerst hebben we een design-schets-gemaakt en dit overlegd met de Semslanden. Intern heeft de Semslanden vervolgens onderzocht welke pagina’s het meest gebruikt werden en wat de leden wenselijk vonden aan een mobiel menu.

Vervolgens hebben we de schetsen omgezet naar een ontwerp en dit als klikbaar prototype in InVision met de Semslanden klankbordgroep gedeeld.

Uiteindelijk is het WordPress menu weer in ere hersteld en is er volgens de ontwikkelstandaarden van WordPress een mobiel menu toegevoegd die, indien gewenst, in de back-end gevuld kan worden met zelfgekozen menu-items.

Redesign Website

Als laatste stap hebben we de homepage en overige template voorzien van een redesign. Kort gezegd moest de gehele website naar 2019 worden gehaald.

Ook voor deze laatste stap in het project hebben we eerst gekeken naar alle functionaliteiten die op de homepage mochten blijven, moesten worden uitgebreid of konden verdwijnen. Daarnaast moest er gekeken worden naar de integratie van alle achterliggende pagina’s (holes, agenda, formulieren, info-pagina’s en de nieuwsmodules en archieven.)

Uiteindelijk heeft dit geresulteerd in een tweetal basis-templates en een homepage. De ontwerpen zijn uitgewerkt voor Mobiel, Tablet en Desktop-apparaten en als klikmodel gepresenteerd aan de klankbordgroep.

CSSGrid

Na een korte revisieronde is de homepage als eerste ‘overgegaan’ naar het nieuwe template. Voor de responsive weergave hebben we gebruik gemaakt van de mogelijkheden van cssgrid. De kolommen worden opgebouwd volgens het cssgrid en op basis van de viewport worden de onderdelen verdeeld over het grid.