Kop 1

Responsive ontwikkelen

Responsive websites passen zich aan aan de viewport waarin ze verschijnen.
Websites worden niet alleen door browser op de desktopcomputers bezocht, maar misschien wel vaker met tablets en mobiele apparaten.
Responsive wil hier zeggen dat het zich aan die omgeving aanpast.

Leerdoelen

• responsive ontwikkelen / responsive webdesign
  • viewport declaratie
  • strategie: mobile first
  • mediaqueries
• CSS Grid-layout: kennismaking
  • grid- definiëren
  • elementen in grid plaatsen

Het resultaat (00:03:34)

Er is een versie voor mobiel, tablet en desktop. Via de inspector van Chrome kun je zien wat er te verwachten is.
Je kunt ook de opbouw van het document in de inspector zien.
Er is een wrapper-div met daarin een header (bevat masthead met afbeelding op de achtergrond) h1, tageline en auteur.
Naast de header een main (met de verschillende secties) en een aside en een footer.
Je gaat van een eenvoudige 1 koloms-website over naar een 2-koloms- en 3 -koloms versie.
De site is responsive door goed gebruik van breakpoints en Grid-layout.

Mobile first

Ontwikkel eerst voor het smalste viewport.
Dit heeft de volgende voordelen:

• Relatief eenvoudig ontwerp: de meeste elementen moeten onder elkaar. Maar de meeste elementen zijn juist ook block-elementen en gaar daarom onder lekaar staan.
• Een smalle viewport vereist een scherpe selectie over wat belangrijk is: de content komt centraal te staan in het proces. Mobile first leidt dan vanzelf tot: content first.
• Je hebt met Theo een keus gemaakt uit de lijst van tips hiernaast.
• Vanuit de bron van jouw keuze neem je de inhoud over en vult dat een met:
  • een afbeelding als achtergrond in de header. Deze wisselt bij een van de breakpoints;
  • een aside met daarin een lijst met linkjes naar andere tip-sites;
  • een footer met onder andere de bronvermelding van jouw tips en de validatie-icons.

de opdracht

1. Stem met Theo af welke keuze uit de lijst van onderwerpen hiernaast je zult kiezen.
   Van deze pagina gebruik je de inhoud. (de vormgeving ga je dus niet namaken!!!)
2. Maak eerst een mark-up en de opmaak voor mobile: de meeste elementen zijn toch block-elementen en zo ontstaat er vanzelf een 1 koloms layout.
   De opbouw is als in de afbeelding hieronder:
3. Belangrijke details in de opdracht:
   • Zoek voor de .masthead 2 afbeeldingen: een kleine voor mobiele apparaten, een grote voor andere viewports;
   • Voeg een aside toe met daarin 5 links naar andere leuke tipsites;
   • Voeg een footer toe met daarin:
     • een link naar de bron van jouw tipsite;
     • de validatie-icoontjes van https://github.com/Theo-denBlanken/validatie-W3C
   • Zorg ervoor dat enkele grid-elementen, die veel inhoud bevatten, zich over meerdere grid-cellen uitstrekken zoals in de figuur hier rechts;
   • Zorg voor een font dat bij jouw inhoud past.

Bonusopdracht

Maak een extra mediaquery voor en extra brede viewport waarbij de aside en de footer naast de main komen.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap op hosts2.ma-cloud.nl;
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes plaatsen in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C
• Plaats jouw bestanden op GitHub waarbij in het README.md bestand een link naar de life-versie op jouw bewijzenmap;
• Lever de GitHub link in bij opdracht in ELO Magister.

Checklist