De voordelen van HTML5

HTML5 is op korte tijd uitgegroeid tot de standaard, zowel voor klassieke desktopbrowsers als voor mobiele toestellen. Maar waarom zou je overstappen op HTML5? Welke voordelen biedt deze nieuwe standaard in vergelijking met zijn voorgangers?

1. Zonder zorgen

Als ontwikkelaar moet je niet telkens het warm water opnieuw uitvinden. Javascript-frameworks zoals jQuery nemen de vroegere zorgen over compatibiliteit weg. Voor zo goed als elke vraag bestaat er wel een antwoord onder de vorm van een vaak vrij beschikbaar stukje javascript of plugin voor je favoriete javascript-framework. Dankzij javascript-UI-frameworks kan je in een mum van tijd een interface bouwen voor je webapplicatie. Jquery UI bijvoorbeeld biedt een massa interactieve en animeerbare interface-elementen op basis van HTML5.

2. Sneller en goedkoper

HTML5 maakt het ontwikkelen van een website of webapplicatie goedkoper en sneller dan ooit tevoren. De wijd verbreide ondersteuning van CSS zorgt ervoor dat stijlaanpassingen snel kunnen gebeuren zonder dat er nog geraakt wordt aan de eigenlijke inhoud van de pagina"s.

Dankzij mediaqueries kan de vormgeving van een site zich naadloos aanpassen aan de schermresolutie van het apparaat waarop het wordt weergegeven. Ontwikkelaars moeten niet langer ingewikkelde scripts schrijven voor het herkennen van de browser (“browsersniffing”), maar kunnen één lay-out bouwen die zich ook op toekomstige toestellen netjes gedraagt. Dit betekent dat je niet langer meerdere “versies” van één site moet maken, maar de lay-out kan laten reageren op zijn omgeving (responsive design).

3. Voor elk wat wils

HTML5 leent zich ook perfect voor “graceful degradation”. Bij deze praktijk is bepaalde functionaliteit wel aanwezig in moderne browsers, maar niet in oudere versies. De “inhouden” blijven echter altijd bereikbaar voor iedereen.

Voor de meeste browsers vormt dit geen probleem vermits ze zichzelf updaten naar de laatste versie. Microsoft Internet Explorer blijft hier echter vaak een doorn in het oog. Gebruikers die over een oudere versie van het Windows-besturingssysteem beschikken, kunnen niet altijd de laatste versie van Internet Explorer installeren. Daarom raden webapplicaties die erg afhankelijk zijn van welbepaalde functionaliteit (bijvoorbeeld elektronische leeromgevingen) hun gebruikers nog steeds aan om een compatibele browser zoals Firefox of Chrome te gebruiken.

Dit heeft zeker bijgedragen tot het dalende gebruik van Internet Explorer. Anderzijds heeft het groeiende succes van alternatieve browsers Microsoft er toe aangezet om een tandje bij te steken en ondersteuning voor de nieuwe standaarden in zijn recentste versies van Internet Explorer in te bouwen.

4. Modern en blits

Wat te doen met oudere browsers zoals Internet Explorer 6, 7 en 8? Zij herkennen sowieso de nieuwe standaard niet. Indien je de nieuwe HTML5-elementen wenst in te zetten in de oudere generaties browsers, moet je je toevlucht zoeken bij javascript. Op www.modernizr.com vind je een geavanceerde javascriptbibliotheek die voor de gebruikte browser controleert welke nieuwe HTML5-elementen, HTML5-attributen en CSS3-opties ondersteund worden. Download het script en link het aan de head-tag van je webpagina’s. Op de website vind je een uitgebreide handleiding voor de integratie van Modernizr in je eigen pagina"s.

De bibliotheek html5shiv zorgt ervoor dat oudere browsers de nieuwe HTML5-sectie-elementen (article, section, nav…) herkent en weergeeft zoals het hoort. Afhankelijk van uw eisen en die van uw klant kan je er dus voor zorgen dat de meeste nieuwe mogelijkheden ook in oudere browsers worden weergegeven.

CSS3 ondersteunt nu ook de langverwachte wens naar transparantie, afgeronde hoeken, schaduwen, animaties enz. Maar ook hier durft de ondersteuning door oudere browsers wel eens mank te lopen. Scripts zoals CSS3 Pie zorgen op een spitsvondige manier dat ook de oudere versies van Internet Explorer deze nieuwe layoutmogelijkheden kunnen weergeven. Op deze Github-pagina vind je zo"n oplossing (polyfill) voor de meest gangbare “problemen” die zich voordoen in oudere of niet-compatibele browsers.

Houd er echter rekening mee dat dit de ontwikkeltijd en dus ook de kostprijs enorm kan verhogen en dat sommige “polyfills” elkaar soms wel eens in de weg durven lopen. Spreek vooraf dus goed af of uw klant bereid is een meerprijs te betalen voor de ondersteuning van bepaalde vormen van opmaak of functionaliteit in oudere browsers.

5. Nooit geziene mogelijkheden

Door de combinatie van HTML, CSS en javascript beschik je als ontwikkelaar over ongekende mogelijkheden. Veel dingen waarvoor een ontwikkelaar vroeger bijna noodgedwongen zijn toevlucht zocht bij commerciële plugins zoals Flash, kunnen nu zonder al te veel problemen crossbrowser geïmplementeerd worden. Animaties, visuele effecten, slideshows, tekeningen… behoren tot de mogelijkheden. Bovendien zorgen javascript-frameworks zoals jQuery, AMPLE SDK, Raphael, Dojo GFX… ervoor dat je je geen zorgen meer hoeft te maken over crossbrowser-compatibiliteit.

Vaak hoef je als ontwikkelaar na het insluiten van de benodigde bibliotheek slechts een paar regels code te schrijven om een bepaald effect te creëren. Om ten volle van deze code en frameworks te kunnen genieten is er wel een keerzijde. Je moet als webdesigner meer dan vroeger je weg kennen in de code. Wie gewend is om heel visueel te werken in een WYSIWYG-editor zal zich nu noodgedwongen moeten verdiepen in de code om de gewenste effecten of functionaliteit te bereiken. Indien je hiertoe bereid bent, is zo goed als niets onmogelijk. Het weergeven van grafieken en diagrammen, het bouwen van tekenprogramma"s, het in real time bewerken van afbeeldingen en zelfs 3D behoren dan tot de mogelijkheden.

6. Mobiele ondersteuning

In de vroege jaren 2000 beschikten sommige websites over WAP-toegang waardoor bepaalde informatie van een website toegankelijk kon worden gemaakt voor mobiele telefoons. De huidige generatie mobiele apparaten, besturingssystemen en browsers ondersteunen zo goed als allemaal HTML5.

Zowel de producenten van mobiele apparaten als de browserontwikkelaars zijn zich bewust van de immense voordelen van HTML5. De explosie van het mobiele web is zeker voor een stuk toe te schrijven aan HTML5 en zijn geweldige mogelijkheden. Nooit eerder was informatie zo toegankelijk en bereikbaar.

De grenzen tussen webapplicaties en native apps vervagen, ook op mobiele toestellen zoals de iPad. Steeds meer “klassieke” apps worden gebouwd met een HTML5-interface door de fantastische interactieve mogelijkheden die zorgen voor een gebruiksvriendelijke interface. Ook digitale televisies verstaan in veel gevallen HTML5 zodat het ook daar wordt ingezet voor het bouwen van de bedieningsinterface.