Responsive design tutorial : hoe maak je een responsive website

Zoals je misschien wel is opgevallen is Bobdewebbouwer.com voorzien van een responsive design, wat wil zeggen dat deze website zich automatisch aanpast aan het apparaat waarop hij bekeken wordt. Zo ziet deze website er op je PC anders uit dan op een tablet en weer anders op een mobiele telefoon. In deze tutorial lees je hoe dat werkt!

In dit artikel lees je:

• Dat liquid programmeren (in percentages in plaats van pixels) de basis is van responsive design
• Hoe je met media queries bepaalde CSS code kan activeren als het scherm kleiner is dan een bepaalde resolutie
• Voor welke resoluties je media queries moet schrijven (zogenaamde breaking points)
• Dat je begint met grootste resolutie (de desktop weergave) en eindigt met de kleinste resolutie
• Dat je je responsive design kunt testen door je browservenster te verkleinen, of met een tool
• Dat <meta name=”viewport”> prima werkt tegen eigenwijze apparaten
• Dat je Bob ook kunt inhuren om jouw website responsive te maken

Om dit artikel te begrijpen moet je weten hoe CSS stylesheets werken. Als je dat nog niet weet is dit artikel waarschijnlijk nog een stap te ver voor je.

De basis van responsive design : “liquid” programmeren

Voordat responsive design de standaard was gaven veel webbouwers divs een vaste breedte, dus bijvoorbeeld #container { width: 1200px; }. Als je een responsive design voor je website wilt maken zal je voortaan niet een vaste waarde, maar een zogenaamde “vloeibare” waarde moeten gebruiken; een percentage dus. Als je de #container net zo breed wilt hebben als de bovenliggende div wordt bovenstaande code dus #container { width: 100%; }.

Op die manier past de breedte van de div zich automatisch aan op de breedte van het scherm. Eigenlijk heb je daarmee de basis van je responsive design al te pakken! En wil je dat een div niet de gehele breedte van je website heeft? Dan geef je de betreffende div een max-width, bijvoorbeeld #container { width: 100%;  max-width: 1200px; }.

De betreffende div (in dit geval #container) ziet er daardoor op ieder scherm met een resolutie (breedte) van 1200 pixels of meer exact hetzelfde uit. Bij een groter scherm wordt alleen maar meer achtergrond getoond.

CSS media queries

Als het scherm echter kleiner is dan 1200 pixels past de website zich automatisch aan. Ik heb in de stylesheet namelijk gezet dat de website bij minder dan 1200 pixels wel vloeibaar moet worden weergegeven. Dat doe je met een CSS media query, die er in mijn geval als volgt uit ziet:

@media screen and (max-width: 1200px)
{

#header {
width : 100%;
}

#menu {
width: 90%;
}

#de_rest {
en alle andere waarden die je aangepast wilt hebben voor schermen met deze afmetingen
}

}

 

Eigenlijk zijn media queries niet zo moeilijk, wat er staat is namelijk heel logisch.

Het eerste wat je ziet staan is @media screen. Daarmee geef je aan dat dit deel van de stylesheet bestemd is voor schermen. Een andere veel gebruikte variant is “@media print”, waarmee je aangeeft dat dit deel van de stylesheet bedoeld is voor een printer. Daar kun je bijvoorbeeld instellen dat de achtergrond gewoon wit moet zijn om inkt te besparen. Je kunt ook “@media all” gebruiken om aan te geven dat de stijlregels voor alle apparaten zijn bedoeld.

and (max-width: 1200px) vertelt de browser dat deze media query geldt voor alle schermen met een maximale resolutie van 1200 pixels breed. Deze media query geldt dus ook voor smartphones en tablets in portrait stand, aangezien de maximale resolutie van die schermen kleiner is dan 1020 pixels. Je hoeft voor iedere kleinere resolutie dus niet steeds dezelfde stijlregels te herhalen.

Als je juist wilt dat de stijlregels niet voor een kleinere resolutie gelden kun je ook een min-width opgegeven. In dat geval geldt deze code niet voor schermen die kleiner zijn dan de opgegeven min-width. Als ik bijvoorbeeld wil instellen dat de bovenstaande media query niet geldt voor schermen met een resolutie van minder dan 460 px dient deze er als volgt uit te zien:

@media screen and (min-width: 460px) and (max-width: 1200px)

{

#header {
width : 100%;
}

#menu {
width: 90%;
}

