Mobile First betekent denken vanuit mobiele apparaten. Het kleine mobiele scherm is de basis voor de lay-out (indeling) van de website. Op grotere schermen wordt een aangepaste versie getoond. Eerst zorg je dat de pagina op het kleine scherm van een smartphone goed bruikbaar is en daarna pas je eventueel de lay-out aan voor grotere schermen. Daar is bijvoorbeeld ruimte voor een extra kolom met aanvullende informatie.
Voordelen van Mobile First
-
Content First
Mobile First betekent ook: inhoud eerst. Als je klein begint móet je wel focussen op de essentiële inhoud. Die wordt dan dus altijd goed getoond. Behalve bezoekers maak je ook zoekmachines daar blij mee.
-
Je website laadt sneller op mobiel
Een ander voordeel van Mobile First is dat alle extra code voor grote schermen niet geladen wordt bij kleine schermen. Op je smartphone laadt zo’n website dus super snel.
Hoe werkt het?
Zowel Responsive Design als Mobile First Design werken met CSS media queries. Een media query checkt eerst de afmetingen van het browservenster en past vervolgens de lay-out en stijl voor die grootte aan.
Responsive Design
Responsieve webdesign bestaat al wat langer en is de standaard geworden in 2012. De responsieve aanpak neemt de grotere schermen als basis en biedt aangepaste versies voor mobiele schermen. Je begint met een mooie – vaak ingewikkelde – layout met meerdere kolommen voor grote schermen, daarna maak je een simpeler versie voor mobiele schermen.
Responsieve webdesign verbergt soms ook bepaalde onderdelen of vereenvoudigt deze voor mobiele gebruikers. Maar de code is er nog wel en deze wordt altijd geladen. Ook waar deze code niet nodig is. Dit maakt de website onnodig traag.
Responsive vs Mobile First webdesign
Hieronder zie je duidelijk het verschil tussen Mobile First en Responsive.
- Responsive begint vanuit het grootste scherm en vereenvoudigt bij kleinere schermen.
- Mobile First begint vanuit het kleinste scherm en krijgt een complexere lay-out bij grotere schermen.
Aan de slag!
Wil je zelf een Mobile First website maken dan kan ik je dit boekje aanbevelen. Let op: Je hebt daarvoor kennis nodig van HTML, CSS en FTP.
In het Nederlands te koop bij Bol.com.
In het Engels te koop bij A Book Apart (ook verkrijgbaar als e-book).
Vind je dit te moeilijk?
Dan help ik je graag. Neem contact met me op om de mogelijkheden te bespreken.