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 tussen een website die responsive is en een website die dat niet is. De handigheid van een responsive webdesign komt nader ter sprake. Tot slot zie je een handig trucje om zelf een website responsive te maken met CSS en laten we je de beste boeken en cursussen zien. Lees snel verder om meer te weten te komen over responsive webdesign!
Ja, ik wil de beste HTML en CSS boeken zien!
Responsive webdesign uitleg
Een website met een responsive webdesign is op maat gemaakt voor het scherm van elk soort apparaat. Denk hierbij aan een smartphone, tablet, laptop en desktop. Bij alle apparaten kan de schermgrootte anders zijn. Ook de schermgrootte van een soortgelijk apparaat kan verschillend zijn. Bijvoorbeeld smartphones zijn er in verschillende vormen en maten.
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 smartphone, tablet en desktop. Per apparaat is het de bedoeling om de gebruiker een zo goed mogelijke ervaring te geven. Bij een smartphone 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.
Hoe is het ontstaan?
Responsive webdesign is ontstaan doordat 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 smartphone 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 smartphone. Ethan Marcotte bedacht 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 de beste HTML en CSS boeken zien!
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 en gebruiksvriendelijk is.
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 smartphone of tablet, zal je merken dat het niet gebruiksvriendelijk is. Een voorbeeld daarvan is Rob’s dierenshop.
Je kan duidelijk zien dat de website niet responsive is. De website verandert niet mee met een ander schermformaat. Voor bezoekers op een smartphone 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 smartphone 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.
- Google laat je website hoger ranken op 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 is het voor te stellen dat je nog veel meer HTML elementen kan veranderen, gericht op verschillende schermformaten. Mocht je nog niet zoveel weten over HTML en CSS, dan is “HTML leren” en “CSS leren” zeker aan te raden.
De beste boeken en cursussen
Probeer er zelf ook eens mee te stoeien. Je zal zien dat het niet heel moeilijk is. Met de beste boeken over HTML en CSS kan je nog meer bekend raken met deze talen. Boeken zijn een leuke en goede manier om meer over HTML en CSS te leren.
Verder staan er op Pluralsight hele goede videocursussen voor beginners over responsive webdesign. Pluralsight is sowieso een geweldig platform waar je onder andere meerdere (programmeer)talen en -technieken kan leren.
In “Pluralsight review en ervaringen” lees je meer over het platform. Je kan het platform zelfs 10 dagen helemaal gratis uitproberen!
Tot slot staan er ook op Coursera hele goede leermogelijkheden om meer over responsive webdesign te leren. In “Coursera review” lees je meer over dit online leerplatform.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.