Uitleg van css-responsive design (@media)

uit de cursus Webdesign & Layout met css (2019)

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Tekst en afbeeldingen vormgeven met css

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Dankzij het layouten met het grid ben je nu ook veel makkelijker in staat om de layout responsive te maken.

Sterker nog, een layout gemaakt met het css-grid is van zichzelf al responsive.

Maak het scherm maar eens breder en smaller.

De layout past zich nu al zo goed mogelijk aan aan de beschikbare ruimte.

Ook de metatag in de html-broncode, waarmee je de viewport aanspreekt, speelt hierin een rol.

Hier staat namelijk aangegeven dat de webpagina zich altijd zo goed mogelijk moet aanpassen aan de breedte van het beeldscherm.

Toch zul je waarschijnlijk de wens hebben om de layout aan te passen voor verschillende schermbreedtes.

Op een mobieltje is een éénkoloms laout prima.

Maar op een desktop beeldscherm zal een driekoloms layout waarschijnlijk veel prettiger zijn voor de gebruiker.

Je gebruikt hiervoor mediaqueries waarmee je de breedte van een apparaat afvangt.

Je heb de volgende twee varianten:

Een mediaquerie gebaseerd op een minimale breedte.

En een mediaquerie die juist gebaseerd is op de maximale breedte.

De mediaquerie min-width gaat eerst uit van het kleinste formaat en pas daarna van grotere beeldschermen.

De mediaquerie max-width werkt precies omgekeerd.

Dan ontwerp je eerst de layout voor het grootste formaat en werk je toe naar de kleinere beeldschermen.

De meeste webdesigners starten de layout van een website vanuit het principe 'mobile-first'.

Deze is het makkelijkst.

Want meestal zul je ervoor kiezen om de volledige inhoud in een éénkoloms opmaak te plaatsen.

Het wordt pas anders zodra het scherm breder wordt.

De meest gebruikte mediaquerie is dan ook de optie met min-width.

Je start dan met het smalste scherm.

Je schrijft eerst alle css-stijlen voor een éénkoloms opmaak.

Zodat de pagina op de mobiel prima leesbaar is.

Dus ook de stijlen voor tekstopmaak, interlinie etcetera.

Zodra je daarna een mediaquerie schrijft met bijvoorbeeld min-width, zeshonderd pixels.

Dan gelden de hierna beschreven css-stijlen alleen voor een scherm van minstens zeshonderd pixels breed is.

In dat geval zou bijvoorbeeld een twee-koloms opmaak een mooiere layout zijn.

De eerstvolgende mediaquerie is dan bijvoorbeeld een min-width van negenhonderd pixels.

Vanaf negenhonderd pixels breed zou een driekoloms layout beter tot zijn recht komen.

Je mag net zoveel mediaqueries aanmaken als je wilt.

Per mediaquerie kun je ook eerder geschreven stijlen overschrijven.

Belangrijk in dit verhaal is de volgorde waarin je de mediaqueries schrijft in het css-stijlblad.

Onthoud, de laatst geschreven stijl is de stijl die door de browser wordt uitgevoerd.

Daarom is het idee van mobile-first zo prettig.

Je start met de meest eenvoudige layout.

Je creëert voor alle elementen alvast de beste opmaak.

Pas daarna ga je je bezig houden met de uitzonderingen.

En overschrijf je misschien voorgaande stijlen omdat dat op een breder scherm nu eenmaal beter uitpakt.

Er bestaan geen vaste regels welke schermbreedtes je moet aanhouden.

Je kunt natuurlijk de breedtes van de meest gebruikte apparaten proberen aan te houden.

Maar beter is het om je ontwerp te testen.

En gewoon te kijken op welke breedte het ontwerp uit elkaar valt.

Dan kun je hier een aanpassing op maken met een mediaquerie.

In Chrome kun je de layout bekijken op verschillende schermformaten.

Klik met de rechtermuisknop ingedrukt op de pagina en kies voor Inspecteren.

Activeer de knop Toggle Device Toolbar.

De pagina wordt nu voorvertoond op een bepaald schermformaat van een bestaand apparaat.

Kies uit de lijst voor een ander apparaat.

Zo kun je de pagina's ook testen en bekijken.

Tevens staan de maten van de apparaten beschreven.

Dus dit biedt weer houvast om de minimale schermbreedte van een mediaqueries op te baseren.