Responsive website

Berichten

Probleem: WordPress website is niet responsive

Lijf en Balans, een praktijk voor afvallen en gewichtsbeheersing, met diverse vestigingen door heel Nederland, heeft al langere tijd een WordPress website. Maar deze website was niet responsive. Hierdoor konden klanten die de website bezochten via hun tablet of mobiele telefoon geen optimaal gebruik maken van de website en potentiële klanten haakten af.

Via Google Analytics was te zien dat meer dan de helft van het verkeer dat op de website kwam, dit deed via een tablet of mobiel. Tijd om een oplossing voor deze website te zoeken dus.

Responsive website Lijf & Balans

Twee oplossingen om een website responsive te maken

Karin, de eigenaresse van Lijf en Balans kwam met mij in contact via de Facebookgroep WordPress Support NL-BE. Zij vroeg mij wat de mogelijkheden waren voor het responsive maken van hun website. Na onderzoek waren er twee opties over:

  1. Een nieuw responsive thema installeren dat qua lay-out ongeveer gelijk was aan het huidige thema.
  2. Het huidige thema met behulp van Cascading Style Sheets (CSS) responsive maken

De kosten voor het installeren van een ander thema zijn lager dan het aanpassen van het huidige thema. Dit komt simpelweg doordat er veel meer uren werk zitten in het ombouwen en testen van het huidige thema dan in het toepassen van een nieuw responsive WordPress thema.

De keuze van Lijf en Balans viel op het responsive maken van het huidige thema. Dit omdat zij veel waarde hechten aan de huidige layout en deze ook wilden behouden voor de toekomst.

WordPress CMS

Als Content Management Systeem voor de website werd al gebruik gemaakt van WordPress. Dit is uiteraard gelijk gebleven. WordPress is open-source: gratis te downloaden en je mag het aanpassen zoveel je wilt. En daarom is het ook perfect geschikt om je eigen website responsive te maken of te laten maken.Webdesign WordPress Waddinxveen

Ook zijn er enorm veel plug-ins beschikbaar die je een hoop werk uit handen kunnen nemen bij diverse werkzaamheden aan je website. Maar het mooiste is: om je website responsive te maken heb je eigenlijk maar 1 plug-in echt nodig. Daar kom ik later in deze blog op terug.

Stappenplan voor responsive maken van een website

1. Website klonen

Er is door ons een exacte kopie van de website gemaakt en geplaatst op een tijdelijke locatie. Dit om te voorkomen dat klanten een website in onderhoud te zien zouden krijgen en het geeft ons de rust en ruimte om uitgebreid te testen zonder tijdsdruk.

  • Maak een subdomein op je huidige domein. Vaak kun je dit doen via het control panel van je provider.
  • Maak een subfolder op je huidige domein. Ook dit kun je installeren via het control panel van je provider.
  • Gebruik een testdomein. Het kost je een paar euro per jaar, maar het levert je ook direct enorm veel op mocht een update of wijziging mislukken. Lees het stappenplan voor website onderhoud maar eens door.

Nadat de website verhuisd was naar een tijdelijk locatie zijn wij aan de slag gegaan.

Zoals eerder beschreven is er door ons ook niet op het domein waar de website al live op draait gewerkt. Ik hoop dat je grote aanpassingen altijd doet op een test omgeving. Zo niet, ga dat dan vanaf nu doen. Je wilt niet weten hoe vaak mensen bij mij aankloppen van wie de website compleet overhoop ligt. En als dit je website is waar klanten op dat moment op kunnen kijken dan is dat natuurlijk geen goede reclame. Neem dit daarom meteen op in je plan van aanpak voor website onderhoud.

2. Breakpoints bepalen

In overleg met de klant is er door ons gekozen om met drie verschillende breakpoints te werken. Een desktop versie van de website, een tablet versie en een mobiele telefoon versie.

Responsive wordpress website liijfenbalans

Responsive website op mobiel

Drie breakpoints is vaak voldoende. Het is uiteraard ook mogelijk om een stylesheet voor je responsive WordPress website te gebruiken die is aangepast voor een iPhone 3, Samsung S3, enz. Maar de praktijk wijst uit dat dit erg foutgevoelig is en ook weinig meerwaarde biedt. Bekijk alle actuele media queries.

