Dit e-boek is voorzien van een verborgen, persoonlijk watermerk.
Het verspreiden of openbaar maken van dit e-boek is niet toegestaan.

This e-book contains a hidden and personal watermark. Distribution is prohibited.

VOORWOORD

Taal heeft magische eigenschappen. Het woord ‘glamour’, dat oorspronkelijk synoniem was voor magie of bezwering, is een afgeleide van het woord ‘grammatica’. Van alle mogelijkheden die taal biedt, is naamgeving de meest magische en krachtigste.

De korte geschiedenis van webdesign demonstreerde al de transformatieve kracht van taal. Jeffrey Zeldman gaf ons de term ‘webstandaarden’. Jesse James Garrett bracht met het woord ‘Ajax’ een ommekeer in de aard van interactie op het web.

En toen Ethan Marcotte de term ‘responsive webdesign’ bedacht, brouwde hij iets bijzonders. De technologieën bestonden al: vloeiende rasters, flexibele afbeeldingen en mediaquery’s. Maar Ethan verenigde deze technieken onder een enkele noemer en veranderde de manier waarop we over webdesign denken.

Ethan heeft iets met woorden. Uiteraard is hij de aangewezen persoon om een boek over responsive webdesign te schrijven. En wat denk je, hij schreef dat boek over responsive webdesign.

Verwacht je nu een boek vol tips en trucs waarmee je wat oppervlakkige flair in je websites brengt, zoek dan verder, vriend. Dit pareltje werkt op een dieper niveau.

Lees het boek door (dat duurt niet zo lang) en let dan eens op hoe je het volgende project aanpakt. Misschien herken je door de luchtige, vermakelijke en soms hilarische stijl van Ethan niet direct de diepe kracht van zijn woorden, maar ik beloof je dat je werk zal profiteren van de goochelkunst die hij met je denkpatronen zal uitvoeren.

Ethan Marcotte is een tovenaar. Bereid je voor op de betovering.

– Jeremy Keith

1
WAT IS RESPONSIVE?

‘Er is iets dat niet van een muur houdt…’

– ROBERT FROST, ‘Mending Wall’

TERWIJL IK BEGIN TE SCHRIJVEN, realiseer ik me dat ik niet weet of je deze woorden wel op gedrukt papier leest, in de vorm van een klein boekje. Misschien zit je aan je bureau en lees je op je beeldscherm de digitale versie van dit boek. Of zit je in de trein, op weg naar je werk, en blader je op je telefoon of tablet deze bladzijden door. Of misschien zie je de woorden niet eens zoals ik ze zie. Misschien luister je nu naar je computer die het boek voorleest.

Eigenlijk weet ik maar weinig over je. Ik weet niet hoe je dit leest. Dat kan ik niet weten.

De uitgeverswereld heeft eindelijk een van de belangrijkste eigenschappen van het web overgenomen: flexibiliteit. Boekontwerper en uitgever Craig Mod weet zeker dat zijn beroep in sneltreinvaart een ‘post artefact’-fase ingaat¹, en dat het digitale tijdperk ons idee van wat een boek is herziet.

Webdesigners worstelden hier al langer mee. Ons beroep heeft zelfs nog nooit een eigen ‘artefact’ gehad. Ondanks alle moeite levert webdesign geen tastbare objecten op en hebben we niets wat we kunnen vasthouden en koesteren en aan onze kinderen kunnen doorgeven. Maar hoe vluchtig de aard van ons werk ook is, de woordenschat waarmee we erover spreken is alles anders dan dat: ‘witruimte’, ‘regelafstand’ of het veelbespotte ‘boven de vouw’. Elk woord is rechtstreeks afkomstig uit de drukkerswereld. Het is van de plank gehaald, afgestoft en hergebruikt voor ons nieuwe, digitale medium.

FIGUUR 1.1: Ook als het nog leeg is, bepaalt het canvas de grenzen van een kunstwerk (Foto door Cara StHilaire²)

Een deel van dit hergebruik is volkomen natuurlijk. We zijn immers gewoontedieren: verhuizen we naar een andere stad of krijgen we een nieuwe baan, dan leggen we eerdere ervaringen over de nieuwe, onbekende situatie vast en bepalen zo onze richting. En omdat het web nou eenmaal een jong medium is, lenen we logischerwijs wat termen die we al kennen. Grafisch ontwerp kent een rijke, meerdere eeuwen omvattende geschiedenis en het zou dom zijn als we de taal ervan niet gebruiken om onze tak vorm te geven.

