html/css - Responsive Design

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

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

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

Pak allemaal even je mobieltje

Zonder

Met

Meer over de viewport

Meer info: https://developers.google.com/web/fundamentals/design-and-ux/responsive/

De viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Meer over device pixels

Meer info: http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

Met de viewport geef je aan hoe pixels gerenderd moeten worden

Responsive layout

Van Gogh Museum

https://www.vangoghmuseum.nl/nl/zoeken/collectie

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/

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

Media queries

https://media-queries--timlogtenberg.repl.co/

https://repl.it/@TimLogtenberg/media-queries

iPhone X - 375px

iPad - 768px

Waar zou je dit in jouw ontwerp voor kunnen gebruiken?

Mobiel

Selecteer device

Nuttige websites

• https://developers.google.com/web/fundamentals/design-and-ux/responsive/
  
• https://www.codecademy.com/learn/learn-responsive-design
• https://www.w3schools.com/html/html_responsive.asp
• Zoektermen: "responsive layout", "responsive design", "responsive tutorial" en combinaties daarvan
• https://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/

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

Ik weet waar ik de viewport voor moet gebruiken

1. Dat weet ik
2. Ik weet het nog niet heel goed
3. Ik snap het niet

Ik weet waar ik de media queries voor moet gebruiken

1. Dat weet ik
2. Ja, voor hamburger menu's
3. Ik snap het niet
4. Ik snap het een beetje

Wat kon er beter aan deze les?

Tot volgende week!