Responsive design: een ontwerp dat zich voegt naar het scherm
Een website wordt bekeken op honderden verschillende schermbreedtes. Een telefoon van 360 punten breed, een tablet in twee standen, een laptop, een breed bureaubladscherm. Je kunt daar onmogelijk voor elk formaat een aparte versie van maken.
Toch moet het er overal goed uitzien. Dat is precies het probleem dat responsive design oplost.
Je maakt een ontwerp dat meebuigt. Het reageert op de ruimte die het krijgt.
Waar het misgaat, is bij de formaten waar niemand naar kijkt. Iedereen test op een telefoon en op zijn eigen laptop. De tablet ertussenin wordt overgeslagen.
Dezelfde site die zich voegt naar het scherm waarop hij staat.
Wat is responsive design?
Responsive design is een ontwerp dat meeschalen met het scherm. Dezelfde pagina, dezelfde inhoud, een andere indeling.
Op een breed scherm staan drie blokken naast elkaar. Op een telefoon staan ze onder elkaar.
Hoe het technisch werkt
Met regels die alleen gelden binnen een bepaalde breedte. Die schrijf je in CSS.
Daarnaast werk je met een flexibel raster. Kolommen krijgen geen vaste breedte in punten maar een percentage van de ruimte.
Wat breekpunten zijn
Een breekpunt is de breedte waarop je indeling verandert. Onder die breedte gelden andere regels.
Veel bouwers gebruiken drie breekpunten: mobiel, tablet en bureaublad. Dat is een begin maar het is geen wet.
Kies ze op je ontwerp
Beter is om ze te kiezen op het moment dat je ontwerp gaat wringen. Rek je venster langzaam uit en kijk waar het lelijk wordt.
Daar hoort je breekpunt. Niet op een rond getal dat iemand ooit heeft bedacht.
Waarom het op een tablet misgaat
Omdat die breedte tussen wal en schip valt. Hij is te smal voor de indeling van een bureaublad en te breed voor de mobiele indeling.
Een menu dat op een telefoon inklapt, staat op een tablet soms nog uitgeklapt. Dan loopt hij over de rand. Vier kolommen worden er twee die veel te smal zijn.
Waar ik altijd naar kijk
De tablet in staande en in liggende stand.
Tabellen en prijslijsten, die lopen het snelst uit hun jasje.
Lange woorden in koppen die niet kunnen afbreken.
Formulieren, waar velden vaak vast blijven zitten.
Afbeeldingen die worden bijgesneden op de verkeerde plek.
Die tweede levert de meeste ellende op. Een prijstabel van zes kolommen past simpelweg niet op een telefoon.
Het verschil met mobile first
Responsive gaat over de techniek: je site past zich aan. Mobile first gaat over de volgorde: je begint bij de kleinste versie.
Je kunt dus responsive bouwen zonder mobile first te werken. Het resultaat is dan vaak een uitgeklede telefoonversie in plaats van een doordachte. Meer daarover lees je bij mobile first.
Hoe je het test
Niet door je venster te versmallen, want dat is een benadering. Gebruik echte toestellen waar dat kan.
Bij het testen op formaten let ik ook op de bediening met een vinger. Knoppen die met een muis prima werken, zijn met een duim te klein. Dat hoort bij accessibility.
Controleer ten slotte de laadtijd op een telefoonverbinding en niet op je eigen wifi. Meer daarover lees je bij pagespeed.
Een versmald venster is niet genoeg
Dat laat de indeling zien maar niet de bediening. Je muis is nu eenmaal preciezer dan een duim.
Pak dus af en toe een echt toestel erbij. Vraag desnoods twee collega’s om hun telefoon.
Waarom de tablet wordt overgeslagen
Iedereen test op zijn telefoon en op zijn eigen laptop. De formaten daartussenin komen er niet aan te pas.
Juist daar zit het probleem, want daar wisselt je indeling. Vier kolommen worden er twee die veel te smal zijn.
Tabellen vragen een eigen oplossing
Een prijstabel van zes kolommen past niet op een telefoon. Laten krimpen werkt niet, want dan wordt hij onleesbaar.
Geef zo’n tabel op smalle schermen een andere vorm. Bijvoorbeeld als losse blokken per pakket, onder elkaar.
Denk aan wat er buiten beeld valt
Wordt iets verstopt op mobiel, vraag je dan af waarom het op groot scherm wel mocht. Meestal is het antwoord dat het ook daar weg kan.
Dat is de winst van deze manier van werken. Je site wordt er op elk formaat scherper van, zie frontend.
Meer vragen over Responsive design
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is responsive design?
Wat is het verschil tussen responsive design en mobile first?
Wat zijn breekpunten?
Hoe test je of je site responsive is?
Is responsive design hetzelfde als een aparte mobiele site?
Waarom valt mijn site uit elkaar op een tablet?
Wat is responsive design?
Responsive gaat over de techniek: je site past zich aan. Mobile first gaat over de volgorde waarin je ontwerpt.
Bij mobile first begin je bij de kleinste versie en bouw je van daaruit op. Je kiest dan eerst wat er echt toe doet.
Je kunt dus responsive bouwen zonder mobile first te werken. Dat gebeurt ook vaak, en het resultaat verschilt.
Begin je bij het brede scherm, dan wordt de telefoonversie een uitgeklede variant. Alles wat niet past, wordt weggeduwd of verstopt.
Begin je klein, dan is de telefoonversie een bewuste keuze en het brede scherm een uitbreiding. Meer daarover lees je bij mobile first.
Vraag dus expliciet met welke van de twee er wordt gewerkt. Het verschil zie je terug in je mobiele versie.
Is die duidelijk uitgekleed in plaats van doordacht, dan is er vanaf het brede scherm gewerkt. Vraag ook of de mobiele versie als eerste is ontworpen of als laatste.
Wat is het verschil tussen responsive design en mobile first?
Responsive design is een ontwerp dat meeschaalt met de schermbreedte van je bezoeker. Dezelfde pagina, dezelfde inhoud, een andere indeling.
Op een breed scherm staan drie blokken naast elkaar. Op een telefoon staan ze onder elkaar.
Dat is nodig omdat een website op honderden verschillende breedtes wordt bekeken. Een telefoon, een tablet in twee standen, een laptop, een breed bureaubladscherm.
Je kunt daar onmogelijk voor elk formaat een aparte versie van maken. Dus maak je een ontwerp dat meebuigt met de ruimte die het krijgt.
Technisch werkt dat met regels die alleen gelden binnen een bepaalde breedte, en met kolommen die een percentage van de ruimte krijgen in plaats van een vast aantal punten.
Vraag bij een offerte of het ontwerp op alle formaten wordt uitgewerkt. Vaak zie je alleen een mobiele en een brede versie.
De formaten ertussenin worden dan tijdens het bouwen bedacht, en daar gaat het meestal mis.
Wat zijn breekpunten?
Een breekpunt is de breedte waarop je indeling verandert. Onder die breedte gelden andere regels dan erboven.
Veel bouwers gebruiken er drie: mobiel, tablet en bureaublad. Dat is een begin maar het is geen wet.
Beter is om ze te kiezen op het moment dat je ontwerp gaat wringen. Rek je venster langzaam uit en kijk waar het lelijk wordt.
Daar hoort je breekpunt, en niet op een rond getal dat iemand ooit heeft bedacht.
Dat kost iets meer tijd bij het bouwen. Het levert een site op die op elke breedte klopt, in plaats van alleen op de drie formaten die toevallig zijn getest.
Laat je bouwer je site langzaam uitrekken en kijk mee waar het wringt. Daar horen je breekpunten.
Dat kost iets meer tijd bij het bouwen. Het levert een site op die op elke breedte klopt, niet alleen op drie geteste formaten. Vraag om een lijst met de gekozen breedtes, dan kun je zelf meekijken.
Hoe test je of je site responsive is?
Niet alleen door je venster te versmallen, want dat is een benadering. Gebruik echte toestellen waar dat kan.
Een versmald venster laat de indeling zien maar niet de bediening. Knoppen die met een muis prima werken, zijn met een duim vaak te klein.
Ik let daarbij op vijf dingen. De tablet in staande en liggende stand. Tabellen en prijslijsten, die lopen het snelst uit hun jasje.
Lange woorden in koppen die niet kunnen afbreken. Formulieren, waar velden vaak vast blijven zitten. En afbeeldingen die op de verkeerde plek worden bijgesneden.
Controleer ten slotte de laadtijd op een telefoonverbinding en niet op je eigen wifi.
Pak echte toestellen erbij en niet alleen een versmald venster. Vraag desnoods twee collega’s om hun telefoon.
Let daarbij op de bediening met een duim. Knoppen die met een muis prima werken, zijn met een vinger vaak te klein. Test daarnaast je formulieren, want daar blijven velden het vaakst vastzitten.
Waarom valt mijn site uit elkaar op een tablet?
Omdat die breedte tussen wal en schip valt. Hij is te smal voor de indeling van een bureaublad en te breed voor de mobiele indeling.
Een menu dat op een telefoon inklapt, kan op een tablet nog uitgeklapt staan en over de rand lopen. Vier kolommen worden er twee die veel te smal zijn.
De echte oorzaak is meestal dat er niet op is getest. Iedereen test op zijn telefoon en op zijn eigen laptop.
De formaten ertussenin worden overgeslagen, en juist daar zit het probleem.
Een prijstabel van zes kolommen levert de meeste ellende op. Die past simpelweg niet, en dan moet je hem anders vormgeven in plaats van hem te laten krimpen.
Bekijk je site zelf een keer op een tablet, in beide standen. Dat is een controle van twee minuten.
Geef tabellen op smalle schermen een andere vorm, bijvoorbeeld losse blokken per pakket. Laten krimpen maakt ze onleesbaar.
Valt je site uit elkaar op een tablet of een bepaalde telefoon? Stuur me de link via het formulier hieronder. Ik bekijk hem op de formaten die meestal worden overgeslagen en stuur je terug wat er misgaat. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Responsief ontwerp, meeschalend ontwerp, schermvullend ontwerp
