Responsive

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.

Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele 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 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.

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

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