User:Daniel.sneijers/responsive-webdesign

Responsive webdesign is een benadering van webdesign waarbij men 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 text of bruikbaarheid van de gebruikersinterface.

Historie
De term responsive webdesign is geopperd 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 1 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 relatieve grids, flexibele afbeeldingen en CSS3 media queries.

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 precentages en ems. Elementen in een flexibele grid zijn worden altijd geschaald 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.

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

Voorbeeld:

voorbeeld

Breakpoints
Als je het zichtbare gedeelte van je browser (ook wel de viewport genoemd) smaller wordt kan het zijn dat je site 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 zijn niet in steen gegraveerd. 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 je browser en een breekpunt te kiezen wanneer je site niet meer optimaal vertoond wordt.

Mobile first
Een andere ontwerpfilosofie die in opkomst is is mobile first. Hierbij ga je in eerste instantie uit van het kleinste scherm waar je voor ontwerp (smartphone), en schaal je het ontwerp en de mogelijkheden op naarmate je viewport groter wordt. Een veelgenoemd argument ten voordele van mobile first is: als je klein begint weet je zeker dat de essentiele content altijd goed getoond word.

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 Adobe Inspect biedt soelaas, maar is niet perfect. 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 mobiele site geladen wordt, maar alle content van de desktop variant ook gewoon ingeladen worden. 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 je gebruik maken 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 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.