3. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Responsivewebdesign is de aanpak die suggereert dat het ontwerp en de ontwikkeling moet reageren op het gedrag en de omgeving van de gebruiker op basis van schermgrootte, platform en oriëntatie. De praktijk bestaat uit een mix van flexibele roosters en lay-outs, afbeeldingen en een intelligent gebruik van CSS media queries. Als de gebruiker overschakelt van hun laptop naar iPad, moet de website automatisch naar geschikt voor resolutie, beeldgrootte en scriptingmogelijkheden. Met andere woorden, de website de technologie om automatisch beantwoorden aan de voorkeur van de gebruiker hebben. Dit zou de noodzaak van een ander ontwerp-enontwikkelingsfase voor elke nieuwe gadget op de markt te elimineren.
ResponsiveDesign
4. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
De viewportMetatag
De meta-tagsstaan altijd in de <head> sectie.
Geeft aan viewportte gebruiken
De breedte van de content is de schermbreedte van het device
De schaal van het device= 100 procent
5. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Scherm met breedte 960px
Iphone6
6. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
htmlen CSS code
Er is gebruikt gemaakt van percentages en em.
Vanuit de schermbreedte van 960px en standaard font grootte.
7. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Media Queries
8. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Media Queries
Media Queries
9. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Media Queries
Uitgangspunt voorbeeld
Iphone6
Schermbreedte 960
10. HTML
Module 2
2.2 Positioneren
ResponsiveDesign
Media Queries
Voorbeeld media query laat <aside> alleen op schermbreedte brederdan 700px zien.
11. Opdracht 1
HTML
Module 2
2.2 Positioneren
Maak de voorbeelden na, maak RAR-filemet de code en schermafdrukken en uploaddeze naar de in de map opdracht 1 in natschool
12. Huiswerk
Bekijk alle behandelde stof en werk de opdrachten verder
uit. Maak van beide opdrachten een rarfile en uploaddeze
naar Natschool in de map 2.3 Responsivedoe dit binnen
4 schooldagen.
HTML
Module 2
2.1 Forms