Responsive website

Een responsive website is een website die zich automatisch aanpast aan verschillende schermbreedtes (concreter schermafmetingen, maar in de praktijk is de schermhoogte niet van belang omdat websites meestal in de hoogte scrollen). Een “normale”, d.w.z. niet-responsive, website is gemaakt voor een vaste schermbreedte. Dat is doorgaans de kleinste schermbreedte die op dat moment gangbaar is, bijvoorbeeld 1024 pixels. De website wordt op een vaste breedte van 980 pixels gemaakt en in het midden uitgelijnd, zodat er wat ruimte aan beide zijdes overblijft. Op een klein scherm ziet de website er goed uit en op een breed scherm ontstaat er meer ruimte aan de linker- en rechterzijde van de website:

De website is ook te gebruiken op kleinere schermen van bijvoorbeeld een smartphone, maar een bezoeker moet nu in- en uitzoomen of “dubbeltikken” om teksten goed te kunnen lezen. Dit kan bij websites met een hoog aantal smartphone bezoekers een te grote belemmering zijn. Om o.a. die reden worden websites steeds vaker responsive gemaakt.

Grote schermbreedtes

Bij responsive websites denkt men vaak uitsluitend aan mobiel en tablet gebruik maar dit is een misvatting. Een goed responsive webdesign wordt eveneens beter getoond op grotere schermen. Het gebruik van grotere schermen neemt, net als het gebruik van kleinere schermen, steeds meer toe. Op het moment van schrijven zijn er schermen op de markt met een breedte van 2560 pixels en grotere breedtes in de nabije toekomst. Dit is 2,5 maal zo groot als de kleine schermbreedte van 1024 pixels. Hoewel een website met een vaste breedte prima leesbaar is op een groot scherm neemt in dit geval de achtergrond meer ruimte in dan de inhoud van de website. Een goede responsive website zal ook op grotere schermen mooier getoond worden:

Hoe maak je een responsive website?

Bestaande websites met een vaste breedte zijn vaak relatief eenvoudig om te zetten naar een responsive website. Ruime ervaring met html en css is echter een vereiste voor het opzetten van een effectief responsive webdesign. We treden dan ook niet in detail, maar tonen een goede workflow voor het maken van een responsive webdesign. Er zijn diverse technieken en manieren om een responsive website te maken, maar ze doen alle hoofdzakelijk de volgende twee dingen: 

1. Toevoegen van een “viewport” metatag.
2. Toevoegen van een aantal zogenaamde “media queries” aan een bestaande of aparte stylesheet.

Er zijn diverse workflows om tot een effectieve responsive website te komen, bijvoorbeeld "mobile first" waarbij het uitgangspunt een website voor de kleinst mogelijke schermbreedte is en naar steeds hogere breedtes wordt toegewerkt. Wij werken liever vanuit de omgekeerde richting, van grote naar steeds kleinere schermbreedtes. Deze workflow gaat in grote lijnen als volgt:

1. Voeg de volgende metatag toe: <meta name="viewport" content="width=device-width" />Hiermee instrueer je de browser de website op de breedte van het apparaat te tonen. Smartphones zoomen brede websites uit zodat ze volledig in het scherm passen, dit gedrag kun je voorkomen via deze metatag. In plaats van “device-width” kun je hier ook andere waarden invullen, bijvoorbeeld een vaste breedte: "width=320". Houd de media queries echter zo algemeen mogelijk, het is niet verstandig om websites voor specifieke schermbreedtes te ontwerpen. Naast “width” kun je, komma-gescheiden, nog andere naam/waarden invoeren, zoals "initial-scale=1": <meta name="viewport" content="width=device-width, initial-scale=1" />Maak echter niet de fout “maximum-scale=1” of “user-scalable=no” toe te voegen! Hiermee voorkom je dat een bezoeker kan in- en uitzoomen. Te vaak komen wij websites tegen die dankzij deze metatag en een foutje in het responsive design onbruikbaar zijn geworden op tablets en/of smartphones.
2. Zorg dat afbeeldingen en andere elementen, zoals video's of iframe's, automatisch verkleinen door het zetten van een maximum breedte van honderd procent:img{max-width:100%}
3. Ontwerp de website op een zo breed mogelijke monitor en zet de breedte d.m.v. een percentage, bijvoorbeeld 75%. De website is op deze manier mooi beeldvullend op brede schermen.
4. Sleep het browserscherm kleiner en let hierbij op de volgende twee zaken:
   1. Ziet de inhoud er nog goed uit? Past het logo bijvoorbeeld nog in de header, passen de menu knoppen nog op een enkele regel en zijn de lettergroottes niet te groot t.o.v. de website breedte?
   2. Wat is de huidige breedte in pixels? Een goede hulp hierbij zijn de “DevTools” van Google Chrome. Deze roep je via F12 op en tonen de huidige breedte van de browser rechtsboven in het scherm:
      

      

