• Ik ontwerp en bouw websites voor
    desktop, tablet en smartphone

  • Ik bouw mijn websites met
    html5, css3 & JQuery

  • Integratie met social media en online branding
    zijn voor mij vanzelfsprekend

  • Ik geef advies over online branding
    en begeleid projecten

Responsive webdesign

PDF Afdrukken Email

responsive webdesign door ethan-marcotteNaast html5 was ‘Responsive webdesign’ hét buzzwoord van 2011 in webdesign-wereld. Ik had al het een en ander gelezen over deze manier om websites te ontwerpen, maar gisteren ben ik er dan toch eindelijk aan toegekomen het boek ‘Responsive webdesign’ van Ethan Marcotte (de bedenker van de term) te lezen. Ik heb het in één ruk uitgelezen. Interessante materie en heel duidelijk uitgelegd. Marcotte schrijft ook heel grappig. Ik begrijp best dat zijn boek binnen korte tijd zo populair is geworden.

Over schermbreedtes

Oké maar wat is het nu eigenlijk: Responsive webdesign? De vraag voor welke schermresolutie een website moet worden gebouwd, staat vaak centraal bij de ontwikkeling van een nieuwe site. Deze vraag is steeds lastiger te beantwoorden. De laatste jaren worden schermen niet alleen groter (denk internettelevisie) maar ook kleiner (iPhone, tablets, mobiele telefoon). Responsive webdesign biedt een oplossing voor dit duivelse dilemma.

De website reageert

Als een website is gebouwd volgens de principes van ‘responsive webdesign’, passen de afmetingen zich aan aan het medium. De vormgeving van de website reageert dan als het ware op de omgeving waarin deze wordt bekeken. Nog steeds abacadabra? Laat ik het eens illustreren aan de hand van een vormgeving van een bestaande website die volgens de principes van responsive webdesign is gebouwd. ( Helaas geen ontwerp uit eigen portfolio, maar dat komt nog wel).

Responsive webdesign

In het ontwerp hierboven zie je eigenlijk drie verschillende schermontwerpen. Het eerste ontwerp laat zien hoe de website getoond wordt op een breed scherm. De tweede is het ontwerp voor een tablet en het laatste ontwerp is geschikt voor een smartphone. Het is duidelijk dat behalve de breedte, ook de afbeeldingen en de content in de pagina verschillen.

De basis van responsive webdesign

Het ontwerpen en bouwen van flexibele websites is mogelijk door het toepassen van drie basisprincipes:

  1. Een flexibel grid
  2. Flexibele media
  3. Media Queries
Laten we deze principes eens onder de loep nemen. 

1. Het flexibele grid

“Nasty, evil pixels. We hates them!”

Bij het ontwikkelen van een website is het doorgaans goed gebruik om met behulp van Photoshop eerst een grafisch ontwerp te maken. Deze mockup geeft een goede indruk hoe de website er op het scherm uit komt te zien. Bij het bouwen is het dan de kunst om deze afbeelding 1:1 te vertalen naar html en css. ‘Pixelperfect’ is hierbij een veelgebezigde term.

Nu, bij responsive webdesign worden alle pixels overboord gezet! De grootte van de elementen in het ontwerp (marges, padding, widths en heights) worden uitgedrukt in percentages; de grootte van de fonts in zogenaamde ems (proportioneel aan de standaard fontgrootte van de browser). Het is de kunst om alle maten in het grafisch ontwerp proportioneel te maken. Zo krijg je een website die volledig schaalbaar is. Als het scherm breder wordt, rekt de website mee.  

Het gaat een beetje ver om in deze blog gedetailleerd in te gaan op de vraag hoe je de juiste percentages en ems kunt berekenen. Ethan Marcotte legt in zijn boek aan de hand van de formule 'target:context=result' heel duidelijk uit hoe je pixels kunt omzetten naar schaalbare eenheden. Als je een heel boek lezen een stap te ver vindt gaan, kan je ook dit artikel van Marcotte lezen. Hierin vat hij de basisprincipes van het ‘fluid grid’ kort samen.

2. Flexibele media

Het tweede fundament van responsive webdesign is het schaalbaar maken van afbeeldingen (en andere media zoals video). Afbeeldingen in een website hebben doorgaans vaste afmetingen. Als een website schaalbaar wordt gebouwd, is het niet wenselijk dat een afbeelding niet meerekt. Dus ook de afmetingen van de media moeten proportioneel worden gemaakt.

Media zijn iets lastiger te schalen dan pixels. Het begint simpel. Alle media krijgen in de stylesheet een maximale breedte van honderd procent. Op deze manier schalen ze mee met hun container (met behoud van aspect ratio). Voor de webbouwers onder ons: de style ziet er zo uit:

