2

Hallo! Kan ik je verder helpen?

Heb je een vraag, wens of idee? Wij gaan graag met je in gesprek!

Neem contact op
Bel direct Ontdek moddit
MENU
Mijn Moddit

Techniek

Is jouw responsive website wel écht geschikt voor elk device?

21 nov 2017 5 min. leestijd Daniel Pattiasina

Anno 2017 zijn de meeste moderne websites wel responsive. Responsive webdesign houdt simpel gezegd in dat websites geschikt zijn voor elk formaat scherm of meeschalen naar het formaat van het scherm, of dit nu een desktop, een tablet of een smartphone is. Maar is dit wel voldoende? En zijn de juiste keuzes gemaakt om de website optimaal te tonen op ieder scherm? In deze blog vertel ik je tips en tricks, zodat je weet waar je op kunt letten om te checken of een website écht geschikt is voor alle apparaten.

Om een website geschikt te maken voor elk formaat scherm zijn een aantal zaken belangrijk, zoals snelheid en gebruiksvriendelijkheid. Om websites sneller te laden, worden er vaak elementen weggelaten. Is dit bij jouw website ook het geval? Welke elementen zijn er dan weggelaten? Snappen de bezoekers de hiërarchie en structuur van de website nog wel of zijn ze het overzicht compleet kwijt? Zijn alle (belangrijke) pagina’s nog wel snel en eenvoudig te bereiken via het menu? De gebruiksvriendelijkheid van de website mag nooit uit het oog verloren worden bij de mobiele variant van een website.

Websites worden bij Moddit uitgebreid getest op diverse devices.

Structuur, navigatie, hiërarchie en overzicht

De meeste websites hebben op computerschermen een menu waarbij in één oogopslag alle hoofdpagina’s in beeld zijn. Dit zijn meestal de belangrijkste pagina’s van je website. Het is dus niet geheel onbelangrijk dat je bezoekers hier altijd gemakkelijk en snel naartoe kunnen navigeren. Op kleinere schermen, zoals bij tablets en smartphones, is echter niet altijd ruimte om alle hoofdpagina’s direct in beeld te laten zien. Het menu is bovendien niet het enige wat je in beeld wil hebben. Een aantal snelle contactgegevens, zoals je telefoonnummer en een kenmerkende (sfeer)foto zijn waarschijnlijk ook elementen die je op kleinere schermen direct terug wilt laten komen. Needless to say, er is niet voldoende ruimte om al je elementen direct in beeld te tonen.

Het hamburgermenu

De oplossing om alle elementen toch terug te laten komen? Een hamburgermenu! Lees alles over dit menu in de blog van mijn collega Mike. Dit menu is een ideale, ruimtebesparende oplossing, maar is tegelijkertijd ook een gevaarlijke. Want wordt deze op de juiste manier toegepast op jouw website? Het moet voor bezoekers allereerst duidelijk zijn dat het om een uitklapmenu gaat. In dat menu moeten alle hoofdpagina’s daadwerkelijk instaan. Subpagina’s worden vaak weggelaten op kleinere schermen, maar het is daarbij wel belangrijk dat de structuur van de website inzichtelijk blijft. Zodra een bezoeker op een vervolgpagina terecht komt, moet het nog steeds helder zijn op welk gedeelte van de website deze zich bevindt en dat het een onderdeel is van een overkoepelende pagina. Door het tonen van bijvoorbeeld breadcrumbs, maakt dit voor bezoekers een stuk overzichtelijker. Ook zorgt dit ervoor dat een bezoeker eenvoudig terug kan navigeren naar de vorige pagina.

Inrichting van de pagina’s

De structuur van het menu is niet het enige waar je op moet letten bij kleinere schermen. De inrichting van de pagina’s mag ook niet vergeten worden. Ik heb het dan niet alleen over de keuze van het lettertype en de grootte ervan, maar ook over de inrichting van bijvoorbeeld de conversies. Kunnen je bezoekers nog wel (makkelijk) converteren op kleinere schermen? En is de zoekfunctie wel eenvoudig in gebruik? Dit zijn allemaal belangrijke kwesties waar goed over nagedacht moet worden om je website optimaal te laten functioneren voor ieder formaat scherm.

Touch-device optimalisatie

