Terug

Responsive Design 1 – Mobile Grid

Device Emulator

Omdat het natuurlijk niet handig webdesignen is op je telefoon, blijven we – ook voor mobile design – werken op onze pc. Gelukkig kunnen we Chrome laten doen alsof het een mobile device is (emuleren).

🡆 Rechts-klik op een webpagina in Chrome, en kies voor Inspect. In het scherm dat nu opent klik je op dit icoontje:
🡆 Bovenin het scherm kun je nu kiezen voor een aantal devices, en inzoomen naar 100%. In sommige gevallen is het nodig om eerst de pagina te refreshen voordat de site goed geëmuleerd wordt.

Mobile Grid

Een grid voor een smartphone of tablet werkt precies hetzelfde als een grid voor desktop. Hieronder staan twee oefeningen om je helpen de stof onder de knie te krijgen. Gebruik de eerdere hoofdstukken van de HTML & CSS lessen als naslagwerk, om eventueel op te zoeken hoe je een grid maakt.

  1. Download wireframes.zip.

    In het mapje opdracht_1 vind je een wireframe schets, een HTML- en een CSS-bestand. Print de schets uit en gebruik het om aantekeningen te maken. Het HTML-bestand is al klaar, daar hoef je niets meer aan te veranderen. Het CSS-bestand is ook al bijna klaar. Je hoeft alleen nog maar het grid toe te voegen.

    Volg dit stappenplan:

    a) Schrijf op de uitgeprinte schets de classes en id’s van alle elementen die je ziet. Dit helpt je later met het veranderen van de CSS. Teken eventueel ook de grid-lijnen.

    b) Pas vervolgens het CSS bestand aan zodat het resultaat zo goed mogelijk lijkt op de schets. Nogmaals: alles wat er al staat hoef je niet te veranderen, je moet alleen CSS voor het grid toevoegen.

    ViewWidth
    Tip: gebruik voor mobile grids voor alle breedtes vw, dus geen pixels. Als je twee kolommen wilt, doe je bijvoorbeeld:
    grid-template-columns: 50vw 50vw;
    50vw betekent: 50% van de breedte van het scherm.
    Voor hoogtes luidt het advies: zo veel mogelijk auto gebruiken, en anders px, % of vh naar gelang wat nodig is.

  2. In het mapje opdracht_2 vind je weer een wireframe schets, een HTML- en een CSS-bestand. Ditmaal is het CSS bestand een stuk minder ver uitgewerkt. Gebruik je kennis en ervaring om ook met deze bestanden de schets zo goed mogelijk na te maken.