In deze tijd wordt er erg veel gebruik gemaakt van de mobiele telefoons. Sommige mensen gebruiken zelfs alleen nog maar een mobiele telefoon in plaats van een desktop. Dit heeft gevolgen voor hoe je website gezien word. Op een mobiele website is namelijk door het kleine scherm een stuk minder informatie in één keer te zien. In dit blog leg ik uit hoe je het beste een website kan maken die goed zichtbaar is voor zowel mobiele gebruikers als desktopgebruikers. En waarom mobile first zo belangrijk is.
De groei van mobiel internet
Gemiddeld worden ongeveer 25 tot 30% van de website bezoeken gedaan vanaf een mobiele telefoon. Dit aantal is nog zonder de tablet. Tijdens de werktijden is de desktop het belangrijkste scherm maar in de ochtend en avond is dat wel anders. In de ochtend is de mobiele telefoon het belangrijkst en in de avond de tablet. Er zijn mensen die dus beide schermen gebruiken maar er zijn ook mobile only gebruikers. Dit zijn gebruikers die alleen websites bezoeken via mobiel of tablet. Deze mensen zullen dus nooit een website zien op een groot scherm.
De komende tijd zullen er steeds meer mensen actief worden op alleen mobiel of tablet. Als je voor je bedrijf een app hebt is het alsnog belangrijk dat je het goed doet op het web. De apps worden namelijk sneller gevonden door mensen die jou al kennen dan mensen die je nog niet kennen. Je moet dus ook nog via het internet je leads en prospects krijgen en niet alleen via de app.
Hoger in Google met een mobielvriendelijke website
De laatste jaren kijkt Google of een website ook goed worden weergegeven op mobiele schermen. Als je website geschikt is voor mobiele telefoons dan komt het dus hoger is de ranking van Google en heb je een streepje voor op je concurrent.
Responsive web design vs mobile first web design
Een responsive web design zorgt ervoor dat de website zich aanpast aan jouw scherm. Nu zou je denken ‘dat is toch ook mobile first?’ maar nee dat is het niet. Het verschil is dat een responsive design de plaatjes en de tekst alleen verkleint. Als je dus een foto van die site moet downloaden krijg je een bestand dat even groot is als dat je het op een desktop zal downloaden. Dat betekent dus dat het bestand erg groot is en de site hierdoor erg traag wordt. En een trage site is niet erg gebruiksvriendelijk. Een wel mobile first gebouwde site daarin tegen heeft minder grote bestanden, als je deze download word de site dus niet traag waardoor het gebruiksvriendelijker is dan een responsive web design.
Het verschil tussen mobile first en desktop first
Bij mobile first is er sprake van geleidelijke verbetering. Dat komt omdat het ontwerp voor mobiel het moeilijkst is en daarom het beste als eerst gedaan kan worden. Door als eerst de moeilijkste vragen te beantwoorden zoals ‘Wat is de call to action?’ of ‘Wat is de kern van mijn boodschap?’ is het ontwerp voor andere schermgroottes later makkelijker. Omdat op het kleinste scherm alleen de essentiële inhoud en functies te zien zijn heb je de kern van je gebruikerservaring al ontworpen.
Het tegenovergestelde van mobile first is het desktop first. Bij desktop first is er namelijk sprake van een sierlijke afbraak. Vanaf het begin worden alle ingewikkelde systemen ingebouwd en weergegeven. Later wordt dit allemaal pas weggehaald voor de kleinere schermen. De belangrijkste uitdaging hier is dat de kernelementen en toevoegingen niet versmelten. Als ze wel versmelten is het moeilijk deze nog te scheiden. Je loopt dan het risico dat de mobiele gebruiker een soort sluitpost wordt omdat je je ervaring eigenlijk aan het ‘vereenvoudigen’ bent.
Waarom wint het mobile first design?
Het begint al met dat geleidelijke verbetering positiever klinkt dan sierlijke afbraak. Verder zijn er nog twee andere redenen waarom mobile first beter is de desktop first.
- De content staat op één.
De benadering van mobile first is ook de benadering van content first. Mobiel heeft namelijk de grootste beperking qua schermgrootte, aandacht spanne en bandbreedte. Als je dat in gedachte houdt tijdens het ontwerpen dan houd je duidelijk voor ogen wat echt belangrijk is, dat is jouw content. De content is uiteindelijk de reden dat gebruikers jouw website bezoeken. Daarom is het belangrijk dit voorop te stellen in het ontwerpproces. Wat ook belangrijk is om te onthouden is dat desktop gebruikers en mobiele gebruikers soms compleet andere content zoeken. Voor de mobiele gebruikers is het namelijk belangrijk dat ze makkelijk een download of adresgegevens kunnen vinden. Maar daarin tegen willen desktop gebruikers vaak een artikel lezen of een video bekijken. Dit is handig om bij stil te staan voorafgaand aan het ontwerpproces. - De kracht van het ontwerp
Het kan een erg grote domper zijn om te zien wat er overblijft van het revolutionaire ontwerp op een mobiel. Alle prachtige graphics, effecten en animaties vallen weg en alleen je content blijft nog over. Je herkent waarschijnlijk alleen het lettertype en de kleuren nog. Als je begint met het ontwerpen voor het allerkleinste scherm laat je al je creativiteit daar op los en kan je het vervolgens ‘pimpen’ voor de grotere schermen.
Kortom, als je het proces om draait naar mobile first in plaats van desktop first voelt het niet alsof je ergens afbreuk aan doet maar maak je het geleidelijk beter.
Is een mobile first website ontwerp moeilijk?
Het is dan misschien wel het beste om een mobile first te maken maar het is een stuk lastiger dan een desktop first websitedesign. Achter een laptop schrik je namelijk niet zo snel van een pagina met 1000 woorden. Maar op een mobiele telefoon is dat wel anders. De tekst lijkt dan namelijk veel langer omdat het scherm een stuk kleiner is. Dit zorgt ervoor dat de bezoeker vaker omlaag moet scrollen. Hierdoor klikt een bezoeker sneller weg dan als de tekst een stuk korter is. Voordat je echt kan beginnen aan een mobile first ontwerp moet je jezelf een aantal lastige maar belangrijke vragen stellen, namelijk:
- Wat is die ene actie die de bezoeker uit moet voeren? Wil je dat hij zich inschrijft voor een nieuwsbrief of wil je liever dat hij een contactformulier invult?
- Welke 300 woorden wil/moet ik vertellen? De gemiddelde lengte voor een tekst voor mobiele gebruiker is ongeveer 300 woorden anders wordt de tekst te lang en krijg je hetzelfde effect als met een tekst van 1000 woorden.
- Wat is de zin die mijn bezoeker als eerste leest? Deze vraag is erg belangrijk. Omdat het scherm een stuk kleiner is staat er minder tekst op. Hierdoor is het belangrijk om met de eerste zin die de bezoeker leest gelijk een goede indruk te geven van wat je wilt en doet.
Waarom deze vragen zo moeilijk zijn komt doordat de vragen direct de strategie, positionering en/of de propositie van een bedrijf raken en veel bedrijven hebben het antwoord op deze vragen vaak juist niet paraat.
Bij desktop first kan je je nog verstoppen achter de mooie animaties en sliders. Maar het gebrek aan inhoud wordt pas echt duidelijk als je het geheel terug moet brengen tot een mobiele site.
Conclusie
Het is tegenwoordig erg belangrijk om een website goed te ontwerpen voor mobiele gebruikers. De beste (en makkelijkste) optie is door het design mobile first te maken. Hierdoor hoef je voor het desktopdesign alleen geleidelijk te verbeteren. De andere optie is het desktop first design. Als je eerst het desktopdesign maakt moet je delen van het design afbreken voor de mobiele website. Hierdoor kan het gebeuren dat de kernelementen en de toevoegingen samensmelten. Als deze samensmelten kan je ze bijna niet meer scheiden en wordt de kans groter dat de mobiele gebruikers een soort sluitpost worden. Zorg er dus voor dat je een website mobile first bouwt zodat het gebruik voor mobiele- en desktopgebruikers optimaal bruikbaar is.
