Vroeger was het vrijer: de geschiedenis van webdesign

Taschen heeft een nieuw boek uit. Web Design: The Evolution of the Digital World belicht de geschiedenis van webdesign sinds 1990. Pagina na pagina herken ik de voorbeeld-sites uit vervlogen tijden en betrap ik me op nostalgie naar de spannende pioniersjaren waarin we als jonge ontwerpers geestdriftig op de kar van een nieuw medium sprongen. Vandaag, 25 jaar later, zijn er zoveel meer mogelijkheden. Maar gek genoeg ook zoveel minder.

In zijn intro bij Web Design (2019) stelt auteur Rob Ford dat het internet de grootste omwenteling is sinds de Industriële Revolutie. ‘De komende jaren gaan mensen het ongelofelijk vinden dat ze familieleden hebben die geboren zijn vóór het internet.’ Snelle veranderingen zijn zo inherent aan dit medium dat ook het geheugen ervan snel verbleekt. Wie herinnert zich nog AltaVista en Yahoo, andere zoekmachines naast Google? Of hoe de vorige versie van je vaste krantensite eruitzag? Of websites met Flash? En de eerste telefoons waarop je ook kon surfen?

Jaar per jaar delft Web Design de visuele en technologische ontwikkeling van het web weer op, telkens met niet alleen facts en figures (wist je bijvoorbeeld dat de allereerste webcam, in 1993 op Cambridge University, gericht was op een koffiezetapparaat, zodat alle medewerkers op de gang konden volgen of er nog koffie was?), maar vooral met veel plaatjes van websites die dat jaar iets deden wat nooit eerder was vertoond.

Het boek toont vernieuwing na vernieuwing. ‘Dit is een boek’, zo besluit Ford, ‘dat sommige lezers zullen koesteren als een herinnering aan een tijd in hun leven die hen een totaal nieuwe richting gaf.’ En dat doet het ook. Ruim 600 pagina’s lang blader ik niet alleen langs perfect gedefinieerde en omschreven designperiodes, maar ook langs mijn persoonlijke herinneringsgeschiedenis als webdesigner.

Ondanks zoveel meer technische mogelijkheden is de vormgeving van het internet net minder creatief geworden.

Wat me daarbij is opgevallen? Ondanks zoveel meer technische mogelijkheden is de vormgeving van het internet net minder creatief geworden. In oorsprong was webdesign nog het exclusieve domein van grafische ontwerpers. Omdat toen van templates geen sprake was, moest je telkens opnieuw zelf nadenken over de vormgeving.

Dat is vandaag wel even anders. Nu zorgen webdesign-conventies voor consistentie in het consulteren van informatie. Shopping carts, loginprocedures, invulformulieren: allemaal lijken ze sterk op elkaar en zorgen ze zo voor een gevoel van vertrouwen en ‘mastering van de data’. Voor de gebruikers is dat handig: ze weten wat ze kunnen verwachten en snappen ook meteen hoe ze een website kunnen bedienen. Voor ontwerpers daarentegen vormt die uniformering een spijtige verschraling, weg van de designspirit van weleer. Afwijken van die nieuwe conventies zou zelfs schadelijk kunnen zijn voor de functie van de website. Tegenwoordig moet een site nu eenmaal vooral meetbaar zijn, wat gestandaardiseerde lay-out-elementen vereist.

Ook achter de schermen van het internet is er dus veel veranderd. In die experimentele pioniersperiode leerde je als vormgever de onderliggende code door de broncode van de website te doorgronden en er vervolgens op voort te bouwen. Hedendaagse broncodes daarentegen zijn ‘geminified’ (om sneller in te laden) of bewust verborgen en bijna altijd bedolven onder code van plug-ins, social media tags en tientallen Javascripts.

