HTML en CSS les 6 - Responsive Design

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

Welkom terug!

4V Informatica 10 oktober

PO Website maken

1. Kies een partner en lees de omschrijving van de opdracht in Classroom
   
2. Kopieer het takenoverzicht op Trello en houd jullie vorderingen bij;
3. Kies een onderwerp voor je website en zorg voor de tekst en bijbehorende plaatjes;
4. Maak een ontwerp voor je website;
5. Bouw je website aan de hand van je ontwerp: eerst HTML en daarna CSS;
6. Zorg voor een mooi, responsive ontwerp en voor nette en overzichtelijke code;
7. Overleg tussentijds met de docent (tekst/ ontwerp etc.)
8. Lever je website in inclusief Trello-link en ontwerp. 

Aan de slag

• Maak de tekst voor je website af (Google Docs)
  
• Maak het ontwerp voor je website af (papier)
  
• Begin aan je website via create in Replit
  
• Nodig je PO-partner uit via invite rechtsboven in Replit-template om samen te werken
  
• Tweede uur uitleg 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

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: <a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">https://developers.google.com/web/fundamentals/design-and-ux/responsive/</a>

De viewport

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

Meer over device pixels

Meer info: <a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/</a>

Met de viewport geef je aan hoe pixels gerenderd moeten worden afhankelijk van de grootte van je venster/ scherm

Responsive layout

Van Gogh Museum

<a href="https://www.vangoghmuseum.nl/nl/zoeken/collectie">https://www.vangoghmuseum.nl/nl/zoeken/collectie</a>

Designmuseum

<div>Designmuseum heeft een ander soort responsiveness dan het Van Gogh Museum. Je ziet dat daar eigenlijk maar heel weinig verandert als je je scherm groter/kleiner maakt.</div><a href="https://www.vangoghmuseum.nl/nl/zoeken/collectie">http://designmuseum.org/</a>

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

• Per schermbreedte specifieke styling opgeven;
  
• In css @media (query) {styling }
• De query maak je m.b.v. min-width of max-width (of height);
  
• Mobiel = ± 400px
  
• iPad = ± 800px
  
• Laptop etc. = ± 1080px
  
• Zie voorbeeld op Replit

iPhone X - 375px

iPad - 768px

Chrome devtools

• Open chrome (of andere browser)
  
• Ga naar een website;
• Druk op F12 of...
• Rechtermuisknop -> inspect element

Filmpje!

<a href="https://www.youtube.com/watch?v=VYyQv0CSZOE">https://www.youtube.com/watch?v=VYyQv0CSZOE</a>

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

• Maak de tekst voor je website af (Google Docs)
• Maak het ontwerp voor je website af (papier)
• Maak je website via create in Replit 
• Voeg de viewport tag toe aan je website. 
• Voeg minstens éé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

Huiswerk 17/10

Verzamel tekst + plaatjes voor je website

Maak een ontwerp

Werk aan je website

Tot volgende week!

Wat kon er beter aan deze les?