Typografie zegt meer dan duizend woorden
Een verhaal over progressive enhancement
Published on
We hebben een nieuw speledingetje: de mogelijkheid om binnen iOS advertenties op websites te blokkeren, een ad blocker voor je mobiel. Er staan al een paar weken apps in de appstore, waaronder Purify en Peace.
Eigenlijk dekt de naam ‘ad blocker’ de lading van ons speledingetje niet helemaal. Het gaat namelijk om een meer generieke ‘enhancement blocker’. Je kunt namelijk ook dingen zoals javascript, afbeeldingen en web fonts blokken. Met één handeling kan een gebruiker alle web fonts voor alle toekomstig te bezoeken websites uit zetten.
Enhancement blocker? Correct.
Javascript, afbeeldingen en web fonts die in de ‘app blocker’ óók geblokt kunnen worden zouden nooit meer dan enhancements mogen zijn. Extra’s, die als aparte lagen over de basislagen van het web heen gelegd worden. Iedere website zou ook zonder deze verrijkingen, enhancements, prima moeten werken. Ziedaar de kern van ‘Progressive Enhancement’.
Iedere ontwerper/programmeur die een beetje verstand van het web heeft weet dit. Maar als we eerlijk zijn houden ontwerpers/programmeurs zich er te vaak niet aan. Websites werken niet zonder javascript of zijn slecht leesbaar als een web font niet geladen wordt. De actie van Apple, het toelaten van deze ‘enhancement blocker’ tot hun appstore, mag dan ook gezien worden als een wake up call.
Weet je nog beste ontwerper/programmeur toen je dacht: “Ja, maar de gevallen waar mensen het web font niet te zien krijgen, dat zijn edge cases. Daar hoef ik niet voor te ontwerpen. Daar hoef ik geen code voor te schrijven.” of, ook een goeie: “Dat doe ik later wel”. Zo kan het dus gebeuren dat de visuele identiteit van jouw klant wel erg onder druk komt te staan op het moment dat het web font weg valt. Bijvoorbeeld omdat je helemaal geen fallback hebt gedefinieerd zoals in het onderstaande voorbeeld.
Het blijkt wel weer dat je gebruikers (in dit geval Apple met haar enhancement blockers) niet kunt voorspellen. En dat is ook helemaal niet nodig: progressive enhancement, dames en heren. Houdt bij alles wat je doet rekening met de gelaagdheid van het web en je voorkomt bovenstaande problemen. Nou is progressive enhancement natuurlijk slechts een setje eenvoudige spelregels. De werkelijke reden dat je heel goed na wilt denken over typografie is van een heel andere aard: liefde!
Love me two times
Met de liefde voor typografie zit het bij designers over het algemeen wel goed. Wat wel jammer is, is dat die liefde nogal eenzijdig getoond wordt: gericht op de happy flow. Echte liefde toont zich natuurlijk pas wanneer het lastig wordt, wanneer je aandacht uit moet gaan naar de niet ideale situatie. Bijvoorbeeld een situatie waarin de gebruiker niet het web font, maar het fallback font te zien krijgt. Dat is het moment om je ware liefde te tonen. De vormgeving van het fallback font verdient je onverdeelde aandacht. Als je met deze basislaag van het web klaar bent kun je jezelf richten op de happy flow – de enhancement: het web font.
Lees dit artikel over het kiezen van een fallback font uit 2011 maar eens.
Door voortschreidende technische mogelijkheden wordt de eindgebruiker steeds ‘machtiger’, de nieuwe ‘enhancement blocker’ in de appstore is daar een voorbeeld van. Deze toenemende autonomie van de eindgebruiker dwingt ons heel goed na te denken over de keuzes die we maken.
Gaat die gebruiker nu gebruik maken van de mogelijkheid een aantal enhancements uit te schakelen op zijn mobiel? We weten het niet, maar waarom zou hij dat niet doen? Het scheelt een hele bak data die over de lijn moet. En dat scheelt hem weer geld en laadtijd. Dus wat denk jij?
Klik eens door dit slidedeck heen voor een duidelijk overzicht t.a.v. font gebruik. De cijfers die gebruikt worden kun je hier zelf nazoeken: httparchive.org
En als een gebruiker vandaag web fonts uitschakelt op zijn mobiel en hij bezoekt volgende week jouw website, denk je dan dat hij weet dat de layout van jouw website kapot is vanwege dat ontbrekende web font? Nee, die link zal de gemiddelde gebruiker niet meer leggen. Hij zal alleen een kapotte of slecht leesbare website zien. Jij bent af.
Maar zoals gezegd, uiteindelijk gaat het niet om de macht van de eindgebruiker of de regels van progressive enhancement. De eerste en belangrijkste reden van een designer om goed na te willen denken over typografie op het web is liefde!
By the way beste designer, wanneer je je liefde eerlijk aan het verdelen bent over al je typografische design beslissingen zorg dan dat je ook nog een beetje overhoudt voor FOUT (Flash Of Unstyled Text). De technische implicaties van FOUT zijn het terrein van een front-end developer. Maar een designer moet goed begrijpen wat hier gebeurt en wat de design implicaties van FOUT zijn. Echt leuk ga je dit fenomeen misschien niet vinden… maar ja, ware liefde…
Omdat een web pagina in lagen wordt opgebouwd zie je het gestylde webfont pas op het moment dat deze via Javascript wordt toegevoegd, dit duurt even. We doen dit met Javascript omdat we dan ook kunt testen of een web font daadwerkelijk is ingeladen. Dit mechanisme is, zoals wel meer mechanismes op het web niet perfect en heeft ‘FOUT’ tot gevolg. Wat dit precies betekent lees je in deze 4 korte artikelen die je op weg helpen t.a.v. FOUT
De imperfecties van het web, ze zijn talrijk en ze gaan niet weg. In je design keuzes en/of in je code rekening houden met deze imperfecties is altijd beter dan ze te negeren. Zoals de makers van ffffallback.com zeggen: “It’s a brave new world”. Ik zou daar aan willen toevoegen dat typografie op het web een prachtig onderdeel van die nieuwe wereld is.
Give it all your love!