Met de komst van smartphones en tablets bekijken bezoekers uw website niet meer met een beeldscherm zoals op uw computer. Grootste verschil is het schermformaat. Een smartphone heeft natuurlijk een veel kleiner scherm dan een ‘normaal’ computerscherm. Als je een smartphone of tablet vervolgens ook nog draait heeft dat ook nog tot gevolg dat het scherm breder of hoger wordt.
responsive-design
Zou het niet handig zijn als de website zich aanpast aan het scherm waarop deze wordt getoond? Wel dat is dus responsive design. Afhankelijk waarmee je de site bezoekt past de site zich aan. Zo worden menu’s anders getoond en worden artikelen bijvoorbeeld anders gerangschikt voor meer overzicht.




fullscreen
Hoe ziet dat er dan uit in de praktijk? Rechts een website zoals die op een ‘normaal’ beeldscherm wordt getoond. Omdat de website gemakkelijk op het beeldscherm past wordt de site getoond in de volle breedte. De gekleurde blokken (rechts) bevinden zich op de voorkeurs positie.




tabletportraitNu dezelfde website op een tablet in de zgn portrait mode (staand). Doordat het scherm minder breed is past de site niet in de volle breedte. De site past zich aan aan het beeldscherm. Beide gekleurde blokken worden nu naar beneden verschoven, zodat het blauwe blok meer ruimte krijgt.




smartphoneportraitTenslotte het kleinste beeldscherm die van een smartphone in de zgn portrait mode. Merk op dat de gekleurde blokken nu onder elkaar worden geplaatst omdat er domweg geen ruimte is in de breedte. De belangrijkste inhoud wordt bovenaan getoond.