Wat is responsive design?
Het modewoord als het gaat om het maken van websites en webapplicaties: ‘responsive’. Simpel gezegd betekent het ‘reagerend’. De inhoud reageert op de omgeving. Niet duidelijk? Laten we het tekenen hieronder.
Een typische monitor
We nemen een typische monitor van een PC of Mac en plaatsen daar de elementen van de website op. Bovenaan de ‘header’ met menu over de hele breedte, links daaronder een zijbalk en rechts de hoofdinhoud, die hier en daar soms in twee delen verdeeld wordt.
Een typische telefoon
Wat gebeurt er nu als we dezelfde inhoud willen laten zien, maar op een veel smaller beeldscherm? Als we dezelfde lay-out willen behouden als op ons volledige beeldscherm hierboven, zal de inhoud breder worden dan de beschikbare ruimte. Een gebruiker zal dan van links naar rechts moeten vegen om alles te kunnen zien, wat slecht is voor het overzicht.
Schalen
We zouden de inhoud ook kunnen schalen naar de maximale breedte van de telefoon. Dat betekent echter dat we hele smalle elementen gaan krijgen, die niet genoeg ruimte bieden aan de inhoud.
Ook niet ideaal.
Responsive
Dus maken we de website ‘responsive’. De code achter de website ziet wanneer hij op een smal of klein scherm wordt geplaatst en past de lay-out daarop aan door elementen bijvoorbeeld onder elkaar te plaatsen.
Knoppen worden groter gemaakt omdat kleine schermen meestal met een vinger bediend worden in plaats van met een muis.
Sommige elementen zijn misschien alleen zinvol op een groter scherm en worden op een kleiner scherm totaal verborgen. Dit biedt de beste ervaring op ieder type scherm.
Uiteraard zijn al onze producten, zoals webshops en webapplicaties, responsive gemaakt. Ook op zoek naar een website die het goed doet op alle apparaten? Neem eens contact op met MajorLabel!
