Presentatie: random webshop ideeën, trends & design voorbeelden

Bij Marlon hechten we al sinds het begin veel belang aan het delen van kennis. Iemand die naar een conferentie of opleiding gaat, moet voor alle collega’s een presentatie geven over de opgedane ideeën en kennis. Ook tijdens de lunchpauze op vrijdag worden intern presentaties gegeven over allerhande onderwerpen (onder de vrij klassieke noemer Lunch ‘n Learn). Deze presentatie geeft een ongestructureerde reeks ideeën, trends en leuke features voor webshops of e-commerce sites.

Random e-commerce ideas & trends
View more presentations from Vincent Mouton

Moet je als bedrijf aanwezig zijn op Google+?

Sinds enkele dagen kunnen bedrijven ook een pagina aanmaken op Google+, het sociale netwerk van Google. In deze blog post geven we enkele redenen waarom je als bedrijf aanwezig moet zijn op Google+ en enkele redenen waarom je dat best niet zou doen.

Voorbeeld van een Google+ Page: The Muppets

Voorbeeld van een Google+ Page: The Muppets

Waarom Google+
De Google+ Pages maken het mogelijk om op een nieuwe manier te verbinden en te converseren met je fans. Zo kan je o.a. een hang-out (videochat met meerdere personen) organiseren met je grootste fans. In deze hang-out kan je exclusieve informatie geven of een product in première voorstellen. Je kan je fans ook een blik achter te schermen gunnen. Bijvoorbeeld: hoe worden bestellingen ingepakt? Hoe versiert die bakker zijn heerlijke taarten? Zaken waar fans open voor staan en die de transparantie van de onderneming bevorderen.

Een hang-out is daarnaast ook geschikt als customer service-tool. Stel dat één van je klanten een probleem heeft met één van je producten. Je kan hem wel helpen via e-mail en telefoon. Maar met een hang-out kun je deze klant in realtime helpen, én het is visueel. Jij toont effectief hoe een product werkt, hoe het te installeren, en geeft extra uitleg. Je ziet onmiddellijk of de klant het goed doet en of er nog andere problemen opduiken. Het is dus mogelijk op via digitale weg dezelfde service aan te beiden als in een traditionele winkel.

Voorbeeld van een Google+ Page: Toyota

Voorbeeld van een Google+ Page: Toyota

Waarom niet Google+
Geen tijd voor Google+? Dan begin je er best niet aan. Dit is een regel die kan gelden voor alle sociale media. Aanwezigheid op sociale media vergt een state of mind én tijd én toewijding. Als je dit niet kan bieden dan is het beter dan je niet actief bent op sociale media. De resultaten gaan teleurstellend zijn en het gebrek aan interactie van jouw kant uit kan slecht zijn voor het imago van je zaak. Ben je echter overtuigd van de kracht van sociale media, maar heb je echt geen tijd om je er zelf met bezig te houden, dan kan je deze activiteiten nog altijd uitbesteden. Bij Marlon bieden we een hele resem diensten aan die uw hierbij kunnen ondersteunen. Neem zeker eens contact op.

Een andere reden waarom je Google+ best links laat liggen is de afwezigheid van je doelgroep. De kans dat dit het geval is, is redelijk groot. Google+ is nog een relatief nieuw sociaal netwerk en veel mensen uit België zijn nog geen lid, zeker in vergelijking met Facebook. Dat wil nog niet zeggen dat je je niets moet aantrekken van Google+. Het platform heeft heel wat in zijn mars en kan binnen afzienbare tijd sterk groeien. Het is aangeraden dat je het goed in de gaten houdt. Een goede tip: maak al een pagina aan op Google +, zo ben je zeker dat je in de toekomst de naam hebt die jij wil.

Conclusie
Of je als bedrijf nu wel of niet een pagina moet aanmaken op Google+ hangt vooral af van de doelstellingen die voor ogen hebt en of je er genoeg tijd voor hebt. Niemand staat te wachten op een pagina waar de berichten een letterlijke kopie zijn van de Facebook- of Twitterpagina. Als je niet goed weet hoe je er aan moet beginnen, kun je altijd hulp inroepen van professionals.

En wij? Enthousiast als we zijn voor nieuwe technologie heeft Marlon natuurlijk ook al een pagina op Google+.

Google gaat de komende maanden heel wat updates voor zijn sociaal netwerk lanceren. Er gaat dus heel wat veranderen, waardoor Google+ interessanter zal worden voor jouw zaak. Blijf het in de gaten houden.

HTML5 videospeler

Met de komst van HTML5 werd de video-tag geïntroduceerd en daarmee een alternatief voor de Adobe Flash-player om video in een site af te spelen. Dat is vooral handig op devices die geen Flash ondersteuning aanbieden.
Zoals verder in detail aangegeven is implementatie in de huidige browsers niet optimaal en voorzien we nog altijd een Flash-player als fallback voor browsers zoals Internet Explorer 6, 7 en 8.

De basiscode

  1. <video width="608" height="256" controls">
  2. <source src="video/walle_small.mp4">
  3. </video>

Ondersteuning van video

  • Firefox 3.5+, Chrome 5.0+, Opera 10.5+: Theora (.ogv files)
  • Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+: H.264 (.mp4 files, baseline Profile + AAC audio met een “low-complexity” profile)
  • Internet Explorer 9, Firefox 4.0+, Chrome 6.0+, Opera 11.0+: WebM (.webm files)

