Dat is hier.

De vorige versie van de website, gelanceerd in 2004, werd ook door ons gebouwd. 6 jaar later was het dringend tijd voor een volledige vernieuwing. Het op maat gemaakte Content Management Systeem (CMS) dat de redactie gebruikt om de website up to date te houden werd grotendeels behouden; het systeem werd alleen op een aantal punten uitgebreid of aangepast.

Het is vooral de website zelf die grondig werd aangepakt. Van design tot wat er precies waar getoond wordt, alles werd vernieuwd. De homepagina wordt veel vaker geupdate, achterliggende pagina’s kregen related content, er wordt gebruik gemaakt van tags en de redactie kan razendsnel artikels verzamelen in nieuwe overzichtspagina’s (bij een bepaalde gebeurtenis, evenement of rond een bepaald thema).

Ook het aanbieden van audio werd volledig herbekeken. De live player is niet enkel meer het ding waarmee je naar de radio luistert, maar biedt een twitter feed aan en de meest recente artikels van de homepagina. De on-demand player biedt de audio nu ook aan als een stream, zodat je razendsnel kan doorspoelen naar een onderdeel in het programma, zonder eerst het hele bestand te moeten inladen. De on-demand player is ook uitgebreid met gerelateerde inhoud en extra audio fragmenten. Beide players werken op basis van een Flash Media Server stream.

Doorheen de site wordt ook inhoud van elders ingepast zoals Flickr slideshows, YouTube video’s, twitter feeds, RSS feeds, etc..

De website moest vooral dynamisch zijn. Om deze reden werden er voor verschillende diensten workflows geïmplementeerd. Zo kan men bijvoorbeeld precies uitrekenen wat een nieuwe aansluiting of een nieuwe meter kost. Ook het aanvragen van een aansluiting of meter is in de nieuwe website een koud kunstje geworden. Bezoekers volgen een eenvoudige flow waarmee ze uiteindelijk een aanvraag kunnen doen. Meerdere aansluitingen kunnen aangevraagd worden. Deze werken worden als het ware in een ’shoppingbasket’ gelegd waarna er verder ‘geshopt’ kan worden. Omdat er veel technische termen en begrippen worden gebruikt staat er indien nodig de uitleg erbij.

De tools zijn niet alleen voor particulieren, ook professionele en industriële klanten kunnen hier hun gas of elektriciteit aansluiting aanvragen. Samen met Marlon heeft Sibelga deze flows ontwikkeld. Hierdoor zijn ingewikkelde formulieren ineens een stuk overzichtelijker!

The Grimace Project: Scott McCloud, bekend van de Google Chrome strip, gaf aan dat gelaatsuitdrukkingen allemaal een combinatie zijn van één of meer van deze 6: blij, verrast, bang, triest, afschuw, boos. En dat heeft iemand in een kleine tool gestopt: The Grimace Project.

Jeremy Rifkin voor The RSA:

Tufte: Het begint stilaan cliché te worden, dat PowerPoint bashing, maar nog eentje voor onderweg:

Mirrors edge: Dit spel is na de eerste demo’s veel vereenvoudigd. Niemand kon het spelen zonder regelmatig boven de pot te hangen:

Local Maxima Problem: hier.

Salting The Tip Jar: hier.

Het verborgen logo in het FedEx logo: zie je het?

The Fun Theory: let op hoe niemand de trap gebruikt aan het begin van het filmpje:

What is Information Architecture? Of beter: What is Information en What is Architecture. Hier.

“Just do something, so we can change it!“ Uitspraak, tijdens een vergadering bij Pixar, waar iemand niet volledig vast zat en niet meer wist wat te doen.

• online een CV aan te maken (manueel, door het importeren van een Microsoft Word document of door je gegevens uit LinkedIn op te halen) en zo gevonden te worden door werkgevers
• vacatures te ontvangen op maat van je profiel
• online te solliciteren

Jobs & Careers zorgde zelf voor analyse en design. Marlon zorgde voor de volledige ontwikkeling op maat van dit onderdeel van de website. Op basis van de analyse van Jobs & Careers bouwden we deze applicatie terug van nul op. De vorige versie van Mijn/Vacature werd volledig vervangen met de bedoeling verdere productontwikkeling mogelijk te maken.

