a&m impact internetdiensten

Als afsluiting van mijn stageperiode als frontend webdeveloper moest ik een afstudeeropdracht uitvoeren. Aangezien a&m impact altijd op zoek is naar de nieuwste technieken en mogelijkheden, kreeg ik de mogelijkheid om een parallax website te ontwerpen. Dit leek mij een leuke en leerzame uitdaging en heb deze met beide handen aangegrepen.

Parallax?

Parallax is een nieuwe techniek die het mogelijk maakt om verschillende lagen onafhankelijk van elkaar te laten verschuiven. Ze worden door elkaar overlapt. Dit kan aan de hand van de scroll positie of de muispositie binnen de site. Hierdoor krijg je een mooi 3D effect. Een mooi en bekend voorbeeld is www.nikebetterworld.com.

Hoe werkt parallax?

Stel je wilt de achtergrond verplaatsen op het moment dat er gescrold wordt, dan wordt er de volgende functie gebruikt (stukje wiskunde):

function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
}

Uitleg:
•    x = the horizontale positie van de afbeelding
•    windowHeight = de hoogte van je browser
•    pos = de positie van de scrollbar
•    adjuster = de waarde waarmee je de uitkomst wilt corrigeren
•    px = met hoeveel pixels de afbeelding moet scrollen

Vervolgens wordt er aan de hand van de volgende code de positie berekend:

photo.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, -0.1)});

Daarbij komt de volgende uitkomst: background-position: 50% 25.4px;
Telkens dat er gescrold wordt komen er een aantal pixels bij.

Hoe ben ik te werk gegaan

1: Analyseren en voorbereiding
De eerste fase bestaat uit het bekijken en analyseren van verschillende websites. Van daaruit heb ik bekeken wat de beste mogelijkheden en oplossingen zijn.

2: XHTML
Na het analyseren van een aantal websites heb ik een ontwerp gemaakt en omgezet naar XHTML. Deze heb ik zo opgebouwd zodat dit gaat werken met het parallax effect.

3: De opmaak
De opmaak wordt gemaakt in CSS(3). In de CSS geef ik het pad van de achtergrond afbeeldingen aan waarbij jQuery de positie regelt aan de hand van de scroll positie.

4: Parallax
De jQuery, hier gebeurt het allemaal. Op het moment dat er een div binnen de browser wordt getoond begint het verplaatsen van de achtergrond. Dit heb ik gedaan door de genoemde code te gebruiken bij het voorbeeld.

Tot slot

Over het eindresultaat ben ik zeer tevreden en dat mag ook wel met een eindcijfer van maar liefst een 9. Ben jij ook benieuwd? Hij is te bewonderen op http://pascalmijnen.am-impact.nl

Zoals elke jaar heb ik ook dit jaar weer een bezoek gebracht aan de Webwinkel Vakdagen #WWV12! Samen met collega Marco van Ree ben ik ’s ochtends in de witte Prius gestapt op weg naar Utrecht.

Op vrijdag 13 januari (het is allemaal goed gegaan) ben ik samen met Tom Dellepoort naar Amsterdam afgereisd voor een seminar van Guido Jansen over Online Persuasion, of te wel Online Verleiden.

Het ging er vooral over hoe je de bezoekers van jouw webshop verleidt tot een daadwerkelijke aankoop? En hoe de (voor 95% onbewuste) psyche van jouw onlineklanten en prospects werkt. Ik vond het zelf een zeer interessante seminar waar ik veel van geleerd heb. Vooral omdat de seminar diep inging op gedragsbeïnvloeding vanuit wetenschappelijk oogpunt.

Een kleine opsomming van enkele feitjes en  tips:

1) Ga pas aan de slag met Online Verleiden wanneer je techniek, functionaliteit en gebruikersvriendelijkheid op orde is.

2) Webshops hebben een “groot probleem”: Het conversieprecentage offline is 20 tot 25%, online slechts 1 tot 3,5%. Een overzicht van conversiepercentages van enkele grote webshops:

• Bol.com 2,35% – gemiddelde ordewaarde € 110,-
• Wehkamp.nl 2,90% – gemiddelde ordewaarde € 250,-
• H&M 4,20% – gemiddelde ordewaarde € 70,-
• Amazon.com 6,3% – gemiddelde ordewaarde € 90,-
• Staples 9,50% –  gemiddelde ordewaarde € 430,-
• ProFlowers 14,1%
• Schwan’s 40,6%

