Mobiele Navigatie

Pictogrammen of icoontjes geven ons de mogelijkheid om te communiceren op een zeer compacte en universele manier. Het belang van pictogrammen of icoontjes lijkt dan ook te stijgen naarmate de schermgrootte kleiner wordt!

Als u bekend bent met het gebruik van rasterafbeeldingen (zoals PNG en GIF) om icoontjes op een website weer te geven, dan bent u waarschijnlijk ook bekend met de tekortkomingen van deze werkwijze;

Allereerst, afhankelijk van de afmeting en de hoeveelheid kleurgegevens die het icoontje heeft, kan een icoon bestand (als beeldformaat: JPG, PNG of GIF) erg groot worden. Als we veel icoontjes in een website willen plaatsen, zal dit uiterst nadelig zijn voor de laadtijd van de website vanwege het grote aantal HTTP-verzoeken die moeten worden uitgevoerd door de browser.

Hoewel het probleem van een groot aantal HTTP-verzoeken kan worden opgelost met een CSS sprite, is ook dit bestand nog steeds (te) groot.

CSS sprites worden gebruikt in web design om de prestaties te verbeteren door tal van kleine afbeeldingen of pictogrammen te combineren in een grotere afbeelding (sprite sheet of tile set). Met behulp van een Cascading Style Sheet (CSS) kan dan aangeven worden welk pictogram op de gerenderde pagina te zien is.

Maar ook in tijden van Retina of High-Density beeldschermen is het — juist bij icoontjes — van belang dat deze haarscherp worden weergegeven op dit soort beeldschermen. Gelukkig is er een goede en praktische oplossing .. Icon fonts!

Wat is een Icon font?

Een Icon font is een set pictogrammen/icoontjes verpakt in een lettertype (in diverse web formaten: .ttf, .eot, .svg en .woff) dat later kan worden ingelezen op een website middels @font-face. Er zijn vele voordelen voor het gebruik van een icon font om uw icoontjes te tonen op uw website:

  • een lettertype bestand is vector-gebaseerd, waardoor deze resolutie-onafhankelijk is. Icoontjes kunnen nu probleemloos worden verschaald naar verschillende afmetingen zonder wazig te worden
  • minder HTTP-verzoeken aan de browser (1 bestand, dus 1 HTTP-request!)
  • de bestandsgrootte wordt aanzienlijk kleiner (snellere laadtijd, makkelijk te cachen)
  • mogelijkheid om de icoontjes individueel te stylen met behulp van CSS (kleur, schaduw, animatie, :hover, etc).
  • effecten zoals verandering in opaciteit, of roteren van de pictogram, of .. (sommige van deze effecten zijn overigens ook mogelijk met beeldformaten)
  • ondersteuning van @font-face in de Top5 qua browsers (desktop versies!)
  • er is tal van hoge kwaliteit, open-source iconfonts beschikbaar op het internet

Eens kijken of je dit allemaal kunt doen met een .PNG of .GIF? Dacht het niet! Chris Coyier van CSS-Tricks heeft een geweldige testpagina gemaakt waarin u een aantal van de hierboven beschreven voordelen ‘live’ kunt aanpassen en bekijken!

Maar zoals een wijs man ooit al eens heeft gezegd: “Elk Nadeel hep zijn Voordeel!”, zo hebben ook iconfonts een aantal nadelen:

  • @font-face werkt niet op alle browsers, zoals op Opera Mini, Nokia XPress Browser, Blackberry 4–5, Android 2.1, en Windows Phone 7–7.8
  • lastig om meerdere kleuren te verwerken in een iconfont
  • arbeidsintensief en moeilijk om een custom-made iconfont te maken
  • accessibility problemen (Iconfonts worden meestal niet ingelezen door screen readers en als ze wel worden ingelezen, worden ze als een alfabetische letter uitgesproken)

Overigens is het niet helemaal juist dat een iconfont alleen maar eenkleurig (monochroom) kan zijn, u kunt tevens multi-gekleurde pictogrammen maken met meerdere symbolen of schrifttekens die elkaar overlappen met een absolute positionering in CSS (voorbeeld van een multi-gelaagd iconfont: Forecast Font)