Als bekend is hoeveel breakpoints er op je website moeten toegepast worden dan kun je deze alvast aanmaken in je stylesheet.

3. Stylesheets aanmaken

Wij hebben gekozen voor een externe stylesheet speciaal aangemaakt en ingevuld voor responsive websites.  

Eventueel zou je ook kunnen kiezen om in de bestaande stylesheet verder te werken. Een deel van het resultaat ziet er ongeveer als volgt uit:

/* ———– iPhone 4 and 4S ———– */

/* Portrait and Landscape */

@media only screen and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2) { }

In deze stylesheet ga je werken. Je kunt per item op de website bepalen of het zichtbaar is op mobiel of niet, of de grootte aangepast moet worden en of de kleur mogelijk aangepast moet worden. Alle CSS classes die toegepast kunnen worden op een desktopversie kunnen uiteraard ook toegepast worden op mobiel.

De website zal in blokken opgeknipt worden en deze zullen onder elkaar geplaatst worden op mobiel als het scherm te smal wordt.

4. Responsive menu invoegenResponsive menu WordPress plugin

Aangezien het menu niet geschikt was voor een mobiele weergave is er door ons gebruik gemaakt van een WordPress plug-in: responsive menu.

Dit is een gratis plugin waarmee je het menu geheel naar je eigen wens aan kunt passen. In principe is alles mogelijk met behulp van CSS. Er zijn uiteraard nog veel meer plug-ins die ongeveer dezelfde functionaliteit bieden.

5. Testen en terugplaatsen

Nadat alle werkzaamheden voor het responsive maken van de website afgerond waren is er door meerdere mensen getest op functionaliteit. Hier zijn nog wat kleine schoonheidsfoutjes uit gekomen die ook opgelost zijn. Het hele pakket is vervolgens teruggeplaatst op het originele domein.

De testfase is een erg onderschatte fase. Het is belangrijk dat er goed getest wordt met verschillende browsers en apparaten. Vergeet ook niet om te testen met voorgaande versies van browsers. Hoe ver je hier mee gaat kan ik geen advies over geven, dit is vooral afhankelijk van je doelgroep die je zelf het beste kent.

Extra aanpassingen website

Footer WordPress website LijfenbalansTijdens het responsive maken kwam er nog een aantal verzoeken vanuit Lijf en Balans bij. Het ging onder andere om onderstaande punten.

  • De social media-buttons in de footer waren niet compleet. Nadat alle kanalen hier toegevoegd waren zijn de buttons halverwege de pagina verwijderd. Ook is er gekozen voor andere buttons die meer in de huisstijl van het bedrijf passen
  • De contactgegevens waren moeilijk vindbaar op mobiel. Hierom is er op mobiel een topbar toegepast waar onder andere direct vandaan gemaild en gebeld kan worden door middel van iconen. Ook het login-gedeelte van de website is te bereiken via een icoon op de topbar
  • De oude blogs waren qua url’s niet goed opgebouwd. Dit is opgelost met een goede 301 redirect van de hele blogstructuur

Conclusie

Het is dus zeker mogelijk om met een WordPress website met een niet-responsive thema om te bouwen tot een 100% responsive website, dat blijkt uit deze case. Wat zijn de voor- en nadelen?

Voordelen

  • Klanten houden de bekende huisstijl, ook op mobiel
  • Klanten hoeven niet meer te scrollen om datgene te kunnen lezen wat ze willen lezen
  • De structuur van de website blijft gelijk
  • Nieuwe bezoekers zullen niet afhaken op de website waardoor de bouncerate van de website omlaag zal gaan. Dit is weer een positief signaal voor je ranking in Google

Nadelen

  • De kosten liggen relatief hoog in vergelijking met het installeren en configureren van een responsive thema
  • Grote kans dat je hiervoor een webdesigner in moet huren, het is een redelijk ingewikkelde techniek

Lijf en Balans is in ieder geval erg tevreden gezien de prachtige recensie die zij geschreven hebben voor Lamper Design! Hoe responsive is jouw website? Test het eens in de Google Mobile Friendly test. Heb je hulp nodig of een vraag? Neem dan vrijblijvend contact met mij op en ik geef je graag een passend advies.

Portfolio Items