Heel plat gezegd wordt op een mobiele/responsive website nog steeds dezelfde website getoond als op een desktop, maar dan op een kleiner scherm. Content die eerst naast elkaar stond, staat nu bijvoorbeeld onder elkaar. Natuurlijk zijn er nog veel meer visuele en technische aanpassingen en optimalisaties, maar in de basis zal de content grotendeels hetzelfde zijn. Iets waar wel goed over nagedacht moet worden, is dat de gebruiker bij apparaten zoals smartphones en tablets op een touch-device zit, waarbij het scherm met een vinger wordt bediend.

De mooie visuele effecten die op je website terugkomen als er een muis op een bepaalde conversie of blok gaat staan, is op mobiel niet meer zichtbaar. Het is voor een bezoeker vervelend om allerlei animaties, bewegingen en effecten te zien, terwijl je eigenlijk alleen maar aan het scrollen bent. Er gebeurt iets, maar je weet niet wat of waarom. En wat gebeurt er met informatie die enkel getoond wordt als je met een muis over een bepaald element gaat? Wordt die informatie niet meer getoond op kleinere schermen? Het is belangrijk om rekening te houden met touch-device bezoekers. Hiermee voorkom je verrassingen en (onnodige) verwarring.

Cross-device optimalisatie

Naast touch-devices, zoals smartphones en tablets, hebben we ook te maken met verschillende apparaten en diverse mobiele software. Waar we bij desktop websites testen op verschillende internetbrowsers, is het belangrijk dat we websites ook grondig testen op diverse mobiele apparaten. Of het nu een Samsung Galaxy is, een iPad of een iPhone: je website moet het overal goed doen. Wanneer bepaalde elementen niet geschikt zijn voor één bepaald type apparaat kijken we naar geschikte alternatieven of fallbacks.

Afbreuk of verrijking?

Een mobiele website is een compacte versie van de desktop versie van de website. Vaak wordt ervoor gekozen om bepaalde content weg te laten, kleiner weer te geven, samen te voegen of te verplaatsen naar een andere plek. Op mobiele sites hebben we te maken met bezoekers die gebruik maken van hun mobiele data. We willen dus voorkomen dat we te ‘zware’ content gebruiken, zoals te grote afbeeldingen of video’s. Dit is nog belangrijker als je bezig bent met het vergroten van de vindbaarheid van je website. Google wordt er namelijk blij van als jouw mobiele website zo snel mogelijk is. Hoe meer er wordt gedaan aan mobiele optimalisatie, hoe sneller je website, hoe beter je vindbaarheid in Google.

Je moet jezelf echter wel afvragen of de herkenbaarheid van je merk en huisstijl na al het knippen en het verplaatsen nog wel hetzelfde effect heeft als de herkenbaarheid van de desktop-versie. Is je merk nog steeds te herkennen op mobiel of hebben gebruikers geen idee meer op welke website ze zijn belandt? We zien op de desktop-versie van websites vaak dat bedrijven beginnen met een bepaalde sfeerfoto of -video in combinatie met een duidelijke titel, een korte boodschap en/of een conversie. Zijn die onderdelen nog steeds even krachtig op mobiele apparaten?

Conclusie

Bij Moddit maken we gebruik van diverse methodes om websites geschikt te maken voor schermen van elk formaat. We zorgen ervoor dat content geoptimaliseerd wordt voor mobiele apparaten en houden daarbij rekening met user experience. De kunst is om van een uitgebreide, sfeervolle desktop-versie van een website een geoptimaliseerde mobiele versie te maken die een verrijking is van de desktop-versie waarbij de huisstijl en herkenbaarheid van het merk intact blijft.

Ben je ook geïnteresseerd in een mobiele website die op de juiste manier geoptimaliseerd is of ben je benieuwd of bij het optimaliseren van jouw mobiele website de juiste keuzes gemaakt zijn voor mobiele optimalisatie? Wij helpen je graag! Neem direct contact met ons op voor meer informatie.

Meer weten? Neem contact op met de auteur:

Daniel Pattiasina - Webdesigner

0548 612 805 - daniel@moddit.nl

Lees ook deze blogs

Gerelateerde blogs

Samen het verschil maken?

  • Vind ons
  • Marie Curiestraat 2
    7442 DP Nijverdal
Uw browser is niet meer van deze tijd!

Update uw browser om optimaal van deze website (en vele anderen) te genieten Nu updaten!

×