Home » CSS » De top van Bob » Design » HTML » Tutorial » Usability » Wordpress » Responsive design tutorial : hoe maak je een responsive website

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:

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

Veel webdesigners geven divs een vaste breedte, dus bijvoorbeeld “#header { width: 1000px; }”. 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. De bovenstaande code wordt dus “#header { width: 100%;}” (ervan uitgaande dat de header even breed is als de bovenliggende div).

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!

Overigens heb ik het zelf bij deze website net iets anders gedaan.  Ik wil namelijk juist dat de site een maximale breedte heeft dus ik heb gewoon vaste waarden gebruikt. Dat kun je overigens ook bereiken door een max-width in te stellen, dus “#header { width: 100%;   max-width: 1000px; }”.

Mijn website ziet er daardoor op ieder scherm met een resolutie (breedte) van 1020 pixels of meer exact hetzelfde uit. Bij een groter scherm wordt alleen maar meer achtergrond getoond. Dat lijkt niet de meest gebruiksvriendelijke manier, je benut immers niet heel het scherm waardoor de gebruiker meer naar beneden moet scrollen dan noodzakelijk. Uit onderzoek blijkt echter dat gebruikers het niet prettig vinden als regels te lang zijn (een bekende norm is 10 woorden per regel, al gebruik ik zelf meestal 20 tot 25 woorden per regel in de desktop weergave).

CSS media queries

Als het scherm echter kleiner is dan 1020 pixels past de website zich automatisch aan. Ik heb in de stylesheet namelijk gezet dat de website bij minder dan 1020 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: 1020px)

{

#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: 1020px) vertelt de browser dat deze media query geldt voor alle schermen met een maximale resolutie van 1020 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: 1020px)

{

#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 4S, een iPhone 5, een iPad mini én een iPad 4, een Samsung Galaxy S3 én S4, een Galaxy Tab 7.0 én een Tab 10.1 enzovoorts? Niemand natuurlijk!

Gelukkig is er een hele goede online simulator : http://beta.screenqueri.es/ Je hoeft alleen even een gratis account aan te maken en je kunt vervolgens je website testen op tal van smartphones en tablets! Ook op isresponsive.com zie je snel hoe je website er op verschillende devices uit ziet.

Daarnaast kun je het responsive design ook testen door simpelweg je browservenster te verkleinen. Klik in Google Chrome ergens op je website op de rechter muisknop en vervolgens op “element inspecteren”. Als je nu je browservenster verkleint of vergroot verschijnt de resolutie in de rechter bovenhoek van het browservenster.

<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 <head> tags van je website (bijvoorbeeld net boven de </head> tag) :

<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 (Engelstalige) handleiding uitgebracht voor het bouwen van responsive websites, zie deze link.

Laat Bob je website responsive maken

Anno 2015 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!
 

Andere artikelen over dit onderwerp op Bobs blog

Over Bob de webbouwer

Bob de webbouwer inhuren

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een workshop over dit onderwerp te verzorgen.

Hulp nodig? Vraag direct een vrijblijvende offerte aan!

7 reacties op Responsive design tutorial : hoe maak je een responsive website

  1. Graag prijsofferte voor responsive maken van website en wanneer dit klaar zou zijn aub.

  2. Bob de webbouwer schreef:

    Hoi Yves,

    Bedankt voor je aanvraag. Ik kijk er maandag even goed naar en laat je wat weten. Voor nu prettig weekend verder!

    Groeten van Bob

  3. […] je bestaande site aan te passen zijn er gelukkig veel tutorials te vinden te vinden. Hier staat een relatief eenvoudige uitleg. En hier vind je een uitgebreide handleiding van Google […]

  4. Icolori schreef:

    Bezig onze sites om te zetten naar reponsive. Veel zit al in het pakket van de leverancier myshop. Echter pagina’s moet ik toch zelf maken.

    Dit artikel geeft heel snel de essentiele zaken weer.

    Bedankt.

  5. Bob de webbouwer schreef:

    Jij ook bedankt voor je leuke reactie, succes met het omzetten!

  6. Albert schreef:

    Graag een prijsindicatie voor het maken van de mobiele site op basis van de genoemde site.
    Groeten,

    Albert

  7. Bob de webbouwer schreef:

    Bedankt voor je reactie Albert, ik heb je een offerte per e-mail gestuurd.

    Groeten van Bob

Vragen, opmerkingen of aanvullingen? Laat gerust een reactie achter!

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *