Responsive webdesign is een ander woord voor mobiel vriendelijke webdesign. Dit betekent dat bij het bouwen van een website rekening gehouden wordt met meerdere schermformaten. Denk hierbij aan computer, laptop, tablet en smartphone. Tegenwoordig worden bijna alle nieuwe websites responsive gebouwd omdat gemerkt wordt dat bezoekers website steeds vaker benaderen via telefoon of tablet.
Een ‘niet-responsive’ website via een mobiel apparaat bekijken
Is een website niet responsive en wordt deze benaderd via een mobiel apparaat? Dan zal de gebruiker hoogst waarschijnlijk al snel afhaken door de negatieve gebruikservaring. Er moet dan namelijk veel horizontaal gescrollt worden om alle inhoud te kunnen lezen. Ook de lettergrootte van een niet-responsive website op een mobiel apparaat is vaak te klein en knoppen zijn moeilijk aan te tikken. Bepaalde handelingen die bij het bezoeken van een website op de computer heel normaal zijn, zijn op een mobiel apparaat niet mogelijk, zoals hoveren (met je muis over een element gaan waarna er iets gebeurt op je scherm). Ook wordt flash niet altijd ondersteund op mobiele apparaten en zijn afbeeldingen al snel te zwaar waardoor de pagina langzaam laadt.
Hoe dan?
De belangrijkste manier om een website responsive te maken is door breedtes en hoogtes van elementen geen statische waarde, maar een flexibele waarde te geven. Dit houdt in dat je bijvoorbeeld aangeeft dat een afbeelding niet 300 pixels breed is, maar bijvoorbeeld 50% breed. Zowel op een computerscherm als op een smartphone scherm vult de afbeelding dan de helft van het scherm, terwijl een afbeelding van 300 pixels breedt op een smartphone al snel heel het scherm vult en op een computerscherm maar een kleine fractie.
Media Queries
Een andere manier is door het gebruiken van zogeheten media queries. Dit zijn regels die de code van een website als het ware opdelen afhankelijk van het media apparaat waarmee de website wordt benadert.
Een simpel voorbeeld van media queries is:
body {
background: red;
}
/* Computer scherm */
@media all and (min-width: 770px) {
body { font-size: 12px; }
}
/* iPad scherm */
@media all and (max-width: 769px) and (min-width: 481px) {
body { font-size: 13px; }
}
/* iPhone scherm */
@media all and (max-width: 480px) and (min-width: 1px) {
body {font-size: 14px; }
}
Wanneer een website met dit script via een smartphone wordt geopend, zal alleen het laatste stukje script gelezen worden (omdat de afmetingen, oftewel de viewport van het apparaat tussen de 1 en 480px liggen) en zal de tekst een grootte van 14px hebben. Bij benadering via een iPad zal het middelste stukje gelezen worden en krijgt de tekst een grootte van 13px. Bij benadering via een scherm groter dan 770px breed (dus laptop, computer of groter) is de tekst 12px groot. Op alle apparaten zal de achtergrond van de website rood zijn, omdat dit stukje script niet aan een bepaalde schermgrootte gekoppeld is. Dit is slechts een zeer simpel voorbeeld van het gebruik van media queries.
Mobile first
Veel webmasters gaan uit van een ‘mobile first’ principe. Dit betekent dat websites in eerste instantie voor mobiel gebruik ontworpen worden. Pas nadat de mobiele versie af is, zal ook gekeken worden naar grote viewports.
Responsive E-mailmarketing
Ook e-mails worden tegenwoordig steeds vaker responsive. Dit omdat ook de viewport van e-mailprogramma’s (bv Outlook) verschillende afmetingen hebben.
Website responsive laten maken
Steeds meer webdesignbureaus zorgen ervoor dat alle nieuwe websites standaard responsive worden gebouwd. Zo ook Digital Mizu, een jong bedrijf uit Rotterdam die niet alleen responsive websites bouwt, maar ook bestaande websites responsive kan maken. Op deze manier hoeft er geen geheel nieuwe website gebouwd te worden, maar kunnen er aanpassingen in de bestaande code gemaakt worden waardoor er een hoop tijd en geld wordt bespaard en de website toch is aangepast op het hedendaagse gebruik van media.
http://nl.wikipedia.org/wiki/Responsive_webdesign
http://www.digitalmizu.com
