Wat is responsive webdesign & waarom heb je het nodig?

Responsive webdesign is een relatief nieuwe ontwikkeling in webdesign. De nieuwe manier om websites te ontwerpen zorgt ervoor dat bezoekers de website goed  te zien krijgen, ongeacht het type apparaat(smartphone, tablet,laptop,desktop) wat zij gebruiken.

Het is over de laatste jaren steeds populairder geworden omdat de groei van smartphone gebruikers is geëxplodeerd.  Op dit moment is het essentieel om je website te optimaliseren voor mobiele gebruikers. Dit zorgt er niet alleen voor dat bezoekers je website goed te zien krijgen, maar zoekmachines prioriteren websites die geoptimaliseerd zijn voor de mobiele gebruiker. Dit noemen wij SEO.

Het achtergrond verhaal

Toen de iPhone voor het eerst uitkwam was er de trend om je website op twee manieren te ontwikkelen. Allereerst ontwikkelde je je website voor de desktop en hierna ontwikkelde je een compleet nieuwe website voor de iPhone. Dit is in principe gemakkelijker als je het bekijkt vanuit het perspectief van een programmeur, maar er zitten een aantal nadelen aan. Onderhoud was bijvoorbeeld een stuk duurder omdat je twee websites moest onderhouden. Al snel kwamen meer smartphones uit, dit betekende dat je voor elke nieuwe schermresolutie je een nieuwe website moest bouwen, dit begon op ten duur gewoon te veel te kosten.

Audi, kwam rond 2002 met het eerste “echte” responsive webdesign. Audi en zijn ontwikkelaars zagen dat het ontwikkelen voor schermresoluties specifiek niet meer ging werken. Met de groei van alternatieve schermresoluties moesten ze gebruik maken van de flexibiliteit van webdesign.

Zei creëerde dus de eerste website die zichzelf dynamisch aanpast aan jou schermresolutie, een ontwikkeling die wij nu responsive webdesign noemen.

De ontwikkel principes

Responsive webdesign bestaat uit drie webdesign principes. Om een goed responsive webdesign te creëren moeten alle drie de principes goed geïmplementeerd worden.

  1. Vloeibare (fluid) grids
  2. Mediaquery’s
  3. Flexibele afbeeldingen en media

Vloeibare (fluid) grids

Een flexibel design dat gebruik maakt van grids (roosters) is de hoeksteen van responsive design. Het gebruik van grids zorgt ervoor dat je flexibel de inhoud van je website qua grote kunt aanpassen.

De term grid is een beetje misleidend, het doet denken dat we bepaalde vaste formaten gebruiken die zichzelf aanpassen. Dit gebeurd niet, we gebruiken CSS om te bepalen hoe inhoud op de website dient neergezet te worden, respectievelijk aan de schermresolutie.

Dit klinkt misschien erg moeilijk maar dat valt reuze mee. Voorheen werd de grootte van bepaalde stukken op je website bepaald door pixels, hier zijn ze bij responsive design vanaf gestapt. Dit omdat 1 pixel op het ene scherm, 10 pixels op het andere scherm kan betekenen. Als oplossing gebruiken we percentages, 10 procent van het scherm zal altijd 10 procent van je scherm opnemen. Ongeacht hoe groot op klein je scherm is.

Doormiddel van percentages word dus bepaald hoe groot een bepaald tekst vak mag zijn.

Mediaquery’s

Mediaquery’s worden gebruiken om te herkennen hoe het scherm van je type apparaat eruit ziet. Bijvoorbeeld jij wilt dat het lettertype kleiner wordt naarmate het scherm van de bezoeker kleiner is. Mediaquery’s kun je implementeren door middel van CSS.

De CSS code kan er zo uitzien:

@media (min-width:320px)  { /* smartphones, portret modus */ }

@media (min-width:480px)  { /* smartphones, landschap modus */ }

@media (min-width:600px)  { /* portret tablets*/ }

@media (min-width:801px)  { /* landschap tablets*/ }

@media (min-width:1025px) { /* Grootte landschap schermen, laptop, desktop */ }

@media (min-width:1281px) { /* Hoge resolutie schermen, laptop, desktop*/ }

 

Flexibele afbeeldingen

Dit zorgt ervoor dat je afbeeldingen automatisch veranderen relatief aan je schermresolutie. Dit kan op twee manieren:

  1. Het gebruik van verschillende maten afbeeldingen.
  2. Het gebruik van CSS om de afbeelding te verkleinen.

Voor statische afbeeldingen (afbeeldingen op je website die niet snel veranderen) is het slim om gebruik te maken van verschillende maten afbeeldingen, dit omdat het ervoor zorgt dat de website sneller laadt.

Voor dynamische afbeeldingen (bijvoorbeeld berichten op je blog) is het slim om CSS te gebruiken, dit zorgt voor een stuk minder moeite. Het zal er wel voor zorgen dat je pagina iets trager laadt.

 

Conclusie

Responsive webdesign is tegenwoordig enorm belangrijk. Het is slim om je website altijd responsive te laten maken omdat tegenwoordig meer mensen via een smartphone uw website te zien krijgen als via een desktop computer.

MyMarketology Lab heeft een interessant filmpje die hier iets dieper op in gaat.

Recent Werk

Wij zijn trots op ons werk, trots op heb succes dat onze klanten hebben bereikt door onze hulp.

Tijd voor een kop koffie

Wij leggen graag onze diensten uit onder het genot van een kop koffie!