#de_rest {
en alle andere waarden die je aangepast wilt hebben voor schermen met deze afmetingen
}

}

Simpel toch? Vergeet niet de extra accolades te plaatsen rondom het blok stijlregels!

Breaking points : voor welke resoluties schrijf je media queries?

Je schrijft natuurlijk niet maar 1 media query, je schrijft een media query voor iedere belangrijke resolutie. Tot een resolutie van 1280 pixels breed hoef je meestal weinig aanpassingen te doen, en ook een scherm van 1024 pixels breed kan meestal de gewone website nog zonder problemen tonen.

De populaire tablets (iPads, Samsung Galaxy tabs) hebben meestal een resolutie van 1024 pixels (of meer) in de landscape stand. Meestal ziet de gewone website er op tablets in de landscape stand nog prima uit (wellicht met wat kleine aanpassingen), maar in de portrait stand hebben ze nog maar een resolutie van 768 pixels. Nu kleinere tablets steeds populairder worden (bijvoorbeeld de Galaxy Tab 7 maar ook de Galaxy Note serie) heb je steeds vaker te maken met nog smallere resoluties, bijvoorbeeld 600 pixels bij de Tab 7.

De eerste media query die ik meestal gebruik is voor tablets van 768 tot 1024 pixels, dus voor 10 inch tablets (en een aantal 7 inch tablets) in de portrait stand. Deze media query gebruik ik meestal om de sidebars onder de content te plaatsen en het normale menu te vervangen door een dropdown menu. Daarvoor gebruik ik de volgende CSS media query:


@media screen and (max-width: 1020px)

{

#content {
width: 95%;
}

#sidebar {
width: 95%;
}

#gewoon_menu {
display: none;
}

#dropdown_menu {
display: block;
}

#de_rest {
de eigenschappen voor schermen tot 1020 pixels breed
}

}

Zoals je zal begrijpen is dit een sterk vereenvoudigde versie van de echte media query, maar de basis klopt wel. Op de gewone website staat de sidebar (die ik op deze site overigens niet gebruik) naast de content. Door de #content een width van 95% te geven past de sidebar niet meer naast de content en wordt deze er dus onder geplaatst. Ik had hier ook een width van 100% kunnen gebruiken maar zo heb ik nog een stukje achtergrond in beeld.

Verder verberg ik hier het menu van de gewone website (#gewoon_menu) en toon ik het dropdown menu. In de stylesheet voor de gewone website wordt dit dropdown menu verborgen met { display: none; } maar dit kun je natuurlijk ook anders oplossen. Lees hier hoe je zo’n dropdown menu maakt.

Zoals je ziet gebruik ik iets ruimere waarden. In theorie zou je eigenlijk “@media screen and (max-width: 1024px)” moeten gebruiken maar zo neem ik ook de apparaten mee die net buiten de standaarden vallen.

Vervolgens schrijf ik een media query voor smartphones in de landscape stand en kleinere tablets in de de portrait stand. De resoluties van deze apparaten variëren van 480 pixels (iPhone 4) tot 640 pixels (Samsung Galaxy S4). De tweede media query richt zich op deze apparaten:

@media screen and (max-width: 699px)

{

#header {
de eigenschappen voor schermen tot 699 pixels breed
}

#menu {
de eigenschappen voor schermen tot 699 pixels breed
}

#de_rest {
de eigenschappen voor schermen tot 699 pixels breed
}

}

Ook hier neem ik weer ruimere resoluties zodat ik zeker weet dat ik alle apparaten te pakken heb.

Tot slot schrijf ik nog een media query voor smartphones in de portait stand. De hierboven genoemde smartphones hebben in de portrait stand een resolutie van 320 tot 360 pixels. Voor deze media query gebruik ik een maximale resolutie van 460px breed.

@media screen and (max-width: 460px)

{

#header {
de eigenschappen voor schermen van 300 tot 459 pixels breed
}

#menu {
de eigenschappen voor schermen van 300 tot 459 pixels breed
}

#de_rest {
de eigenschappen voor schermen van 300 tot 459 pixels breed
}

}

De juiste volgorde

Het is belangrijk dat je de juiste volgorde aanhoudt. Eerst de stijlregels voor de desktop weergave en dan de CSS media queries van breed naar smal.

