The new responsive
Waarin je leert over responsive design, container queries en user-preference queries
Je hebt na de sprint planning variaties geschetst van je component en een hifi ontwerp uitgewerkt. Vandaag gaan we aan de hand van het artikel The new responsive: Web design in a component-driven world onderzoeken wat responsive design betekent voor jouw component en hoe je moderne ontwikkelingen van CSS hiervoor kan gebruiken.
Responsive web design anno 2025 is een website die zich aanpast aan de vorm van het apparaat, met componenten die zich aanpassen aan de ruimte die beschikbaar is, én waarbij je rekening houdt met gebruikersinstellingen,.
Responsive web design is moeilijk. Er bestaan al veel apparaten met verschillende schermen en er komen steeds meer apparaten bij met afwijkende schermformaten. Kleine ronde schermen zoals smart watches, schermen die in- en uitklapbaar zijn (foldables) of die je om je arm kan dragen... wot?
Sinds Ethan Marcotte in 2010 de term Responsive Web Design bedacht, zijn er in CSS steeds meer technieken bij gekomen om rekening te houden met moderne ontwikkelingen. flexbox, grid, container queries, minmax, clamp, viewport units en meer.
Met CSS kan je ook steeds beter rekening houden met gebruikersinstellingen van het apparaat zoals light/dark modes, wel of geen animaties of high contrast. Je kan websites maken die zich aanpassen aan de gebruiker.
Responsive design betekent dat je rekening houdt met de viewpoort, met afwijkende schermen, én met gebruikerinstellingen.
Responsive to the Form Factor betekent dat een website zich ook aanpast aan de vorm van een apparaat. Door de uitvinding van flexibele schermen kunnen handhelds gevouwen worden. Bijvoorbeeld Samsung is hiermee bezig. Sommige studenten hebben een smartphone met gevouwen scherm. (Stella?).
Design prototype voor de Samsug S Fold
Om hier layouts voor te maken zijn Viewport Segments API bedacht. Dit is nog in de experimentele fase, nog niet alle moderne browsers ondersteunen dit. dit komt eraan! https://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API
Bekijk jullie website in de devtools van Chrome op de Galaxy Z Fold en Asus Zenbook Fold. Klopt de layout nog? Wat zou je nog meer kunnen bedenken en maken voor foldables?
Bekijk met je team de voorbeeld video voor foldable screens op https://web.dev/articles/new-responsive#responsive_to_the_form_factor
Zoek design inspiratie voor foldable schermen en bewaar voorbeelden in je Figma document. Bijvoorbeeld op Dribbble of Pinterest.
Maak in jullie Figma een template voor verschillende fold schermen en werk een paar ideeën lo-fi uit.
Lees met je team de bron Screen configurations op Web.dev en doe de quiz aan het eind van het artikel: Test your knowledge of screen configurations
Maak een issue aan met jullie design ideeën, voeg inspiratie toe en bronnen hoe je dit zou kunnen maken. Voeg het label 'could have' toe ...
- Building Web Layouts For Dual-Screen And Foldable Devices
- Responsive Design / Screen configurations
- Viewport Segments API
Een Media query ‘luistert’ naar de instellingen van de gebruiker, zoals light/dark mode en toegankelijkheid settings.
In de level 5 User preference media features kan je in CSS rekening houden met verschillende gebruikers instellingen, zoals:
- prefers-reduced-motion
- prefers-reduced-transparency
- prefers-contrast
- forced-colors
- prefers-color-scheme
- prefers-reduced-data
- inverted-colors (color media features)
Ontwerp je component voor verschillende User preference media features.
Lees eerst met je team het onderdeel 'Responsive to the user' op https://web.dev/articles/new-responsive#responsive_to_the_user
Dupliceer het ontwerp van je component in Figma en maak variaties op je design voor prefers-reduced-motion, prefers-contrast, prefers-color-scheme en inverted-colors. Zorg dat je ontwerp voldoet aan de instellingen van de gebruiker ... Maak een annotatie in je Figma waarin je de media-feature en het ontwerp uitlegt.
Maak per variatie een breakdown, onderzoek hoe je de media feature in CSS goed kan gebruiken.
Maak een issue aan zodat je hier later mee verder kan. Documenteer je onderzoek in het issue.
Behalve media queries bestaan er tegenwoordig Container queries in CSS.
Container queries are like media queries but different. With media queries, you can adjust CSS based on the viewport width (or height etc.). But with container queries, you can adjust the CSS based on the width of a given container. https://dev.to/jannikwempe/container-queries-in-svelte-using-svelte-actions-33ga
Als je voor een component container queries gebruikt kan je de layout laten aanpassen aan de beschikbare ruimte. Als je het component op verschillende plekken in een website gebruikt, past het zich vanzelf aan aan de beschikbare ruimte. Vet ...
[...] many designs have common components that change layout depending on the available width of their container. This may not always relate to the size of the viewport, but instead, relate to where in the layout the component is placed. — MDN - CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
Een button component 'add to cart' wordt op verschillende plekken gebruikt in een website. Het label past zich aan aan de hoeveelheid ruimte - Responsive Icon Demo Mariam Suzanne
Bekijk met je team de voorbeeld video met de planten in het onderdeel 'Responsive to the container' op https://web.dev/articles/new-responsive#responsive_to_the_container
Werk je eigen component in detail uit in Figma. Hou er rekening mee dat het component op verschillende plekken in de website gebruikt kan worden. Neem als voorbeeld de button uitwerking van de Responsive Icon Demo
Maak een breakdown met breakpoints, onderzoek en noteer hoe je het component met container queries kan bouwen.
Maak een bijpassend issue, verzamel je schetsen en onderzoek.
Onderzoek de Viewport Segments CSS media features en bouw een demo. Hou je werk bij in het issue met foldable design ideeën.
Noteer per onderdeel van het artikel The new responsive: Web design in a component-driven world minimaal 1 ding dat je nog niet kent, zoek een bron en maak aantekeningen in je learning journal zodat je het (later) kan onderzoeken.