Repository navigation
Responsive Design
In de workshop responsive-design van woensdag 9/9/2026 donderdag 10/9/2026 wordt behandeld wat Responsive Design is, waarom het belangrijk is en hoe je met een Media Query in CSS de layout voor verschillende schermen kan maken.
Als je een squad page ontwerpt, moet je ervoor zorgen dat het op alle apparaten goed werkt. Heb web is niet een statische plek qua verhoudingen, zoals een krant of magazine. Elk device en elk scherm kan weer een eigen formaat en verhouding hebben.
Met responsive design zorg je ervoor dat jouw website het op alle apparaten, met allemaal verschillende groottes, andere schermen en verhoudingen, het goed doet.
Wat voor verschillende apparaten en pixels hebben jullie?
- Zoek de pixelwaardes en resoluties van alle apparaten aan de tafel op
- Schrijf deze pixelwaardes op het whiteboard achter ieders naam
- Vraag elkaar op welke devices je op internet zit, hoeveel procent op welk device?
- Schrijf dit op het whiteboard achter ieders naam
- Ga naar Statcounter en vergelijk de antwoorden met de statistieken
- Extra: verander van werelddeel op Statcounter en bekijk de verschillen
De devtools hebben ook handige functionaliteiten om je website te debuggen op verschillende verhoudingen.
- Open de developer tools op een website, door een element te inspecteren met je rechtermuisknop.
- Klik op de “Device toolbar” knop
Dit is een screenshot van Chrome, in de andere browsers zit het knopje misschien op een andere plek en in Safari kun je het via de menu bar “Develop” -> “Enter Responsive Design Mode” vinden.
-
Afhankelijk van je laatste instellingen zie je nu de site in een bepaalde verhouding.
-
Je kunt de verhoudingen aanpassen door de tools te gebruiken in deze device mode. Je kunt een bestaande verhouding kiezen of zelf de afmetingen bepalen.
Chrome probeert dan je de volledige verhouding in beeld te geven, dit kan er soms voor zorgen dat het uitgezoomd is (irritant!). Gelukkig kun je dit ook instellen door het percentage op 100% te zetten. Over throttling gaan we het een andere keer hebben.
Naast dat je de devtools kunt gebruiken kun je natuurlijk ook je browser zelf resizen om te kijken wat er gebeurt op verschillende verhoudingen. Als je de devtools open hebt staan, kun je bij het resizen ook de pixelwaardes zien in de rechterbovenhoek van je website. Handig!
- Ga naar je favoriete nieuwssite, ieder aan de tafel een ander (zoals nos.nl, ad.nl, parool.nl, cnn.com)
- Zoek uit op welke formaten en pixelwaardes de site een andere layout laat zien
- Schrijf deze pixelwaardes op het bord
- Wat valt je op? Bespreek dit met je tafel
Met CSS kun je regels schrijven waarmee de browser de website anders toont op verschillende formaten. Dit kan zowel in de breedte als de hoogte zijn, of bijv. portrait en landscape mode. Dit doen we met “Media Queries”:
body {
background: pink;
@media (min-width: 30em) {
background: yellow;
}
}- Maak in je Digital Garden/Learning Journal een HTML file aan, noem het "mediaquery.html" (we gaan in workshops vaker kleine experimentjes toevoegen aan je Digital Garden)
- Maak een CSS file aan, noem dit "mediaquery.css" en koppel het aan het HTML file
- Geef het document een achtergrondkleur. Voeg dit bijvoorbeeld toe aan je CSS:
body {
background: pink;
}- Open het HTML file in een browser en check of het werkt. Gebruik devtools om te debuggen
- Voeg een media query toe aan de CSS, om de achtergrondkleur te veranderen bij een bepaalde breedte
- Test in de browser of het werkt
- Advanced: Check het artikel A Complete Guide to CSS Media Queries en probeer verschillende technieken uit 💪🏼
- Advanced: Check het artikel A Friendly Introduction to Container Queries. Als je media queries al goed snapt, probeer dan deze opdracht ook eens met container queries te maken 💪🏼
Schets en maak een responsive design voor je squad page.
Breakdownschets met breakpoint
- Schets de squad page voor een mobiel scherm (Small) en een laptop scherm (Large)
- Maak een breakdown schets met HTML en pseudo CSS code
- Bepaal het breakpoint, bij welke schermbreedte krijg je een andere layout te zien? Maak aantekeningen op je breakdown schets
- Upload je breakdown schets in een issue en leg deze kort uit
- Leg je breakdown schets uit aan iemand van je tafel en vraag om feedback, laat de persoon dit bij je issue schrijven
- Bouw je squad page met één, of meerdere, media query
- Test regelmatig in je browser of je media query goed werkt. Test het ook op je mobiel.
- Statcounter mobile/desktop/tablet
- A Complete Guide to CSS Media Queries @ CSS Tricks
- Beginner guide to Media Queries @ MDN
- Viewport meta tag @ MDN
- A Friendly Introduction to Container Queries
Meer lezen over Responsive