Xedia logo

Responsive Design met Bootstrap

Een blik op de website-statistieken zeggen genoeg: steeds meer bezoekers van een website komen vanaf een smartphone of tablet. Vanzelfsprekend wil je die 'mobiele' bezoekers ook een goede gebruikservaring bieden. Het scherm van de smartphone biedt uitsluitend plek aan alle essentiële zaken, op een tablet wordt meer getoond en op een desktop-computer ziet de bezoeker alle content. Je kunt ook kiezen voor een strikte 'mobile first' aanpak waarbij je op alle schermen alleen essentiële zaken toont...

Responsive design

Het uitgangspunt bij een responsive design is dat de website goed te bedienen en lezen is op een:

  • smartphone (staand en liggend)
  • tablet (staand en liggend)
  • laptop
  • een groter computerscherm

De schermgrootte van deze verschillende apparaten wordt vertaald in een breedte (in pixels). De overgang van de ene breedte naar de andere wordt een breakpoint genoemd.

Sinds een paar jaar zijn alle internet-browsers geschikt om websites met een responsive design goed te tonen. Bij een website zijn er een aantal manieren om de pagina 'responsive' te maken:

  • verberg de navigatie onder een hamburger-knop (die knop met drie platte streepjes)
  • verberg bijvoorbeeld een rechterkolom op een smartphone onder een uitklaplink omdat deze slechts niet-essentiële en additionele informatie bevat
  • zet elementen onder elkaar in plaats van naast elkaar op een kleiner scherm
  • pas de grootte van het beeld aan
  • reduceer het functionele wit op een kleiner scherm

 

Bootstrap

Bootstrap, ontwikkeld door de makers van Twitter, is een bibliotheek met gereedschap voor ontwikkelaars van responsive websites. Dankzij Bootstrap kun je veel sneller responsive sites bouwen. Bootstrap werkt standaard met een grid van 12 kolommen waarbij de vormgever of ontwikkelaar een webpagina bijvoorbeeld als volgt opbouwt:

  • linker kolom: 3 grid-kolommen
  • content kolom: 6 grid-kolommen
  • rechter kolom: 3 grid-kolommen

De vormgever bepaalt dan hoe de kolommen schuiven op de diverse schermformaten.

 

Adaptive design

Kies je er bij responsive design voor om alle informatie op alle schermgroottes te tonen, bij adaptive design pas je ook de functionaliteit of content aan.