Voor een beginnend webontwerper is het nu zo goed als onbegonnen werk om zowel de technische kant als de lay-out van een website perfect te beheersen. In de praktijk werken nu dan ook verschillende specialisten samen om een website te ontwerpen: de Web Designer, de Front End Developer, de Web Developer, de UI Designer, de UX Designer, de Interaction Designer, de Content Strategist, de Dev Ops, de SEO Specialist... Geïnspireerd door Web Design, en niet gespeend van enige nostalgie, blader ik terug van ‘tailor made design’ naar ‘template based thinking’. How did we get here?

1993-1995: ‘Under construction’

Mijn eerste stappen op het ‘www’ zette ik in 1993. Toen volstond een gevoel voor esthetiek, leergierigheid en gretigheid om je vlag op het prille internet te planten en dat nieuwe medium mee vorm te geven. Le plaisir de se voir imprimé was een belangrijke factor: op je kamer een website ontwerpen en die vervolgens ‘ergens’ op het internet plaatsen voor een per definitie internationaal publiek gaf telkens een adrenalinekick. Volgens Web Design waren er dat jaar wereldwijd nog maar 650 websites actief.

De technische leercurve was niet erg steil, waardoor je een website in relatief korte tijd online kon krijgen. Wel was je als webontwerper niet louter bezig met ontwerpen, maar moest je je ook verdiepen in de technische kant van het internet. Gestaag onthulden acroniemen en netwerkprotocollen als FTP, SSH, HTTP en TCP/IP hun geheimen. Ze werden een noodzakelijk deel van je professionele bagage.

Om op het internet te surfen moest je eerst verbinding maken via een gewone telefoonlijn aan x Belgische frank per minuut

Door de beperkte bandbreedte – om op het internet te surfen moest je eerst verbinding maken via een gewone telefoonlijn aan x Belgische frank per minuut – moesten webpagina’s (nog meer dan nu) zo licht mogelijk gehouden worden. Had je in je ontwerp een te zwaar beeld gebruikt, dan werd dat lijn per lijn ingeladen – terwijl de telecomteller onverstoorbaar verder tikte en je met een bang hart de factuur tegemoet zag. Webbrowsers waren nog wispelturig. Afhankelijk van je besturingssysteem en de browserversie waarin je de website bekeek, zag je lay-out er telkens anders uit. Als webontwerper was je constant in gevecht met nukkige technologie.

Door die technische beperkingen zagen de eerste websites er rudimentair en veelal saai en amateuristisch uit. De achtergrond was doorgaans standaard grijs, de tekst beperkte zich tot een paar ‘websafe’ lettertypes (Times, Arial, Courier…) en voor de plaatsing van tekst en beeld had je geen andere keuze dan links, rechts of gecentreerd. Maar omdat er amper verwachtingen of standaarden waren, konden we toch ongeremd ontwerpen. Dat die drang soms ten koste ging van leesbaarheid, gebruiksvriendelijkheid en vooral toegankelijkheid, zal niet verwonderen.

Uit deze tijd stammen de ‘under construction’ gifs, stonden de hyperlinks standaard in het blauw – of paars, eens aangeklikt – en had bijna elke website een ‘hit counter’ (vaak al op 1.000 bezoekers geplaatst door de webbouwer zelf). Vrij snel begonnen ontwerpers gebruik te maken van tabels en spacer gifs (onzichtbare beelden om lege ruimte te creëren), waarbij de inhoud als een puzzel werd ingepast. Zo had je perfecte controle over de plaatsing van de elementen en was je lay-out zo goed als bullet proof.

Die manier van werken wordt nu trouwens nog altijd toegepast voor digitale nieuwsbrieven. De meest gebruikte e-mailprogramma’s hebben immers een zeer rudimentaire lay-out-engine, die slechts beperkte opmaak toelaat.

Mee aan de wieg staan van een totaal nieuw communicatiekanaal, gaf veel voldoening.

Voor mij was dit de spannendste en meest belonende periode van mijn tijd als ontwerper, omdat je kon meebouwen aan een medium met een grenzeloos potentieel. Mee aan de wieg staan van een totaal nieuw communicatiekanaal, waarvan je de snel evoluerende code van in het begin onder de knie had, gaf veel voldoening.

1996-2000: ‘Skip intro’

Een tweede belangrijk grafisch hoofdstuk kwam er met de intrede van animatie en interactie, dankzij de animatietool ‘FutureSplash’ (later Macromedia Flash). Omdat de browser vendors (Microsoft, Netscape, Mozilla en Opera) in die jaren om marktaandeel vochten met elk hun eigen HTML-elementen, moest je als webontwerper tot dan continu naar een consensus zoeken – wat in de ene browser werkte, werkte soms totaal niet in een andere.

Flash daarentegen was crossbrowser: wat je als ontwerper gemaakt had, zag er op alle browsers identiek hetzelfde uit. Het succes van het programma was grotendeels te danken aan zijn grote gebruiksgemak en het feit dat het de tekortkomingen tackelde van de eerste ‘statische’ HTML versies. In Flash kon je voortaan animatie en geluid én het hele arsenaal aan lettertypes gebruiken.

Tekst zoefde letter voor letter voor je ogen, beelden vervaagden en verschoven dat het een lieve lust was en bij elke beweging weerklonk prompt muziek

Deze periode kenmerkt zich door ‘animation overkill’: webdesigners lieten heel graag zien wat ze in huis hadden. Tekst zoefde letter voor letter voor je ogen, beelden vervaagden en verschoven dat het een lieve lust was en bij elke beweging weerklonk prompt muziek en/of interactiegeluiden. Dikwijls bleek de site-navigatie zo complex opgebouwd dat ze van een gebruikershandleiding voorzien moest worden. Ook werd de website – meestal één webpagina met daarin een embedded Flash-bestand – vaak zo zwaar dat een intro noodzakelijk was om intussen de rest te laten laden. Veel websites met Flash bleken dus vooral een speeltuin voor de ontwerper. De inhoud en het doel van de site waren ondergeschikt aan zijn eigen creatieplezier.

Zo gaf deze periode wel een explosie van creatieve ontwerpen en vormde ze een eerste stap in de professionalisering van het beroep van webdesigner. Er kwamen websites die de beste ontwerpen gingen verzamelen, plus ook gegeerde awards als ‘Site of the Month’. Won je zo’n award, dan ging je naam over de lippen van menig webontwerper en werd je gecontacteerd door een resem grote bedrijven die je terstond wilden inhuren. Een paar van deze early creators zijn uiteindelijk uitgegroeid tot heuse communicatiebureaus.

Een nadeel van Flash bleef wel dat de eigenaar van een website nog steeds de ontwerper (de ‘webmaster’) moest inschakelen om eventuele aanpassingen te doen in het bronbestand. Voor statische websites speelde Microsoft daarop in met het opmaakprogramma Frontpage, maar die webpagina’s oogden (en werkten) enkel goed in hun eigen webbrowser (Internet Explorer). Hoe opdrachtgevers meer tools bieden om zelf hun website aan te vullen?

2000-2010: van CMS tot ‘mobile first’

Zodra webontwerpers zelf Content Management Systemen (CMS) begonnen te maken, schakelde het internet vanzelf een versnelling hoger. Niet alleen de eigenaar van de website kon nu zelf data plaatsen, ook bezoekers en zelfs algoritmen gingen content toevoegen: van comments tot automatische live-data van op prille sociale media.

Meer en meer werd de ontwerper regisseur. Anders dan bij zijn ontwerpen voor analoge dragers of de statische lay-outs van het prille internettijdperk, had hij immers geen volledige controle meer over het uiteindelijke resultaat. En dus moest je anders gaan nadenken over design. Een goed ontwerp moest voortaan robuust genoeg zijn om overeind te blijven na toevoeging van willekeurige teksten en beelden. Definitief maakt tailor made design plaats voor template based thinking.

