Responsive webdesign

Uit Wikipedia, de vrije encyclopedie
Ga naar: navigatie, zoeken
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 web developer 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]

Historie[bewerken]

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[bewerken]

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

Flexibele grids en afbeeldingen[bewerken]

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]

Media Queries[bewerken]

Media queries 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[bewerken]

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[bewerken]

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 essentiele inhoud, die dan ook altijd goed getoond wordt.[10]

Obstakels[bewerken]

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.[11]

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.[12] Om dit tegen te gaan kan men gebruik maken van server sided browser detectie, in combinatie met responsive webdesign (RESS).[13]

De online advertentiemarkt is ook nog niet volledig aangepast aan de flexibiliteit van responsive webdesign.[14] 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.[15]

Bronnen, noten en/of referenties
  1. a b Ethan Marcotte, "Responsive Web Design", A List Apart, 25 mei 2010
  2. a b Ethan Marcotte, "Fluid Grids", A List Apart, 3 maart 2009
  3. a b Ethan Marcotte, "Fluid Images", A List Apart, 7 juni 2011
  4. W3C, "W3C Recommendation: Media Queries", "W3C", 19 juni 2012
  5. Jay Bryant, Mike Jones "Pro HTML5 Performance", p38 2012, ISBN 978-1-4302-4524-7
  6. Mozilla, "CSS media queries", "Mozilla Developer Network"
  7. Walt Grayson, "Targeting the iPhone 4 Retina Display with CSS3 Media Queries", "iWalt", 23 juni 2010
  8. a b Kayla Knight, "Responsive Web Design: What It Is and How To Use It", Smashing Magazine, 12 januari 2011
  9. Steven Bradley, "5 Patterns To Rearrange Responsive Layouts", Vanseo Design, 29 mei 2012
  10. Luke Wroblewski, "Organizing Mobile", "A List Apart", 18 oktober 2011
  11. Smashing Magazine "The Mobile Book", p59 2013, ASIN B00AMM4QWY
  12. Smashing Magazine "The Mobile Book", p66 2013, ASIN B00AMM4QWY
  13. Anders M Andersen, "Getting started with RESS", ".net Magazine", 9 mei 2012
  14. Jenny Xie, "What’s Holding Back Responsive Web Design? Advertising, PBS, 3 april 2013
  15. "iAb Mobile Advertising Guidelines", "iAb"