Responsive Design

Hoe werkt responsive design?

Een grafisch ontwerper die een A4-poster maakt, kent de afmetingen. Op het web ken je die niet: je ontwerp landt op een scherm van vijf centimeter of van zestig. Responsive design lost dat op door niet één vaste indeling te maken, maar regels: onder deze breedte gaan de kolommen onder elkaar, vanaf die breedte naast elkaar. Dat gebeurt met CSS, op basis van de schermbreedte van het apparaat.

Responsive design of een aparte mobiele site?

Vroeger bouwden bedrijven een tweede site voor telefoons, vaak op een eigen adres en met minder functies. Dat is achterhaald. Je onderhoudt dan twee sites, de inhoud loopt uiteen, en zoekmachines moeten uitzoeken welke versie de echte is. Eén responsive site is goedkoper in onderhoud en levert één set URL's op.

Wat betekent mobile first?

Google beoordeelt sinds enkele jaren de mobiele versie van je site als de norm, niet de desktopversie. Wat op je telefoon ontbreekt, telt voor Google dus niet mee, ook al staat het wel op je bureaubladversie.

Mobile first is daarnaast een ontwerpvolgorde: je begint bij het kleine scherm en bouwt uit. Dat dwingt tot keuzes, want op 375 pixels breed past alleen wat er echt toe doet.

Waar gaat het in de praktijk mis?

Bijna nooit in de indeling, bijna altijd in de details: knoppen die te klein zijn om te raken, formulieren die het toetsenbord half onder de invoervelden schuiven, en afbeeldingen die op desktop geknipt zijn en op mobiel de helft van het scherm vullen. Test op een echt toestel, niet alleen door je browservenster smaller te slepen. Bij maatwerk applicaties test je bovendien niet alleen de pagina maar het hele scherm waarop iemand werkt.