Zoals je ziet, wordt de video-tag enkel in recente browsers ondersteund, en bovendien ondersteunen ze niet allemaal hetzelfde formaat. We moeten daarom 3 verschillende sources vermelden in de code. Daarbij vermelden we ook het type en de codec die gebruikt moet worden op het bijhorende bestand te kunnen lezen. De enige uitzondering daarop is de .mp4 want Android 2.2 kan dit dan weer niet lezen.
Ook de volgorde is belangrijk. De .mp4 moet eerst staat, vooral omdat iOS 3.x enkel de eerste source-tag leest en de rest overslaat.
Meer informatie over codecs en converteren vind je op Dive into HTML5

De code

  1. <video width="608" height="256" controls>
  2. <source src="video/walle_small.mp4"><!-- H.264 -->
  3. <source src="video/walle_small.webm" type="video/webm; codecs="vp8, vorbis""><!-- WebM -->
  4. <source src="video/walle_small.ogv" type="video/ogg; codecs="theora, vorbis""><!-- Theora/Vorbis -->
  5. <!-- Include fallback here -->
  6. </video>

Om ervoor te zorgen dat de server het juiste mime-type gebruikt plaatsen we nog deze regels in onze .htaccess file. als dit niet werkt moeten de mime-types waarschijnlijk nog toegevoegd worden aan de server zelf.

  1. AddType video/ogg .ogv
  2. AddType video/mp4 .mp4
  3. AddType video/webm .webm

Oudere browsers

De fall-back code (bvb. een embed van een Flash player of een YouTube video) mag je tussen de video-tags, na de source-tags zetten. Recente browsers zullen die code negeren, terwijl oudere browsers de video- en source-tags dan weer niet gebruiken.

Mobiele browsers

  • Android 2.2 bevat een bug waardoor de default controls van video niet gebruikt kunnen worden, we zijn dus genoodzaakt om via javascript custom controls te voorzien.
  • iPad/iPhone kunnen dan weer geen custom controls inlezen dus moeten we daar terugvallen op de default controls.
  • iOS 3.x op iPad en iPhone bevat een bug waardoor de video niet zal spelen als er een poster-attribute meegegeven is aan de video. Dus vooral geen poster gebruiken als je deze wil ondersteunen.

Custom controls

Als we graag wat meer controle hebben over hoe onze player eruit ziet (en als we Android 2.2 willen ondersteunen) gaan we zelf knoppen toevoegen en aansturen via JavaScript. In onderstaande custom player gebruiken we alvast deze functies, opgebouwd via JQuery:

  • Play/pauze knop
  • Grote play/pauze knop als overlay
  • Rewind
  • Tijdsverloop
  • scrubber
  • Totale speeltijd
  • Mute
  • Volume slider

Demo

Je kan de player zien in deze demo.

HTML5 presentatie: een introductie

Onlangs gaf ik voor mijn collega’s op kantoor een presentatie over HTML5. Dit is het eerste deel van een tweeluik en tevens een introductie tot de verschillende nieuwe of vernieuwde elementen in HTML5.

Het is een eerste kennismaking met wat HTML5 op structureel gebied (markup) te bieden heeft. In een volgende presentatie, Advanced HTML5, zal ik verder uitweiden over de verschillende API’s waarover HTML5 beschikt.

Kris Kras is “meest gebruiksvriendelijke bedrijfs- of commerciële website 2010″

Screenshot van de homepagina van de Kris Kras websiteEén jaar nadat de website van Plan België werd uitgeroepen tot “meest gebruiksvriendelijke overheids- of non-profit website 2009″, is dit jaar nog een website gemaakt door Marlon in de prijzen gevallen tijdens de Usability Awards.

De website van Kris Kras, een reisbureau dat begeleide groepsreizen organiseert voor jongeren, kreeg de prijs van de jury als “meest gebruiksvriendelijke bedrijfs- of commerciële website”.

De jury prees de website voor haar speels maar tegelijk duidelijk grafisch design. Een reis zoeken is eenvoudig, de informatie is duidelijk en de formulieren zijn overzichtelijk.

Ook de website van Sibelga — ook gemaakt door Marlon — mag vermeld worden, want deze werd dit jaar tweede in de categorie overheids- of non-profit websites. En om het helemaal af te maken: de website van Kris Kras werd dan nog eens tweede in de stand van website verkozen door het publiek.

Een wedstrijd, zeker rond websites, is niet evident: oordelen over een website kan tot op zeker hoogte zeer objectief gebeuren, maar nooit honderd procent. We beseffen dan ook zeer goed de relativiteit van zo’n award. Maar wat belangrijker is hier, is dat onze aandacht voor gebruiksvriendelijkheid en onze aanpak (eerst nadenken, dan rustig bouwen, en zoveel mogelijk op maat) beloond worden door een dergelijke award.

We geven grif toe dat we eerst goed moeten nadenken over een website, en deze niet zomaar uit onze mouw kunnen schudden. Zo zijn er bij de website van Kris Kras heel vroeg een paar foute keuzes gemaakt, en hebben we die samen met de klant snel kunnen onderkennen en oplossen. Vandaar dat wij enorm veel belang hechten aan een langdurige en doorgedreven analyse fase. We beseffen ook zeer goed dat geen van beide websites perfect is. Er wordt constant aan gesleuteld, we proberen aanpassingen uit, we herwerken design, layout, techniek en teksten.

De Usability Awards is een organisatie van AG Consult, en we danken hen dan ook voor het initiatief.

We bedanken enerzijds onze klanten — die voor ons hebben gekozen en die ons de kans hebben geboden een mooi resultaat neer te leggen — maar vooral de mensen die het hebben gebouwd: het Marlon team. Heersers!