Specifiek voor deze applicatie zijn o.a. integratie tussen PHP en Microsoft SQL Server, het gebruik van de LinkedIn API, integratie met verschillende SOAP webservices (voor gepersonaliseerde zoekopdrachten, Word document parsing, CV updates, online solliciteren, …) en integratie met het CRM systeem van Vacature.

Ook de migratie van alle gegevens uit de vorige versie van Mijn/Vacature (profielen, cv’s, gepersonaliseerde zoekopdrachten, diploma’s, werkervaringen, …) naar de nieuwe versie werd door Marlon afgewerkt.

Ondertussen is al een nieuwe versie van deze Mijn/Vacature gelanceerd. Mijn/Vacature is een onderdeel van de vacature.com site dat constant evolueert.

Het eerste anderhalf jaar hebben we alles zelf gedaan, maar op den duur waren we 70 uur aan het werken, dat moet je gewoon doen in het begin want alles kost geld. Maar dat werd onhoudbaar, vandaag hebben we 7 personeelsleden in dienst

Zeker kijken!

Update: het item kan je hier herbekijken, vanaf 3:00.

Zo’n wedstrijden impliceren altijd dat er zoiets bestaat als een winnaar en verliezers. We voelen er ons altijd wat onwennig bij. Maar natuurlijk is zo’n prijs een bevestiging van een bepaalde aanpak en filosofie waar we voor staan.

Het leuke aan deze award is de bevestiging van wat we oorspronkelijk zelf voor ogen haden bij het uitwerken van deze website (ik citeer even een paar opmerkingen van de jury):

• Grafisch creatief uitgewerkt maar toch gebruiksvriendelijk
• Goede categorisatie en navigatie
• Gelaagde content met aandacht voor hoe mensen lezen op het web

Deze website is niet alleen onze verdienste. Integendeel. De analysefase was een zeer nauwe samenwerking met de mensen van Plan België. Een samenwerking waarbij we via een prototype dat meer dan 7 maal werd herwerkt en via vele langdurige gesprekken tot het eindresultaat kwamen.

Deze award is een leuke aanleiding om het project wat verder uit de doeken te doen. In een tweetal blogposts zullen we binnenkort uitleggen hoe we tot het eindresultaat zijn gekomen.

Kudos aan AG Consult voor het zeer doorzichtig en nuchter organiseren van deze award.

Plan België

Zo hebben we ondermeer gezorgd voor een grondige frontend optimalisatie bij de uitwerking van de Plan België website. Het doel daar, was om het aantal requests tot een minimum beperken, omwille van het grafische karakter van de site. Daarom leek het ons wel een uitdaging om creatief aan de slag te gaan met PNG afbeeldingen en trachten 1 sprite te maken voor alle titels over heel de website.

Flexibele en herbruikbare PNG’s

Doorheen de Plan België website vind je dit soort titels:

Voorbeeld titels op Plan België website

Zoals je kan zien: verschillende kleuren en variabele breedtes zijn mogelijk.

Analyse en aanpak

Het idee dat we hadden, was om een transparante afbeelding te gebruiken, waarbij we hetgene dat wit moet zijn, wit houden en hetgene ingekleurd moet worden, transparant. Daardoor kunnen we via CSS een achtergrondafbeelding + achtergrondkleur specifiëren.

Om het gewenste effect te krijgen, maken we gebruik van een 24-bit PNG file. De afbeelding omvat tevens een semi-transparant gedeelte, waar een lichtere variant van de kleur doorschijnt (opacity 85%).

(Semi)transparante 24-bit PNG waarbij ter illustratie het transparante gedeelte groen is ingekleurd

De sprite bestaat dus uit twee delen: .bg en .border

Omdat transparante 24-bit PNG files niet ondersteund worden in Internet Explorer 6, opteren we ervoor om in die browser een 8-bit PNG versie te voorzien. Het resultaat in deze browser is een iets ruwere versie, maar omdat bij Plan België het toch ging om een grunge look, vormde dat geen probleem.

De code

HTML

1. <h2>
2. <span class="border">Steun Plan</span>
3. <span class="bg"></span>
4. </h2>

Er zijn twee extra spans nodig om de styling naar behoren uit te voeren.

CSS

1. h2 {
2. position: relative;
3. font-size: 15px;
4. height: 32px;
5. }

