Blog

  • Home
  • Blog
  • Responsive Webdesign, hoe werkt het?

Responsive Webdesign, hoe werkt het?

Responsive Webdesign, hoe werkt het?

24 Nov 2017 | Geert

We spreken van responsive webdesign als het design van een website zich aanpast aan het device, of beter gezegd de afmetingen van het browservenster. Het maakt niets uit of de website wordt bezocht op een smartphone, tablet, desktop, smart tv, boordcomputer van je auto, smartwatch… you name it.

Tot een paar jaar geleden was dat absoluut niet zo. Als je toen al over een smartphone beschikte heb je destijds vast opgemerkt dat je bij veel websites nog dezelfde variant te zien kreeg als op je PC. Je moest in- en uitzoomen om de tekst te kunnen lezen en de gewenste handelingen uit te kunnen voeren.

Vandaag de dag gebruikt echter 76% van de Nederlanders hun smartphone om te internetten en 55% een tablet. Een paar jaar geleden, in 2012, was dat respectievelijk 44% en 23%. Dat gezegd hebbende is het dus niet meer dan logisch dat een website ook op die devices optimaal gebruikt moet kunnen worden. Responsive webdesign is dan ook absoluut geen hype, maar inmiddels een must bij het opleveren van een goede website. Wij vinden dat een website onder andere veilig (we leveren niet voor niets iedere website op met een SSL certificaat), snel en geoptimaliseerd voor Google en andere zoekmachines (SEO) moet zijn, responsive past wat mij betreft feilloos in dat rijtje.

Hoe werkt responsive webdesign?

Leidend bij het maken van een responsive webdesign is dat men uitgaat van het werken met procentuele afmetingen en niet met vaste pixels. De breedte van de sidebar van je website is bijvoorbeeld 33% van het totaal en niet 300 pixels.

Media queries spelen ook een grote rol bij het maken van een responsive design voor je website. Media queries maken het mogelijk om andere CSS regels toe te passen op basis van het device van de websitebezoeker, waarbij we meestal uitgaan van de afmetingen van diens scherm. Hiermee is het bijvoorbeeld mogelijk om aan te geven dat de hierboven genoemde sidebar op een smartphone de volledige breedte van de website, oftewel 100%, bedekt.

responsive_website_BLOG.jpg
Onze website is een voorbeeld van een website met een responsive design.

Het bovengenoemde kun je natuurlijk zelf programmeren, het is immers geen hogere wiskunde. Maar waarom zou je dat doen als veel werk je al uit handen genomen is? Er zijn verschillende (gratis) frameworks die je helpen bij het maken van een responsive website, zoals Bootstrap en UIkit. Met deze frameworks kun je bovendien niet alleen in een handomdraai een responsive website maken; ze beschikken onder andere ook over een heel scala aan icons, standaard CSS voor veelgebruikte website elementen zoals formulieren en een JavaScript library waarmee je erg eenvoudig sliders,  foto galerijen en nog veel meer dynamische website elementen kan opzetten.

Liquid design en adaptive design

We hebben hierboven al besproken wat de basis van responsive webdesign vormt: het werken met percentages en breekpunten, oftewel media queries. Responsive design is daarmee eigenlijk een combinatie van twee andere technieken, namelijk liquid design en adaptive design.

  • Liquid design, of fluid design, is de techniek waarbij uitgegaan wordt van werken met percentages en niet met vaste afmetingen in pixels. Deze verhoudingen liggen bij deze techniek echter vast. De sidebar heeft een breedte van 33% op de desktop, maar ook op de tablet en mobiel.
  • Bij een adaptive design spelen de breekpunten een belangrijke rol, maar schaalt de website verder niet mee. Bij deze techniek kan dus wél gewerkt worden met pixels in plaats van percentages. Bij zo’n lay-out heeft de sidebar op een smartphone bijvoorbeeld een breedte van 300 pixels (deze staat dan over de volledige breedte), op een tablet van 400 pixels en op een website van 500 pixels.

Is het verschil je nog niet helemaal duidelijk? Ga dan eens naar www.liquidapsive.com. Via de selectbox in de rechterbovenhoek kun je switchen tussen de verschillende technieken. Welke techniek heeft jouw voorkeur? Wij opteren voor responsive webdesign, naar onze mening het beste van twee werelden.

Responsive webdesign versus dynamische weergave versus mobiele website

Of je voorkeur nou uitgaat naar responsive, liquid of adaptive design; al deze technieken zorgen voor een optimale weergave van een website op alle denkbare apparaten op basis van CSS. Het kan zijn dat dit echter niet genoeg is.

