Responsiviteit
Checklist
Aandachtspunten
Mobiel
Navigatie
De menu button is goed herkenbaar door de vorm en tekst, maar het toevoegen van een icoon, zoals het veelgebruikte hamburger icoon met drie horizontale streepjes, wordt aanbevolen.
Het menu zelf kan wat slordig ogen op mobiel. De iconen hebben geen vaste breedte, waardoor de teksten verspringen.
Bovendien nemen de submenu items soms twee regels in beslag, waarbij de afstand tussen de regels groot is en tussen de links klein. Overweeg een groter menu of het gebruik van de volledige breedte van het scherm.
Voor knoppen om het menu te sluiten of terug te gaan naar het vorige niveau, volstaan iconen zoals een kruisje voor sluiten en een pijltje naar links voor vorige. De huidige buttons met hoofdlettertekst zijn visueel te zwaar.
Tekst
- De tekststijlen zijn niet in balans. De subtiele boventitel in grijze hoofdletters is bijvoorbeeld vrij groot terwijl de titel relatief vrij klein is. Ook de regelafstanden zijn niet overal in verhouding. Zie het hoofdstuk Visueel ontwerp.
- De tekst in de button op de homepage neemt twee regels in beslag.
- Bij de veelgestelde vragen worden woorden vreemd afgebroken.
- Op de pagina "Energie opslag" zijn niet alle alinea's hetzelfde uitgelijnd.
Beeld
- De blauwe pijlen buttons bij klantervaringen hebben een zwart icoon, wat een stijlbreuk veroorzaakt.
- De logo's bij testimonials hebben verschillende groottes.
- De achtergrondafbeeldingen bij secties worden volledig verborgen, wat de pagina kaal maakt.
- Op de pagina "Netcongestie" is de video speler te breed en valt deze deels buiten het scherm.
- Op de pagina "Energie opslag" ontbreekt een afbeelding van het e-book.
Tablet
Op tablets is er een probleem met de primaire navigatie. Deze desktop-navigatie is ontworpen voor interactie met een muis, maar op tablets moeten bezoekers op een menu item drukken. Dit leidt ertoe dat bij het drukken de pagina al wordt geladen, waardoor onderliggende pagina's niet via het menu bereikbaar zijn.
Hoewel er een uitzondering is voor het eerste niveau wanneer je precies op het pijltje drukt, is dit niet ideaal. Het advies is om op tablets hetzelfde menu weer te geven als op mobiel, omdat dit menu beter geschikt is voor touch screens.
Checklist of automatische tests
Laptop
De website lijkt goed te werken op grotere schermen, zoals laptops. Er zijn hier geen problemen gevonden. De layout en functionaliteit blijven consistent en gebruiksvriendelijk.
Desktop
De website is duidelijk ontworpen voor grotere schermen, zoals desktops. Er zijn hier geen problemen gevonden. Alles werkt naar behoren en de layout maakt optimaal gebruik van de beschikbare schermruimte.
Vervolgstappen
Dit zijn volgens ons de belangrijkste stappen om de responsiviteit van je website te verbeteren.
Pak de genoemde problemen met het primaire menu aan voor mobiel en tablet.
Los de problemen met tekst en beeld op.
Controleer regelmatig (en zeker na wijzigingen) of je website nog goed werkt op mobiel en tablet.