Responsive Design, alles flexibel

Wat is responsive design?

Responsive design is simpel gezegd “een website die zich aanpast aan de gebruiker”. De praktijk is echter iets gecompliceerder, want wat en waarop past zich dit aan? Uiteindelijk is het meeschalen van een website ook al responsive.

Wanneer we responsive design definiëren volgens Ethan Marcotte, een belangrijke auteur betreffende dit onderwerp, dan zijn dit de drie belangrijkste punten:

  1. Flexibel raster: zet je elementen niet vast met een breedte en hoogte, maar maak ze flexibel.
  2. Flexibele media: niet alleen je elementen moeten flexibel zijn. Ook je media, zoals afbeeldingen, moet meeschalen a.d.h.v. de resolutie van de gebruiker.
  3. Flexibele grafische structuur: kijk bij iedere resolutie of er ruimte is voor alle elementen. Het weglaten van elementen kan soms een toegevoegde waarde hebben voor de gebruiker. 

Nu hebben we al een duidelijker beeld over responsive design. Toch blijft er nog genoeg om over na te denken tijdens het ontwikkelen van een website in een responsive design!

Waarom zou je voor responsive design kiezen?

De wereld en mogelijkheden waarin de gebruiker jouw website bezoekt verandert in hoog tempo. Vroeger hadden we bijvoorbeeld alleen met de PC te maken, terwijl we tegenwoordig met verschillende apparaten online kunnen. De snelle opmars van smartphones en tablets zijn hierbij het voornaamste voorbeeld. Je wilt natuurlijk wel dat ook deze bezoekers een unieke ervaring beleven op jouw website! 

Je wilt je bezoeker altijd op de juiste manier informeren of bewegen tot actie. Daarom is het belangrijk om het ze zo gemakkelijk mogelijk te maken. We kunnen dus niet meer slechts voor één resolutie of medium gaan ontwikkelen.

Het is niet alleen de resolutie

Zoals al eerder is aangegeven, moeten we niet alleen rekening houden met de resolutie tijdens een responsive design. Er zijn ook een aantal andere punten waar we stil bij moeten staan, namelijk:

  • Hoe bedien ik de website op een touchscreen apparaat? Een cursor is namelijk vele malen kleiner dan jou vinger! Links en buttons moeten dus groter gemaakt worden en meer ruimte om zich heen hebben, wil het goed klikbaar zijn. 
  • Niet alle apparaten ondersteunen flash. Een online video moet dus afgespeeld worden in HTML5 of geopend worden via de YouTube app. 
  • Mobiele apparaten hebben vaak een trage verbinding. Je wilt als bezoeker natuurlijk niet minuten lang wachten op allerlei afbeeldingen of poespas wat ingeladen moet worden! 

Focus

Bij responsive design moet je kritisch kijken naar welke informatie en functionaliteit je wilt aanbieden. Daarom begint een project, met een responsive design, bij de smartphone. Een voordeel hiervan is dat het je dwingt tot een focus op “Is dit echt noodzakelijk?”. Het doorvertalen naar tablets en desktops leidt vaak tot websites met een goede user experience en concrete acties voor de bezoeker.  

Het proces

Het grote verschil met een gewoon website traject, is dat de mobiel en tablet vooraan in het proces zitten. Het vraagt namelijk veel aandacht om de juiste elementen en functionaliteiten uit te denken voor deze mediums. De techniek van responsive design is achteraf dus moeilijk te implementeren. Het voortraject kost daardoor vaak wat meer tijd, maar dit is ook afhankelijk in de mate van responsive design. 

Wat belangrijk is tijdens het proces, is teamwork. Waar de ontwerper eerst een ontwerp maakte, denken nu ook de ontwikkelaars mee in dit proces vanaf het eerste moment van het ontwerp. Dit met het uiteindelijke doel dat de bezoeker jouw website op ieder apparaat optimaal kan gebruiken en een goede user experience beleeft. 

Meer weten over responsive design?

Nog altijd geldt dat de ontwikkelingen op het gebied van internet elkaar razendsnel opvolgen. Zo ook de techniek met betrekking tot responsive design. Nieuwsgierig geworden naar wat responsive design voor jou kan betekenen? Maak dan gerust een afspraak voor een inspirerend gesprek met ons!