Maar drukwerk gaf ons meer dan de taal alleen. We hebben nog een ander concept geleend, een waar je misschien niet snel aan denkt: het canvas (FIGUUR 1.1).

In elk creatief veld begint de kunstenaar zijn of haar werk met de keuze van het canvas. Een schilder kiest een vel papier of een stuk linnen en een beeldhouwer gaat naar een steengroeve voor een blok steen. De keuze van het canvas is een belangrijke creatieve stap. Voor de eerste penseelstreek gezet wordt en voordat de hamer de beitel raakt, geeft het canvas het kunstwerk al een vorm, een breedte en hoogte, en bepaalt het de grenzen waarbinnen het werk zal ontstaan.

FIGUUR 1.2: Het browservenster, ons canvas. (In goede en in slechte tijden)

En op het web proberen we dit proces na te bootsen. We gebruiken zelfs dezelfde naam. In onze favoriete beeldbewerker maken we een ‘canvas’: een leeg document met een breedte en hoogte en diepte en vorm. Het probleem hierbij is dat we een stap verwijderd zijn van ons eigenlijke canvas: het browservenster met al zijn inconsistenties en onvolmaaktheden (FIGUUR 1.2). Want laten we eerlijk zijn, zodra ons design online gaat, is het overgeleverd aan de grillen van bezoekers, hun lettertypeinstellingen, de kleur van hun beeldscherm, en aan de vorm en het formaat van hun browservenster.

Met al die onzekerheden in gedachten, leggen we onszelf beperkingen op. We stellen het lettertype in op pixels of gaan bij de afmetingen van de opmaak uit van een minimale schermresolutie. Het vastleggen van die beperkingen lijkt op het kiezen van het canvas. We creëren parameters om mee te werken en zekerheden die ons werk beschermen tegen de inherente flexibiliteit van het web.

Maar het beste, en vaak ook het slechtste, van het web is dat het vrij snel met onze beperkingen aan de haal gaat. Als ik cynisch was, zou ik zelfs zeggen dat het in staat is om alle beperkingen die we het opleggen van zich af te schudden. En de parameters van onze ontwerpen vergaat het niet anders: ze worden snel vergeten. Zit een browser maar iets onder de minimumbreedte die je verwachtte (FIGUUR 1.3), dan ziet de bezoeker een horizontale schuifbalk en bijgesneden inhoud. Maar ook onze klanten merken dit (FIGUUR 1.4), want wanneer we uitgaan van een minimale schermresolutie, dan lopen belangrijke koppelingen of elementen het risico dat ze worden weggesneden door de voorkeursinstellingen van de kijker.

FIGUUR 1.3: Een kleine afwijking van onze ‘ideale’ parameters kan een negatief effect hebben op de gebruiker…

MAAK DE RIEMEN MAAR VAST

Meer dan een decennium geleden schreef John Allsopp ‘A Dao of Web Design’³. Als je dit artikel nog niet kent, moet je het nu absoluut lezen. (Echt. Ik wacht wel.) Dit is mijn favoriete artikel over webontwerp en het is nog net zo actueel als toen het werd geschreven. John zegt dat:

De controle die ontwerpers hebben over drukwerk en ook vaak wensen voor het web, is simpelweg het resultaat van de beperking van de gedrukte pagina. Het feit dat het web die beperkingen niet kent, zouden we moeten omhelzen en in ons design zouden we ons op deze flexibiliteit moeten richten. Maar eerst moeten we ‘de eb en vloed van dingen’ accepteren.

John schreef dit in de beginjaren van het web, in een periode waarin ontwerpers op drukwerk gebaseerde vormgeving begonnen toe te passen op dit nieuwe medium. Veel van wat hij bijna vijftien jaar geleden schreef, is nog steeds actueel. Want nog nooit was het web zo in beweging en veranderlijk als nu.

FIGUUR 1.4: … of op onze zaken en klanten. (U wilt weten wat een ‘reg’ is? Dat is de deels niet zichtbare koppeling ‘Register now’)

