Ook lettergroottes, afmetingen en posities van andere elementen die niet mooi meer uitlijnen herstel je. 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.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. 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. Naast “width” kun je, komma-gescheiden, nog andere naam/waarden invoeren, zoals "initial-scale=1": Houd de media queries echter zo algemeen mogelijk, het is niet verstandig om websites voor specifieke schermbreedtes te ontwerpen. In plaats van “device-width” kun je hier ook andere waarden invullen, bijvoorbeeld een vaste breedte: "width=320". Smartphones zoomen brede websites uit zodat ze volledig in het scherm passen, dit gedrag kun je voorkomen via deze metatag. Voeg de volgende metatag toe: Hiermee instrueer je de browser de website op de breedte van het apparaat te tonen.Deze workflow gaat in grote lijnen als volgt: Wij werken liever vanuit de omgekeerde richting, van grote naar steeds kleinere schermbreedtes. Toevoegen van een aantal zogenaamde “media queries” aan een bestaande of aparte stylesheet.Įr 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.
Er zijn diverse technieken en manieren om een responsive website te maken, maar ze doen alle hoofdzakelijk de volgende twee dingen: We treden dan ook niet in detail, maar tonen een goede workflow voor het maken van een responsive webdesign. Ruime ervaring met html en css is echter een vereiste voor het opzetten van een effectief responsive webdesign. Hoe maak je een responsive website?īestaande websites met een vaste breedte zijn vaak relatief eenvoudig om te zetten naar een responsive website. Een goede responsive website zal ook op grotere schermen mooier getoond worden: Niet-responsive website op een gigantisch scherm met een breedte van 2560 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. Dit is 2,5 maal zo groot als de kleine schermbreedte van 1024 pixels. Op het moment van schrijven zijn er schermen op de markt met een breedte van 2560 pixels en grotere breedtes in de nabije toekomst. Het gebruik van grotere schermen neemt, net als het gebruik van kleinere schermen, steeds meer toe. Een goed responsive webdesign wordt eveneens beter getoond op grotere schermen. Grote schermbreedtesīij responsive websites denkt men vaak uitsluitend aan mobiel en tablet gebruik maar dit is een misvatting. die reden worden websites steeds vaker responsive gemaakt. Dit kan bij websites met een hoog aantal smartphone bezoekers een te grote belemmering zijn. Niet-responsive website op een aanzienlijk groter scherm.ĭe 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. 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: Niet-responsive website op een antiek scherm met een breedte van 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.
Dat is doorgaans de kleinste schermbreedte die op dat moment gangbaar is, bijvoorbeeld 1024 pixels.
niet-responsive, website is gemaakt voor een vaste schermbreedte. 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).