@font-face wordt dus niet ondersteund door elke (mobiele) browser, maar toch is er een ‘universele’ manier om iconfonts te implementeren. Deze ‘techniek’ maakt gebruik van Modernizr om eerst te kijken of de desbetreffende browser @font-face ondersteund, en zo neen, er — als fallback — een .PNG rasterafbeelding wordt getoond ipv. gebruik te maken van het iconfont.

Als u slechts een ‘handjevol’ icoontjes wilt gebruiken is het misschien raadzamer om SVG’s (Scalable Vector Graphics) te gebruiken, ondanks het feit dat deze vectorbestanden groter kunnen zijn dan een iconfont in bestandsgrootte, wordt deze techniek goed ondersteund in de moderne browsers.

Voor de oudere browser versies die SVG’s niet ondersteunen kan er gebruik worden gemaakt van een JavaScript of jQuery plugin om op browsers die SVG niet ondersteunen, .PNG rasterafbeeldingen te tonen. Sommige van deze JavaScript plugins zetten dan uw SVG’s automatisch om in .PNG’s die ook automatisch in de daarvoor betreffende folders worden geupload door het script (bijv: GruntIcon, MagicSVG, etc.)

UPDATE: Een briljant artikel over de verschillen tussen SVG’s en Icon Fonts is ‘Inline SVG vs Icon Fonts [CAGEMATCH]‘, geschreven door Chris Coyier op 22 April 2014.

Tips voor het Toevoegen van een Icon font aan Uw Site

Wilt u alsnog gebruik maken van een Icon font in uw website dan is het raadzaam om de volgende tips in het achterhoofd te houden zodat uw lezers niet voor een (overbodige) verassing kunnen komen te staan bij het bezoeken van uw website op hun favoriete (mobiele) browser:

  • Gebruik alleen de icoontjes die u echt nodig heeft, door kant-en-klare icon fonts sets te gebruiken worden er waarschijnlijk een boel icoontjes ingelezen waarvan u helemaal geen gebruik maakt (extra bestandsgrootte)! Diensten zoals Foundation Icon Fonts 3, IcoMoon en pICTos maken het mogelijk om een custom-made of samengesteld pictogram lettertype te bouwen.
  • Ondanks het feit dat @font-face redelijk is ingeburgerd in de meeste browsers kunt u een iconfont het best gebruiken als (extra) versiering! Gebruik liever nooit alleen het icoontje, want als de gebruiker op een browser zit die geen @font-face ondersteunt zal er niets te zien zijn!
  • Zet CSS properties, zoals: font-weight, font-style, text-transform, enz. op 'normal'
  • Gebruik liever voor de menuknop ≡ (‘hamburger-icoon’) de unicode (U+2630) of in CSS :before { content:'\2630'; }, zodat deze op elke browser correct wordt weergegeven
  • Gebruik display:inline-block; voor meer controle en ‘klikgemak’
  • Gebruik CSS property vertical-align om de basislijn van de ‘inline’ icons vast te leggen (uitlijning icoontjes)
  • Voeg de Base64-code van uw iconfont toe aan de stylesheet, zodat het iconfont ook goed in FireFox wordt weergegeven,
  • Gebruik anti-aliasing voor Webkit browsers om fonts er scherper uit te laten zien (-webkit-font-smoothing: antialiased;).

Een icon font toevoegen aan uw site lijkt dus een slimme zet te zijn, zeker in een ‘responsive‘ web omgeving waarbij uw website zichtbaar is op allerlei verschillende apparaten, klein of groot. Maar ook door de resolutie-onafhankelijkheid van een iconfont zal elke Retina/HD beeldscherm het iconfont haarscherp renderen op beeld.

Daarnaast is het toevoegen van een iconfont ook zeer aan te raden voor de totale laadtijd van uw website, zeker als u veel icoontjes als rasterafbeeldingen gebruikt. Voor meer informatie of het aanmaken van een custom-made icon font kunt u gerust contact met mij opnemen.

Meer Achtergrondinfo:

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Leerschoon M/V

Colofon