Een succesvolle website is niet zomaar gerealiseerd. Er moet worden nagedacht over de indeling, vormgeving, het aantal pagina’s, de content en ga zo maar door. Maar dat is niet alles. Een van de belangrijkste vragen vandaag de dag is de manier waarop gebruikers jouw website zullen bekijken. Dat gebeurt namelijk niet alleen meer via een computer of laptop, maar steeds vaker ook via een tablet of mobiele telefoon. Een website kan er nog zo mooi uit zien op jouw beeldscherm, maar hoe komen de pagina’s tot zijn recht op bijvoorbeeld een iPhone?
In een eerder artikel had ik het over het belang om mobiele sites te optimaliseren, waar responsive webdesign al kort even om de hoek kwam kijken. In dit artikel ga ik een stapje verder door uitleg te geven over responsive webdesign en vier technieken te behandelen.
Responsive webdesign: wat is dat nou eigenlijk?
Responsive webdesign is een term die werd bedacht door Ethan Marcotte in 2010. Het is een methode om websites te ontwikkelen met een optimale gebruikservaring, ongeacht de grootte van het scherm. Bij sites of applicaties die volgens het responsive webdesign principe zijn ontworpen, worden tekst, plaatjes en andere elementen automatisch geschaald naar de grootte van het venster of apparaat. Dit kan worden gerealiseerd doordat er gebruik wordt gemaakt van een CSS3-opmaak. Grofweg is dit een opmaak waarbij de webpagina’s bestaan uit verschillende modules, zoals achtergronden, kleuren, lettertypes en andere objecten.
Responsive webdesign maakt het overbodig om verschillende websites te moeten onderhouden voor elk mobiele apparaat. Eén website volstaat. De aparte (beperktere) mobiele website kan vervallen, aangezien alle elementen die daarbij van belang zijn al worden opgenomen in de responsive website.
Verschillende technieken
Er bestaat niet één juiste manier om een responsive website te bouwen. Het ontwikkelen van de website is een doordacht traject met verschillende afwegingen, onder andere over het patroon van de website. Hieronder geef ik ter inspiratie vier technieken van Ethan Marcotte.
1. Flexibele grids en afbeeldingen
Je kunt ervoor zorgen dat je website is opgebouwd uit flexibele grids (roosters) en afbeeldingen. Flexibele grids zorgen ervoor dat breedtes en hoogtes van elementen niet in pixels worden bepaald, maar in relatieve eenheden zoals percentages. Alles wat zich in de flexibele grid bevindt, schaalt automatisch naar een percentage van het element waarin het zich bevindt, of de afmetingen van het zichtbare gedeelte van de browser. Bij flexibele afbeeldingen werkt dit hetzelfde: zij worden relatief geschaald, zodat ze nooit buiten hun proporties worden weergegeven.
2. Media Queries
Een media query is een handige mogelijkheid in webdesign, waarmee voor elk afzonderlijk apparaat een stylesheet gemaakt kan worden. De 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. Daarnaast kan de website rekening houden met de pixeldichtheid van een scherm, zodat bijvoorbeeld afbeeldingen op een hogere resolutie worden geladen.
3. Breakpoints
Wanneer het zichtbare gedeelte van de browser smal is, kan het zijn dat de website niet meer optimaal zichtbaar of bruikbaar is. Zo kan het voorkomen dat een sidebar (oftewel zijbalk) bij een klein beeldscherm in de weg komt te staan van de content. In zo’n situatie is het verstandig om een breekpunt te maken en de sidebar niet meer rechts te laten zweven, maar onder de content te plaatsen. Breekpunten kunnen naar eigen wens worden bepaald, maar een veelgebruikt uitgangspunt is om ongeveer de afmetingen van een smartphone en een tablet te gebruiken.
4. Mobile First
Bij deze techniek gaat men bij het ontwerpen van de site in eerste instantie uit van het kleinste scherm waarop het ontwerp getoond zal worden; de smartphone. Vervolgens worden het ontwerp en de mogelijkheden opgeschaald voor grotere beeldschermen. Een voordeel van deze techniek is dat als er klein begonnen wordt, echt wordt gefocust op de essentiële inhoud. Deze inhoud zal dan ook altijd goed getoond worden.
Al met al draait responsive webdesign om een combinatie van lay-out, content en gebruikerservaring. Je wilt immers dat een website niet alleen goed zichtbaar is op elk apparaat, maar ook dat hij altijd de beste gebruikservaring biedt.