object,
img,
embed,
video {
            max-width: 100%;
            }

Maar dan wordt het lastiger. Al snel duiken er problemen op:

  • Oudere browsers als Internet Explorer 6 (ja,ja) ondersteunen max-width niet. Hiervoor is een simpele oplossing: max-width: 100%; vervangen door width: 100%; 
  • In Windows wordt tekst in een geschaalde afbeelding onleesbaar. Om dit probleem op te lossen is er script geschreven door Marcotte: imgSizer
  • Achtergrondafbeeldingen zijn soms lastig schaalbaar en moeten stuk voor stuk worden bekeken om een goede work-a-round te vinden

Marcotte geeft bij elk probleem ook een mogelijke oplossing maar het is duidelijk dat voor het schaalbaar maken van media iets meer creativiteit nodig is dan bij het wegwerken van pixels.

Laadtijd

Een speciale zorg bij afbeeldingen en andere media is de laadtijd. Als je een grote schaalbare afbeelding gebruikt in een website dan moet de browser deze laden. Dit is waarschijnlijk geen probleem op je pc thuis, maar op een smartphone zorgt het voor onnodige wachttijd en ergernis. Op de website van Smashing Magazine vond ik hiervoor een elegante oplossing van Filament Group. Met behulp van een combinatie van javascript en html (alle bestanden staan op Github) wordt aan de hand van de schermresolutie een kleine of grote versie van een afbeelding geladen.

3.Media queries

De schaalbare website vormt de basis van responsive webdesign. Toch is schaalbaarheid alleen geen garantie voor een perfecte website. Er is nog meer nodig om een website te maken die zich aanpast aan veranderende schermresoluties en apparatuur. Hier komen de media queries om de hoek kijken.

Media types als ‘screen’, ‘print’ en ‘handheld’ bestonden al in css 2. Media types maken het mogelijk om een website optimaal te tonen op verschillende media (papier, presentatie enzovoorts). Ze zijn echter niet fijnmazig genoeg om een website geschikt te maken voor alle apparaten die er tegenwoordig in omloop zijn.

Media queries kunnen als aanvulling op media types worden gebruikt om de fysieke kenmerken van een apparaat en browser te onderzoeken. Door te testen welke schermbreedte en/of toestel aanwezig is, wordt het mogelijk om afzonderlijke stylesheets te definiëren. Deze stylesheets zorgen ervoor dat de website er ook op een smartphone of een heel breed scherm picobello uitziet.

In onderstaand voorbeeld wordt de achtergrondkleur van een element (een paragraaf) grijs als de schermbreedte kleiner is dan 600 pixels (bijvoorbeeld van een iPhone).

@media screen AND (max-width: 600px) {

  p {

    background: #ccc;

  }

}

Wat gebeurt er in dit stukje code? Er wordt getest op het media type en de schermbreedte. Als het een beeldscherm is dat maximaal 600 pixels breed is, dan wordt de achtergrondkleur donkergrijs. 

Media queries zijn heel krachtig. Je kunt meerdere voorwaarden aan elkaar plakken.

@media screen AND (min-device-width: 480px) AND (orientation: landscape) {

            p {

                        background:#000;

            }

}

Dit stukje code test of het om een beeldscherm gaat voor alle apparaten van meer dan 480 pixels breed die in landschapsmodus worden vastgehouden. Als aan alle drie de voorwaarden wordt voldaan, is de achtergrondkleur van de paragraaf zwart.

Gevolgen voor vormgeving

Door media queries te gebruiken kan met behulp van stylesheets niet alleen de vormgeving maar ook de indeling van een webpagina veranderd worden. Dit kan heel handig zijn bij kleinere schermen. Door media queries te gebruiken kun je bepalen in welke volgorde de gebruiker de inhoud van jouw website te zien krijgt. In onderstaand voorbeeld wordt duidelijk dat de indeling en inhoud van de website per medium verschillen: plaatjes verdwijnen, de volgorde van teksten verandert en de navigatie krijgt een andere plek.

Robot or not 

Browserondersteuning

Het goede nieuws is dat media queries breed ondersteund worden. Internet Explorer (altijd het zorgenkindje) biedt ondersteuning vanaf versie 9. Een oplossing voor oudere browsers is het javascript css-mediaqueries.js op te nemen in je code. Als je alleen de maximale en minimale breedte wilt testen in je media queries, heb je genoeg aan een wat eenvoudiger script: respond.js.

Responsive content

