Responsive webdesign

Responsive webdesign is een benadering van webdesign waarbij de webdeveloper streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.^[1]

Een voorbeeld van hoe verschillende elementen van een webpagina zich aanpassen aan de schermgrootte van verschillende apparaten zoals het beeldscherm van een desktopcomputer, een tablet-pc en een smartphone

Historie

De term responsive webdesign is bedacht in 2010 door Ethan Marcotte op de weblog A List Apart. Marcotte merkte destijds op dat steeds meer bedrijven investeerden in een mobiele website om hun klanten ook mobiel een optimale ervaring te bieden. Maar door het groeiende aantal apparaten, met allen hun eigen resolutie en afmetingen, bleek één mobiele website geen optimale oplossing. In plaats van te ontwerpen in vaste afmetingen, een benadering die stamt uit het printtijdperk, merkte Marcotte op dat het veel praktischer was om te ontwerpen in percentages en andere relatieve eenheden.^[1]

Technieken

Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele grids,^[2] flexibele afbeeldingen^[3] en CSS3-mediaquery's.^[4] Enkele van de door Marcotte bedachte technieken zijn:

Flexibele grids en afbeeldingen

De flexibele grids zorgen ervoor dat breedtes en hoogtes van elementen niet in pixels worden bepaald, maar in relatieve eenheden als percentages en em's. Elementen in een flexibele grid schalen altijd naar een percentage van het element waarin ze zich bevinden, of de afmetingen van het zichtbare gedeelte van de browser.^[2]

Flexibele afbeeldingen worden ook relatief geschaald, zodat ze nooit buiten hun proporties worden weergegeven.^[3]

Mediaquery's

Mediaquery's geven de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen. Meestal wordt de breedte van het scherm als uitgangspunt genomen.^[5] Ook kan de website rekening houden met de pixeldichtheid van een scherm,^[6][7] om bijvoorbeeld afbeeldingen op een hogere resolutie te laden.

Voorbeeld:^[8]

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

Breakpoints

Als het zichtbare gedeelte van de browser (ook wel de viewport genoemd) smaller gemaakt wordt, kan het zijn dat de website niet meer optimaal bruikbaar is. Een voorbeeld is een sidebar die bij een kleine viewport in de weg komt te staan van de content. In zo’n situatie is het gebruikelijk om een breekpunt te maken in de CSS en de sidebar niet meer rechts te laten zweven, maar onder de content te tonen.^[9]

Breekpunten staan niet vast. Een veelgebruikt uitgangspunt is om (ongeveer) de afmetingen van een smartphone als de iPhone, en een tablet als de iPad te gebruiken. Maar vaak is het beter om de site te schalen in de browser en een breekpunt te kiezen wanneer de website niet meer optimaal vertoond wordt.^[8]

Mobile first

Een andere ontwerpfilosofie die in opkomst is is mobile first. Hierbij gaat men in eerste instantie uit van het kleinste scherm waar voor ontwerp (smartphone), en vervolgens worden het ontwerp en de mogelijkheden opgeschaald naarmate de viewport groter wordt. Een veelgenoemd argument ten voordele van mobile first is: als klein begonnen wordt, weet men zeker dat gefocust wordt op de essentiële inhoud, die dan ook altijd goed getoond wordt.^[10]