Skip to main content

Responsive webdesign: een website die zich automatisch aanpast

In de moderne wereld van het internet is het van cruciaal belang om een website te hebben die er niet alleen goed uitziet op desktopcomputers, maar ook op tablets en smartphones. Dit is waar “responsive webdesign” in beeld komt. Responsive webdesign is een manier van het ontwikkelen van websites die ervoor zorgt dat de inhoud en lay-out van een website zich automatisch aanpast aan de verschillende schermformaten.

responsive webdesign

Historiek: van meerdere versies naar één universele website

Vroeger bestonden er enkel vaste (desktop) computers en daarna ook laptops. De beeldschermen van die computers hadden allemaal gelijkaardige schermformaten, zoals bijvoorbeeld 1024 pixels breed op 768 pixels hoog. Doordat je er kon van uitgaan dat elk scherm minstens 1024px ruimte had in de breedte, was het dan ook geen probleem om vaste breedtes toe te kennen aan de elementen van een website. Bijvoorbeeld een webpagina met een gecentreerde kolom van 900px breed, dat zal er goed uit gezien hebben op elk beeldscherm dat toen beschikbaar was.

Maar toen kwamen mobiele apparaten zoals tablets en smartphones, elk met eigen schermformaten en resoluties. Plots hadden schermen meer ruimte in de hoogte dan in de breedte, waardoor een oplossing nodig was.

Mobiel vs Desktop marktaandeel

Op bovenstaande grafiek zien we sinds 2010 duidelijk de dalende trend in desktop computers en stijgende trend in mobiele apparaten, met eind 2016 de uiteindelijke overslag (rode pijl).

In eerste instantie werden aparte versies van een website gemaakt om deze geschikt te maken voor verschillende apparaten. Een aparte mobiele versie van eenzelfde website werd dan vaak beschikbaar gemaakt bijvoorbeeld via “m.mijnwebsite.com”, terwijl de desktop versie “mijnwebsite.com” was. Zo’n mobiele website was niet alleen tijdrovend, maar ook inefficiënt en moeilijk te onderhouden. Met de opkomst van responsive web design is dit echter verleden tijd. In plaats van meerdere website versies te beheren, kunnen we nu één enkele responsive website ontwerpen die zich aanpast aan verschillende resoluties en schermgroottes.

Hoe werkt het? Verschillende technieken voor Responsive Webdesign

Er zijn verschillende technieken om responsive design te bereiken:

  • Media Queries: Dit zijn regels in de (CSS) code die je kunt instellen, om aangepaste stijlen toe te passen afhankelijk van de schermgrootte. Je zegt bijvoorbeeld: indien de afmetingen van het browser venster smaller zijn dan 576px (smartphones), pas dan marges van 10% toe op element X. En indien het venster smaller is dan 768px (tablets) pas dan 15% toe. De pixel hoeveelheden die we instellen waarop de lay-out moet wijzigen, noemen we “breakpoints” ofwel “breekpunten”.

Onderstaand voorbeeld toont de Riseweb website. Zie je hoe we beginnen met 3 kolommen en naarmate het scherm smaller wordt gaan we naar 2 en uiteindelijk naar 1 kolom? Zie je hoe het menu bovenaan inklapt wanneer er te weinig plaats is om het volledige menu weer te geven? Zie je hoe het logo kleiner wordt en de tekst zich aanpast? Dit is hoe alles samenkomt om een perfecte weergave te bieden.

Riseweb responsive website
  • Fluid lay-outs: Naast de breakpoints kunnen we ook fluïde lay-outs maken. Het komt erop neer om i.p.v. in bovenstaand voorbeeld de exacte waarde van 900px breed op te geven, je een dynamische hoeveelheid instelt zoals een percentage. Bijvoorbeeld een kolom van 30% en eentje van 70% vormen samen de volledige 100% van het beeld, en die kolommen zullen zich dynamisch aanpassen naarmate het scherm breder of smaller wordt. Wanneer je daarentegen pixels gebruikt, dan stel je een vaste breedte in waardoor elementen “afgekapt” zullen worden wanneer het scherm smaller is dan de ingestelde pixel waardes.

