html/css - Responsive Design

Responsive design
  • Je weet hoe je de ViewPort kan gebruiken om je website (beter) geschikt maken voor mobiel
  • Je kan je website met behulp van media queries geschikt maken voor verschillende schermgroottes
1 / 16
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 16 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 120 min

Éléments de cette leçon

Responsive design
  • Je weet hoe je de ViewPort kan gebruiken om je website (beter) geschikt maken voor mobiel
  • Je kan je website met behulp van media queries geschikt maken voor verschillende schermgroottes

Slide 1 - Diapositive

Responsive design
"Responsive web design responds to the needs of the users and the devices they're using; the layout changes based on the size and capabilities of the device"

  • Rekening houden met meerdere devices: telefoon, tablet, laptop, desktop
  • Meerdere schermgroottes
  • Meerdere resoluties
  • Dynamisch

Slide 2 - Diapositive

Pak allemaal even je mobieltje

Slide 3 - Diapositive

De viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
Met de viewport geef je aan hoe pixels gerenderd moeten worden

Slide 4 - Diapositive

Responsive layout
Designmuseum
Designmuseum heeft een anders soort responsiveness dan het Van Gogh Museum. Je ziet dat daar eigenlijk maar heel weinig veranderd als je je scherm groter/kleiner maakt.
http://designmuseum.org/

Slide 5 - Diapositive

Opdracht
In groepjes van twee: bekijk een website die je vaak bezoekt. Gebruik de browser om het scherm groter en kleiner te maken. 
Wat valt je op? Kies twee dingen om in je eigen site te gebruiken

Geen website? Gebruik dan nos.nl
timer
5:00

Slide 6 - Diapositive

iPhone X - 375px
iPad - 768px

Slide 8 - Diapositive

Waar zou je dit in jouw ontwerp voor kunnen gebruiken?

Slide 9 - Question ouverte

Mobiel
Selecteer device

Slide 10 - Diapositive

Aan de slag
  • Voeg de viewport tag in aan je website. 
  • Voeg minsten één media query toe voor mobiel. 
  • Controleer m.b.v. de inspector hoe het eruit ziet op een telefoon en tablet

Slide 12 - Diapositive

Ik weet waar ik de viewport voor moet gebruiken
A
Dat weet ik
B
Ik weet het nog niet heel goed
C
Ik snap het niet

Slide 13 - Quiz

Ik weet waar ik de media queries voor moet gebruiken
A
Dat weet ik
B
Ja, voor hamburger menu's
C
Ik snap het niet
D
Ik snap het een beetje

Slide 14 - Quiz

Wat kon er beter aan deze les?

Slide 15 - Question ouverte

Tot volgende week!

Slide 16 - Diapositive