We zijn al een tijdje geleden onze overgangsperiode binnengetreden. We hebben nu te maken met een browserlandschap dat steeds minder verbonden is met desktopcomputers en met apparaten die tegelijkertijd kleiner en groter worden. Over een paar jaar wordt het web waarschijnlijk voornamelijk bezocht met apparaten met kleine schermen⁴, terwijl moderne spelconsoles het web toegankelijk maken via grootformaat televisieschermen. Tabletcomputers zijn in korte tijd razend populair geworden. Deze tablets bieden ons een internettoegang die ergens tussen mobiel en op desktop gebaseerd in zit.

Linksom of rechtsom ontwerpen we voor meer apparaten, voor meer inputtypen en voor meer resoluties dan ooit tevoren. Het web heeft afstand genomen van de desktopcomputer en keert er niet naar terug.

Helaas leken onze eerste pogingen voor webontwerp gericht op andere apparaten dan pc’s erg op onze oude benadering, waarbij we onszelf uit onzekerheid beperkingen oplegden. Een tijdje geleden stuurde een vriendin me een link naar een artikel dat ze op haar telefoon had gelezen:

http://www.bbc.co.uk/news/mobile/science-environment-13095307

Zie je de directory /mobile/? De beheerder van de website had de ‘mobiele versie’ op een afzonderlijke URL gezet, en ging uit van een paginabreedte van 320 pixels. Maar zodra de link gedeeld wordt op Twitter, Facebook of via e-mail, zijn bezoekers veroordeeld tot die weergave voor kleine schermen, ongeacht het apparaat dat ze gebruiken. En eerlijk gezegd was het vreselijk om deze pagina op mijn desktopcomputer te lezen.

FIGUUR 1.5: Nu zie je het en nu niet meer: een slimme ruit wordt automatisch ondoorzichtig⁷

Ik zeg niet dat mobiele websites per se lelijk zijn of dat er geen geldige redenen zijn om ze te maken. Maar ik denk wel dat het optimaliseren van onze content voor afzonderlijke apparaten op de lange termijn een onhoudbare situatie is. De afgelopen jaren hebben we gezien dat we het tempo van technologische ontwikkelingen simpelweg niet kunnen bijhouden. Willen we werkelijk voor elke nieuwe browser of elk nieuw apparaat een aangepaste website maken?

En als we dat niet doen, wat is dan het alternatief?

REAGERENDE ARCHITECTUUR

Zolang ik me kan herinneren ben ik al geïnteresseerd in architectuur. Voor mij als webdesigner hebben de beperkingen van de architectuur iets aantrekkelijks. Van schets tot schema, van fundering tot façade: elke stap in het architectonisch proces is permanenter dan zijn voorgaande stap. De Engelse architect Christopher Wren schreef in Parentalia: ‘architectuur richt zich op eeuwigheid’. En daar zit wat in. De creatieve keuzen van een architect blijven jaren, soms zelfs eeuwen zichtbaar.

Na een dag schelden op Internet Explorer klinkt dit soort houdbaarheid echt erg aantrekkelijk.

In de laatste jaren zorgt een relatief nieuwe designvorm met de naam ‘responsive architecture’ voor grote veranderingen in de permanente aard van architectuur. Het is een relatief jonge discipline, maar deze meer interactieve vorm heeft zichzelf al op meerdere interessante manieren geopenbaard.

FIGUUR 1.6: Het is meer dan een interessante kunstinstallatie. Deze muur voelt je aanwezigheid en past zich aan je nabijheid aan⁸

Kunstenaars hebben geëxperimenteerd met oppervlakken die met een bepaalde klank reageren op je stem⁵ en met woonkamers die zichzelf aanpassen aan de aanwezigen⁶. Zo ontwikkelde een bedrijf ‘slim glas’, dat ondoorzichtig wordt en meer privacy biedt zodra er meer dan een bepaald aantal personen in een ruimte aanwezig is (FIGUUR 1.5). En met beweegbare materialen en robotica ontwikkelde een Duitse designadviseur een ‘muur’ die buigt en bolt zodra mensen de muur naderen, en zo afhankelijk van het aantal aanwezigen meer of minder ruimte biedt (FIGUUR 1.6).

