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
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 16 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 120 min

Onderdelen in deze les

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 - Tekstslide

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 - Tekstslide

Pak allemaal even je mobieltje

Slide 3 - Tekstslide

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

iPhone X - 375px
iPad - 768px

Slide 8 - Tekstslide

Waar zou je dit in jouw ontwerp voor kunnen gebruiken?

Slide 9 - Open vraag

Mobiel
Selecteer device

Slide 10 - Tekstslide

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 - Tekstslide

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 - Quizvraag

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 - Quizvraag

Wat kon er beter aan deze les?

Slide 15 - Open vraag

Tot volgende week!

Slide 16 - Tekstslide