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.

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

In het onderstaande voorbeeld zie je hoe de indeling van de website veranderd aan de hand van de breedte van het scherm. De pagina staat op de Mashable website. 

Overigens: ook 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.

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 voor je

    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.

Diverse schermformaten

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 learningMaker, de laatste versie van Lectora 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/ (werk prima voor zowle 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 auteurstool als learningMaker moet je vooraf een goed nadenken en een ontwerp maken. Hou vooral rekening met de volgorde van de blokken als ze verschuiven.