Position wordt op relative geplaatst, om een span absoluut te kunnen positioneren t.o.v. de h2. Verder wordt een vaste hoogte bepaald, omdat de children ofwel absoluut gepositioneerd zullen zijn, ofwel een float zullen krijgen.

1. .bg {
2. position: absolute;
3. left: 0;
4. height: 18px;
5. padding: 7px 10px 3px;
6. color: #fff;
7. background: #0D5F99 url(img/sprite.png) no-repeat 0 0;
8. }

De .bg class is het gekleurde vlak achter de tekst. Het wordt absoluut gepositioneerd, krijgt een witte tekstkleur, als achtergrond een kleur én een afbeelding (het bovenste deel van de sprite).

De totale hoogte is 18px + 7px (padding-top) + 3px (padding-bottom) = 28px.

1. .border {
2. float: left;
3. margin: 2px 0 0;
4. height: 28px;
5. width: 100%;
6. background: #0D5F99 url(img/sprite.png) no-repeat 0 100%;
7. }

De .border class krijgt een float: left, alsook de achtergrondkleur en afbeelding (het onderste deel van de sprite). De hoogte wordt ook ingesteld op 28px, maar met een margin-top van 2px, zodat de lijn net onder het tekstvlak wordt getoond.

De breedte van de .border krijgt een waarde van 100%. Hij neemt dus de hele breedte van zijn parent in (dus de h2). Hierdoor zal de titel steeds even breed zijn als de container waarin hij zich bevindt (bvb smalle kolom, volledige pagina breedte, …)

Om een gelijkaardig resultaat te krijgen in IE6 waren nog enkele aanpassingen nodig in de conditional stylesheet.

1. .bg, .border {
2. background-image: url(img/sprite_8bit.png);
3. z-index: 20;
4. }
5. .example .border {
6. position: absolute;
7. margin-top: 0;
8. height: 30px;
9. z-index: 10;
10. }

Varianten

Op de Plan België website wordt ook een vereenvoudigde versie van deze titels gebruikt, waarbij een grunge lijntje onder de titel staat. Ook hier hanteren we dezelfde techniek.

Voorbeeld van vereenvoudigde PNG titels

Demo

Voor het gemak heb ik een demo klaargezet.

Voordelen van deze techniek

• Slechts 1 HTTP request voor de afbeelding
• Alle kleuren van titels (voor- en achtergrond alsook het semi-transparante gedeelte) kunnen eenvoudig via CSS aangepast worden
• Geen image replacement technieken nodig
• Titel zijn horizontaal schaalbaar
• Je moet geen afzonderlijke images maken voor de verschillende titels of kleuren

Er zijn echter twee zaken waar niemand vragen over stelt: stock en online betalen. Omdat ze beiden evident lijken. Die heb je nodig, als je een webwinkel lanceert, toch? Gewoon. Online betalen. Gewoon toevoegen. Toch?

Over dat online betalen (met VISA, MasterCard, PC Banking, etc) weet dus niemand wat het exact inhoudt. Moet je gewoon een bankrekening hebben? En als je al een winkel hebt en daar staat zo’n Banksys bakje, dat is toch voldoende? En wat zal het kosten?

We proberen aan antwoord te bieden op deze vragen:

• Wie en wat heb ik nodig
• Met wie moet ik een contract aangaan
• Wat is een acquirer
• Wat is een betaaldienst

Wie en wat heb ik nodig

Het komt hierop neer: de bezoeker van uw webshop betaalt, en dat geld moet bij u terechtkomen. In deze ketting zijn er 3 schakels: de website, de aanbieder van de betaaldiensten (een tussenpartij, wordt soms ook gateway genoemd) en een transactieverwerkende instelling, wat een mondvol is voor een bank of acquirer.

En eigenlijk kan je dit perfect vergelijken met de offline wereld. Stel, je gaat uit eten in een restaurant. Betaal je met je credit card, dan zijn er daar ook 3 schakels: het restaurant (is hetzelfde als jouw website, de plek waar er gekocht wordt), het creditcardapparaat (is hetzelfde als de betaaldienst) en – laten we nog éénmaal die term gebruiken – de transactieverwerkende instelling (uw bank of uw acquirer). Het creditcardapparaat maakt een verbinding met de bank/acquirer van het restaurant, die dan de creditcard controleert en het geld overmaakt van jouw rekening naar die van het restaurant.

