Mobile first ontwerpen

Enkele dagen terug heb ik een tweede responsief ontwerp online geplaatst. Het is deze keer een eenvoudige webshop geworden. Het resultaat kan je bekijken op madebywolf.com. Haal er gerust je gsm of iPad bij. (Qua vormgeving was ik hier gebonden aan een bestaande huisstijl.)

Het grote verschil met Sleepstreet, mijn vorige responsive design, is dat ik de Wolf website volledig “mobile first” heb opgevat (onder impuls van Andy Clarkes 320AndUp).

Desktop first

Sleepstreet was “desktop first” opgebouwd: ik maakte eerst een fluid versie van de website zoals die er moest uitzien op de desktop en ging daarna media queries gebruiken om het ontwerp aan te passen voor een vijftal andere schermresolutiezones, gaande van gsm tot high-res monitor.

Het voordeel van die “desktop first” aanpak is dat de website zonder problemen meteen goed wordt weergegeven in Internet Explorerversies ouder dan 9 (die geen media queries ondersteunen). Geen gepruts daar dus.

Het nadeel is dat mijn CSS een pak uitgebreider werd. Want voor elke regel CSS die iets specifieks aanpakt in de desktop layout, had ik er minstens 5 extra nodig voor de andere schemresolutiezones. Dat komt omdat ik media queries gebruikte met minimum- en maximumwaardes, zoals deze:

De CSS in bovenstaande media query wordt alleen toegepast als de viewport tussen de 320 en 380 pixels breed is. Is ze 319 of 381 pixels breed, dan wordt de standaard desktopversie weer getoond. Daarom is dus een volgende media query nodig die de volgende schermresolutiezone aanspreekt, zoals:

Mobile first

Wolf is dus mobile first opgebouwd. Mijn basis-CSS beschrijft bijgevolg de gsm-versie van de website. Op zich heeft dat alleen maar één groot nadeel: oude IE-versies tonen altijd de gsm-layout.

Maar op media queryvlak wordt het wél interessanter, als je gebruik maakt van media queries die alleen minimumwaardes bevatten tenminste, zoals deze:

Via deze eerste media query ga je bepalen wat moet gebeuren als een gebruiker je site bezoekt met een scherm dat wat meer pixels kan weergeven dan het standaard gsm-scherm. Het leuke aan die media query is dat de CSS die er in gestopt wordt ook wordt toegepast op een scherm dat 2000 pixels in de breedte kan weergeven. Dat komt uiteraard net doordat geen max-width is beschreven.

Het komt er dus op neer dat je een CSS-regel doorgaans niet in elke schermresolutiezone moet definiëren. Alleen in die zone vanaf dewelke je wil dat er verandering optreedt. En dat zorgt voor heel wat minder CSS.

En Internet Explorer dan?

Maar wat met oudere IE-versies die geen media queries ondersteunen? IE8 is nu eenmaal ‘s werelds meestgebruikte browser. En die 30% van je bezoekers willen heus geen mobiele versie zien van je website op hun desktopcomputer.

De oplossing is eigenlijk vrij eenvoudig: geef IE respond.js. Respond.js is een fantastisch script dat checkt of je browser media queries ondersteunt. Als dat niet het geval is, dan zal respond de CSS uit je media queries interpreteren en die via javascript aan de browser gaan opleggen. Het resultaat: je media queries werken in oude IE-versies.

Ik ben overtuigd. Mijn volgende website wordt op designvlak zeker en vast opnieuw mobile first.

Categorieën: Ontwerp,