E-sites v6: een kijk onder de motorkap

Door E-sites, E-sites
24 augustus 2010 - 781 x bekeken -

E-sites v6 is een feit. En omdat wij graag laten zien wat we in huis hebben, wil ik in deze blogpost aandacht besteden aan de technieken en tools die wij zoal gebruikt hebben tijdens de ontwikkeling van de nieuwe website.

Content Management System

Vanzelfsprekend wordt onze nieuwe site volledig aangestuurd door de meest recente versie van Sitemanager.
Met allerlei handige modules kunnen we de content heel eenvoudig updaten en hebben we een goed overzicht van de bezoekersstatistieken. Een andere toffe feature is de koppeling met het intranet waarmee het voor collega’s heel makkelijk wordt gemaakt om bijvoorbeeld een interessante intranetpost door te zetten naar de site als zijnde blogitem. Met deze laagdrempelige manier van user generated content hopen we de site consequent actueel te houden.

Front-end

Net als de back-end, besteden we bij E-sites ook veel aandacht aan de front-end van een website of webapplicatie. Combineer die aandachtigheid met onze expertise en interesse voor nieuwe ontwikkelingen en je hebt de juiste mix voor een fraai eindresultaat.

Benieuwd naar wat we zoal uit de kast getrokken hebben om dit resultaat te bereiken? Stop dan vooral niet met lezen.

Adoptie HTML5

Enige tijd geleden is onze front-end afdeling voorzichtig begonnen met het integreren van diverse HTML5 gerelateerde onderdelen binnen onze interne standaarden. Ik zeg bewust “voorzichtig” omdat de HTML5 specificatie nog niet af is en dus mogelijk kan veranderen. Dit neemt echter niet weg dat er al verschillende zaken geïmplementeerd zijn in browsers van vandaag de dag. Met name Google Chrome, Mozilla Firefox, Safari en Opera lopen hierin voorop.

Voor degene die tot op heden weinig te maken hebben gehad met HTML5 of niet goed weten wat het nu precies inhoudt, raad ik je aan om op onderstaande illustratie klikken en de (Engelstalige) infographic te bekijken. Hierin wordt uitgelegd wat "HTML5" nu eigenlijk inhoudt, hoe de ondersteuning in diverse browsers ervoor staat en wat de voor- en nadelen zijn in vergelijking met Flash. WTF is HTML5 and why we should care

Hieronder een lijstje met cross-browser HTML5 onderdelen die we reeds geïmplementeerd hebben:

  • Het 'officiële' HTML5 DOCTYPE. <!DOCTYPE html>;
  • Nieuwe definitie van de karakterset. <meta charset="utf-8">;
  • Custom data-* attributen voor het opslaan van metadata;
  • Block-level linking;
  • Het gebruik van de nieuwe input types, bijv. type="email" en type="tel";
  • Het gebruik van diverse nieuwe elementen zoals <time> etc.

Internet Explorer en HTML5

Helaas kleven er wel (nog) een aantal nadelen aan het gebruik van HTML5. Met in het bijzonder het feit dat IE (versie 8 en lager) een stukje JavaScript nodig heeft om de nieuwe semantische elementen (<header>, <nav>, <section>, etc.) correct weer te geven c.q. te stijlen.

Nu kun je jezelf natuurlijk de vraag stellen: "Hoe groot is de groep die IE gebruikt én JavaScript uitgeschakeld heeft?". Waarschijnlijk niet heel groot, maar deze afhankelijkheid strookt simpelweg niet met de gedachtegang achter gelaagd bouwen. In deze productiefilosofie staat het verhogen van de gebruiksvriendelijkheid centraal zonder hiermee toegankelijkheid in te leveren. Ergo: indien JavaScript (om wat voor reden dan ook) niet beschikbaar zou zijn, dient de lay-out nog wel gewoon correct weergegeven te worden. In het geval van de hierboven geschetste situatie zou dit dan niet het geval zijn. IE

