Wat is responsive webdesign?

In dit artikel gaan we dieper in op de vraag “Wat is responsive webdesign?” Na de duidelijke uitleg gaan we terug naar hoe het is ontstaan. Daarna kijken we naar een goed en slecht voorbeeld. Hierbij kijken we naar het verschil van een website die responsive is en een website die dat niet is. De handigheid van een responsive webdesign komt nader ter sprake. Tot slot een handig trucje om zelf een website responsive te maken met CSS. Lees snel verder om meer te weten te komen over een responsive webdesign.

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Responsive webdesign uitleg

Een website met een responsive web design is op maat gemaakt voor het scherm voor elk soort apparaat. Denk hierbij aan een mobiel, tablet, laptop en desktop. Bij alle apparaten kan de schermgrootte anders zijn. Ook de schermgrootte van een zelfde soort apparaat kan verschillend zijn. Bijvoorbeeld mobiele telefoons heb je in verschillende vormen en maten.

Verschillende schermgroottes van apparaten

Belangrijk is dat een website gebruiksvriendelijk is op alle schermen van verschillende apparaten. Het design van een website is in het ideale geval anders op zowel een mobiel, tablet en desktop. Per apparaat is het de bedoeling om de gebruiker een zo goed mogelijke ervaring te geven. Bij een mobiel is het bijvoorbeeld niet handig om kleine knopjes te maken om daarmee door de website te navigeren. Belangrijk is daar om rekening te houden met een “touch screen” en daar de navigatie op in te richten. Uiteraard is het belangrijk om de gehele website responsive te maken. Wanneer een website een goed design heeft en gebruiksvriendelijk is voor alle apparaten, is het een responsive website.

Responsive webdesign op verschillende apparaten

Hoe is het ontstaan?

Responsive webdesign is ontstaan omdat er steeds meer apparaten bij kwamen in allerlei vormen en maten. De schermen van deze apparaten waren verschillend. Er was behoefte om het design van websites geschikt en gebruiksvriendelijk te maken voor alle apparaten. Bezoekers haken namelijk snel af als een website niet gebruiksvriendelijk is. Steeds meer mensen gingen websites bezoeken op een mobiel of tablet en hier wilden bedrijven die een website hadden op inspelen.

De eerste website die rekening hield met de breedte van een browser was audi.com in 2001. Na 2001 gingen steeds meer bedrijven zich richten op het geschikt maken van de website voor een mobiele telefoon. Ethan Marcotte bedacht pas in 2010 de term “responsive webdesign”. Hierna kwam er een stroomversnelling in responsive webdesign en kwamen er ook CSS3 media queries. Dit maakte het veel makkelijker om websites responsive te maken. Lees meer daarover in “Een website responsive maken met CSS”.

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Goed en slecht voorbeeld

Laten we eens gaan kijken naar een goed voorbeeld van een responsive website. Hiervoor hoeven we niet ver van huis te gaan. ProgrammeerPlaats is zelf ook een responsive website. Dit is misschien een tikkeltje “Wij van WC-eend, adviseren WC-eend”, maar dat moet kunnen op zijn tijd. Verander het schermformaat van de browser. Je ziet dat ProgrammeerPlaats een ander design heeft voor een kleiner schermformaat.

ProgrammeerPlaats responsive webdesign

Je ziet dat het menu en de indeling zicht aanpast aan de schermgrootte van de browser. ProgrammeerPlaats houdt rekening met verschillende schermformaten. Er zijn echter ook nog genoeg websites die niet responsive zijn. Als je deze bezoekt op een mobiel of tablet, zal je merken dat het niet gebruiksvriendelijk is. Een voorbeeld daarvan is Rob’s dierenshop.

Rob's dierenshop geen responsive webdesign voorbeeld

Je kan duidelijk zien dat de website niet responsive is. De website verandert niet mee met een ander schermformaat. Voor bezoekers op een mobiel of tablet is het moeilijk om door deze website te navigeren en het is niet gebruiksvriendelijk.

Google houdt er tegenwoordig ook rekening mee. Websites die responsive zijn, zullen hoger ranken op een mobiel of tablet in Google dan websites die dat niet zijn. Om meer bezoekers te trekken is het noodzakelijk om je website responsive te maken.

Waarom is het handig?

Waarschijnlijk begrijp je al redelijk waarom een responsive website handig is, na het lezen van het artikel tot nu toe, maar toch gaan we er nog even op in. Een responsive website is handig om de volgende redenen:

  • Verhoging van de gebruiksvriendelijkheid.
  • Zoekoptimalisatie verbetering voor verschillende apparaten.
  • Meer bezoekers.
  • Meer flexibiliteit. Je hoeft aanpassingen niet op meerdere websites te doen voor verschillende schermformaten. Je kan het op één website doen.
  • Kostenbesparend, omdat al het werk op één website gedaan kan worden.

Een website responsive maken met CSS

Tegenwoordig kan je al vrij eenvoudig een website responsive maken met CSS. Dit komt door de media queries die beschikbaar zijn in CSS3. Hieronder staat een eenvoudig voorbeeld:

/* Als de schermgrootte meer dan 650px breed is, stel dan de lettertypegrootte van <p> in op 60px */
@media screen and (min-width: 650px) {
  p {
    font-size: 60px;
  }
}

/* Als de schermgrootte minder dan 650px breed is, stel dan de achtergrondkleur van <body> in op blauw */
@media screen and (max-width: 650px) {
  body {
    background-color: blue;
  }
}

In het bovenstaande voorbeeld veranderen we de grootte van de <p> tekst en de achtergrondkleur van <body> naarmate het schermformaat verandert. In de commentaar in de code kan je lezen wat het precies doet.

Op deze manier kan je voorstellen dat je nog veel meer html elementen kan veranderen, gericht op verschillende schermformaten. Mocht je nog niet zoveel weten over HTML en CSS, is “HTML leren” en “CSS leren” zeker aan te raden.

Probeer er zelf ook eens mee te stoeien. Je zult zien dat het niet heel moeilijk is. Om nog veel meer te leren over webdesign, is de professionele cursus “Webdesign” van NHA echt aan te raden! Zowel voor hobbyisten als professionals is de cursus erg leerzaam. Je leert een professionele website bouwen. Misschien wil je wel je eigen website bouwen? Vrienden adviseren? Of een eigen webbureau beginnen? Na de cursus is dat allemaal mogelijk. Mis deze kans niet.

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Plaats een reactie