Responsive webdesign, wat is dat eigenlijk?

Tegenwoordig browsen mensen op allerlei manieren op het internet. Meer en meer mobiel. We zijn in de afgelopen jaren getuige geweest van de geboorte en ontwikkeling van allerlei apparaten, smartphones, Tablets en meer.

Dit heeft geleid tot een vraag naar designers die nieuwe manieren konden bedenken om websites te maken die niet alleen toegankelijk zijn voor computer beeldschermen, maar ook voor al deze nieuwe apparaten.

Webdesign voor ieder apparaat en resolutie?

Het zou praktisch natuurlijk ondoenlijk zijn om bij de komst van een nieuw apparaat een nieuwe, aparte, website te maken. Webdesign en ontwikkeling wordt echter lastiger met al deze nieuwe resoluties en schermen die ieder apparaat weer heeft.

Responsive webdesign is een webdevelopment techniek dat het beeld schetst dat een design op een of andere manier in verschillende formaten, op verschillende apparaten te zien is. Het design past zich als het ware aan, aan de op dat moment gebruikte resolutie.

Responsive webdesign

Deze benadering suggereert dat er een optimaal design wordt getoond, om bijvoorbeeld gemakkelijker te kunnen navigeren, scrollen en lezen op de verschillende apparaten met de verschillende resoluties.

Responsive webdesign met CSS3

Responsive webdesign gebruikt CSS3 media queries, die het mogelijk maken om verschillende flexibele ‘grids’ en layouts voor een bepaalde website te gebruiken.

Als een gebruiker bijvoorbeeld van zijn laptop naar zijn iPhone switcht, dan wordt automatisch de iPhone resolutie aangenomen en de afbeeldingen en scripts worden ook aangepast aan het ontwerp van de iPhone.

Voordelen van het toepassen van responsive webdesign voor je website

Verbeterde toegankelijkheid – Door responsive webdesign te gaan gebruiken, wordt je website altijd toegankelijk voor iedereen.
Eenvoudiger navigatie – Websites, gebouwd voor mobieltjes zijn niet erg interessant op design gebied. Ingewikkelde navigatie wordt niet gebruikt. Responsive webdesign zorgt voor een efficiente gebruikservaring voor zowel de computer gebruikers, als ook voor de mobiele gebruiker.
Zoekmachine optimalisatie (SEO) – Iedere website heeft bezoekers nodig om populairder te worden. Wanneer je verschillende website versies voor verschillende apparaten hebt, de een voor een laptop, de andere voor een iPad, de volgende voor een Android, dan worden er meerdere links vanaf 1 website gestuurd voor verschillende platformen.

Dit principe is lastiger bij te houden en te onderhouden. Responsive webdesign zorgt dat je een website maakt en alle links zullen van en naar die ene website kunnen worden gestuurd.

Aan de slag met responsive webdesign

Betere toegankelijkheid, verbeterde SEO zijn zomaar enkele voordelen om zeker te overwegen om responsive webdesign toe te gaan passen. Een mooie uitdaging voor de hedendaagse webdesigner en developer.

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

4 reacties

  1. Bij Responsive Webdesign heb je vele technieken:
    – Responsive WebDesign
    – Adaptive WebDesign
    – Fluid WebDesign

    Een mooie bron met heel veel informatie, links en tutorials: http://bradfrost.github.com/this-is-responsive/

  2. Koen schreef:

    Mooi bericht en ook zeker informatief. Zelf heeft onze frontend designer ook een leuk artikel hierover geschreven, zeker de moeite waard om eens te lezen.

    <a title="Responsive webdesign" href="http://www.tirato.nl/blog/projecten/responsive-webdesign/">artikel over Responsive Webdesign</a>

  3. Dag Bjorn,

    Bedankt voor dit informatief artikel over responsive webdesign.

    @Wouter J en Koen: Thanks voor jullie links. Is een mooie aanvullen & zeker interessant om lezen als je met webdesign bezig bent.

    Met vriendelijke groeten,
    Johan Santamaria

  1. 11 december 2012

    […] theme is volledig responsive. Ook wordt een ander lettertype gebruikt, een open-source lettertype wat ook te vinden is in de […]

Laat een antwoord achter aan ICTBoost Webdesign Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *