Responsive webdesign

Responsive webdesign
Auteur: Jacob Nelissen - 18 oktober 2019 Responsive webdesign van webdesignkaart.nl
wat is responsive webdesign

Alles wat je moet weten over responsive webdesign

Bijna elke nieuwe klant wil tegenwoordig een mobiele versie van zijn website. Het ene ontwerp voor de BlackBerry, het andere voor de iPhone, de iPad, netbook, Kindle – en alle schermresoluties moeten compatibel zijn.

Een screenshot uit onze Google Analytics. 55% van onze bezoekers komt via mobiel.

De mobiele revolutie is nog niet ten einde. In de komende vijf jaar zullen we waarschijnlijk veel meer bedrijven zien die ervoor kiezen om mobiel te gaan. Om dit te realiseren zal je op zoek moeten naar responsive webdesign. Dit houdt in dat de site toegankelijk wordt gemaakt voor mobiele apparaten. Wat is het precies en wat zijn de voordelen? Tijd om hier achter te komen!

Wat is Responsive Web Design?

Het doel van responsive design is om één site te hebben, maar met verschillende elementen die verschillend reageren op apparaten van verschillende grootte.

Wanneer een website niet responsive is

Laten we een traditionele “vaste” website als voorbeeld nemen.  Als de niet-responsieve website op een desktopcomputer wordt bekeken, kan de website drie kolommen laten zien. Maar als je dezelfde lay-out op een kleiner tablet bekijkt, kan het je dwingen om horizontaal te scrollen, iets wat er niet echt mooi uitziet.

Het effect wordt ook nog eens moeilijker gemaakt door het feit dat veel tablets in verschillende standen kunnen worden bekeken. Op een klein smartphone scherm kunnen websites nog uitdagender zijn om te zien. Grote afbeeldingen kunnen de lay-out “breken”. Sites kunnen langzaam laden op smartphones wanneer het iets teveel wordt. 

Wanneer een website wel responsive is

Als een site echter een responsive webdesign gebruikt, kan de tablet-versie zich automatisch aanpassen om slechts twee kolommen weer te geven. Op die manier is de inhoud leesbaar en gemakkelijk te navigeren. Op een smartphone kan de inhoud als één enkele kolom verschijnen, misschien wel verticaal gestapeld. Of de gebruiker kan met de muis over andere kolommen vegen om andere kolommen te bekijken.  Afbeeldingen zullen de grootte aanpassen in plaats van de lay-out te vervormen of afgesneden te worden.

responsive webdesign

Het doel is: bij een responsive webdesign past de website zich automatisch aan op basis van het apparaat waarin de kijker het ziet.

De betekenis en de werking achter responsive webdesign

Responsive Webdesign is de benadering die suggereert dat het ontwerp en de ontwikkeling moet reageren op het gedrag en de omgeving van de gebruiker op basis van schermgrootte, platform en oriëntatie. In de praktijk komt dit neer op een mix van flexibele rasters en lay-outs, afbeeldingen en een intelligent gebruik van CSS media queries.

Een website die zich aanpast aan de technische voorkeuren van de gebruiker.

Aangezien de gebruiker van laptop naar iPad overschakelt, moet de website automatisch overschakelen om rekening te houden met resolutie, beeldgrootte en scripting mogelijkheden. Met andere woorden, de website moet de technologie hebben om automatisch te reageren op de voorkeuren van de gebruiker. Dit neemt de noodzaak voor een andere ontwerp- en ontwikkelingsfase voor een nieuw apparaat weg. 

Schermresolutie aanpassen

Door een toenemend aantal apparaten zijn er ook steeds meer verschillende soorten schermresolutie waar voor gezorgd moet worden. Elke dag worden er nieuwe apparaten met nieuwe schermformaten ontwikkeld, dit maakt het voor bedrijven lastig om hier op in te spelen Sommige zijn verticaal, andere weer horizontaal en weer andere zijn vierkant van vorm.

portrait-landscape-responsive

Naast het ontwerpen van sites voor zowel de modus ‘landschap’ als ‘portret’ moeten we rekening houden met de honderden verschillende schermformaten. Ja, het is mogelijk om ze te groeperen in grote categorieën. Maar dat kan overweldigend zijn, en wie weet wat er in de toekomst de standaard zal zijn voor de schermformaten? Bovendien maximaliseren veel gebruikers hun browsers niet, waardoor er veel te veel ruimte is voor variatie tussen de schermafmetingen.

De obstakels binnen responsive webdesign

Als het aankomt op responsive webdesign is het van cruciaal belang dat je een professional inschakelt voor het laten ontwerpen van de site. De reden hiervoor is dat er bij responsive webdesign een hele hoop obstakels komen kijken. Hieronder hebben we enkele van deze obstakels op een rijtje gezet, zo weet je waar wij op moeten letten. 

  • Muis v. touch: Ontwerpen voor mobiele apparaten brengt de kwestie van de muis versus touch met zich mee. Op desktopcomputers heeft de gebruiker normaal gesproken een muis om te navigeren en items te selecteren.  Op een smartphone of tablet gebruikt de gebruiker meestal zijn vingers en raakt hij het scherm aan.  Wat misschien gemakkelijk te selecteren lijkt met een muis, kan moeilijk te selecteren zijn met een vinger op een klein plekje op het scherm. De webdesigner moet rekening houden met “touch”.
  • Grafiek en downloadsnelheid: Ook is er de kwestie van afbeeldingen, advertenties en downloadsnelheid. Op mobiele apparaten kan het verstandig zijn om minder afbeeldingen weer te geven dan op het bureaublad, zodat het niet eeuwig duurt voordat een site op een smartphone wordt geladen.  Grotere advertentiegroottes moeten mogelijk worden uitgewisseld voor kleinere advertenties.
  • Apps en “mobiele versies”:  In het verleden heb je er misschien al eens over nagedacht om een app voor jouw website te maken – bijvoorbeeld een iPad-app of een Android-app. Of je zou een mobiele versie hebben die speciaal voor BlackBerry is ontwikkeld. Maar met zoveel verschillende apparaten vandaag de dag wordt het steeds moeilijker om apps en verschillende versies te maken voor elk apparaat en besturingssysteem. Door een professional in te schakelen is mogelijk om te zorgen voor een app die voor meerdere doeleinden kan worden gebruikt. 

Responsive website laten maken?

Vandaag nog een responsive website laten maken voor de juiste prijs? Om er achter te komen wat jij kwijt bent voor het laten maken van een responsive webdesign en welke voordelen hierbij komen kijken kun je via onze website vrijblijvend 4 offertes aanvragen. Dit stelt je in staat om op een eenvoudige wijze inzage te krijgen in het totale project. Door onze voordelige tarieven in combinatie met de beste service zal iedereen in ons land in staat zijn om hun site naar het volgende niveau te helpen. Samen met jou gaan we om tafel zitten om te bekijken wat de mogelijkheden zijn voor het ontwerpen van een site met responsive webdesign.