Responsive Design optimaliseert de leerervaring van je e-learning cursisten op desktop, tablet en mobiel. Lees meer over de voor- en nadelen en krijg tips voor een goede aanpak.
Het onderwerp Responsive Design (RD) staat in de belangstelling. Er wordt soms over geschreven als de voor het aanpassen van websites voor de mobiele gebruiker. In dit artikel proberen we een overzicht te geven van de feiten rondom Responsive Design.
- Wat is Responsive Design?
- Een voorbeeld van Responsive Design
- Voordelen van Responsive Design
- Nadelen van Responsive Design
- Samenvatting
Na het lezen van het artikel beschik je over de basiskennis om zelf een afweging te maken of Responsive Design in jouw situatie relevant is.
Wat is Responsive Design?
Kort samengevat zorgt Responsive Design ervoor dat je website of e-learning cursus op alle apparaten:
- technisch werkt
- er goed uitziet
- functioneel hetzelfde doet
Achter de schermen signaleert de pagina zelf op welk apparaat deze vertoond wordt. Belangrijk bijvoorbeeld is de resolutie (het aantal pixels) van het scherm en de versie van de browser. Met deze informatie wordt de inhoud van de pagina (tekst, kolommen, plaatjes, navigatie) over de pagina verdeeld. Als er veel ruimte is bijvoorbeeld in 3 kolommen; bij minder ruimte in 2 of zelfs 1 kolom. Plaatjes in de tekst of boven de tekst. Of kleinere plaatjes. Of zelfs geen plaatjes.
Voorbeeld van Responsive Design
De website die je nu bekijkt is gemaakt met Responsive Design. Probeer het maar eens door het venster van je browser steeds smaller te maken. Of door deze pagina op je smartphone te bekijken.
Voordelen van Reponsive Design
Een e-learning cursus maken met Responsive Design zorgt ervoor dat je doelgroep de cursus kan volgen onder alle omstandigheden en op alle apparaten.
Een betere gebruikerservaring voor je cursist.
De cursist hoeft niet meer te scrollen, schuiven of in te zoomen om je tekst te kunnen lezen of je plaatje te kunnen bekijken. Dit is met name een voordeel als je cursist een klein scherm heeft. Ook voor gebruik op een standaard PC is Responsive Design een voordeel: als je cursist in een venster de cursus volgt – en niet het volledige scherm gebruikt – dan blijft het er goed uitzien.
Minder onderhoudswerk aan de cursus.
Vaak is het nodig een afzonderlijke “mobiele” versie van een cursus te maken. Veel extra werk bij het ontwerpen en maken. Nog meer werk bij het onderhoud van de cursus. Om nog maar niet te spreken over vertaling. Eénmaal maken en maar één versie onderhouden is in alle opzichten eenvoudiger, sneller en goedkoper.
Zoals we hierna zullen zien heeft RD ook nadelen.
Nadelen van Responsive Design
Responsive Design kan ook een aantal nadelen hebben.
Ontwikkeltijd van website of cursus langer
Het met de hand ontwikkelen van een webpagina of e-learning cursus op basis van Responsive Design is slechts voor weinigen weggelegd. Daarmee blijven er twee opties over: een designer inhuren of een slimme tool gebruiken. Zoals Lectora Online, Lectora Desktop of Articulate 360 Rise. In beide gevallen dien je rekening te houden met een wat eenvoudiger ontwerp.
Laadtijden van afbeeldingen
Meestal zijn de plaatjes afgestemd op het grootste scherm waarop de website getoond kan worden. Dit betekent dat je op een smartphone toch een relatief groot plaatje inlaadt. Wat vervolgens klein of zelfs niet wordt weergegeven. Je kan hier zelf veel aan doen door plaatjes altijd zo klein mogelijk te maken. Een tool die we aanbevelen hiervoor is de (gratis) website https://tinypng.com/ (werkt prima voor zowel PNG als JPG bestanden).
Werkt niet in oudere browsers
In het algemeen is de benodigde scripting om een design responsive te maken zo complex dat alle browsers ouder dan Internet Explorer 8 niet wordt ondersteund.
Samenvatting
De infographic aan de rechterkant vat mooi samen wat het denkproces rond Responsive Design allemaal inhoudt. Zelfs met een goede e-learning responsive auteurstool als Articulate Rise moet je vooraf een goed nadenken en een ontwerp maken. Hou vooral rekening met de volgorde van de blokken als ze verschuiven.