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

This lesson contains 16 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 120 min

Items in this lesson

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

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

Pak allemaal even je mobieltje

Slide 3 - Slide

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

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

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

iPhone X - 375px
iPad - 768px

Slide 8 - Slide

Waar zou je dit in jouw ontwerp voor kunnen gebruiken?

Slide 9 - Open question

Mobiel
Selecteer device

Slide 10 - Slide

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

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 - Open question

Tot volgende week!

Slide 16 - Slide