Bij een webshop is het dus net zo:

1. je zal in je website een soort creditcardapparaat moeten integreren, dat is de betaaldienst, de tussenpartij die de verbinding zal leggen met de bank/acquirer.
2. om het geld te kunnen laten overmaken van de rekening van de betaler naar de rekening van je e-commerce site, moet je ook een contract hebben met een bank/acquirer, je weet wel, die van die transactiever…dinges.

Met wie moet ik dan een contract aangaan?

Om te beschikken over de betaaldienst – het creditcardapparaat van je website – ga je een contract aangaan met iemand die zo’n dienst aanbiedt. Dat is één. Hieronder vind je wat meer uitleg.

En het geld moet nog op je rekening komen, en vooral, je moet het betaalmiddel (kaart, pc-banking) waarmee je klant betaalt kunnen controleren. En dat kan alleen een bank of acquirer. Dus: wil je mensen laten betalen met VISA, dan moet je een contract aangaan met een acquirer die VISA aanbiedt. Wil je mensen laten betalen via de KBC knop, dan moet je een contract aangaan met KBC. Wil je beide, dan moet je een contract aangaan met beide.

Voor elk betaalmiddel dat je aanbiedt moet je een contract aangaan met een acquirer of bank. Sommige banken of acquirers bieden wel meer dan één betaalmiddel aan. Hieronder vind je meer uitleg.

Dat is dus minimum een contract aangaan met twee partijen.

Wat is eigenlijk een acquirer, en is dat niet mijn bank?

Een acquirer is een financiële instelling die jou als webwinkel de toestemming geeft betalingen te aanvaarden van een welbepaalde kaart of pc-banking. De acquirer vraagt het geld aan de bank (of kaartuitgever) van de persoon die koopt en zorgt dat het geld op jouw bankrekening terechtkomt.

Moet een acquirer dezelfde bank zijn als de bank waar mijn klant zijn creditcard van heeft gekregen? Neen, absoluut niet. Ik zit zelf bij Argenta. Ik heb een VISA kaart van Argenta (mijn kaartuitgever dus). Dat betekent niet dat ik enkel kan winkelen bij websites die met Argenta samenwerken (als acquirer). Argenta is zelfs helemaal geen acquirer.

Welke acquirer helpt me bij welk betaalmiddel?

Er zijn verschillende acquirers of banken waar je mee kan samenwerken.

Wil je Visa en/of MasterCard aanbieden (beiden gaan meestal samen), dan kan je o.a. terecht bij Elavon (de acquirer van Monsters with an Attitude), Europabank, Atos Worldonline (eigenaar van Banksys en Bank Card Company (BCC)), PaySquare, EMS card, etc.

Voor Maestro vind je een paar van dezelfde spelers terug: Europabank, Atos Worldonline, PaySquare, EMS card, etc.

Bancontact/Mister Cash wordt enkel door Atos Worldonline aangeboden. Zie hier voor meer info over Bancontact/Mister Cash. Vergeet niet dat dit betaalmiddel hoort te verdwijnen in de nabije toekomst.

Daarnaast heb je ook nog 4 banken die hun eigen betaalmiddel aanbieden. Zo kan een bezoeker van je website bij jou kopen, en betalen via zijn eigen pc-banking. Zo biedt KBC/CBC betalingen aan via KBC online/CBC online; Dexia voor haar Dexia Direct Net; ING voor ING’HomePay; en Centea voor Centea Online. Ook ping.ping (het vroegere Tunz) is een acquirer voor zijn eigen betaalmiddel.

Er zijn natuurlijk nog tal van andere betaalmiddelen waarvoor je met andere acquirers een contract moet aangaan. We hebben hier enkel de betaalmiddelen opgelijst die het meest in gebruik zijn.

Wat kost dat?

Dit hangt volledig af van de acquirer of bank, welk type contract je hebt, en hoe goed je kan onderhandelen. Acquirers en banken vragen meestal een transactiekost, dit in de vorm van een percentage (het meest voorkomend, en vaak 3%) of een vast bedrag.

De betaaldienst (tussenpartij of gateway)

