Les 6 Responsive designs

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Hoe staan we erin vandaag?

😒🙁😐🙂😃

Responsive designs

Wat weet je nog over wireframes

Inhoud

Wat is responsive design

Breakpoints & media queries

Opdracht

Responsive design

Een design benadering van webontwerp waarbij :

• De interface zich aanpast aan de lay-out van het apparaat. 

• Mobile first
• SVG (scalable vector graphics)
• Breakpoints
• Minimalistisch 

Wat zijn breakpoints?

Breakpoints

Verwijst naar specifieke schermgroottes waarbij de lay-out van een website wordt aangepast om een optimale gebruikerservaring te bieden op verschillende apparaten

@media screen and (min-width: 480px) 

{ Layout vanaf 480px na boven hier tussen}

@media screen and (min-width: 480px) and (max-width:580px) { Layout vanaf 480px tot en met 580px hier tussen}

Wat:Maak drie verschillende layouts voor je Index.html pagina

Hoe:

Maak gebruik van media queries

voeg 3 breakpoints toe aan je pagina

Hulp: Kijk op W3schools onder het kopje media queries.

 

Tijd: 15 minuten.

Klaar: 

Wat is mobile first

Zelfstandige oefening

Voeg een mobile first ontwerp toe aan je wireframe

Denk na over de plaatsen van de knoppen en afbeeldingen

Denk aan gebruiksvriendelijkheid.

Schrijf 3 dingen op wat je vandaag heb geleerd

Schrijf 2 dingen op waar je nog meer over wil weten

Schrijf 1 ding op wat je nog niet helemaal begrijpt