Responsive webdesign houdt in dat je de website zó ontwerpt dat die er goed uitziet op grote schermen (laptops, desktops) én kleine schermen (mobieltjes).
Als je je website in de browser bekijkt en dan het venster kleiner maakt zie je dat de website aanvankelijk prima te bekijken blijft.
Maar vanaf een breedte van zo ongeveer 700px worden de afbeeldingen rechts wat klein, en bij een breedte van minder dan ca 450px ziet het er niet meer uit.
Zie ook de figuren 1 (900px breed: prima) en 2 (320px breed: een troep) hieronder.
Opmerkingen
De figuren 1 t/m 3 zijn geen plaatjes, maar de echte website. Je kunt de schuifbalk gebruiken en op de links klikken.
Scroll in figuur 2 maar naar beneden, dan zie je dat de plaatjes die eerst rechts stonden, nu onderaan staan en ontoonbaar klein zijn.
Dat de website er op schermen met een breedte zo tussen 700 en 2000 pixels goed uitziet,
komt omdat we in het stijlblad de meeste afmetingen in procenten hebben opgegeven en niet in pixels.
De onderdelen van de website groeien en krimpen zo mee met het scherm.
figuur 1: scherm 900px breed
figuur 2: scherm 320px breed, niet responsive
figuur 3: scherm 320px breed, responsive
We gaan in het volgende hoofdstuk het stijlblad uitbreiden, zodat de website er op kleine schermen uit ziet als figuur 3.
Op grote schermen blijft de website eruitzien als figuur 1. Dat lijkt op magie, toch?
Het toverwoord is media query of media regel. Hieronder gaan we daarmee experimenteren.
Daarna maken we in het volgende hoofdstuk de website responsive, ook voor kleine schermen.
Een media query
Een media query (media regel) ziet er zó uit:
figuur 4
@media screen and (max-width: 800px) { /* hier komt opmaak */ }
screen geeft aan dat het om het scherm gaat (en niet om bv. printen)
(max-width: 800px) geeft aan dat het gaat om schermen met een maximale breedte van 800px.
Het geldt dus voor kleine schermen
Natuurlijk mag je ook een andere waarde dan 800px opgeven, bv. 400px of 1216px, of wat je maar wilt.
De haakjes ( en ) zijn verplicht, vergeet ze niet.
Tussen de accoladen { en } komen de stijlregels voor kleine schermen.
Het voorbeeld van figuur 5 laat zien hoe @media in de praktijk werkt.
De regels 170 t/m 172 zorgen ervoor dat de elementen article een rode achtergrond krijgen
De media query in regel 174 geeft aan dat de opmaak die volgt voor schermen tot maximaal 800px geldt.
Die opmaakregel (176-178) zorgt voor article elementen met een groene achtergrond. Daarmee wordt de rode achtergrond van regel 171 overschreven: de laatste regel geldt.
De accolade op regel 178 sluit de opmaakregel voor artice af.
De accolade op regel 180 sluit de media query op regel 174 af.
Merk op dat er twee accoladen achter elkaar staan: die op regel 178 en die op 180. Vergeet ze geen van beiden, anders gaat er met de opmaak van je website iets mis.
Opmerking: Vaak staan er in een media query verschillende opmaakregels. Elke opmeaakregel wordt afgesloten met een }. Tenslotte komt dan de } die het einde van de query aangeeft.
Het resultaat: de achtergrondkleur van de article elementen is rood voor grote schermen en groen voor schermen met een maximale breedte van 800px.
Probeer dit maar als volgt uit:
Voeg de regels 170-180 toe aan het stijlblad en sla op.
Open de website in je browser en maak het venster breder en smaller.
Bij een schermbreedte van meer dan 800px moeten de article elementen een rode achtergrond hebben,
Kijk op het blad 'Tips' bij tip 7 hoe je in Firefox de breedte van het scherm kan aflezen.
Bij een schermbreedte van 800px of minder moet de achtergrondkleur van de article elementen groen zijn.
Natuurlijk is dit een onzinnig voorbeeld, maar het gaat hier om het principe.
De naam media query
Misschien vraag je je af waarom het woord media in de naam media query staat.
Dat is omdat een media query oorspronkelijk bedoeld was voor een aangepaste opmaak voor bepaalde media.
Zo kan je bijvoorbeeld met @media print een afwijkende opmaak voor afdrukken opgeven. Denk aan het weglaten van een donkere achtergrond.
Sinds versie 3 van CSS is daar dus de mogelijkheid van queries voor verschillende schermgrootten bijgekomen.
Aanpak
Responsive design begint met het gebruik van afmetingen in procenten in plaats van pixels. Daarmee krimpen en rekken de elementen mee met de grootte van het venster.
Meestal is dat niet voldoende. Dan moet je daarnaast gebruik maken van media queries. Daarbij zijn twee manieren van aanpak:
Methode 1
Maak eerst de website voor grote schermen (zoals je dat in deze cursus hebt gedaan).
Neem onderaan het stijlblad een media query @media screen and (max-width: breekpunt) op, en zet daarin alle opmaak die voor kleine schermen anders moet zijn dan voor grote schermen.
Breekpunt is de breedte waarop je wilt omschakelen naar de opmaak voor smalle schermen. Bij die breedte moet de website er goed uitzien met de brede opmaak en met de smalle opmaak. Aan jou de keus.
Methode 2
Maak eerst de website voor kleine schermen. Daarin zullen bijna alle elementen de volledige breedte van het scherm moeten hebben. (blok-elementen)
Neem onderaan het stijlblad een media query @media screen and (min-width: breekpunt) op voor grote schermen
(let op: hier is het min-width) en zet daarin alle opmaak die voor grote schermen anders moet zijn dan voor kleine schermen.
Volgens deskundigen is de tweede methode beter om volgende redenen:
Bij de opmaak van grote schermen worden soms grote (achtergrond-)afbeeldingen gebruikt die niet getoond worden op kleine schermen.
Bij methode 2 worden die op kleine schermen niet geladen, omdat ze alleen in het gedeelte voor grote schermen staan.
Bij methode 1 staan de grote afbeeldingen in het eerste deel van het stijlblad, dat altijd geladen wordt.
Het laden van de websites op mobieltjes duurt met methode 1 dan ook wat langer en het vraagt wat meer dataverkeer.
Voor kleine websites als die van Terschelling maakt het allemaal weinig uit.
Verschillende media queries in een stijlblad
Soms is één media query niet voldoende, dan heb je een website voor grote schermen gemaakt en wil je een aangepaste opmaak voor middelgrote schermen en een nog weer wat andere opmaak voor kleine schermen.
Dan moet je twee (of meer) media queries maken. We zullen dat ook voor de website van Terschelling doen.
Om dat een beetje in de vingers te krijgen gaan we enkele experimentjes uitvoeren.
Experiment 1
Maak daartoe eerst de regels 170-180 van je stijlblad leeg en voeg dan de regels van figuur 6 toe.
(Ik heb de stijlregels wat compacter genoteerd dan in figuur 5.)
figuur 6170@media screen and (max-width: 900px) { 171article { background-color: green; } 172} 173 174@media screen and (max-width: 700px) { 175article { background-color: brown; } 176}
Let op, bij de media regels komt tussen de haakjes geen puntkomma (zoals na een stijlregel):
Dus niet @media screen and (max-width: 900px;) maar @media screen and (max-width: 900px)
Als het goed is wordt de achtergrond van de article-elementen groen bij schermbreedten van 900px en lager. De achtergrond wordt bruin bij schermen van 700px en lager.
Anders gezegd: met schermen boven 900 px een standaard achtergrond, tussen 700px en 900px groen, daaronder bruin.
Probeer het maar uit.
Experiment 2
Laat de media queries staan, maar verwissel alleen de 700px en 900px:
In regel 170 komt te staan: @media screen and (max-width: 700px)
In regel 174 komt te staan: @media screen and (max-width: 900px)
Het stijlblad ziet er dan uit als figuur 7.
figuur 7170@media screen and (max-width: 700px) { 171article { background-color: green; } 172} 173 174@media screen and (max-width: 900px) { 175article { background-color: brown; } 176}
Bekijk het resultaat.
Nu zie je dat de achtergrond bij een schermbreedte van 900px bruin wordt, maar onder de 700px wordt hij niet groen!
Het blijkt dat je je bij media queries aan de volgende regels moet houden:
Regels voor media queries
Media queries met max-width moeten van groot naar klein gerangschikt zijn.
Media queries met min-width moeten van klein naar groot gerangschikt zijn.
Experiment 3
Verander op regel 170 en 174 van je stijlblad min-width i.p.v. max-width. Er staat nu:
figuur 8170@media screen and (min-width: 700px) { 171article { background-color: green; } 172} 173 174@media screen and (min-width: 900px) { 175article { background-color: brown; } 176}
Nu moet article een witte achtergrond hebben bij kleine schermen, een groene achtergrond bij middelgrote schermen (width tussen 700 en 900px) en een bruine achtergrond bij grote schermen. Controleer dit in de browser.
Experiment 4
Verwissel op de regels 170 en 174 de waarden 700px en 900px weer, zodat er staat:
figuur 9170@media screen and (min-width: 900px) { 171article { background-color: green; } 172} 173 174@media screen and (min-width: 700px) { 175article { background-color: brown; } 176}
Voorspel de opmaak bij kleine, middelgrote en grote schermen.
Controleer in de browser of je antwoord klopt.
Klik nog even op de knop Antwoord om te zien of jouw antwoord overeenkomt met mijn antwoord.
Als het goed is heb je bij kleine schermen (width kleiner dan 700px) een witte achtergrond, en bij middelgrote en groete schermen (alles vanaf 700px) een bruine achtergrond.
De groene schtergrond doet het niet omdat de media regels in de verkeerde volgorde staan.
Maak tenslotte de regels 170-180 van je stijlblad weer leeg.
Samenvatting
Geef bij responsive webdesign de breedte van elementen zoveel mogelijk op in procenten.
Maak gebruik van media queries:
@media and (min-width: breekpunt), of
@media and (max-width: breekpunt)
(Breekpunt is de breedte (in pixels) waarbij wordt omgeschakeld).
Er zijn twee methoden van aanpak:
Begin met de opmaak voor kleine schermen en zet in media queries de gewijzigde opmaak voor grote schermen (media queries met min-width).
Begin met het ontwerp voor grote schermen en zet in media queries de gewijzigde opmaak voor kleine schermen (media queries met max-width).
Houd je bij gebruik van een stijlblad met verschillende media queries aan de volgende twee regels:
Zet media queries met min-width in volgorde van klein naar groot.
Zet media queries met max-width in volgorde van groot naar klein.