De betaaldienst is dus het equivalent van het creditcardapparaat in het restaurant. Belangrijk is dat je een betaaldienst kiest die jouw betaalmiddel aanbiedt. De betaaldienst moet namelijk in staat zijn de nummers en gegevens die je ingeeft naar de correcte acquirer te sturen, en die daar te laten controleren, en in staat zijn daar een antwoord van te ontvangen. Een betaaldienst is puur een doorgeefluik. Vandaar dat soms de naam gateway valt.

Waarom heb ik die nodig als ik al een contract heb met mijn bank?

Wel de reden is eenvoudig: de betaaldienst, een goeie betaaldienst althans, biedt veel betaalmiddelen aan. Stel dat je rechtstreeks zou werken met een acquirer.

Je beslists pc-banking van KBC aan te bieden, en VISA. Jouw website bouwer moet dan jouw website zodanig programmeren dat die met twee compleet verschillende systemen kan communiceren. En telkens als je een nieuw betaalmiddel zou kiezen, moet je opnieuw de programmatie laten aanpassen.

Een betaaldienst is dus een noodzaak. Deze dienst is het centrale doorgeefluik dat voor verschillende betaalmiddelen werkt. Je moet enkel je website met die ene betaaldienst laten communiceren. De betaaldienst zorgt voor de communicatie met de acquirer/bank.

En eenmaal een goede betaaldienst gekozen, is het een eenvoudig om extra betaalmiddelen toe te voegen, wanneer je dat wil. Telkens moet je dan enkel nog een nieuwe acquirer zoeken en bij de betaaldienst de nodige instellingen bepalen.

Welke betaaldienst kan me helpen?

In België is de meest bekende Ogone. Ogone is het bedrijf waar ook Monsters with an Attitude, Poncha, Codima en Tele Atlas mee samenwerken. Ze zijn marktleider in België, zijn actief in heel wat andere Europese landen, en bieden naast de hierboven genoemde klassieke betaalmiddelen ook meer exotische betaalmiddelen aan.

Je hebt ook Neos Solutions, van Fortis. Maar eigenlijk is dit Ogone met een ander kleurtje. De technologie, het platform, de servers, alles is van Ogone, maar dus met een andere merknaam. Wie klant is bij Fortis kan bij Neos Solutions aankloppen, en in sommige gevallen daar zelfs een goede deal mee afsluiten.

Wat kost dat?

Ook hier weer hangt alles af van het type product en contract je aangaat. Meestal betaal je naast een eenmalige setup-kost en een maandelijkse vaste kost ook nog eens een transactiekost. Ook hier weer in de vorm van een percentage of vaste kost per transactie.

Is er een link tussen de betaaldienst en de acquirer?

Eigenlijk niet, maar ook weer wel. Er zijn weinig betaaldiensten die ook acquirer zijn, en ook omgekeerd komt dit zelden voor. Nu, banken ruiken altijd geld en daarom starten sommige banken hun eigen betaaldienst op.

Je hebt onder andere het eerder vermelde Neos Solutions, opgericht door Fortis. Maar zoals gezegd, dit is eigenlijk Ogone met een ander kleurtje.

Zijn er nog andere manieren om online te betalen?

iDEAL is in Nederland stilaan het standaard betaalmiddel geworden. iDEAL, onder andere beschikbaar bij De Kleine Zebra, is een initiatief van ING, ABN Amro, Rabobank en Postbank. iDEAL is geen bankkaart, maar is op zich een doorgeefluik naar de pc-banking omgeving van de klant.

iDEAL is een betaalmiddel, en wordt ook aangeboden door Ogone.

Je hebt natuurlijk ook PayPal, een online betaaldienst die je kan integreren om via die weg alle betalingen te verzorgen en te ontvangen. PayPal is eigenlijk acquirer en betaaldienst tegelijk. Je kan via PayPal betalen met je PayPal rekening, maar ook met Visa, etc.

En Ogone biedt zelfs de mogelijkheid aan om via hun betaaldienst te betalen met je virtuele PayPal rekening.

Conclusie

• je gaat een contract aan met een acquirer of bank, en dat voor elk betaalmiddel dat je wil aanbieden (sommige acquirers beiden verschillende betaalmiddelen aan)
• je gaat een contract aan met een betaaldienst
• je integreert je website met die betaaldienst (er is natuurlijk nog ietwat programmeer werk om alles mooi te doen samenwerken)