In de stylesheet van deze website zijn bijvoorbeeld ook stijlregels opgenomen voor schermen die kleiner zijn dan 460 pixels ( de meeste smartphones in portrait stand, waarbij een aangepaste versie van deze website wordt weergegeven ). Deze stijlregels worden als laatste weergegeven. De juiste volgorde is dus:

#header {
de eigenschappen voor een normaal desktop of laptop scherm
}

#menu {
de eigenschappen voor een normaal desktop of laptop scherm
}

#de_rest {
de eigenschappen voor een normaal desktop of laptop scherm
}

@media screen and (max-width: 1020px)

{

#header {
de eigenschappen voor schermen tot 1020 pixels breed
}

#menu {
de eigenschappen voor schermen tot 1020 pixels breed
}

#de_rest {
de eigenschappen voor schermen tot 1020 pixels breed
}

}

@media screen and (max-width: 460px)

{

#header {
de eigenschappen voor schermen tot 460 pixels breed
}

#menu {
de eigenschappen voor schermen tot 460 pixels breed
}

#de_rest {
de eigenschappen voor schermen tot 460 pixels breed
}

}

Je responsive design testen

Ik heb hierboven de meest gebruikte breaking points genoemd, maar in de praktijk gebruik ik vaak nog meer breaking points dan bovenstaande. Als je het responsive design gaat testen kom je er namelijk regelmatig achter dat een bepaald onderdeel niet goed uitkomt op een bepaalde resolutie, dus dan schrijf je een extra media query om dat op te lossen.

Natuurlijk is het belangrijk je responsive design te testen op zoveel mogelijk verschillende apparaten. Maar ja, wie heeft er nu een iPhone 7, een iPhone 8, een iPad mini én een iPad pro, een Samsung Galaxy S.., een Galaxy Tab 7.0 én een Tab 10.1 enzovoorts? Niemand natuurlijk!

Gelukkig is er een eenvoudige manier om je responsive design te testen: de webmaster hulptool van Google Chrome. Klik bij het element wat je wilt checken simpelweg op de rechter muisknop en vervolgens op “inspecteren”. In de linker bovenhoek zie je dan een icoontje van een telefoon en tablet. Als je daarop klikt zie je de website zoals hij op een tablet of telefoon getoond wordt. Je kunt kiezen uit diverse modellen telefoons en tablets en je kunt zowel de portrait als landscape stand bekijken. Heel handig!

<meta name=”viewport”> : de oplossing voor eigenwijze apparaten

Je hebt inmiddels een prachtige responsive website ontworpen en deze uitvoerig getest op bovenstaande website. Alles werkt perfect! Je pakt je smartphone, tikt je website in en… tot je grote teleurstelling zie je de desktop versie van je website in plaats van de responsive versie!

Dat komt omdat de telefoon zich groter voordoet dan hij is; je telefoon gebruikt dus een grotere resolutie dan de werkelijke breedte van het apparaat. Dat kan heel handig zijn voor niet responsive websites; zo zie je de gehele website in plaats van slechts een klein stukje. Maar jij hebt natuurlijk niet voor niets een responsive website gemaakt!

Gelukkig is dat eigenwijze gedrag vrij makkelijk op te lossen door onderstaande regel toe te voegen tussen de tags van je website (bijvoorbeeld net boven detag) :

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 

Dit stukje code vertelt het apparaat dat hij zijn werkelijke breedte moet aanhouden.

Nog veel meer CSS media queries

Ik heb hier alleen het belangrijkste onderdeel van CSS media queries behandeld, namelijk het toepassen van speciale stijlregels op basis van de breedte van een scherm.

Er zijn echter nog veel meer media queries mogelijk: zo kun je ook speciale stijlregels definiëren voor telefoons en tablets in de portrait of landscape stand of speciale regels voor devices met een bepaald aantal kleuren. Dat gaat echter wat te ver voor dit artikel (laten we het vooral niet te moeilijk maken ;)).

Op http://www.w3.org/TR/css3-mediaqueries/ lees je er alles over.

UPDATE 20-07-2014

Op 14 juli heeft ook Google een handleiding uitgebracht voor het bouwen van responsive websites, zie deze link.

Laat Bob je website responsive maken

Tegenwoordig kun je eigenlijk niet meer zonder een responsive website, maar lang niet iedereen heeft de juiste kennis of tijd om een website responsive te maken. Geldt dat ook voor jou? Bob heeft al tientallen websites responsive gemaakt en doet dat natuurlijk ook graag voor jou!

Vraag direct een vrijblijvende offerte aan