Meer online winkelbeleving met html5

Dankzij HTML5 ontstaan er nieuwe mogelijkheden om webwinkels te ontwerpen. Welke toepassingen zijn nu al binnen handbereik? En hoe maken websites er gebruik van?

Tekst: Mark Verduijn

GRAFISCH
Grafisch zijn er meerdere dingen veranderd in HTML5. Het meest in het oogspringende is de video player, desgewenst in de look en feel van de webwinkel. Deze maakt de Flash video player overbodig. Dat is goed nieuws voor iPad- en iPhone-gebruikers, want hun apparaten ondersteunen Flash standaard niet. De e-mailmarketeer kan zijn hart ophalen: met HTML5 is video in e-mail een feit. Ook voor de productpresentatie in de webwinkel zijn er nieuwe mogelijkheden. Denk hierbij bijvoorbeeld aan interactieve 2D- en 3D-animaties. Deze geven zelfs op mobile devices dankzij slimme techniek een soepele gebruikerservaring. Een product in het winkelmandje leggen wordt eenvoudiger dan ooit met slepen en neerzetten (drag and drop).

Inspiratie

• Apple maakt veel gebruik van de grafische mogelijkheden van HTML5. Op de iMac-pagina bijvoorbeeld vliegen de iMacs vanuit de rechterhoek het scherm binnen. Klik in de zoekbox rechtsboven in het scherm en de box wordt groter.
• HTML5 Readiness laat met de grafische mogelijkheden van HTML5 zien welke browsers de nieuwigheidjes ondersteunen.
• Drag and drop een product in het winkelwagentje.
• De website voor de nieuwe Lamborghini Aventador zit vol met grafische ‘HTML5-trucjes’. Kijk vooral even naar de video player (geen flash) die visueel verzinkt in het design.

LOCATIE
HTML5 maakt dingen mogelijk die tot voor kort alleen nog maar met speciale apps konden. Eén daarvan is het bepalen van de locatie van de gebruiker. Met geolocation in HTML5 is zowel de locatie van een mobiele gebruiker als van een desktopgebruiker op te vragen. Dat komt omdat geolocation voor HTML5 niet alleen gebruikmaakt van GPS maar ook van andere bronnen zoals het ip-adres, driehoeksmeting van gsm-masten en Wifi. Location based services zoals Foursquare zijn momenteel in opkomst. Met locatiebepaling in HTML5 voor zowel mobiel als desktop ontstaat er voor webwinkeliers een geheel nieuwe dimensie aan toepassingen. ‘Vind afhaallocatie in uw buurt’ is een voor de handliggende. In verband met de privacy zal de browser de gebruiker waarschuwen als zijn locatie wordt gevraagd.

Inspiratie

• Een hotel, ziekenhuis of tankstation in de buurt vinden in slechts één muisklik? Ineeda is een demo op de Mozilla-developers website waarmee dat kan.
• Uw Twitter-buren leren kennen kan met Tweets around me. Een applicatie die dankzij geolocation laat zien welke Twitteraars zich in een straal van tien tot vijftig kilometer van de gebruiker bevinden.
• Een qr-code is een tweedimensionale streepjescode die is te scannen met de camera van een mobieltje. De gescande qr-code kan een tekst bevatten of de gebruiker doorsturen naar een website. GeoQR voegt de qr-code en geolocation samen. Resultaat: een qr-code met uw locatie.

LOKALE OPSLAG
Continu online lijkt tegenwoordig een vanzelfsprekendheid, maar dat is het allerminst. Denkt u maar eens aan een haperend Wifi- of 3G-netwerk. Dankzij HTML5 gaat data niet meer verloren zodra de gebruiker offline is. Zo raakt bijvoorbeeld de inhoud van een winkelwagentje niet verloren totdat er is besteld. Of blijven de ingevulde formuliergegevens bewaard. Inderdaad is dit ook met cookies te regelen, maar deze oplossing is sneller, veiliger en vergt minder programmeercode volgens experts. Bovendien kent HTML5 het voordeel dat grotere hoeveelheden data lokaal bij de gebruiker (in de database) is op te slaan.

Inspiratie

• Een online sticky note die gebruikmaakt van de lokale database (van de gebruiker) om de boodschap op het briefje offline te onthouden.
• Zowel on- als offline nooit meer dingen vergeten met de ‘Getting Shit Done to-do list’.
• Lokale databaseopslag van tweets. Berichten blijven dus zonder internetverbinding behouden.

____________________

Wat is HTML?
HTML (HyperText Marking Language) is een opmaaktaal voor het presenteren van webpagina’s in webbrowsers. De huidige versie HTML4.01 bestaat sinds 2001. De opvolger HTML5 is sinds 2007 in ontwikkeling. Naar verwachting zal HTML5 officieel in 2014 worden afgerond.

Ondersteuning en HTML5
HTML5 is nog volop in ontwikkeling. Dit heeft tot gevolg dat er nog iedere dag dingen bijkomen of veranderen. Voor u als webwinkelier is het belangrijk te weten dat niet alle browsers de nieuwe snufjes van HTML5 ondersteunen. Een hele nieuwe webwinkel ontwerpen in HTML5 is vooralsnog geen optie. Wel zijn onderdelen te gebruiken voor het maken van toepassingen. Wilt u een HTML5-toepassing (laten) maken? Ga dan eerst na met welke browsers (pc, tablet en mobile) uw bezoekers winkelen. Pas daarop het HTML5-gebruik aan.
____________________

NB: werken de voorbeelden in het artikel niet (goed)? Maak dan gebruik van een andere browser.    

Mark Verduijn publiceert in vakbladen over e-commerce en internetmarketing. Daarnaast is hij online conversie copywriter.

Dit artikel verscheen eerder in Twinkle 10-2011.