Labo 04 - Responsive Webdesign
Doel van de opdracht
- Een webpagina responsive maken met mobile-first aanpak.
- Mediaqueries toepassen voor verschillende schermgroottes.
- Responsive images toevoegen met
srcset. - Elementen laten meeschalen met de venstergrootte.
- Typografie correct instellen (line-height, max-width).
- Knoppen en links stijlen met voldoende contrast.
- Gebruik van flexbox en grid voor layout.
Beschrijving
In dit labo heb ik een bestaande mobiele website uitgebreid naar een
responsive design. Ik heb mediaqueries toegevoegd vanaf 40em en een
maximum breedte ingesteld op 80rem. De layout is opgebouwd met flexbox
en grid om tekst en afbeeldingen correct te positioneren. Voor de cards
heb ik srcset gebruikt om verschillende afbeeldingen te laden
afhankelijk van de schermgrootte. Typografie is verbeterd met een
Google Font, correcte line-height en logische marges. Knoppen en links
zijn gestyled met voldoende contrast en getest met Axe.
Gerelateerde links
Reflectie
Wow!
Het gebruik van flexbox en grid maakte het responsive design veel eenvoudiger.
Aauw!
Het correct instellen van srcset voor responsive images kostte wat tijd.
Niet zeker?
Ik twijfel nog over de beste manier om typografie consistent te houden op alle schermgroottes.