Responsive webpagina

Responsive webpagina

Bij webdesign wordt de webpagina nog vaak initieel ontworpen voor de browser op een computer; daarna wordt gekeken hoe het ontwerp geschaald kan worden zodat deze mobiel ook leesbaar is. Met het toenemende mobiele gebruik is gebruikerservaring op een telefoon steeds belangrijker. Zeker als je iets ontwerpt voor leerlingen op een middelbare school!

Gebruikssituatie

Een webpagina die primair ontworpen is voor een desktop computer levert op een mobiel een minder optimale gebruikerservaring op: bepaalde elementen werken niet, je moet veel zoomen, knopjes zijn te klein, etcetera. Een responsive webpagina draait om: je ontwerpt de pagina met als doel een geweldige ervaring op de mobiele telefoon. Op het moment dat het apparaat waarmee de webpagina wordt bekeken meer aan kan (groter scherm, meer kracht/geheugen, Flash) worden extra elementen toegevoegd die de gebruikservaring nóg beter maken.

Probleem van het Nova College
Met deze richtlijn ging ik aan de slag met een absentiepagina voor het Nova College. Zij legden ons namelijk de volgende probleemstelling voor:

Leerlingen kunnen zichzelf alleen telefonisch ziek/afwezig melden waardoor de receptie van de school tijdens piekmomenten wordt overbelast en het voor leerlingen op deze piekmomenten lang duurt voordat de afwezigheidsmelding is doorgegeven.

Wens: een absentiepagina waarmee de leerling zichzelf absent kan melden

Eisen:

  • geoptimaliseerd voor mobiele telefoons;
  • responsive, dus ook voor de browser op een computer/tablet;
  • snel te laden webpagina;
  • passend bij de huidige website qua design;
  • geïntegreerd met Magister: de melding moet direct in Magister geplaatst worden;

Absentiepaginaopmobiel Mockup-webpagina-laptop

 

Responsive Webdesign 

Op de ontworpen absentiepagina vult de leerling zijn studentnummer en postcode in. Daarna wordt het groene vlak met de doorgegeven meldingen van de afgelopen week getoond. In dit vlak kan de leerling voor de komende week nieuwe absentiemeldingen maken. De relevante elementen worden pas zichtbaar op het moment dat de gebruiker een actie moet uitvoeren, of wanneer de gebruiker de informatie nodig heeft. Zo is voor de gebruiker duidelijk welke acties wanneer nodig zijn en in welke volgorde, aangezien de mogelijke acties beperkt blijven. Door geen afbeeldingen te laden op de mobiele site worden de benodigde databundels van de leerling tot een minimum beperkt. De afbeeldingen worden pas geladen op het moment dat de pagina vanaf een computer wordt benaderd.

Het resultaat: gebruiksgemak en klantvriendelijkheid voor de leerlingen, efficiënter werken voor de schoolmedewerkers.