Zoals bij elke nieuwe designgolf gingen websites opnieuw opvallend op elkaar lijken: het logo meestal links bovenaan, de navigatie in een linker kolom en met onder- en bovenaan de webpagina een ‘footer’ en een ‘header’. Voor een paar jaar zaten we goed, tot zich alweer een nieuwe golf zou aandienen...

Omdat de eerste ‘smartphones’ nog zo’n archaïsche webbrowser gebruikten dat de surfervaring abominabel was, werd de echte mijlpaal de iPhone: de eerste smartphone met een volwaardige webbrowser aan boord. Hij gaf websites nog geschaald weer, maar het werd algauw duidelijk dat het internet meer en meer geconsulteerd zou worden op een kleiner scherm. Voor Flash werd dat de doodsteek: het werd niet toegelaten in het nieuwe OS, waardoor de meeste websites onbereikbaar werden en noodgedwongen omgebouwd en/of vernieuwd moesten worden.

Wanneer vervolgens responsive design zijn intrede doet (en websites zich dus automatisch gaan aanpassen aan het beeldkader waarop ze bekeken worden), kregen bestaande sites één voor één een – voor sommige zeer – welkome verjongingskuur. Het idee van een ‘standaard’ schermresolutie ging naar de prullenmand, net als de utopie dat de surfer de website in een specifieke webbrowser moest bekijken voor de beste surfervaring. Ontwerpen deed je voortaan voor een fluïde, haast ondefinieerbare omgeving: smartphone, desktop, browser, Windows, Mac OS, iOS… Op alle systemen moest de website voortaan even perfect ogen en vlot werken.

Mobile-first werd sindsdien de norm: we ontwerpen tegenwoordig eerst voor mobiele dragers en breiden dat ontwerp dan uit voor grotere schermresoluties. Vanzelf glipten ook enkele typische mobiele elementen mee naar websites op desktop-formaat: one-pagers (websites opgebouwd uit één lange webpagina die je enkel hoeft door te scrollen), het navigatiemenu dat standaard achter een hamburgericoontje verborgen wordt, touch en swipe elementen als navigatie… Soms vertroebelden ze de surfervaring vooral.

De explosie van toestellen (smartphones, tablets, laptops, desktops, smartwatches…) en besturingssystemen (iOS, Android, MacOS, Windows…) maakte het moeilijk om door het bos nog de bomen te zien.

2010-2019: grids en templates

Houvast vond de ontwerper in een degelijk opgemaakt ‘skelet’ als vertrekpunt: gridsystemen en frameworks als het 960 Grid System, HTML5 Boilerplate en Bootstrap. Zij vergemakkelijken de opzet van een webproject en versnellen aanzienlijk de opmaak ervan. Zulke geprefabriceerde systemen impliceren echter dat de ontwerper precies zo moest gaan denken als de bedenkers ervan. Voor gecompliceerde en grote projecten levert dat een niet onbelangrijke tijdswinst op, maar voor kleinere projecten vormt dat net méér en vooral onnodig werk.

Opnieuw stak een uniforme lay-out de kop op: het navigatiemenu klapt dicht op een kleiner weergavevenster en kolommen krijgen exact dezelfde breedte en tussenmarge als op andere websites. Het gebruik van front-end frameworks (en grids) laat dan ook weinig vrijheid toe. Zonder kennis van de code kan je binnen een framework niet tot een creatief ontwerp komen.

Eenzelfde scenario zien we bij ‘templates’: sjablonen die je als eindgebruiker voor maar enkele euro’s kan instellen op een even makkelijk te installeren CMS (Wordpress, CraftCMS, Drupal). Webontwerpers laten zich simpel mee verleiden: door tijdsdruk of uit gemakzucht gaan ook zij met zulke templates hun werk beperken tot het aanpassen van kleuren en iconen.