Onderstaand voorbeeld toont de website van een klant (van vóór ik hem onder handen genomen heb 😊). Zie je hoe de website op mobiel “afgekapt” wordt waardoor niet alles zichtbaar is? En hoe de website eigenlijk maar de helft van het beeld inneemt op het brede laptopscherm? Dit komt omdat er met vaste pixelwaardes gewerkt werd. Er werd geen rekening gehouden met smallere schermen, en ook niet met extra brede schermen.

Webos website voor het redesign
  • CSS Flexbox: dit is een lay-out model dat website bouwers helpt om meer complexe lay-outs te creëren en de verdeling van de ruimte tussen elementen flexibel aan te laten passen. Het doel van Flexbox is om de positionering van elementen op een webpagina te vereenvoudigen en een betere controle te bieden, en dan vooral bij veranderende schermafmetingen.
  • Frameworks: Je kunt ook gebruikmaken van frameworks zoals Bootstrap, Foundation of Tailwind. Deze frameworks maken het gemakkelijker om responsive websites te bouwen door gebruik te maken van voorgedefinieerde componenten en lay-outs die het responsive denkwerk reeds voor jouw gedaan hebben. Wanneer je website op een CMS zoals WordPress draait, dan is de kans groot dan je nu al gebruik maakt van zo’n framework. Vele WordPress ontwikkelaars integreren namelijk frameworks in hun thema’s om de gebruiker in staat te stellen makkelijk responsieve lay-outs te maken, zonder technische kennis.
  • Afbeeldingen en lettertypes: Naast de lay-out moet je er ook voor zorgen dat de content zich aanpast aan verschillende schermen. Dit betekent dat je bijvoorbeeld ook voor lettertypes best geen pixel waardes gebruikt, maar wel andere technieken namelijk een relatieve eenheid. Je kunt bijvoorbeeld een waarde in viewport units gebruiken (een percentage van de viewport, de venster breedte).

Waarom heb ik Responsive Webdesign nodig?

SEO en andere voordelen

De voordelen van responsive webdesign nog even opgelijst:

  • Optimale Gebruikerservaring: Responsive websites zorgen ervoor dat jouw content leesbaar en bruikbaar is op alle apparaten en voor elke gebruiker. Van desktopcomputers tot smartphones en elk apparaat er tussenin. Hierdoor krijgen jouw bezoekers altijd een optimale web ervaring ongeacht de grootte van het scherm.
  • Betere SEO-ranking: Aangezien er sinds 2016 over het algemeen meer mobiele website bezoekers zijn in vergelijking met desktop bezoekers, is de focus van zoekmachines op mobiel vriendelijkheid sterker geworden. Zoekmachines zoals Google straffen websites zwaar af in de ranking, wanneer deze niet mobielvriendelijk zijn. Een responsieve website is dus een must voor een betere positie in de zoekresultaten.
  • Tijds- en Kostenbesparing: Omdat je slechts één website hoeft te ontwerpen en onderhouden, bespaar je tijd en kosten in vergelijking met het beheren van meerdere versies van jouw site, zoals vroeger vaak gangbaar was.

Conclusie: Responsive design of niet?

Tuurlijk wel! Geen twijfel mogelijk. Een website die niet responsive is in deze tijden, maakt weinig kans. Responsive webdesign is van essentieel belang in de huidige online wereld. Het stelt jou in staat om jouw website toegankelijk te maken voor alle apparaten en dus voor eender wie jouw website bekijkt. Dit leidt tot een betere gebruikerservaring, een betere SEO score en zoekmachine ranking en een besparing in tijd en kosten.

Wil je de aandacht van je bezoekers vasthouden en het hen zo makkelijk mogelijk maken om de juiste informatie te vinden? Zorg er dan voor dat jouw website responsive is en afgestemd is op de behoeften van jouw bezoekers, ongeacht het apparaat dat ze gebruiken!

Alle Riseweb websites zijn standaard responsive!