Responsive designers concentreren zich niet op het creeëren van ruimte die het gedrag van de bezoekers beïnvloedt, maar onderzoeken mogelijkheden om architectuur en inwoners op elkaar te laten reageren.

DE VOLGENDE STAP

Ik vind het fascinerend hoe architecten proberen de inherent met hun vakgebied verbonden beperkingen te overwinnen. Webontwerpers, die zich in een veranderend landschap met nieuwe apparaten en context bevinden, moeten nu proberen de door onszelf opgelegde beperkingen van het oorspronkelijk flexibele web te overwinnen.

We moeten loslaten.

We moeten niet voor elk apparaat of elke browser een apart ontwerp maken, maar moeten het als een element van een geheel gaan behandelen. Met andere woorden, we kunnen websites ontwikkelen die flexibeler zijn en zich bovendien aanpassen aan de media waarmee ze getoond worden.

Kortom, we moeten overstappen op responsive webdesign. We kunnen de flexibiliteit van het web gebruiken, zonder dat we de voor ons noodzakelijke controle in de vormgeving kwijtraken. En daarvoor hoeven we alleen maar op standaarden gebaseerde technologieën te gebruiken en onze mening over online design iets bij te stellen.

De ingrediënten

Wat is er dan nodig voor een responsive design? In termen van frontenddesign, zijn er drie hoofdingrediënten:

een flexibele, rastergebaseerde lay-out,

flexibele afbeeldingen en media en

mediaquery’s, een module van de CSS3-specificatie.

In de volgende drie hoofdstukken komt elk van deze drie ingrediënten (het flexibele raster, vloeiende afbeeldingen en media, en CSS3 mediaquery’s) aan bod en ontwikkelen we een flexibeler en responsive webdesign. En ondertussen ontwerpen we een design dat zich aan de beperkingen van het browservenster of het apparaat aanpast. Een design dat aansluit op de behoeften van de gebruiker.

Maar voor we daaraan beginnen, wil ik wat opbiechten. Ik ben gek op sciencefiction. Ik ben dol op laserpistolen, robots en vliegende auto’s en ook op films en televisieseries waarin deze in grote hoeveelheden voorkomen. Eerlijk gezegd vind ik de kwaliteit van de films en series zelfs minder belangrijk. Of de film nou geregisseerd is door Kubrick of geproduceerd is met een budget dat lager is dan wat ik voor mijn lunch betaalde; geef me minstens een ruimteschip en ik ben gelukkig.

Alle goede en slechte sciencefictionfilms die ik zag hebben een aspect gemeen: de geheime robot. Ik weet zeker dat je de verhaallijn ook wel eens bent tegengekomen. Hij begint altijd met een kranige groep avonturiers die een onbekende vijand willen overwinnen. Een van de helden is de leider, bewapend met pittige oneliners en stalen oplossingen. Maar ergens binnen hun rangen sluimert… een geheime robot. (Onheilspellende muziek begint.) Dit slinkse, duivelse apparaat is een gevoelloos, berekenend wezen van koel staal, maar ziet eruit als een mens en heeft een onmiskenbaar snood plan: de ondergang van onze groep helden.

FIGUUR 1.7: Het ontwerp voor Robot or Not, in al zijn bliepende, bitmappige glorie

Het meest dramatische moment in de film is de ontmaskering van de geheime robot. Je weet wie de held is en je weet wie de robot is. Maar wat de andere karakters betreft blijf je onzeker en vraag je je af wie een robot is en wie niet.

Persoonlijk heb ik nooit begrepen waarom dit zo moeilijk is. Ik mis de dagen van Johnny 5 en C-3PO. Toen herkende je een robot zodra je hem zag en verschool hij zich niet in van die synthetische huid-kolder. Om deze onduidelijkheid uit de wereld te helpen, heb ik zelf actie ondernomen. Ik heb een eenvoudige website ontworpen met de naam ‘Robot or Not’ (FIGUUR 1.7). Die helpt ons bij de speurtocht naar wie een robot is en wie niet. Zo weten we wie onze vriend is en wie onze ijzerhoudende vijand.

Goed, misschien ben ik de enige met dit probleem.

Ongeacht het nut van deze site, laat ik je aan de hand van dit bescheiden design precies zien hoe je een responsive site bouwt. In de volgende hoofdstukken ontwikkelen we samen Robot or Not, waarbij we gebruikmaken van flexibele rasters, afbeeldingen en mediaquery’s.

