Bereid je webpagina's voor op het mobile first redesign

mobile first redesignMet onderstaande tips maak je, ook nu al, gebruiksvriendelijke webpagina's én bereid je je website voor op het redesign naar een mobile first website:

Less is more

Focus per inhoudspagina op de belangrijkste taak. Vraag jezelf af welke informatie je bezoeker op deze pagina zoekt, en werk die informatie overzichtelijk én volledig uit, ondersteund door een kwaliteitsvolle en relevante afbeelding in webresolutie.

Versnipper je informatie niet over al te veel onderliggende pagina's. Alles over één taak of thema mag (indien mogelijk) op één pagina uitgewerkt worden.

Wees matig in het aantal soorten contentelementen dat je gebruikt per pagina. Werk je belangrijkste inhoud uit in het middendeel en leg in de tekst meteen links naar verdere informatie.

Pas de webredactietips toe op je teksten.
 

Hou grote kuis of archiveer

Dit is hét moment om je website een grondige opkuisbeurt te geven. Kieper alle oude of overbodige informatie overboord. Verwijder oude pagina's. Maak de pagina's niet enkel onzichtbaar in de navigatie want ze blijven zo wel nog vindbaar via Google. 

Als je veel informatie wil verwijderen, of als je een volledige website wil laten verwijderen, vraag webredactie@uantwerpen.be dan om een archiefkopie. Samen met de archiefdienst van het Departement Bibliotheek hebben we een workflow om verouderde websites te archiveren op de servers van de universiteit, en dan te verwijderen van de website. Jij krijgt de link naar de archiefkopie toegestuurd.
 

Rechterkolom verdwijnt

De rechterkolom wordt door surfers zeer slecht opgemerkt. Laat die dus leeg, of plaats er wat leuke extra's zoals foto's. Mobiel verschijnen deze items momenteel onderaan de pagina.  
Na het redesign zal er geen rechterkolom meer zijn. De elementen die in je rechterkolom staan zullen niet verdwijnen, maar onderaan de webpagina terechtkomen.
 

De navigatie staat niet altijd links, de rechterkolom staat soms onderaan

Houd er rekening mee dat op smartphone je navigatie bovenaan komt te staan (ingeklapt), en de elementen uit de rechterkolom momenteel onder het middenste deel schuiven. Na het redesign zal er helemaal geen rechterkolom meer zijn. Verwijs in je tekst dus nooit naar 'de navigatie links' of 'de button rechts'. Geef in je tekst meteen de link mee naar wat je omschrijft. Dit is ook op desktop een goede praktijk.

Bijvoorbeeld:

  • Zeg  niet: 'Om je in te schrijven klik op de button in de rechterkolom'
  • Maar: 'Schrijf je in' + op deze tekst meteen de link om in te schrijven.
     

Voorzie je pagina's van mooie en relevante afbeeldingen

Een opfrissing van het webdesign komt pas echt mooi tot z'n recht als alle editors ook aandacht hebben voor het grafische element van webredactie. 
Ondersteun je inhoud door een mooie en relevante afbeelding erbij te plaatsen. We gebruiken enkel afbeeldingen van hoge kwaliteit, in webresolutie, waar je het auteursrecht over bezit.
 

Tabellen

Gebruik zo weinig mogelijk tabellen. Tabellen zijn momenteel niet responsive: de informatie in de tabellen wordt bijeen gedrukt. Na het redesign zal je op mobile door tabellen kunnen scrollen, maar ook dat is niet ideaal.

Informatie in een tabel leest ook op desktop niet altijd even makkelijk. Een programma van een studiedag presenteer je beter in een mooi gelayout lijstje met bulleted lists i.p.v. een tabel. De tekst schaalt dan mooi mee met verschillende schermbreedtes.
 

Linken laten openen in zelfde tabblad

Open linken zoveel mogelijk in hetzelfde tabblad. Binnen je eigen website kies je altijd als linkdoel voor '_parent' of 'Zelfde venster'. Zo kunnen surfers de back-knop gebruiken om hun weg terug te vinden: bij mobiel surfen nog net iets belangrijker dan bij desktop.
Alleen downloads en linken naar andere websites kan je laten openen in een ander tabblad (_blank), alhoewel dit geen must is.
 

Linken op een afbeelding

Een link die ligt op een afbeelding zal op smartphone moeilijker te detecteren zijn dan op desktop. Op desktop zie je een handje als je over de afbeelding hoovert met je cursor, op smartphone kan dat niet.
Hou daar dus rekening mee bij het gebruik van een call-to-action image. Activeer zeker de playknop bij een video, of publiceer de call-to-action mét titel en beschrijving.

Bij een gewone call-to-action is de link duidelijker door de pijl:
call to action
 

Wees zuinig met uitklapblokjes

De site lezen in uitklapblokjes of collapsibles vergt een extra inspanning van de mobiele lezer. Gebruik deze tekstelementen enkel als het echt niet anders kan.
 

Wees zuinig met de pijlen

De pijl gebruik je best in het middendeel, onderaan een tekst om bv een volgende stap weer te geven zoals 'Schrijf je in' of 'Lees meer'
Gebruik de pijlen niet om een lijstje links te geven en gebruik ze ook niet in de rechterkolom. Ze lijnen immers niet mooi uit.

Bv: