Hoe gebruik je media queries om je website responsive te maken

Leestijd: 11 minuten

Hoe gebruik je media queries om je website responsive te makenMet alle mobiele apparaten tegenwoordig is het heel belangrijk dat het uiterlijk van je website zich aanpast aan het scherm waarop gekeken wordt. Responsive webdesign zorgt hiervoor. Met media queries maak je een flexibele layout van je site mogelijk. Gecombineerd met responsive afbeeldingen en tekst is je site klaar voor elke nieuwe mobiele ontwikkeling.

Nog niet zo lang geleden zag je website er altijd hetzelfde uit, en toonde altijd dezelfde informatie, of je de site nu op een groot scherm (desktop) of op een kleiner scherm (laptop) bekeek.

De verschillen in maat tussen de schermen waren niet zó groot dat je je daar druk om hoefde te maken, en mobiele apparaten met een goede internet verbinding waren er niet.

In 2007 kwam de eerste iPhone op de markt, en al snel kwamen er meer smartphones in omloop die op het internet konden. Met deze trend ontstond ook de behoefte om websites mobiel goed te kunnen bekijken, dus zonder dat je met je vingers eerst moest inzoomen op de verschillende onderdelen van een pagina.

In het begin van de mobiele revolutie bouwde je zelf, als je de technische knowhow had, of je webdesigner een mobiele site naast de standaard desktop site. Met software op de server werd bepaalt hoe groot het scherm was dat de site opvroeg, en werd de juiste site doorgegeven.

Op die mobiele site stond vaak alleen de belangrijkste informatie van de desktop site, zodat deze snel laadde. De mobiele site stond – meestal – los van de desktop site, en moest apart worden bijgehouden. Dit leverde extra werk op, en gaf de mobiele gebruiker niet meer dan een schim te zien van de desktop site.

Gelukkig werd in 2012 de media queries module standaard onderdeel van CSS.

Het hoe en waarom van media queries

Liefst wil je dat je website zich automatisch aanpast naar het apparaat dat je gebruikt, of eigenlijk naar de grootte van het browserscherm op dat apparaat.

Je maakt je site responsive met media queries.

Responsive Design
De responsive homepage van deze website op verschillende apparaten (januari 2017)

Een media query is een stukje code in de CSS stylesheet van je website, dat informatie zoals de grootte van het browserscherm van de bezoeker opvraagt tijdens het laden van jouw website. Weet je site wat de grootte van het browserscherm is, dan laat je site de opgevraagde informatie zien op de manier waarop je dat hebt opgezet. Dit stel je in met specifieke CSS stijlregels voor de verschillende schermgroottes.

Een website die zich met behulp van media queries aanpast aan de grootte van het browserscherm waarop het getoond wordt, heet een responsive website.

De kleinere browserschermen worden voornamelijk op mobiele apparaten gebruikt, maar je kunt het responsive effect ook zien wanneer je het browserscherm op je desktop verkleint. De media queries kijken namelijk alleen maar naar de grootte het browserscherm, en niet naar de grootte van het scherm zelf.

Mobile first design versus desktop first design

Bij mobiele apparaten is het belangrijk dat de stijlregels zo snel mogelijk worden geladen. Daarom wordt aangeraden om de stylesheet van een website te beginnen met het de stijlregels voor het kleinste schermformaat, en dan door te werken naar het grootste schermformaat.

Dit heet mobile first design.

Mobile First Design

Bij mobile first design begin je de stylesheet met alle regels die gelden voor het kleinste scherm vóór je met een media query controleert hoe groot het scherm is. Op die manier laadt de site sneller op een mobiel apparaat, alle regels die gelden voor een groter scherm hoeven niet te worden gelezen.

De stylesheets voor de meeste websites die nu draaien zijn nog opgezet volgens het desktop first principe.

Bij desktop first begin je met het grootste scherm, en werk je naar het kleinste scherm toe. De specifieke stijlregels voor je mobiele telefoon staan pas onderaan het bestand.

Desktop First Design

Voor de snelheid van je site op mobiele apparaten is deze methode nadelig, omdat:

  • de browser eerst alle regels voor het grootste scherm leest én toepast
  • daarna wordt met verschillende media queries de juiste grootte van het scherm bepaald
  • waarna de browser de aanpassingen op de al toegepaste regels voor het kleinere scherm leest én toepast

Mobiele internetverbindingen worden steeds sneller, maar bij een groot CSS bestand kost het doorwerken van alle regels toch kostbare tijd. Staan de regels voor je mobiele design vooraan, dan is je site sneller geladen.

Mobile first design

Stel dat je de volgende regels in je CSS bestand hebt staan:

Leest de browser op je mobiele telefoon deze regels, dan wordt de achtergrond van je website direct geel, en deze blijft geel omdat de grootte van het browserscherm niet voldoet aan het breakpoint van 900px in de media query, en de stijlregels in deze query niet toepast.

Leest de browser op je desktop deze regels, dan wordt de achtergrond eerst geel, en later maakt de media query de achtergrond groen omdat het grotere scherm wel voldoet aan het breakpoint van 900px in de media query, en die stijlregels wel worden toegepast.

Dit gaat zo snel dat je het normaliter niet ziet, maar mocht je een heel langzame verbinding met je site hebben, dan kun je de achtergrond eerst geel en dan groen zien worden.

Mobile First voorbeeld

Desktop first design

Wil je hetzelfde bereiken in een CSS bestand dat desktop first is opgezet, dan moeten die regels hiervoor aangepast worden:

Op je desktop wordt de achtergrond van je website direct groen en blijft het groen. Leest je mobiele browser op je telefoon deze regels, dan wordt de achtergrond eerst groen en dan pas geel.

Device First voorbeeld

Hoe schrijf je correcte media queries

Een correcte media query is als volgt opgebouwd:

@media not|only mediatype and (selectiecriteria) {
    stijlregels voor de media query
}

De verscillende onderdelen van de media query werken als volgt:

  • @media: begin van de media query
  • not|only of niets: de regels gelden niet (not), alleen maar (only), of onder meer voor het geselecteerde mediatype (niets).

    Bijvoorbeeld:
    • screen: geldt voor schermen
    • only screen: geldt alleen voor schermen
    • not screen: geldt niet voor schermen
  • mediatype: de query kent vier mediatypen:
    • all: alle media types die hieronder staan
    • print: voor printers
    • screen: voor computerschermen, tablets, smartphones, alles met een scherm
    • speech: voor schermlezers die een pagina hardop voorlezen
  • and: geeft aan dat de criterialijst begint
  • selectiecriteria: de selectiecriteria voor het mediatype tussen haakjes

    Er zijn veel selectiecriteria die je kunt gebruiken in je media query, maar voor een website die zich responsive moet gedragen op het scherm gebruik je voornamelijk – een combinatie van – min-width en max-width.

    Deze criteria kijken naar de breedte van het browserscherm op het apparaat. Horizontaal scrollen wil je volledig vermijden.

    De hoogte van het scherm is voor sites niet van belang. Verticaal scrollen is standaard op een website.

  • de stijlregels voor deze media query staan tussen twee accolades

    Gedraagt je media query zich niet zoals het hoort bij de verschillende schermgroottes, controleer dan of je niet ergens de afsluitende accolade bent vergeten.

Je kunt meerdere criteria tegelijkertijd gebruiken in dezelfde media query. Criteria die tegelijkertijd gelden scheid je met het woord and. Zijn er meerdere criteria voor hetzelfde mediatype, maar staan deze los van de andere criteria, dan scheid je deze met een komma. De komma staat voor OF.

Bijvoorbeeld:

@media screen and (max-width: 799px) and (min-width: 600px), (min-width: 1100px) { }

De stijlregels in deze media query worden alleen toegepast op een apparaat met een browserscherm van maximaal 799px breed EN minimaal 600px breed, OF waarbij het browserscherm minimaal 1100px breed isjn.

Je kunt de logica van de selectiecriteria ook beïnvloeden door gebruik van het woord NOT:

@media screen and (max-width: 799px) NOT (orientation: landscape) { }

De stijlregels in deze media query worden alleen toegepast op een apparaat met een browserscherm van maximaal 799px breed, maar de regels worden niet toegepast wanneer het scherm liggend wordt gebruikt.

Gebruik breakpoints om de beste layout te gebruiken

De layout van je site ziet er goed uit op het scherm tot het er niet meer goed uitziet.

Het kan zijn dat de tekst te klein of te groot wordt om goed te lezen en bij de site te passen. Het kan ook zijn dat je een sidebar op je website gebruikt die je goed kunt zien op je desktop scherm, maar die bij een kleiner scherm wegvalt.

Het punt, waarop je de ene layout aanpast door een layout die beter past bij de gebruikte grootte van het browserscherm, noem je een breakpoint.

In het begin van responsive web design werden breakpoints vaak bepaald door de afmetingen van het scherm van een specifiek apparaat. Je maakte bijvoorbeeld een breakpoint voor het scherm van een Samsung Galaxy S3, het scherm van een Galaxy S4, een Galaxy S5, en ga zo maar door. En dan maakte je vaak ook nog breakpoints voor de oriëntatie van een scherm (of het apparaat staand of liggend wordt gebruikt).

Met alle verschillende merken, types, en schermmaten die er nu zijn, en alle nieuwe die er continu bijkomen, is dit geen goede oplossing. Gelukkig is het verschil in afmeting tussen de verschillende schermen vaak nihil, wat het maken van breakpoints al een stuk vereenvoudigd.

Beter kies je breakpoints op basis van het design van je website. Zorgvuldig gekozen breakpoints zorgen er ook voor dat je site altijd klaar is voor de nieuwste apparaten, zonder dat je daarvoor je stylesheet hoeft aan te passen.

Gebruik de grotere breakpoints

Je hebt minimaal drie breakpoints nodig om de verschillende types apparaten te scheiden: mobiele telefoons, tablets, en desktops en laptops. Moet je site ook goed werken op een smartwatch, dan moet je in ieder geval nog een vierde breakpoint toevoegen.

Media Query Breakpoints

Lijst van standaard breakpoints

Je kunt heel ver komen als je breakpoints maak voor:

Alle apparaten waarbij de maximale breedte van het browserscherm:

  • kleiner is dan 320px
  • groter of gelijk is aan 320px
  • groter of gelijk is aan 720px
  • groter of gelijk is aan 1024px

Je kunt het, wanneer jouw design hierom vraagt, ingewikkelder maken en één of meerdere tussenliggende breakpoints maken, maar bovenstaande lijst is een goed begin.

De standaardlijst breakpoints vertaal je nu als volgt naar media queries:

Mobile first design

Desktop first design

 

Waar moet je nog meer op letten bij responsive design

Responsive afbeeldingen

In je responsive website wil je dat afbeeldingen zich ook automatisch aanpassen naar de grootte van je browserscherm. Dat doen ze standaard namelijk niet.

Is de originele afbeelding groter dan het scherm, dan moet de afbeelding zich aanpassen zodat deze in het scherm pas, liefst zonder vervormingen (ik heb sites gezien waarbij de breedte van de afbeeldingen zich aanpassen, maar de hoogte niet; je krijgt dan heel smalle, langgerekte afbeeldingen).

Je zorgt dat de afbeeldingen op je site zich gedragen door de volgende regels aan je stylesheet toe te voegen:

Deze stijlregels zorgen ervoor dat de afbeelding maximaal 100% van de HTML container (zoals <div> of <article>) waarin deze staat breed mag zijn, en dat de hoogte zich automatisch in verhouding met die nieuwe breedte aanpast.

Gebruik je WordPress, dan hoef je je niet druk te maken over ondersteuning van responsive afbeeldingen. Sinds WordPress versie 4.4 worden responsive afbeeldingen standaard ondersteund in de software.

Sommige afbeeldingen op je site verliezen hun effectiviteit wanneer ze klein worden weergegeven. Dit zijn bijvoorbeeld afbeeldingen waarop je tekst hebt gezet die op een klein scherm niet meer leesbaar is. Hiervoor kun je speciaal voor kleinere schermen een aangepaste afbeelding maken en via stijlregels tonen.

Duidelijke lettertypes van leesbare grootte

Een aantal richtlijnen voor het gebruik van lettertypes op responsive – en eigenlijk elke – website:

  • Selecteer lettertypes die op grote schermen en op kleinere schermen goed leesbaar zijn.
  • Zorg daarnaast voor voldoende verschil (contrast) tussen tekst en achtergrond. Donkergrijze tekst op een lichtgrijze achtergrond, bijvoorbeeld, is slecht leesbaar, zeker op mobiele apparaten (en als je al wat ouder bent).
  • Let erop dat de verschillende kopteksten (headings) ook responsive zijn, zodat ze op een smartphone niet het hele scherm innemen.
  • Maak alle tekst responsive. Gebruik, indien mogelijk, voor de fontgrootte liefst met %, em, of rem in plaats van px. Dit zorgt dat je tekst zich in verhouding met zijn omgeving aanpast.

Grote buttons

Hou er rekening mee dat mensen op een mobiel scherm je buttons (knoppen) met hun vingers moeten aanraken. Maak de buttons daarom groot genoeg dat je site-bezoekers geen moeite hebben met het gebruik hiervan.

Handige gereedschappen die je helpen

Neem je de stap en ga je zelf je website responsive maken of je responsive site aanpassen? Dan kun je niet zonder deze online gereedschappen.

Chrome en Chrome plugins

Ik maak gebruik van de Chrome browser tijdens al mijn ontwerp- en ontwikkelwerkzaamheden. Chrome is de meest gebruikte browser ter wereld, en ik raad je aan deze browser te gebruiken.

Mocht je liever geen Chrome gebruiken, van de tools en plugins die ik noem zijn varianten te vinden in de andere browsers.

DevTools

Werk je aan een website in Chrome, dan zijn de Chrome DevTools onmisbaar voor een goede workflow.  De DevTools zitten standaard ingebouwd in Chrome, helpen je onder meer fouten te ontdekken in je code, en laten je live tijdelijke aanpassingen maken aan je stylesheets, zodat je ziet hoe je site eruitziet met een bepaalde aanpassing.

Leer meer over DevTools in How to use Chrome DevTools like a Pro op de JotForm blog.

Viewport Resizer

Tijdens het bewerken van je stylesheet wil je kunnen zien hoe de veranderingen die je maakt eruitzien op het browserscherm van een tablet of een telefoon. De Viewport Resizer plugin helpt je de responsiveness van welke website dan ook te testen. Het is niet perfect – geen enkele soortgelijke plugin die ik heb getest werkt perfect – maar het is een onmisbare werktuig voor elke webdesigner.

Web Developer

De Web Developer plugin tenslotte is een handige uitbreiding op de DevTools, en laat je onder meer eenvoudig afbeeldingen uit- en aanzetten, of bepaalde scripts uit- en aanzetten.

Ontwikkeltips

Een paar tips om je ontwikkelwerk eenvoudiger te maken:

  • Pas nooit een live website aan, maar gebruik een kopie van de site. Op die manier gaat je site, of die van je klant, niet uit de lucht wanneer je een foutje maakt. Werkt alles naar behoren, dan vervang je de CSS stylesheet van de live site door de aangepaste stylesheet.
  • Maak je een nieuwe website met een gekochte template – zoals bij WordPress – zorg er dan voor dat deze al responsive is. Het zware werk is dan al gedaan, en je hoeft het alleen maar naar smaak bij te schaven.
  • Test je website in verschillende veelgebruikte browsers zoals FireFox, Safari, Opera, en Edge, en de mobiele versies hiervan.
  • Probeer je site ook uit op diverse apparaten. Op die manier weet je zeker dat je site zich gedraagt zoals het hoort.
  • Wil je je site graag responsive maken, maar durf je niet aan zo’n klus te beginnen? Doe het dan niet zelf, maar laat het over aan de ervaren webdesigner.

Conclusie

Van een bestaande website is goed een responsive website te maken. Het kost alleen wat tijd en durf om zo’n project aan te pakken. Media queries maken het werk gelukkig een stuk eenvoudiger om je site zo aan te passen dat je deze op elk apparaat goed kunt gebruiken.

Heb je zelf een website responsive gemaakt? Hoe is dit verlopen? Heb je nog tips? Deel je ervaring in de reacties hieronder.

Bronnen

Reageer op dit artikel

Laat als eerste een reactie achter.

Abonneren op
avatar