Tot zover is het verhaal over responsive webdesign vrij technisch. Het is natuurlijk fantastisch als je met één website verschillende apparaten kunt bedienen. Er is echter ook een grote MAAR. Zoals ik al eerder aanstipte verandert bij responsive webdesign niet alleen de vormgeving maar ook de inhoud van de pagina. En dan komen de vragen want wat laat je wanneer zien? Hoe bepaal je wat voor een gebruiker het meest relevant is?  
De gebruikersbehoefte is afhankelijk van de omstandigheden. Iemand die in de trein zit op weg naar een sollicitatiegesprek is waarschijnlijk uitsluitend geïnteresseerd in het vinden van de juiste adresgegevens van jouw bedrijf, maar bekijkt diezelfde persoon jouw website op de bank thuis dan is hij waarschijnlijk op zoek naar andere informatie. Een flinke kluif dus voor interaction designers.

Mobile first

Een goede benadering bij het bepalen van de juiste content en functionaliteit voor verschillende apparaten is ‘mobile first’. Dit houdt in dat bij het ontwerpen wordt uitgegaan van de kleinste schermbreedte. Hierbij moeten de belangrijkste taken en informatie een prominente plaats krijgen. Vanuit deze basis wordt het ontwerp voor bredere schermen uitgewerkt. Een goede technische ondersteuning van deze benadering is het framework 320andup dat de technische vereisten van een mobiel apparaat als basis neemt en deze uitbouwt voor grotere schermen. Deze werkwijze heeft als groot voordeel dat de website op een mobiel apparaat uitstekend presteert omdat onnodige code niet wordt geladen.

Mijn volgende project

Op dit moment heb ik 2 opdrachten voor het ontwerpen en bouwen van een website. Ik sta te trappelen om deze te ontwikkelen aan de hand van de principes van responsive webdesign. Een heel leuke uitdaging! Ben benieuwd wat jij vindt van deze manier van ontwerpen. Zie jij nadelen? Of alleen maar voordelen?

 


Reacties
- 11-05-2012 at 10:38

goed artikel, ook ik ben bezig met mijn eerste responsive design website, en heb natuurlijk al de fout gemaakt om met een grote versie te beginnen en die te verkleinen :(
Op zich ben ik redelijk tevreden met het tot nu toe behaalde resultaat, maar om ook op iphone en ipad goed te presenteren is toch een hele uitdaging, die ik nog niet heb geslecht.

Daar dit design nog in de steigers staat heb ik geen voorbeeld meegestuurt...
- 11-05-2012 at 16:13

Hallo Micha, dankjewel voor jouw reactie! Hoop dat je iets aan de informatie hebt. Ik vind het in de praktijk ook nog knap lastig maar gelukkig bestaan er al wel veel goede frameworks en boilerplates om mee aan de slag te gaan. Hoef je het wiel niet helemaal zelf uit te vinden maar ook tweaken kan best ingewikkeld zijn ;)
- 03-05-2013 at 14:28

Meerdere websites voor verschillende mediums is niet alleen kostbaar. Een ander voordeel aan een responsive website is dat er maar vanuit één broncode gewerkt hoeft te worden. Leuk geschreven artikel en leerzaam voor degene die nog niet veel over dit onderwerp afweten.
- 20-09-2013 at 14:31

Bijzonder helder en leerzaam artikel. Heb mijn sites gebouwd met joomla en hoop daar tzt ook responsive websites van te kunnen maken.
Dennz
- 19-04-2014 at 19:39

Hoi Lydje, wat een handig artikel! Ik ben sinds kort begonnen met webdevelopment en natuurlijk mag een responsive design daar tegenwoordig niet aan ontbreken. Ik heb echter wel eerst een desktop variant gemaakt omdat ik een fullscreen design wilde en deze op een groot scherm het beste tot zijn recht komt. Ik heb het design nog niet omgezet naar een website, maar ik denk dat ik nu eerst een mobile variant ga maken en daarna pas ga uitbreiden naar de desktop variant!
Jos
- 04-05-2014 at 00:40

Vandaag pas dit artikel gelezen. Is erg duidelijk zeker voor mijn leeftijd van 76 . Weet u of er al boeken zijn die (liefst in nederlandse taal, maar is niet noodzakelijk) wat uitgebreider dit behandelen?
gr/ Jos
Laat een reactie achter
Captcha

Lydie PolakDagelijks bezig met websites, social media, zoekmachines, Google, e-marketing en branding. Verder kan ik niet genoeg krijgen van films, detectives (ja, ook Midsommer Murders), boeken, pinnen, bloggen, mijn gezin, katten en mijn iPhone. Benieuwd naar mijn werk? Kijk dan op mijn website www.lydiepolak.nl.