3) Hoe kan dit nou dat er een groot verschil is tussen online en offline? Dat komt omdat je online enkele belangrijke factoren mist:

• Geen geur
• Geen directe feedback
• Personalisatie

Gelukkig is er een oplossing! We beslissen namelijk voor 70 tot 90% zonder ons er bewust van te zijn. In de prezi presentatie is hier veel meer over te lezen!

4) En wat ook nog een belangrijke is:

Voorzie elke pagina van één Banaan: Elke pagina moet één element bevatten wat opvalt, het liefst niet meer dan één. Wanneer je bijvoorbeeld kijkt op http://www.mozilla.org/nl/firefox/new/ zie je direct de Download button. Vaak zie je namelijk webpagina’s met wel 10 opvallende elementen en dan weet je niet meer waar je moet kijken.

De hele presentatie is in Prezi hier terug te kijken, dit is zeker de moeite waard want deze staat helemaal vol waardevolle informatie!

Tegenwoordig gebruiken mensen steeds meer verschillende browsers. Te denken valt aan Google Chrome, Mozilla Firefox en OS X Safari. De toename van het aantal verschillende browsers is mede te danken aan het toenemend gebruik van mobiele apparaten zoals smartphones en tablets. Ook is de ontwikkeling in de verschillende browsers groeiende en wordt er steeds vaker een nieuwe versie van een browser uitgebracht.

Bij a&m impact zorgen wij ervoor dat al onze sites en shops op de meest bekende browsers draaien en houden deze trends derhalve ook nauwlettend in de gaten. Op onze platformen zien we dat de meest gebruikte browser nog steeds Microsoft Internet Explorer is. Inmiddels is Internet Explorer (IE) al weer toe aan versie 9 en wordt er al druk ontwikkeld aan versie 10.

In dit overzicht is te zien dat welke browsers in de afgelopen jaren afgenomen en toegenomen zijn.

Je ziet hierin heel duidelijk de afname van IE8 met de komst van IE9. Ook opvallend is de constante groei van Google Chrome en Safari. IE7 daalt gelukkig ook, maar in onze ogen nog lang niet snel genoeg, aangezien we die zo snel mogelijk zouden willen uitfaseren.

Bij a&m impact willen wij natuurlijk zo snel mogelijk mee met de laatste technologieën en mogelijkheden in browsers, maar mogen daarbij niet oudere browsers uit het oog verliezen. Het uitfaseren van browsers wereldwijd gaat soms tergend traag. Een goed voorbeeld hiervan is Internet Explorer 6 (van 27 augustus 2001, meer dan 10 jaar oud!!)

Microsoft wil ook graag verder en voert een sterk ontmoedigingsbeleid van haar eigen, bejaarde browser. Ze hebben het gebruik van IE6 wereldwijd mooi in kaart gebracht:

Hier is te zien dat het gebruik van Internet Explorer 6 in China nog erg hoog ligt (boven de 25%) en in de VS is het gebruik gedaald tot 0.9%. In Nederland is dit nog maar 1.1%.

Ook is te zien dat het gebruik van Internet Explorer 6 sterk is gedaald sinds 2010.

Te hopen is dat in ieder geval het gebruik van Internet Explorer 6, maar ook andere verouderde versies van browsers ook in 2012 verder afneemt. Welke browser heeft jouw voorkeur? Gebruik jij nog ergens IE6? Waarom?

We besteden steeds meer tijd op het internet. Gemiddeld zijn we 104 minuten per dag online actief. Wij van a&m impact zitten iets boven dit gemiddelde maar desondanks is het een behoorlijk gemiddelde wat elk jaar nog stijgt. Bijna twee uur per dag wordt er besteed aan e-mail, informatie zoeken, producten bestellen, Social Media en nog veel meer. We gaan steeds minder e-mail berichten versturen en maken steeds meer gebruik van Social Media. Maar wat gebeurt er nu in 60 seconden online? Onderstaande infographic geeft dit mooi weer:

Doe je ook steeds meer online? Waar gaat bij jou steeds meer tijd inzitten? Social Media? Online shoppen? E-mail? We zijn benieuwd.