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 afbeeldingen. Op de nieuwe website zullen we trouwens grote afbeeldingen nodig hebben, minimum 1000 px breed of hoog.

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.

Beperk het aantal niveau's in je navigatie. Een subsite zou idealiter slechts 3 à 4 navigatieniveau's diep mogen gaan (geteld vanaf de homepage van de subsite). Op de nieuwe website zal de navigatie maximaal 5 navigatieniveau's diep kunnen gaan.

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. 

Je website is immers geen archief! Bij de overschakeling naar het redesign, zal je ook alle oude pagina's moeten overlopen om ze te optimaliseren.

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

Houd er rekening mee dat op smartphone je navigatie bovenaan komt te staan, 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.
     

Navigatie tot maximum 5 niveau's diep

Op de nieuwe website zal de navigatie vanaf de homepage van een subsite slechts 5 niveau's diep kunnen gaan (homepage van je subsite = 0). Momenteel voldoen een beperkt aantal pagina's niet aan deze norm op de huidige website, wij zullen de betrokken webeditors contacteren met de vraag om deze pagina's te reorganiseren.

Maximum 15 items op éénzelfde navigatieniveau

Op één navigatieniveau zal je nog maximum 15 items kunnen plaatsen. Dat zijn er volgens de usabilityrichtlijnen eigenlijk al 8 teveel, we zijn dus soepel :-)

Pagina onzichtbaar in navigatie = niet gepubliceerd

Alle pagina's die nu op 'onzichtbaar in navigatie' staan zullen de status 'niet gepubliceerd' meekrijgen op de nieuwe website. Deze pagina's zijn dus enkel beschikbaar in de back-end, en niet meer bereikbaar op de website zelf. Bekijk dus in de navigatieboom van je website welke pagina's op onzichtbaar staan. Hou grote kuis in pagina's die verouderd zijn, en maak pagina's die zeker bereikbaar moeten zijn zichtbaar in de navigatie.

Instelling in de huidige webeditor, bij 'takeigenschappen':

onzichtbaar

Zo herken je een onzichtbare pagina in je navigatieboom:

onzichtbaar

Verzamel alvast de hoge resolutieversies van je 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, waar je het auteursrecht over bezit.

Maar: in het nieuwe content management systeem zullen afbeeldingen in een ander formaat opgeladen moeten worden dan de huidige afbeeldingen. Vooral call to action images en carrousels zullen nieuwe afbeeldingen nodig hebben, in een groter formaat. De afbeeldingen zullen niet meer in webresolutie moeten staan, en zullen minimum 1000 px breed of hoog moeten zijn.

Verzamel dus alvast wat mooie en grote afbeeldingen, maar wacht nog even op de testomgeving, en later de productieomgeving om ze in te voeren.
 

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.
 

Gebruik enkel relatieve links voor interne links en redirects

Als je op een pagina binnen uantwerpen.be een link legt naar een andere pagina op uantwerpen.be, haal dan altijd het eerste stuk van je link, nl de 'https://www.uantwerpen.be/'. Begin de link vanaf /nl/ of /en/

Ook als je via de pagina-instellingen een redirect instelt (waarbij de pagina meteen doorlinkt naar een andere pagina), gebruik dan relatieve links!