Les 6 Responsive designs

Hoe staan we erin vandaag?

😒🙁😐🙂😃

1 / 18

Slide 1: Poll

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 18 slides, with interactive quizzes, text slides and 1 video.

Items in this lesson

Hoe staan we erin vandaag?

😒🙁😐🙂😃

Slide 1 - Poll

Responsive designs

Slide 2 - Slide

Wat weet je nog over wireframes

Slide 3 - Mind map

Inhoud

Wat is responsive design

Breakpoints & media queries

Opdracht

Slide 4 - Slide

Responsive design

Een design benadering van webontwerp waarbij :

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

Slide 5 - Slide

Slide 6 - Video

Mobile first
SVG (scalable vector graphics)
Breakpoints
Minimalistisch

Slide 7 - Slide

Wat zijn breakpoints?

Slide 8 - Open question

Breakpoints

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

Slide 9 - Slide

@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}

Slide 10 - Slide

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:

Slide 11 - Slide

Slide 12 - Slide

Wat is mobile first

Slide 13 - Open question

Slide 14 - Slide

Zelfstandige oefening

Voeg een mobile first ontwerp toe aan je wireframe

Denk na over de plaatsen van de knoppen en afbeeldingen

Denk aan gebruiksvriendelijkheid.

Slide 15 - Slide

Schrijf 3 dingen op wat je vandaag heb geleerd

Slide 16 - Open question

Schrijf 2 dingen op waar je nog meer over wil weten

Slide 17 - Open question

Schrijf 1 ding op wat je nog niet helemaal begrijpt

Slide 18 - Open question