Les 6 Responsive designs

Hoe staan we erin vandaag?

😒🙁😐🙂😃

1 / 18

Slide 1: Sondage

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 18 diapositives, avec quiz interactifs, diapositives de texte et 1 vidéo.

Éléments de cette leçon

Hoe staan we erin vandaag?

😒🙁😐🙂😃

Slide 1 - Sondage

Responsive designs

Slide 2 - Diapositive

Wat weet je nog over wireframes

Slide 3 - Carte mentale

Inhoud

Wat is responsive design

Breakpoints & media queries

Opdracht

Slide 4 - Diapositive

Responsive design

Een design benadering van webontwerp waarbij :

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

Slide 5 - Diapositive

Slide 6 - Vidéo

Mobile first
SVG (scalable vector graphics)
Breakpoints
Minimalistisch

Slide 7 - Diapositive

Wat zijn breakpoints?

Slide 8 - Question ouverte

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

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

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

Slide 12 - Diapositive

Wat is mobile first

Slide 13 - Question ouverte

Slide 14 - Diapositive

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

Schrijf 3 dingen op wat je vandaag heb geleerd

Slide 16 - Question ouverte

Schrijf 2 dingen op waar je nog meer over wil weten

Slide 17 - Question ouverte

Schrijf 1 ding op wat je nog niet helemaal begrijpt

Slide 18 - Question ouverte