5. Zodra je iets verkeerd ziet aan de inhoud stop je met verkleinen en noteer je de huidige breedte. Deze breedte vormt je eerste "breekpunt". Aan het einde van, of in een aparte stylesheet voeg je het breekpunt d.m.v. een zogenaamde media query toe: @media screen and (max-width:1000px)
{
   /* stijlregels */
} Achter “max-width:” noteer je de huidige breedte in pixels. Tussen de accolades van de media query schrijf je normale stijlregels die het probleem met de inhoud verhelpen. Als het logo bijvoorbeeld niet meer in de header past kun je het logo verkleinen of de header verhogen: header{height:300px} Ook lettergroottes, afmetingen en posities van andere elementen die niet mooi meer uitlijnen herstel je.
6. Zodra de website er weer goed uitziet doorloop je stap 4 en 5 opnieuw, net zolang totdat je bij de kleinst mogelijke schermbreedte uitkomt, voor een iPhone model 3GS of lager in “portrait mode” is dit 320 pixels. Een volgend breekpunt zet je telkens onder het bestaande breekpunt: @media screen and (max-width:1000px)
{
   /* stijlregels */
}
@media screen and (max-width:854px) /* tweede breekpunt */
{
   /* stijlregels */
} Mochten er nog kleinere schermen zijn dan is de website nog steeds goed leesbaar maar zal er een horizontale scrollbalk zichtbaar zijn. Onder een bepaalde breedte, bijvoorbeeld 1200 pixels, zal de website er beter uitzien wanneer deze over de volle breedte wordt getoond. Via een breekpunt pas je de 75% dan naar 100% aan.

Naast “max-width” zijn er diverse andere opties die je kunt opnemen in een media query, bv. “min-width”, “width”, “max-height”, “min-height”, “height”, “orientation:portrait”, “orientation:landscape” en meer. Deze kun je via AND en OR(,) operators combineren tot complexere queries. Uitgebreide (Engelstalige) informatie over media queries: http://www.w3.org/TR/css3-mediaqueries

Tot slot
Voor de meeste scenario’s is de optie “max-width” voldoende om een volledig responsive webdesign te maken. Het is sowieso verstandig om de media queries zo algemeen mogelijk te houden. Hoe specifieker je de media queries maakt, bijvoorbeeld voor vaste schermafmetingen: @media (width:1024px) and (height:768px), hoe minder goed je website zal zijn te onderhouden en hoe groter de kans dat het design uitelkaar valt op bepaalde devices en/of resoluties. Zet breekpunten ook niet op schermbreedtes van specifieke devices maar laat het "breken" van de inhoud een nieuw breekpunt bepalen. Het aantal verschillende devices en bijbehorende schermresoluties neemt immers steeds toe. Een goed responsive webdesign werkt automatisch op alle schermafmetingen, ook schermafmetingen die nog niet bestaan.

Wilt u uw website door ons responsive laten maken? Neem dan gerust contact met ons op!

Terug naar het overzicht