24-03-2014

24/03/14 – Website bouwen in lagen

Van responsive webdesign tot progressive enhancement:

Webton gebruikt de modernste technieken

responsiveDe populariteit van responsive webdesign neemt ongekende vormen aan. Eigenlijk heel logisch, want deze techniek zorgt ervoor dat een website op alle denkbare schermformaten goed wordt weergegeven. Of het nu om een kleine mobiele telefoon of een enorme plasma televisie gaat. Maar elk voordeel heb zijn nadeel, sprak een wijs man ooit. En dat geldt dus ook voor responsive webdesign. In dit artikel bespreken we daarom de nadelen van de techniek, maar ook meteen de belangrijkste oplossingen. Zodat jouw website belangrijke stappen vooruit kan zetten.

Nadelen responsive webdesign

Afhankelijk van het gebruikte apparaat kan een responsive website veel tijd nodig hebben om in te laden. Geen optimale situatie, want in dit digitale tijdperk zijn bezoekers gewend binnen enkele muisklikken informatie te vinden. Nu zul je denken dat een paar seconden meer of minder niet uitmaakt. Niets is echter minder waar, want uit een 5 jaar oud onderzoek onder desktopgebruikers blijkt dat 47% van de websitebezoekers verwacht dat een website binnen 2 seconden geladen is. En is de site binnen 3 seconden nog altijd niet ingeladen, klikt maar liefst 40% van de bezoekers voortijdig weg!

Beperkte apparatuur

Inmiddels zijn we 5 jaar verder en heeft de technologie niet stilgestaan. Het ligt daarom in de lijn der verwachting dat bezoekers tegenwoordig elke webpagina die er langer dan 1 seconde over doet om in te laden, negatief zullen beoordelen. Ook het smartphone- en tabletgebruik is in de afgelopen 5 jaar zienderogen toegenomen. In deze context een zeer interessante ontwikkeling, omdat dit soort apparaten vaak een beperkte rekenkracht en internetverbinding hebben. Dit leidt tot nog hogere laadtijden dan op traditionele desktopcomputers; een verdubbeling van de gemiddelde laadtijd is eerder regel dan uitzondering. Een groot nadeel, omdat inmiddels in onderzoek aangetoond is dat smartphonegebruikers vaak minder geduld hebben dan desktopgebruikers.

Lagere positie in de zoekresultaten

Ook uit ander onderzoek blijkt dat een vertraging van meer dan een seconde tot een ronduit slechte gebruikerservaring leidt. Dit zou met name komen omdat de gedachtestroom van de gebruiker wordt onderbroken. Om een goede gebruikerservaring te stimuleren, beloont Google websites die snel inladen daarom met een hogere positie in de zoekresultaten. Het omgekeerde is ook het geval; een website die traag inlaadt, zal zijn positie in de zoekmachines in rap tempo zien kelderen. Let wel: deze trage laadtijden gelden niet alleen voor desktopcomputers, maar zijn ook van toepassing op mobiele apparaten. Als jouw website dus niet geschikt is voor mobiele apparatuur en hierop traag inlaadt, zal dit serieuze gevolgen hebben voor je positie in de zoekmachines. Als webmaster heb je er dus alle belang bij om je website responsive te maken, en het liefst zo snel mogelijk!

Mobile first

Toch blijkt het voor webdesigners vaak lastig te zijn om een website geschikt te maken voor mobiele apparatuur. Een redelijk grote website heeft al snel teveel inhoud om op een klein scherm op overzichtelijke wijze te presenteren. Dit betekent dat er geschrapt moet worden in de content en er keuzes moeten worden gemaakt met betrekking tot de functionaliteit van de website. Dit principe wordt tegenwoordig ook wel mobile first genoemd en is een belangrijke stap in het creëren van een succesvolle responsive website.

Content en navigatie

Bij mobile first trajecten wordt de nadruk gelegd op de inhoud (content) van de website. Vanaf welk apparaat een website ook bezocht wordt; iedereen moet dezelfde inhoud kunnen lezen. Het is daarbij natuurlijk wel een vereiste dat bezoekers binnen deze content eenvoudig kunnen navigeren. De navigatie is dan ook het volgende belangrijke punt binnen responsive webdesign. Om de content en navigatie zo optimaal mogelijk te presenteren aan bezoekers worden de apparaten met de meeste beperkingen door webdesigner als uitgangspunt genomen. Denk hierbij bijvoorbeeld aan een verouderde mobiele telefoon met een langzame processor, trage internetverbinding en geen ondersteuning voor technologieën als Flash, Javascript en HTML5. Als de webdesigner erin slaagt om een website goed weergegeven en snel ingeladen te laten worden op een dergelijk apparaat, kan de gebruikerservaring op andere apparatuur alleen maar nóg beter zijn.

Hoge laadtijden

