27 en 28 Juni ging ik met Matthijs Kleverlaan naar Brighton U.K. voor een workshop en een conferentie over Web Typografie. Leuk! Aan de Engelse kust, werken met en luisteren naar gerenommeerde sprekers over typografie en responsive design. Dat en prima hamburgers… Wat ik heb meegenomen lees je hieronder.
‘The web has always been responsive, we just decided to ignore that for the last 20 years‘
De eerste websites waren allemaal prima responsive, bestonden uit slechts typografie (lees: Times New Roman en tekstlinks.) Hoe groot het scherm was maakte niet uit, de tekst reflowde naar behoefte maar liet qua opmaak natuurlijk veel te wensen over. Maar naarmate er meer kon zijn we het allemaal, in zoektocht naar controle over het ontwerp, in ‘fixed-size’ kaders gaan plaatsen en zijn we ‘web standards’ gaan bepalen voor schermgroottes. Wat er eigenlijk op neerkwam, dat we aannamen dat 80% van de gebruikers een maximale resolutie aan kon van 1024 x 768 pixels en dat de rest eigenlijk pech had. Prima… Zolang het duurt. Maar of het daar nu beter leesbaar door geworden is?
WYSIWTFOMG?!
Met de komst van de kleine laptops, smartphones en tablets en alle daarbij aanwezige viewports, zijn alle problemen van deze aanpak weer boven komen drijven… En met deze problemen komt dus de vraag naar een volwassen wording van het web en een permanente oplossing van de (typografische) ‘problemen’. Tadaa: Responsive design.
Responsive design en typografie?
Pak eens een ouderwets, goed ontworpen boek. Ik wacht wel even, heb je er een? Mooi. Houd nu dit boek op een prettige leesafstand vast en kijk eens goed naar de tekst. De vormgeving van deze tekst; het font, het corps, de regelafstand, contrastwaarden en, misschien wel het belangrijkst, de breedte van een paragraaf. Fijn hè? En vergelijk dit nu eens met een website met een lap leestekst op jouw favoriete scherm. Een heel ander verhaal, of niet?
Waar we beginnen met ontwerpen aan een ‘responsive’ design denken we vaak meteen aan ‘breakpoints’, ‘devices’ en ‘grids’. Maar wat definieert al deze zaken? Juist! Content en dus ook copy! Bezoekers komen op jouw site voor 1 taak; het vinden van gezochte content. Dus moet deze content leidend zijn voor het ontwerp van de site en al haar breakpoints. De vraag is dus: Op welke viewport bevind ik mij, wat is (mogelijkerwijs) de context en wat kan ik doen om de content (en onder andere de copy) zo goed mogelijk te presenteren?
Dit houdt in dat de typografie van deze content zich idealiter aanpast aan de viewport en waar mogelijk de situatie.
Devices & context
Houd dat ouderwetse boek nog even bij de hand…
Leestekst op een smartphone? Corps en regelafstand mogen wat kleiner dan op bijvoorbeeld een iPad, want het oog van de gebruiker is waarschijnlijk dichterbij. Hou de opmaak summier, (hiermee bedoel ik de aankleding van de tekst) want de ruimte is beperkt. Daarnaast kan de verbinding slecht zijn en is performance misschien een issue. Uitzinnige webfonts gebruikt? Sommige devices hebben daar meer moeite mee dan andere, dus misschien is het handig om hier een fall-back voor te bedenken.
Zelfde tekst op een desktop met een goed scherm? Het corps mag een stuk groter, de interlinie hoger en er is meer vrijheid voor verschillende stijlen (quotes / intro teksten / etc) want de gebruiker zit verder van het scherm, de internet verbinding is waarschijnlijk beter en de browser heeft meer ruimte en betere features. Hier kun je misschien wel dat ene perfect-spatiërende-en-esthetisch-zo-lekkere webfont aanbieden, gewoon omdat het kan. Maar let erop dat ‘screen real estate’ niet wil zeggen dat de tekst nu oneindig breed kan zijn. (Bijna) niets is zo vervelend als een te brede kolom.
Als je deze 3 (mobile, desktop, boek) ‘viewports’ op hun ideale afstand van je af houdt, zou je eigenlijk dezelfde opmaak moeten zien qua corps, interlinie, contrast en breedte.
Progressive Enhancement
Dus, hoe pakken wij dit aan? Door de typografie goed te ontwerpen voor de minst uitgeruste viewport en browser en meer ‘design’ aan te bieden naarmate de specificaties van deze viewports en browsers beter worden. Dit noemt men ook wel Progressive Enhancement. (http://www.webrichtlijnen.nl/richtlijnen/webrichtlijnen-1/r-pd-1-2) Middels deze techniek (+ mediaqueries) kunnen we elke viewport en browser aanbieden wat hij/zij aankan. Hierdoor kunnen we de eindgebruiker voorzien van prettig leesbare en als het even kan ook nog esthetisch verantwoorde typografie op welke viewport hij zich ook bevindt. Mooie voorbeelden zijn: The great discontent (http://thegreatdiscontent.com/), iA.net en het blog van Mark Boulton (http://www.markboulton.co.uk/journal)
Dus, het web dat leest als een fijn boek, maar dan zonder ezelsoren en mét e-mail, Twitter en Facebook.
