De ins & outs van responsive webdesign

Responsive is een term die je tegenwoordig vrijwel altijd hoort wanneer het gaat om het bouwen van een nieuwe website. Wat betekent die term, wat heeft dat voor gevolgen voor het productieproces en hoe werkt dat dan als je een website responsive gaat maken?

Responsive webdesign is de term die gebruikt wordt wanneer men het heeft over websites die zich aanpassen aan het formaat van het toestel waarop het bekeken wordt. Mensen benaderen het internet vanaf verschillende toestellen (desktop, tablets, smartphones) en op elk toestel wil je dat je website er goed uitziet.

DE TECHNIEK

Je website wordt geleverd met een zogenaamde stylesheet waarin de informatie staat over hoe elementen op het scherm eruit moeten komen te zien.

De simpelste manier om een website responsive te maken, is om hier binnen uitzonderingen toe te voegen die afhankelijk zijn van de schermbreedte. Dit heet een media query en ziet er zo uit:

Bovenstaande regel zegt “de stylesheet binnen de accolades moet toegepast worden tot aan een maximum schermbreedte van 600 pixels breed”.

Alternatief werkt ‘min-width’ ook, dat vertaalt naar “de styling binnen de accolades moet toegepast worden vanaf een schermbreedte van 600px”:

Wanneer je die twee regels combineert kun je tot op de pixel nauwkeurig een aangepast design maken.

/* CSS Code die van toepassing is tussen 600 en 1000 pixels; */
@media (min-width: 600px) and (max-width: 1000px) { … }

FRAMEWORKS

Om snel te kunnen werken met responsiveness gebruiken webdevelopers vaak een framework waarin styling vooraf vastgelegd is en wat zichzelf al automatisch aanpast aan verschillende schermformaten. Bootstrap is een populair framework dat we veel gebruiken bij ByYourSite.

Hieronder vind je een overzicht van standaard breakpoints die gebruikt worden om verschillende toestellen mee te herkennen binnen het Bootstrap framework.

/* Kleine toestellen (landscape phones, 576px and up) */
@media (min-width: 576px) { … }

/* Medium toestellen (tablets, 768px and up) */
@media (min-width: 768px) { … }

/* Grotere toestellen (desktops, 992px and up) */
@media (min-width: 992px) { … }

/* Extra grote toestellen (1200px and up) */
@media (min-width: 1200px) { … }

Om een praktijkvoorbeeld te geven:
Stel ik heb op desktop- en tablet toestellen een lay-out met twee blokjes naast elkaar, een stukje tekst in de linkerhelft en een plaatje in de rechterhelft. Op mobiel wil ik deze twee onder elkaar plaatsen. Hiervoor zou het grid-systeem van Bootstrap uitkomst bieden. Om dit te gebruiken geef je de door Bootstrap gedefinieerde klassenaam mee aan een HTML object, en in de door Bootstrap geleverde stylesheet wordt diezelfde klassenaam gebruikt om er eigenschappen aan toe te kennen die ervoor zorgen dat de lay-out zich aanpast op mobiele schermen.

<!– HTML –>
<div class="row">
	<!–- De linker kolom –->
	<div class=”col-md col-sm-12″>
		Tekst
	</div>
	<!-– De rechter kolom -–>
	<div class="col-md col-sm-12">
		Plaatje
	</div>
<div>

/* Bootstrap’s CSS */
@media (min-width: 768px) {
	.col-sm-12 {
		width: 100%;
	}
}

TOT SLOT

Heb je nog er nog geen goed beeld bij? Kijk dan eventjes hier voor meer uitleg.