Wat is Responsive Webdesign?

Wat is precies “Responsive webdesign”? Hoe zorg ik er voor dat mijn website er goed uit ziet op breedbeeldschermen (1920×1080) maar ook op klassieke beeldschermen (1280×1024) of tablets (1024×768)? Bij Responsive webdesign pas je (css-)truuks toe om de presentatie van je website aan te passen aan het beeldscherm van de bezoeker. In dit artikel leg ik uit wat Responsive webdesign inhoudt en waar je meer informatie kunt vinden over Responsive webdesign.

Disclaimer voor mensen die ruime ervaring hebben met het bouwen van websites en applicaties: dit artikel is geschreven voor de doelgroep van de HTMLCSS Basiscursus en is daardoor mogelijk onvolledig, niet helemaal correct of kort door de bocht. Suggesties voor het laagdrempeliger maken van dit artikel zijn altijd welkom.

Screenshot van DEFINE::RESPONSIVE

Handig: mocht je een demonstratie willen zien van wat een responsive website is, kijk dan eens naar DEFINE RESPONSIVE. Ook handig om aan je opdrachtgever uit te leggen wat Responsive webdesign precies is.

Wat is Responsive webdesign wèl en nièt?

Met Responsive webdesign pas je de presentatie van je website aan op het beeldscherm van de bezoeker van je website. De grootte van je website die met het apparaat van de bezoeker worden bekeken verandert nadrukkelijk nièt. Alle afbeeldingen worden nog steeds ingeladen. Je kunt echter wel bepalen (met behulp van CSS) welke zaken wel en niet worden getoond, of wellicht verschuiven op basis van het scherm waarmee de website wordt bekeken.

Responsive webdesign is er voor het optimaliseren van de presentatie van je website, nièt voor sneller laden op kleinere schermen.

Wat is de volgorde van werken voor een responsive design?

Van klein naar groot

Algemeen geldt dat wanneer je een responsive design wilt maken, je jezelf eerst moet richten op het design voor het kleinste apparaat waarop je je website mooi wilt kunnen tonen. Afhankelijk van hoeveel schermgroottes je wilt (S – M – L of XS – S – M – L – XL) ondersteunen, bouw je je ontwerp uit.

Wanneer je klaar bent met het ontwerpproces, ga je je op de HTML + CSS richten.

Hoe maak ik css specifiek voor een bepaalde resolutie?

Wanneer je wilt dat opmaak alleen voor een bepaalde resolutie geldt, heb je media queries nodig, een functionaliteit die in CSS3 wordt ondersteund. Zie hieronder voor een klein voorbeeld waarin we de kleur en breedte van een div-element aanpassen aan de schermbreedte.

<!doctype html>
<html lang="nl">
<head>
	<meta charset=utf-8>
	<title>Media query example</title>
	<style>
	#redblue{
		background-color:red;
		width:700px;
		padding:5px;
		border:solid 5px #ccc;
		text-transform: uppercase;
		font-family:sans-serif;
		font-size:2em;
	}

	@media screen and (min-width: 1024px) {
		#redblue{
			width:1000px;
			background-color:blue;
		}
	}
	</style>
</head>
<body>
	<div id="redblue">Wooah that's nice! Resize this window!</div>
</body>
</html>

Kopiëer de code uit bovenstaand voorbeeld eens in je eigen code-editor en sla het bestand op als *.html pagina. Wanneer je de pagina in Firefox gaat bekijken en het scherm breder en smaller sleept, zul je zien dat de opmaak van het element veranderd op basis van de schermresolutie.

In bovenstaand voorbeeld zie je dat er eerst een “standaard” opmaak wordt gedefinieerd voor het element #redblue. Pas wanneer de pagina op een scherm met een resolutie van minstens 1024px wordt bekeken (fullscreen) zal #redblue een nieuwe breedte en achtergrondkleur krijgen.

Hoe kan ik mijn responsive design eenvoudig testen?

Firefox to the rescue!

Firefox heeft een ingebouwde “Responsive-design weergave”. Wanneer je je pagina wilt uittesten bij verschillende resoluties, open hem dan in Firefox en kies voor de sneltoets Ctrl+Shift+M . Hiermee activeer je de “Responsive-design weergave” en kun je verschillende resoluties simuleren.

Een screenshot van htmlcss.jaapvdveen.nl bij een resolutie van 640px bij 768pxIn bovenstaand screenshot zie je dat wanneer deze cursuswebsite op een apparaat met een schermresolutie van 640×768 px wordt weergeven, de “sidebar” helemaal naar de onderkant van de website wordt verplaatst zodat de bezoeker van de website fatsoenlijk de betreffende pagina kan lezen. Ook wordt het menu ingeklapt.

Waar vind ik meer informatie over Responsive webdesign?

Mocht je willen experimenteren met CSS3 Media queries, lees dan het artikel over CSS3 Media Queries

Voor een uitgebreid artikel met stappenplan verwijs ik je graag naar een artikel genaamd RWD & Device detection? op smashingmagazine.com.