Het is daarom belangrijk om per device na te gaan wat het ‘doel’ van je websitebezoekers is. Persoonlijk gebruik ik mijn smartphone vaak voor het opzoeken van het telefoonnummer of e-mailadres van een organisatie, terwijl ik een vakantie liever op mijn desktop boek. Als ik naar de website van een reisbureau ga zou ik op een desktop dus het liefst het aanbod van dat bedrijf pontificaal in beeld zien, terwijl ik op mijn smartphone graag meteen het telefoonnummer zou zien zodat ik gemakkelijk contact kan opnemen over een prangende vraag met betrekking tot mijn reservering.

Een dergelijk issue zou je met CSS eenvoudig kunnen oplossen. Het telefoonnummer zou je op basis van media queries kunnen tonen op eem smartphone, maar verbergen op een PC. Dit is echter niet het geval wanneer de verschillen tussen de mobiele en desktop variant groter zijn. Je zou alle ‘overbodige’ content met CSS kunnen ‘hiden’ als men de website op een smartphone bezoekt, maar het nadeel daarvan is dat wél alle code ingeladen moet worden. Dit gaat dus onnodig ten koste van de laadtijd van je website.

Als hier sprake van is zou je kunnen kiezen voor een dynamische weergave van je website op basis van het device van de bezoeker of voor een afzonderlijke mobiele website.

Dynamische weergave

We spreken van een dynamische weergave als er op basis van het device van de bezoeker andere HTML en CSS wordt gebruikt voor de weergave van de website, zonder dat de URL verandert.

Een website die hier gebruik van maakt is LinkedIn. Als je die website op je desktop bezoekt en je verkleint het scherm zie je nauwelijks verspringingen. Als je op je smartphone naar LinkedIn gaat zie je echter een voor mobiel geoptimaliseerde website, terwijl de URL hetzelfde is.

Deze keuze laat zich eenvoudig verklaren. Als je op een PC naar LinkedIn gaat wordt je overweldigt met allerlei functionaliteiten, terwijl je op mobiel waarschijnlijk alleen je tijdlijn wil checken (al zal je hiervoor waarschijnlijk de app gebruiken). Alle overige content is ‘overbodig’, maar het zou wel ten koste gaan van de snelheid van de website als deze alleen met CSS verborgen zou worden op mobiel.

Mobiele website

We spreken van een mobiele website als er sprake is van andere code voor de weergave van je website per device, maar als ook de URL veranderd. De URL van de mobiele website begint vaak met ‘m.’, bijvoorbeeld www.m.website.nl.

Zelf bezoek is dagelijks www.psv.netwerk.to (op het design van deze website heeft mijn collega Sanne vast het één en ander aan te merken ;-)). Op de homepage is plaats voor het laatste nieuws over mijn favoriete voetbalclub, maar ook zie je er berichten die gerelateerd zijn aan de laatst gespeelde of eerstvolgende wedstrijd, een overzicht van het forum, een kalender, een deel uit de actuele stand and so on. Als ik op mijn telefoon het laatste nieuws wil checken ga ik echter naar www.mobiel.netwerk.to/psv, waarbij de nadruk veel meer op het nieuws ligt en veel functionaliteiten van de ‘gewone’ website zijn vervallen.

Wat is de beste oplossing voor jou?

Hierop is geen universeel antwoord te geven. In de meeste gevallen zal de implementatie van een responsive design volstaan, maar mochten de verschillen tussen de mobiele en desktop variant erg groot zijn dan kun je overwegen om gebruik te maken van een dynamische weergave van je website of een mobiele variant.

Mocht je daarvoor kiezen, houd er dan wel rekening mee dat dat meer tijd kost gedurende de ontwikkeling van de website en het onderhouden van de code. Goed om te weten is overigens Google geen voorkeur heeft voor één van de mogelijkheden.

Mocht je kiezen voor een dynamische weergave of mobiele website, dan is ons advies wel om dit niet bij de bezoeker op te dringen. Geef je bezoeker altijd de vrijheid om via de mobiele variant ook te switchen naar de volwaardige desktop website.

Is jouw website al mobielvriendelijk?

Mogelijk heb je dit artikel gelezen omdat je website nog niet geschikt is voor mobiel gebruik en je weet dat dit ‘eigenlijk niet kan’. Is je website wel al geoptimaliseerd voor het bezoeken ervan op een smartphone, dan  wil dat echter niet per definitie zeggen dat de website ook ‘mobielvriendeljik’ is. Dit kun je testen met deze handige tool van Google.

Deze test controleert niet alleen of de layout op een smartphone gebruiksvriendelijk is, maar ook of de klikbare elementen, zoals links en buttons, ver genoeg van elkaar staan en of de tekst op een mobiele telefoon groot genoeg en dus leesbaar is.

Geert van Soest

Webdeveloper Geert houdt zich bezig met het ontwikkelen van software. Tevens expert op gebied van snelheidsoptimalisatie.