Een responsive website betekent dat je website zich aanpast aan de schermgrootte. Mensen besteden gemiddeld 3 uur en 16 minuten per dag* aan het gebruik van digitale media op hun smartphone. Door deze verandering in gebruikersgedrag is het niet langer voldoende om een website te hebben die alleen werkt vanaf een desktop computer of een laptop.
Responsive webdesign zorgt voor de beste ervaring, of de gebruiker nu surft op zijn desktop, laptop, tablet of smartphone. Om dit mogelijk te maken heeft je website responsive webdesign nodig.
Responsive webdesign past zich automatisch aan verschillende schermformaten en viewports aan. Met een responsive website kan iemand je website vanaf elk apparaat openen en hij zal er nog steeds perfect uitzien en functioneren.
Hoe werkt responsive webdesign?
Responsive webdesign werkt door middel van cascading style sheets (CSS). Dit gebruikt verschillende instellingen om stijleigenschappen toe te passen. Afhankelijk van de schermgrootte, oriëntatie, resolutie, kleur capaciteit en andere kenmerken van het apparaat van de gebruiker. Enkele voorbeelden van CSS eigenschappen met betrekking tot responsive web design zijn de viewport en media queries.
Om het even heel simpel te houden:
Een typische website bestaat uit een aantal bestanden (elke webpagina is een enkel bestand). Elk bestand bevat HTML-code en inhoud (tekst en afbeeldingen). De webpagina’s worden gestyled met bestanden die Cascading Style Sheets (CSS) heten. De CSS-bestanden bepalen dus het uiterlijk van je website en de HTML-bestanden bepalen de inhoud.
Laten we voor de eenvoud aannemen dat een standaard (niet-responsieve) website bestaat uit een verzameling bestanden en een paar CSS-bestanden die het uiterlijk van de website bepalen. Een responsieve website past verschillende regels uit het CSS-bestand toe, afhankelijk van welk apparaat wordt gebruikt om de website te openen. De website ziet er anders uit en “reageert” anders, afhankelijk van het apparaat.
Als je bijvoorbeeld de website opent vanaf een desktop computer, zie je een horizontaal navigatiemenu, terwijl je vanaf een mobiel apparaat een verticaal georiënteerd (een zogenaamd hamburger menu) ziet met grotere tekst. Dit is gemakkelijker te lezen op het kleinere scherm van smartphones en tablets.
CSS biedt een webontwikkelaar diverse mogelijkheden om de schermgrootte, de grootte van het browservenster en de resolutie van de eindapparaten van de websitebezoekers op te vragen. Hierdoor kunnen ze speciale opmaak regels maken voor de betreffende resoluties en schermgroottes. Met CSS3 Media Queries is de scripttaal ook geschikt gemaakt voor responsive webdesign.
Is mijn website responsive?
Of een website responsive is of niet, kun je snel ontdekken in je webbrowser.
- Open Google Chrome
- Ga naar je website
- Druk op Ctrl + Shift + I om Chrome DevTools te openen
- Druk op Ctrl + Shift + M om de werkbalk van het apparaat in te schakelen.
- Bekijk je site vanuit een mobiel, tablet of desktop perspectief
Je kunt ook een gratis tool als Google’s Mobile-Friendly Test gebruiken om te zien of de pagina’s van je site mobielvriendelijk zijn. Hoewel je mobielvriendelijkheid kunt bereiken met andere ontwerpbenaderingen, zoals adaptief webdesign, is responsive webdesign de eerste keuze vanwege de voordelen.
Hier is bijvoorbeeld het resultaat van RocketCare:
Waarom responsive webdesign belangrijk is voor bedrijven
Er was een tijd dat internetgebruikers websites alleen bekeken vanaf een desktop computer. Bijna iedereen had een monitor van dezelfde grootte. Websites werden ontworpen voor de gemiddelde bezoeker.
Tegenwoordig bezoeken mensen websites vanaf allerlei apparaten met schermen van enkele inches tot 27″ of meer. De verwachtingen zijn veranderd. Gebruikers verwachten dat de website die ze bezoeken weet dat ze een tablet gebruiken en geen PC. Ze verwachten dat de website zich aan hen aanpast – niet andersom.
Responsive webdesign verlost webdesigners, UI/UX designers en webontwikkelaars van het maken van verschillende websites voor elk afzonderlijk apparaat. Het maakt het leven ook gemakkelijker voor ondernemers, marketeers en adverteerders. Hier zijn een paar voordelen:
- Een website voor elk apparaat: Of je de website nu bekijkt op een 27-inch iMac of op het scherm van je iPhone, de website wordt zo weergegeven dat de gebruiker hem optimaal kan bekijken.
- Geoptimaliseerd webontwerp voor het apparaat: Bij responsief webontwerp worden alle afbeeldingen, lettertypes en andere HTML-elementen overeenkomstig geschaald, zodat ze optimaal gebruik maken van de schermgrootte van de gebruiker.
- Geen omleidingen: Webontwerpen voor meerdere apparaten vereisen redirects om gebruikers naar de juiste versie van een webpagina te sturen. Zonder deze omleidingen hebben gebruikers nog sneller toegang tot de inhoud.
- Responsive webdesign is goedkoper: Je website is gemakkelijker te beheren omdat het één website is, en niet twee of drie. Je hoeft niet meerdere keren wijzigingen aan te brengen. In plaats daarvan kun je vanuit één website werken en die bijwerken.
- Ranking Factor: Inmiddels worden websites die niet responsive zijn door Google ‘bestraft’. responsive webdesign is uiterst belangrijk voor zoekmachine optimalisatie. Als je website niet geoptimaliseerd is voor mobiele apparaten, zal het moeilijk zijn om de bovenste plaatsen in Google te bereiken.
Is een responsive website alleen het ontwerp?
Als je het hebt over responsive webdesign, gaat het meestal over lay-out en ontwerp. Maar een responsive website moet ook gebruikt worden om de gebruiker verschillende informatie te bieden op de eindapparaten.
Afhankelijk van het apparaat waarmee je een website benadert, kan je op zoek zijn naar andere inhoud. Met een smartphone in je hand ben je de website sneller aan het scannen dan als je voor je grote desktop zit en een website bekijkt.
Afhankelijk van het apparaat van waaruit de gebruiker toegang heeft, heeft hij of zij andere informatie nodig. responsive webdesign kan ook worden gebruikt om informatie op bepaalde apparaten voorrang te geven.
Als je onderweg bent, zijn andere onderwerpen voor jou belangrijker dan wanneer je thuis achter de computer zit.
Als webdesigner weten we dat responsive webdesign niet is bedoeld om elementen wel/niet te tonen op basis van het eindapparaat. Daarom moet de webdesigner er bij het ontwerp van de website al aan denken om de indeling zo te maken dat bepaalde inhoud verplaatst kan worden. Dit betekent dat inhoud niet verborgen hoeft te worden, maar alleen “verplaatst” op de website via CSS.
Verschillende apparaten brengen ook verschillende verwachtingen van bruikbaarheid met zich mee. De Apple iPhone, bijvoorbeeld, heeft mensen geleerd naar links/rechts/boven/onder te vegen. Mensen die een website bezoeken vanaf een smartphone verwachten dat ze op een telefoonnummer kunnen klikken en dat hun telefoon hen de optie geeft om dat nummer automatisch te bellen. Dit geldt ook voor een adres met “toon route” optie die meteen naar een GPS-app gaat.
Voorbeelden van responsive websites
Op mediaqueri.es zijn veel goede voorbeelden van responsive webdesign te vinden. Hier vind je een online galerij met websites over de hele wereld.
Maar natuurlijk wil ik je hier ook enkele mooie voorbeelden van responsive webesign laten zien. In het algemeen is echter bijna elke website inmiddels responsive. Probeer deze pagina bijvoorbeeld eens met je telefoon te openen. Dan zie je wat er verandert.
Hier is mijn lijst met enkele mooie voorbeelden van responsive webdesign:
Ook kan je onze volledige lijst met projecten bekijken. Wij maken elke website namelijk responsive!
Responsive Design vs. Mobile First
Er is vaak verwarring (zelfs onder webdesigners) over wat deze twee termen precies betekenen. Veel mensen denken ten onrechte dat ze hetzelfde zijn. Ze zijn echter totaal verschillend.
Responsive webdesign begint op een desktop, dus op de maximaal beschikbare resolutie, en schaalt dan naar het kleinste scherm.
Hoewel de inhoud en lay-out zich aanpassen aan smartphones, zijn de navigatie, inhoud en laadsnelheid meer gericht op een traditionele website.
Mobile-first design is vergelijkbaar met het ontwikkelen van een mobiele app en vervolgens de lay-out zo aanpassen dat deze zonder al te veel wijzigingen goed wordt weergegeven op tablet en desktop apparaten. Je hele ontwerp en lay-out zijn gericht op het bieden van een geweldige mobiele gebruikerservaring: snelle downloadsnelheden, rijke media-inhoud om je publiek geïnteresseerd te houden, eenvoudige navigatie via het touchscreen, enzovoort.
Samengevat: responsive webdesign neemt het grootst mogelijke apparaat (de desktop computer) als referentie en Mobile First Design neemt het kleinst mogelijke apparaat.
Je ziet dus dat responsive webdesign en Mobile First niet hetzelfde zijn. Het probleem is hetzelfde, maar de aanpak is toch echt anders.
Wanneer heb ik een responsive website nodig?
Over het algemeen is responsief webdesign gebruikelijk bij B2B-bedrijven, waar de inhoud van de website informatief en zinvol moet zijn. Rijke inhoud die goed gestructureerd is, is ook goed voor zoekmachine optimalisatie. Als B2B-bedrijf richt je je vooral op andere bedrijven en je weet dat 80% van de gebruikers met een laptop of desktop computer werkt en je website tijdens kantooruren bezoekt. Daarom is een responsief ontwerp de beste aanpak. De inhoud, navigatie en lay-out van je website zijn geschikt voor smartphones en tablets en bieden ook een uitstekende gebruikerservaring voor je mobiele gebruikers.
Voordelen responsive webdesign
- Goed voor websites met veel informatie
- Gemakkelijker voor grote formulieren en complexe marketing funnels
- Goedkope ontwikkeling en onderhoud
- Goed voor zoekmachine optimalisatie (SEO)
Nadelen responsive webdesign
- Mobiele gebruikerservaring is niet 100% geoptimaliseerd
Wanneer heb ik Mobile First nodig?
Responsive design klinkt goed? Waarom zou je dan kiezen voor de mobile-first design?
Het is eenvoudig: uit de statistieken blijkt dat we verslaafd zijn geraakt aan browsen op mobiele apparaten. Momenteel is meer dan 50% van al het internetverkeer afkomstig van mobiele telefoons. Met dit in gedachten is het belangrijk om te begrijpen wat mobile-first design is en wat de voordelen ervan zijn.
In tegenstelling tot Responsive Design gaat Mobile First over een complete mobiele gebruikerservaring: een aangepaste app-achtige gebruikersinterface, minder tekst, grotere lettertypen, snelle downloadsnelheden, video en audio, één call-to-action per pagina, korte formulieren enzovoort. Bovendien hebben mobiele browsers binnenkort toegang tot meer smartphone-functies zoals camera, haptische feedback en stemherkenning, zodat een mobile-first ontwerp een unieke ervaring kan bieden.
Voordelen Mobile First
- Betere gebruikerservaring op mobiele apparaten
- Meerderheid van de internetgebruikers surft op een smartphone
- Ontwerp website om gebruik te maken van ingebouwde telefoonfuncties
- Goedkoper dan het ontwikkelen van een iOS, Android of hybride app
Nadelen Mobile First
- Desktopversie is niet 100% geoptimaliseerd
- Niet geschikt voor websites met veel inhoud
Wat kan ik nu met deze informatie?
We hebben een heleboel uitleg gegeven. Als jij op dit moment een website hebt, doe dan de test in het begin van dit artikel. Is jouw website niet responsive? Dan helpen we je graag om een responsive website te maken.
Ga je een website laten maken en heeft het webdesign bureau nog niks gezegd over responsive webdesign? Vraag er dan naar voor de zekerheid!