Misschien ben je niet zo achterdochtig. En anders heb je waarschijnlijk genoeg van mijn geklets en wil je gewoon het eindresultaat zien. Ga in dit geval naar http://responsivewebdesign.com/robot/ en kijk daar wat rond.

Nog hier? Mooi. We beginnen.

OVER A BOOK APART

Webdesign is een multidisciplinaire vaardigheid met nauwkeurige focus. En dat is de gedachte achter onze korte boeken voor mensen die websites maken. Onze besprekingen van nieuwe en belangrijke onderwerpen in design en development hebben stijl, zijn helder en vooral beknopt. Want designers en ontwikkelaar hebben geen tijd te verliezen.

Elke titel in onze reeks werpt licht op een lastig onderwerp. En dat doen we snel, zodat je vlot weer aan het werk kunt. Dank je voor het ondersteunen van onze missie om professionals de gereedschappen te geven die ze nodig hebben om het web te ontwikkelen.

OVER DE AUTEUR

Ethan Marcotte (http://ethanmarcotte.com) is een veelzijdig designer en ontwikkelaar. In zijn werk komt zijn passie voor het snijpunt tussen code en dwingend design duidelijk naar voren. Gezeteld in Cambridge, Massachusetts, VS had Ethan het geluk te kunnen werken voor klanten als New York Magazine, Stanford University, Sundance Film Festival en W3C. En wat ook interessant is: Ethan heeft een blog (http://unstoppablerobotninja.com) en blijft maar kletsen op Twitter (@beep). Hij is ook lang.

Ethan is schrijver en technisch redacteur bij A List Apart, het tijdschrift voor mensen die websites maken. Hij is ook een populair docent en sprak onder andere op ‘An Event Apart’, het interactieve festival ‘SXSW’, tijdens ‘Future of Web Design’ en op de ‘In Control’-conferentie van AIGA.

De ervaren auteur werkte samen met Happy Cog-oprichter Jeffrey Zeldman aan de derde editie van Designing With Web Standards (2009) de klassieke titel die in de boekenkast van elke zichzelf respecterende designer staat. Ook schreef hij bijdragen voor Handcrafted CSS (New Riders, 2009), Web Standards Creativity (friends of ED, 2007) en Professional CSS (Wrox, 2005).

Responsive Webdesign is het eerste boek dat Ethan alleen schreef en hij is er verdraaid trots op. Hij bedankt je dat je dit boek leest.

LEES OOK

isbn 978 90 430 3004 5

LEES OOK

isbn 978 90 430 2680 2

ISBN:978-90-430-3021-2
NUR: 994
Trefw: webdesign

Dit is een uitgave van Pearson Benelux bv,
Postbus 75598, 1070 AN Amsterdam
Website: www.pearson.nl – e-mail: amsterdam@pearson.com

Vertaling en zetwerk: Shyla van Venrooij en Brian Gramberg voor Fontline Redactie, omslag en productie: Fontline, Nijmegen

© Copyright 2013 Pearson Benelux voor de Nederlandstalige editie.

Vertaling van: Responsive WebDesign, Ethan Marcotte.

Authorized Dutch translation of the English edition of Responsive WebDesign, ISBN 9780984442577 © 2011 Ethan Marcotte. This translation is published and sold by permission of A Book Apart, which owns or controls of all rights to publish and sell the same.

Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen, of enige andere manier, zonder voorafgaande toestemming van de uitgever.

Voor zover het maken van kopieën uit deze uitgave is toegestaan op grond van artikel 16B Auteurswet 1912 jo het Besluit van 20 juni 1974, St.b. 351, zoals gewijzigd bij Besluit van 23 augustus 1985, St.b. 471 en artikel 17 Auteurswet 1912, dient men de daarvoor wettelijk verschuldigde vergoedingen te voldoen aan de Stichting Reprorecht. Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatie- of andere werken (artikel 16 Auteurswet 1912), in welke vorm dan ook, dient men zich tot de uitgever te wenden. Ondanks alle aan de samenstelling van dit boek bestede zorg kunnen noch de redactie, noch de auteurs, noch de uitgever aansprakelijkheid aanvaarden voor schade die het gevolg is van enige fout in deze uitgave.