Een nadeel van standaard responsive webdesign methodes is dat alle inhoud, hoe geoptimaliseerd ook, nog steeds opgehaald en ingeladen moet worden door het apparaat. Dit geldt dus ook voor grote afbeeldingen en geavanceerde Javascripts die door bijvoorbeeld een mobiele telefoon überhaupt niet weergegeven kunnen worden. De website past zich dan dus alleen aan de verschillende schermformaten aan. Hoewel dit een belangrijke stap voorwaarts is ten opzichte van een website die niet responsive is, blijft de laadtijd nog altijd hoger dan bij een aparte mobiele website.

Progressive enhancement

Om dit te verbeteren is er een oplossing in de vorm van progressive enhancement; een ontwerptechniek waarmee een website gebouwd wordt in verschillende lagen. Dit principe van gelaagd bouwen zorgt voor een flinke snelheidsverbetering en daarmee een verbeterde gebruikerservaring voor bezoekers.

Belangrijke content

progressiveEen responsive website die gebruik maakt van progressive enhancement zal zich automatisch aanpassen aan het apparaat dat de bezoeker gebruikt. Zaken als uitklapbare menu’s, social media buttons en scripts, geavanceerde sliders en uitgebreide tabellen zullen direct aangepast worden aan het schermformaat en waar nodig zelfs helemaal weggehaald worden. Speciaal voor de smartphone- en tabletgebruikers worden menu-items en mouse-over functies geschikt gemaakt voor aanraakgevoelige schemen; zogenaamde touchscreens. De belangrijkste content van de site geniet de hoogste prioriteit en minder belangrijke content verdwijnt achter een link of wordt simpelweg niet weergegeven. Dit betekent een enorme verbetering ten opzichte van conventionele responsive webdesign methodes.

Vloeiende gebruikerservaring

Progressive enhancement zorgt er bovendien voor dat een bepaalde ondergrens op het gebied van gebruikerservaring altijd wordt gehaald. Wanneer de website echter detecteert dat een bezoeker een apparaat met meer rekenkracht of een groter scherm gebruikt, zal de website pas echt zijn ware gezicht laten zien en zullen er meer functionaliteiten ingeladen worden. Dit zorgt er niet alleen voor dat een website op bijna alle denkbare apparaten en schermformaten weergegeven kan worden, maar ook dat de website altijd zo snel mogelijk zal worden ingeladen. Zo garandeert de website op elk apparaat een vloeiende en prettige gebruikerservaring.

Above the fold

Een andere handige toepassing van progressive enhancement is het geven van prioriteit aan alles above the fold: het gedeelte van een webpagina dat direct zichtbaar is zonder naar beneden te scrollen. Door alle content above the fold direct in te laten laden en alle overige content pas daarna te renderen, wordt de ogenschijnlijke laadtijd van de website nog eens verder versneld.

Verhoogde zoekmachinevriendelijkheid

Maar hier blijft het niet bij, want ook als je een zoekmachinevriendelijke website wilt, kun je baat hebben bij progressive enhancement. Zoekmachines gebruiken namelijk zogenaamde search crawlers om het internet af te speuren naar nieuwe webpagina’s om te indexeren. De beperking van deze crawlers is dat ze niet alle soorten content in kunnen laden; zo wordt Javascript bijvoorbeeld niet ondersteund. Een responsive website die met behulp van progressive enhancement ontworpen is, zal hier echt geen last van hebben. Omdat de belangrijkste content altijd paraat staat en eerst ingeladen wordt, zal door de zoekmachinerobots altijd de juiste content geïndexeerd worden.

Hogere uptime

Nog een voordeel van progressive enhancement is het feit dat de kans op fouten tijdens het inladen van een website een stuk kleiner wordt. Vaak zorgen juist geavanceerde scripts en functionaliteiten voor problemen. Denk hierbij bijvoorbeeld aan een Javascript functie die niet juist wordt uitgevoerd. Doordat de belangrijkste content bij progressive enhancement geprioriteerd wordt, zal het aantal fouten worden verminderd en de uptime van de website worden verhoogd.

Conclusie

progressive webdesignNa het lezen van dit artikel ben je niet alleen op de hoogte van enkele nadelen van responsive webdesign, maar weet je ook hoe deze op te lossen zijn. Met behulp van progressive enhancement kunnen de belangrijkste nadelen ondervangen worden en wordt de gebruikerservaring voor de bezoeker sterk verhoogd. Omdat mobiele apparatuur nog altijd in opkomst is en schermformaten steeds diverser worden, maakt Webton steeds vaker gebruik van progressive enhancement om responsive websites te optimaliseren. Al voor verschillende van onze klanten hebben wij deze techniek met succes ingezet. Wil jij ook een website die voldoet aan de modernste standaarden en voor iedereen toegankelijk is? Een website die niet alleen prettig navigeert, maar ook uitstekend leesbaar is en sneller inlaadt dan websites van de concurrentie? Een website die bovendien in een relatief kort tijdsbestek beter gevonden wordt door Google? Neem dan contact op met de specialisten van Webton. Wij leggen je graag uit wat de mogelijkheden zijn en welke strategie optimaal is voor jouw website en bedrijf. Bel ons op 074 – 3030400 of stuur een mailtje naar info@webton.nl.

Vind je dit een interessant bericht? Deel het!