Responsive webdesign

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

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.

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.

Technieken

Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele grids, flexibele afbeeldingen en CSS3-mediaquery's. 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.

Flexibele afbeeldingen worden ook relatief geschaald, zodat ze nooit buiten hun proporties worden weergegeven.

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. Ook kan de website rekening houden met de pixeldichtheid van een scherm, om bijvoorbeeld afbeeldingen op een hogere resolutie te laden.

Voorbeeld:

/* 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.

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.

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.

Obstakels

Het testen van responsive websites is lastiger dan het testen van een reguliere website. Het grote scala aan verschillende schermformaten en browsers zijn soms moeilijk na te bootsen. Ook is de werking van JavaScript in mobiele browsers soms beperkt, wat bijvoorbeeld een collapsing menu vrijwel direct onbruikbaar maakt. Een dienst als Viewporter biedt soelaas, maar is niet perfect. De dienst maakt het mogelijk websites te testen in verschillende schermafmetingen, maar specifieke bugs in verschillende browsers kunnen er niet meer uitgehaald worden. Het opbouwen van een device-lab is een beter alternatief, maar kan erg in de kosten oplopen.

Het kan ook voorkomen dat een site op een mobiel apparaat geladen wordt, maar alle content van de desktop variant ook gewoon ingeladen wordt. De laadtijden van grote afbeeldingen zijn een zware belasting van het mobiele netwerk, en staan de snelheid van de website in de weg bij mobiel gebruik. Om dit tegen te gaan kan men gebruikmaken van server sided browser detectie, in combinatie met responsive webdesign (RESS).

De online advertentiemarkt is ook nog niet volledig aangepast aan de flexibiliteit van responsive webdesign. Afmetingen van (flash)advertenties zijn veelal gestandaardiseerd en kunnen niet meegeschaald worden. Ook video’s zijn moeilijk responsive te implementeren. Bij veel gebruik van advertenties of video’s kan als alternatief gekozen worden voor een aparte mobiele website, waar mobiele advertenties getoond kunnen worden.

Bronnen, noten en/of referenties