N.B. Ondanks dat E-sites v6 gebruik maakt van verschillende nieuwe HTML5 elementen blijft de lay-out wel intact wanneer je de site bezoekt in IE met JavaScript uitgeschakeld. Hieruit zou je kunnen afleiden dat de elementen in dat geval enigszins redundant zijn. Integendeel, de elementen zijn voorzien van ARIA-attributen ten behoeve van de toegankelijkheid en dienen als handvatten voor eventuele bezoekers met screenreaders.

Microsoft’s inhaalslag

Gelukkig gaat er, zoals het er nu naar uit ziet, met de komst van Internet Explorer 9 verandering komen in de tot nu toe slechte ondersteuning van webstandaarden in de IE reeks. Naast de implementatie van een hoop nieuwe features die (min of meer) onder de HTML5 paraplu vallen heeft deze versie ook een geheel nieuwe JavaScript-engine die pagina's tot vier keer sneller kan laden dan zijn voorganger. Ook de support voor webstandaarden als CSS(3) en ECMAScript zal aanzienlijk beter zijn dan voorgaande versies. Het lijkt er dus op dat Microsoft met IE9 een flinke inhaalslag gaat maken, een slag waar menig webontwikkelaar al tijden naar verlangt.

Na de verschillende preview versies, die inmiddels 2,5 miljoen keer zijn gedownload, zal de officiële beta van versie 9 verschijnen op 15 september. Wordt vervolgd!

Flash alternatief

Je hebt het prominente Flash object op de homepage vast al gezien, in deze showcase rouleren allerlei actuele nieuws- en blogitems.

Maar wat als je nu geen Flash hebt? Hetzij omdat je op de iPad surft, of omdat je de plugin simpel niet geïnstalleerd hebt. In dat geval wordt er een alternatief getoond bestaande uit voornamelijk HTML/CSS en een klein deel JavaScript. Om de effecten te simuleren die je ook terugziet in het Flash object, zijn er naast CSS3 transities, ook eigenschappen gebruikt uit de CSS3 Backgrounds & Borders module. Dit zorgt ervoor dat, wanneer de browser het toelaat, het geheel er net wat gelikter uit ziet.

Dit alternatief is overigens het beste te bekijken in browsers met gevorderde CSS3 ondersteuning, zoals Google Chrome, Safari en Opera. Daarnaast is het de bedoeling dat er voor de overige Flash objecten (teampagina en naked) ook nog een fraai alternatief gaat komen.

Performance

Performance mattersNet als bij alle andere websites die we opleveren hebben we ook bij deze site het doel gesteld om de pagina's zo snel mogelijk te tonen aan de bezoeker. Om dit te verwezenlijken hebben we verschillende best practices op het gebied van performance doorgevoerd.

Hierbij kun je denken aan minification, gzip compressie, zowel server-side als client-side caching (expire headers) maar ook zaken als efficiënte CSS selectors en JavaScript optimalisatie. Zo wordt er bijvoorbeeld op de homepage enkel de JavaScript ingeladen die vereist is op die pagina. Op die manier hopen we een prettige gebruikerservaring te stimuleren.

Een andere leuke bijkomstigheid is dat Google een tijdje geleden aangekondigd heeft dat de snelheid waarmee webpagina's geladen worden ook meetelt als ranking factor.

Wekelijkse updates

Verder ben ik van plan om per heden wekelijkse updates te posten over de vordering van de HTML5 specificatie en zaken die spelen op bijvoorbeeld de WHATWG mailinglist. Houd dus de weblog in de gaten voor de laatste ontwikkelingen omtrent HTML5!

P.S. Mocht je zaken ontdekken in de code die volgens jou echt niet door de beugel kunnen, houd je vooral niet in en laat het me weten in de comments.

Behavioral Targeting in de praktijk

Door Arthur Engel

Het idee van Behavioral Targeting is niet nieuw, de term en het idee bestaan al jaren en het wordt op veel plaatsen al lang toegepast… - Lees meer

Lees verder