Michèle van den Aardweg

Michèle van den Aardweg

Senior front-end webdeveloper

Als senior front-end developer ligt Michèle's expertise vooral bij HTML en CSS. Ze heeft een voorliefde voor elegante HTML en CSS oplossingen. Buiten code schrijven is Michèle eveneens sterk in ontwerp, maar ook flash en PHP zitten in haar vingers. Meer

Mobile First

Michèle van den Aardweg 11 juli 2013

occhio-mobile-first

Er is de laatste jaren ontzettend veel veranderd aan de manier waarop mensen websites bezoeken, we schreven er al eerder een blog over. Responsive websites worden of zijn al steeds vaker een must, in plaats van een leuk extraatje.

De Mobile First strategie speelt hier goed op in, en is eigenlijk onmisbaar als je het ons vraagt. Maar, wat is Mobile First nu eigenlijk?

Mobile First = Content first

De Mobile First strategie speelt hier goed op in, en is eigenlijk onmisbaar als je het ons vraagt. Maar, wat is Mobile First nu eigenlijk? Mobile First is het principe dat websites eerst voor mobiele apparaten zouden moeten worden ontworpen. Het gaat hierbij dan niet alleen om layout-technische zaken als buttons, logo’s en navigatie, maar ook om welke content en welke functionaliteit je wilt bieden aan een mobiele bezoeker. Mobile First = Content First. Lees verder voor tips!

1. Een goed ontwerp begint dus met de content.

Doordat mobiele apparaten doorgaans zijn uitgerust met een relatief klein scherm, word je gedwongen om op een totaal andere manier naar je website te kijken: wat is nu eigenlijk echt belangrijk? Misschien is die mooie grote slider dan toch niet waar je doelgroep op zit te wachten, terwijl ze mobiel surfen. Dus, focus je op de content.

Weet wat de bezoekers doen op de site en waar ze voor komen. Dit is relatief simpel te achterhalen door statistieken van je huidige site te analyseren of door een onderzoek te houden binnen je doelgroep.

Wat is nu echt belangrijk?

2. Zorg voor een duidelijk ontwerp

Mobiele bezoekers kijken vaak met ‘one eyeball and one thumb‘, wat wil zeggen dat ze tegelijkertijd met andere dingen bezig zijn. Des te meer reden om de site duidelijk en overzichtelijk te maken. Hoe kleiner het scherm, hoe kleiner vaak de buttons en dan kan daar maar beter weinig tekst in staan. In de wereld van mobiel design is less toch al snel moreBigger is vervolgens altijd better. En wat je ook ontwerpt zorg ervoor dat het ‘touch‘-vriendelijk is.
Realiseer ook dat content belangrijker is dan navigatie. Zorg er dus voor dat het menu niet het eerste en enige is wat de bezoeker ziet en verberg het achter een knopje links boven in het scherm. Men gebruikt hier steeds vaker een klein vierkantje voor met drie horizontale lijntje erin.
Belangrijke functionaliteiten of informatie moet je dan juist weer niet achter een hover verbergen, deze is namelijk niet direct zichtbaar.

3. Optimaliseer

Tijd is kostbaar op mobiel (letterlijk). Laat je site daarom zo goed mogelijk optimaliseren voor mobiel. Niemand zit te wachten op grote afbeeldingen, een overvloed aan code en scripts. Daar kan je zelf weinig aan doen behalve aan de ontwikkelaar vragen om met onderstaande rekening te houden.

  • Maak gebruik van image sprites,
  • Combineer en minify CSS en JavasScript files.
  • Schrijf cleane HTML en CSS.
  • Omarm CSS3 zodat je minder afbeeldingen nodig hebt.

4. Benut de mogelijkheden

Een mobiele omgeving biedt vele mogelijkheden ten opzichte van een gewone desktop computer. Denk hierbij bijvoorbeeld eens aan location detection. Een mobieltje weet precies waar iemand is, waar die heen gaat en hoe snel die dit doet. Door het mobiele platform goed te benutten kan je een gebruiker een veel rijkere ervaring geven.

5. Responsive? Start Mobile first!

Mobile first ontwikkelen is sneller omdat je niet eerst alles opbouwt voor desktop, en vervolgens weer moet afbreken voor tablet en mobile. Zorg er daarom eerst voor dat alles er goed uit ziet op een mobiele telefoon en voeg daarna eventueel wat extra styling toe voor bijvoorbeeld een tablet of desktop. Datzelfde geldt voor de inhoud van je site, wanneer je in kaart hebt gebracht wat de speerpunten zijn van je site, loont het om deze te handhaven wanneer je gebruiker de site op een tablet of desktop computer bezoekt en zo min mogelijk extra toe te voegen. Wie zit er nu te wachten op overbodige en irrelevante informatie?
Op deze manier is bovendien de code simpeler, kleiner en beter te onderhouden.

Mobile First, Occhio First

Wil je meer weten over Mobile first, of de mogelijkheden om jouw huidige website geschikt te maken voor mobiel, bel ons eerst!