Best ironisch: professionele designers die zich ontslaan van hun eigen job en zo zichzelf in de voet schieten. Iconen, templates en andere rasters worden immers door en voor designers gemaakt. En net omdat ze verkoopbaar– én spotgoedkoop – moeten zijn, worden ze algauw inwisselbaar. Ontwerpers van zulke ‘themes’ hebben nu eenmaal de neiging om de bestsellers na te bootsen. De replicatie is massaal, de esthetische variëteit is steeds beperkter geworden.

Het kan niet genoeg benadrukt worden: templates zijn geen ontwerpen. Het zijn eerder regels voor het combineren van gerelateerde gegevenstypen. Ze zijn agnostisch. En dat is net het probleem. Ze breken met één van de oerprincipes van design: een betekenisvolle samenhang tussen vorm en inhoud, waarbij de vorm de inhoud ondersteunt. De lay-out van een template daarentegen reduceert dat principe tot een lege container. Hij voegt aan de inhoud niets toe. Als ontwerper kan je uit de structuur ervan hoogstens leren hoe je het opstartproces voor een nieuwe website nog verder kan vereenvoudigen.

De digitale ontwerpindustrie zit nu vol met onervaren of ongekwalificeerde ontwerpers die eerder imiteren dan innoveren.

Een ander problematisch effect van zoveel goedkope ‘do it yourself’-oplossingen is dat de leercurve voor webdesign drastisch beperkt is, waardoor de digitale ontwerpindustrie nu vol zit met onervaren of ongekwalificeerde ontwerpers die eerder imiteren dan innoveren. Google lijkt dat zo ook best te vinden. Onlangs heeft de zoekmachine een aantal ‘best practices’ opgesteld die je maar beter naleeft, wil je nog even zichtbaar blijven in haar ranking met zoekresultaten. Door specifieke technologieën, kleuren, lettertypes en spatiëringen naar voren te schuiven, dwingt Google ons webdesign nog verder in een keurslijf.

2019 en beyond: AR / VR / Big Data

En intussen staan we alweer voor een volgend fenomeen. Door Augmented en Virtual Reality is de functie van het scherm letterlijk getransformeerd naar een intermediaire tussen de data en jezelf. Het is niet langer enkel de drager van informatie, maar wordt meer en meer een tool om elders informatie vandaan te halen waarmee je in interactie kan gaan.

En dan hebben we het allang niet alleen meer over mensen, maar in steeds grotere mate ook over machines. Robots gaan websites ‘scrapen’ om hun data ook in andere websites te gebruiken. Daarvoor moeten die data zo maagdelijk mogelijk blijven. Lees: data, structuur en lay-out moeten compleet los van elkaar staan. Dat wordt dé uitdaging voor de toekomst: ontwerpen en lay-outs voorzien waarbij de bezoeker zo functioneel en gebruiksvriendelijk mogelijk enorme hoeveelheden data kan consulteren, én tegelijk wel een originele, onderscheidende of creatieve interface aanbieden.

Als vormgever wil je niet de plaatjes inkleuren, maar ze zelf bedenken.

Welke websites een boek als Web Design over tien jaar allemaal zal opnemen, is dus koffiedik kijken. Net die onvoorspelbaarheid blijft de grond van de creativiteit van ontwerpers: hoe van nieuwe functionaliteiten ook een nieuwe esthetische ervaring maken, zonder de functionaliteit zelf uit het oog te verliezen? Het internet heeft ons beroep op dat vlak zoveel meer mogelijkheden geschonken: meer beweging, meer wisselwerking, meer inspiratie ook.

Net daarom voelt het zo paradoxaal dat die brede waaier aan mogelijke articticiteit nu steeds meer toeklapt tot een toolbox voor simpele techneuten. Als vormgever wil je niet de plaatjes inkleuren, maar ze zelf bedenken.