Blog van Bart De Waele

Social Media Forum

netlash — Wed, 25 Nov 2009 09:16:00 UT

Op 3 december gaat het Social Media Forum door: een dag lang concrete informatie en cases over Social Media, hoe er geld mee te verdienen, en hoe het in te zetten voor je bedrijf.

Inge Wiame, Business Development Manager Benelux - Netlog
Presentation of the renewed Netlog platform

Tom Remans, Marketing Manager - Luon
Client-case Solo : social media as part of an integrated marketing approach

Nico Henderijckx, Online Marketing Manager - Sony VAIO of Europe
Client-case Sony VAIO: “VAIO of Europe - Social media approach

Charles Crouch, Lecturer Boston University
Planning a social media campaign

Clo Willaerts, Marketing manager sanoma magazines
How to make money with Social Media

Genevieve Tissot, Managing director BlueKiwi
Client case social media platform

Kim Leunen, Account Manager S²Media
Why you should join / Define your goals / How to Measurements & tools / Case - tips & tricks

Evan Van Lissum, Managing partner The Parking Lot
Social branding : New kids on the blog

Bart de Waele, Co-founder Talking Heads
Nike Running & Social Media

Didier Ongena, Director Microsoft Advertising

Meer info op www.socialmediaforum.be.

Ik zal er alleszins zijn - jullie ook?

Social Media Forum geschreven door Bart in: opleiding

Tags: event, forum, opleiding, social media

Het grafisch proces

netlash — Tue, 24 Nov 2009 06:11:00 UT

De sleutel tot een goed grafisch ontwerp ligt voor een groot deel bij het proces. Zowel beginnende als ervaren ontwerpers kunnen voordeel halen uit het optimaliseren van dit proces.
1. Begin met een goede briefing

Begin door een duidelijke beschrijvende briefing aan de klant te vragen. Stel eventueel zelf een vragenlijst op die de klant kan invullen. Probeer zoveel mogelijk concrete zaken te verzamelen. Wanneer de klant een vaag buikgevoel beschrijft, kan je vragen of hij dit kan illustreren met voorbeelden van andere sites, logo’s en stijlen.

Wanneer je voelt dat je weet welke richting de klant uit wil, kan het handig zijn zelf een kleine verzameling elementen bij elkaar te zoeken. Deze verzameling kan je gebruiken om later terug de stijl op te roepen die de klant voor ogen heeft.
2. Evalueer bestaande stijlelementen

Zorg dat de klant je al zijn oud materiaal stuurt en evalueer of zijn logo en kleuren passen bij de eerder beschreven stijl. Vraag zeker ook na of de klant goed fotomateriaal heeft. Unieke professionele foto’s kunnen vaak het verschil maken bij een ontwerp.

Kijk alle elementen na en controleer of alles bruikbaar is. Open alle vector bestanden om na te gaan of ze daadwerkelijk vector zijn. Bekijk de resolutie van eventuele foto’s en kijk de kleurprofielen na.
3. Visualiseer de inhoud en bepaal het doel

Bekijk de structuur die de informatie architect met de klant heeft gemaakt en overloop wat het doel is van elke pagina en element. Bepaal wat moet opvallen en wat minder moet opvallen vanuit het oogpunt van de bezoeker.

Het is de taak van de designer om ervoor te zorgen dat hij de bezoeker doorheen de pagina gidst, en alles ziet wat hij hoort te zien. Wanneer te veel elementen om aandacht vechten zal de bezoeker zijn weg doorheen de pagina niet vinden.
4. Maak minstens 4 voorstudies

Eens je het doel en de klemtonen van alle elementen weet, maak je best enkele schetsen. Het schetsen is een cruciale stap bij het ontwerpen. Het stimuleert de creativiteit en spaart veel tijd uit. Een viertal schetsen uitwerken per pagina is het absolute minimum.

Ontwerpen van 3 verschillende Netlash ontwerpers.

Stop echter niet te veel tijd in een schets. Schets eerder alles neer wat je te geest komt en visualiseer wat er zal werken en wat niet. Werk de beste schetsen uit in fijnere voorstudies om zo je idee bij te schaven.
5. Werk een eerste voorstel uit

Open je favoriete webdesign programma om je ontwerp vorm te geven en ga aan de slag om je visie om te zetten in pixels. Laat je ontwerp evolueren en laat je zeker niet limiteren door je schetsen.

Hou rekening met de beperkingen van browsers en schermresoluties en maak je ontwerp altijd op ware grootte. Probeer de inhoud zo realistisch mogelijk te houden, indien mogelijk zelfs de definitieve copy. Wanneer je die laatste knop en pixel juist geplaatst hebt, is het tijd om het document te sluiten. Neem een korte pauze of werk even iets anders af.
6. Knijp die ogen eens half dicht

Open nu je document en kijk wat je eerste indruk is. Vallen de elementen die moeten opvallen (zie stap 3) op? Neem wat afstand van je scherm en knijp je ogen dicht tot alles wat troebel is.

Zo kun je makkelijk evalueren of je ontwerp in balans is. Eventueel vraag je aan iemand om even je ontwerp te bekijken. Zorg wel dat je open staat voor hun kritiek! Het is soms niet prettig om negatieve kritiek te horen op een ontwerp waar je net enkele uren aan hebt gewerkt.

Voldoet je ontwerp niet aan de verwachtigen en doelstellingen? Ga terug naar stap 1, passeer langs start en neem een Nalu.
Voldoet je ontwerp wel aan de verwachtingen en doelstellingen? Ga dan naar stap 7.

7. Geniet van je rockstar moment

Proficiat! Je bent voor heel even een webdesign rockstar! Spring even op je bureau en doe een luchtgitaarsolo. Blijf echter niet te lang in je roes, je ontwerp moet nog gesliced en geïntegreerd worden zodat de hele wereld ervan kan genieten.

Het grafisch proces geschreven door Yoni in: webdesign

Tags: proces, webdesign

Dieter Rams

netlash — Wed, 18 Nov 2009 06:39:00 UT

In Bright staat deze maand een uitgebreid artikel over Dieter Rams, naar aanleiding van een tentoonstelling over hem in het Londense Design Museum.

Dieter Rams was veertig jaar hoofd van het designteam van elektronicaproducent Braun. Hij was verantwoordelijk voor een belangrijke stroming in het industriële design van vorige eeuw.

Meer nog, hij beïnvloedde rechtstreeks één van de huidige iconografische designers, namelijk Jonathan Ive, hoofddesigner van Apple.

Hoe groot zijn invloed is kan je in onderstaande fotomontage zien (bovenaan werk van Rams, onderaan werk van Ive):

Dieter Rams is één van de mensen die ons hier bij Netlash richting geven.

Beschouw bijvoorbeeld volgende quote van hem:

“Good designers must always be avant-gardists, always one step ahead of the times. They should – and must – question everything generally thought to be obvious. They must have an intuition for people’s changing attitudes. For the reality in which they live, for their dreams, their desires, their worries, their needs, their living habits. They must also be able to assess realistically the opportunities and bounds of technology.”

Dit komt uit een speech uit 1980 die Rams aan de Braun advisory board gaf. Hierin geeft hij aan dat de mens, de gebruiker centraal moet staan - tegelijkertijd rekening houdend met de mogelijkheden en beperkingen van de technologie.

Hij formuleerde ook de 10 principes waaraan goed design volgens hem voldoet:

Good design is innovative.

Good design makes a product useful.

Good design is aesthetic.

Good design makes a product understandable.

Good design is unobtrusive.

Good design is honest.

Good design is long-lasting.

Good design is thorough down to the last detail.

Good design is environmentally friendly.

Good design is as little design as possible.

Het zijn principes die we hier ook in onze websites proberen te stoppen. Ik vertaal het even naar onze sector:

De concepten en ontwerpen van onze sites moeten voorlopen. We proberen trendsetters te zijn, in plaats van trendvolgers.

Bruikbaarheid is een obsessie.

Ook schoonheid maakt een integraal onderdeel uit van ons werk - er moet een goed evenwicht zijn tussen technologie, design en usability.

Een website legt de onderliggende eigenschappen van het bedrijf en het product bloot - en is geen 'opsmukken' of 'mooi maken'.

Design van een website mag niet in de weg zitten en moet vooral de inhoud ondersteunen.

Een goede site legt de inhoud bloot - en probeert geen valse verwachtingen te creëren.

Een goede site is duurzaam; hij wordt gebouwd met flexibele content in gedachten. Het CMS ondersteunt een veranderende omgeving en een veranderende site.

Consequentie is essentiëel bij een gebruiksvriendelijke website. Knoppen zijn knoppen, acties hebben dezelfde kleur, links zijn onderlijnd.

Milieuvriendelijkheid start met groene hosting.

Design ondersteunt de inhoud, is liefst zelfs 'nul-design'. Less is more.

Als afsluiter nog een video-interview met Dieter Rams:

Dieter Rams geschreven door Bart in: webdesign

Tags: design, usability, visie

Queries uitsparen met behulp van IN()

netlash — Mon, 16 Nov 2009 10:37:00 UT

Bij een website met een community zoals AB Concerts, Vorst Nationaal, Capitole Gent en Tagger.fm loopt het aantal queries heel snel op.

Naast het intensievere werk voor de MySQL-server kan dit ook een vertraging op de site opleveren. De data moet namelijk opgehaald worden, verwerkt worden en getoond worden aan de bezoeker.

Bij wijze van voorbeeld: Stel je voor dat je een array hebt met daarin de ID's van de vrienden van de huidige ingelogde gebruiker. Wat de meeste developers nu doen is een loopje starten en in deze loop de waardes ophalen per friend-ID.
// loop friends
foreach($friendIds as $id)
{
// get friend data
$friendData = $this->db->getRecord('SELECT p.nick, p.avatar, ...
FROM profiles AS p
WHERE p.id = '. $id .';');

// code to generate output
...
}
?>

In het bovenstaande voorbeeld hebben we dus een groot aantal queries (lees n+1), namelijk:

1 om de ID's van de vrienden op te halen
1 per vriend om zijn specifieke data op te halen

Met behulp van de MySQL-functie IN() kunnen we dit terug brengen naar 2 queries.
// get all profiledata at once
$profileData = $this->db->retrieve('SELECT p.nick, p.avatar, ...
FROM profiles AS p
WHERE p.id IN ('. implode(',', $friendIds) .');');

// loop profiles
foreach($profileData as $friend)
{
// code to generate output
...
}
?>

Zoals je nu kan zien hebben we 2 queries:

1 om de ID's van de vrienden op te halen
1 om de data voor al deze vrienden in één keer op te halen

Opmerking: Ik wil er wel de nadruk op leggen dat dit een fictief voorbeeld is. De code is dus ook niet terug te vinden in de vernoemde websites. In dit voorbeeld zou het nog nuttiger zijn om niet alleen de ID's op te halen maar meteen de data, maar dit terzijde.

Queries uitsparen met behulp van IN() geschreven door Tijs in: webdevelopment

Tags: mysql, optimalisatie, php, tips

Gebruiksvriendelijke website

netlash — Thu, 12 Nov 2009 09:33:00 UT

Op 10 november jongstleden werden de Belgische usability awards uitgereikt. Uit meer dan 200 inzendingen werden door een vakjury 10 gebruiksvriendelijke sites geselecteerd.

Daaruit kozen zij de meest gebruiksvriendelijke non-profit en de meest gebruiksvriendelijke commerciële website. Het publiek mocht ook stemmen.

Nadat de website van Ancienne Belgique al de Site van het Jaar won, én beloond werd als beste Web 2.0 site bij de CMS Awards, verkoos de jury van de Usability Awards de AB website tot meest gebruiksvriendelijke commerciële website van België.

Mijn artikel van vorige week over de ROI van een website en deze award zijn geen toeval.

Usability is een obsessie bij Netlash. We zijn er van overtuigd dat de bruikbaarheid van een website rechtstreekse impact heeft op de businessdoelstellingen van een bedrijf of organisatie.

Elke site moet een gezond evenwicht vinden tussen design, technologie en usability. We geloven dat op het kruispunt tussen die drie de 'business' van Netlash zit, en we zijn er zeker van dat daar ook de 'business' van onze klanten zit.

Een goed evenwicht tussen de drie factoren zorgt voor een goede website.

En dat betekent dat géén van de twee andere (technologie of design) belangrijker mag zijn dan bruikbaarheid.

Een bruikbare site leidt daarna ook onvermijdelijk naar een rendabele website, met een hoge ROI.

Gebruiksvriendelijke website geschreven door Bart in: usability

Tags: ab, awards, gebruiksvriendelijk, usability

ROI van een website

netlash — Tue, 03 Nov 2009 15:56:00 UT

Iets meer dan een jaar geleden lanceerden we de nieuwe website voor Ancienne Belgique. Het website concept en de visie waarrond we werkten samen met AB hebben we indertijd ook gedocumenteerd.

Nu is het tijd om terug te blikken, en af te rekenen: werkt de site, haalt die de doelstellingen, en vooral: draagt die bij tot de bottom line van AB?

David Zegers, Directeur Communicatie en Ontwikkeling van Ancienne Belgique, presenteerde onlangs op Muziek Digitaal de afrekening.

Zijn presentatie vind je hieronder:

Ik zal er een aantal cijfers uitlichten:

er kwamen 24.010 geregistreerde profielen op één jaar tijd
gemiddeld 1581 profielen loggen in per week
gemiddeld 5.955 unieke bezoekers/dag (vroeger: 4.185)
die bezoekers blijven langer on site en genereren meer paginaviews

De binnenkomende trafiek via verwijzende sites is met 58% gestegen; trafiek via zoekmachines steeg met 67% (van 281.137 naar 445.076 bezoekers).

Opvallend: in 2008 was Facebook de 16e verwijzende site; in 2009 staat Facebook op een duidelijke 1e plaats (met 3x meer bezoekers dan de tweede verwijzer, stubru.be).

De algemene conclusie van David na 1 jaar nieuwe website: een verhoogde kwantiteit en kwaliteit:

AB bereikt meer publiek dan vorig jaar omwille van verhoogde online aanwezigheid (via community sites en zoekrobots)
er is meer interactie met en tussen het publiek
AB biedt meer inhoud dan vorig jaar

Dit verhoogde verkoopspotentieel zorgde voor een duidelijk hogere verkoop: in oktober 2009 waren er al meer tickets verkocht dan in totaal 2008 (207.000 tickets in 2008, 212.000 tickets tot en met oktober 2009).

Even kort door de bocht: dit is een (geëxtrapoleerde) meerverkoop van 22%.

Voor AB was de vernieuwing van de website dan ook een zinvolle en succesvolle operatie.

Het succes van de website is in mijn ogen overduidelijk het gevolg van een enthousiast AB-team dat de tools die we in de website inbouwden op een doordachte en consequente manier gebruikte.

We zijn blij dat we AB konden helpen met deze duidelijke Return on Investment van hun website.

ROI van een website geschreven door Bart in: community

Tags: ab, cijfers, community, conclusie

Javascript slideshow

netlash — Mon, 02 Nov 2009 11:00:00 UT

Elke webbouwer kreeg ongetwijfeld al eens de vraag of drang om een slideshow te voorzien. Daar dit in de meeste gevallen een relatief kleine, echter alomtegenwoordige feature is, kan al snel even gegoogled worden naar een kant en klaar stukje Javascript. In de bijna 10 miljoen resultaten zal je echter nooit dat script vinden dat exact doet wat je verwacht, op de manier waarop je het wenst.

Omdat we bij Netlash graag volledige controle hebben over onze software, schreven we dan ook zelf een kleine JQuery plugin die heel eenvoudig aan onze meeste noden voldoet. Omdat we het web ook elke dag een beetje beter proberen te maken, delen we deze uiteraard.

Demo

Volgende VorigeSlideshow met vorige/volgende, met links per image
Versnelde slideshow in random volgorde

Hoe installeer je het script?

Download JQuery op jquery.com en include deze in je document:

Download deze plugin en include deze in je document, na het includen van JQuery:

Hoe gebruikt je het script?

Plaats een image op de plaats waar je de slideshow wenst te tonen:

de class die ik hier op plaatste dient om deze makkelijk te kunnen selecteren via JQuery

Geef in het rel-attribuut van je image alle paden van de files mee, comma-seperated:

Inititiëer de slideshow:
$('.slideshow').slideshow();

Meer?

Omdat we graag voorzien zijn op "ietsje meer", kan via enkele extra parameters je slideshow wat aangepast/uitgebreid worden.

Beschikbare parameters zijn:

images, als array: geef de paths van je afbeeldingen op als parameter in plaats van als rel-attribuut in de HTML.

links, als array: de mogelijkheid om aan elke afbeelding en link te koppelen waarnaar bij een klik wordt genavigeerd.

fadeTime: de tijd (in milliseconden) tussen het in/uit-faden van de afbeeldingen.

fadeSpeed: de tijd (in milliseconden) dat de fade-animatie duurt.

hookPrevious: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in omgekeerde volgorde (vorige).

hookNext: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in normale volgorde (volgende).

random: geef aan of de afbeeldingen in de slideshow in willekeurige volgorde dienen verschijnen

Voordelen?

Indien de bezoeker geen Javascript enabled heeft zal nog steeds de standaard-afbeelding zichtbaar zijn.

De slideshow kan makkelijk gepositioneerd worden zoals gewenst.

Een eenvoudige slideshow kan snel opgezet worden.

De code is eenvoudig en makkelijk uitbreidbaar.

Makkelijk meerdere slideshows op 1 pagina, elk afzonderlijk of samen configureerbaar.

Javascript slideshow geschreven door Matthias in: webdevelopment

Tags: javascript, jquery, slideshow

MySQL Slow Log Parser

netlash — Fri, 30 Oct 2009 06:55:00 UT

Als je al eens in aanraking komt met grote projecten dan kan de Slow Query Log een hele openbaring zijn. In deze log komen alle queries die langer duren dan een ingesteld aantal seconden en een minimum aantal rijen moet verwerken.

The slow query log consists of all SQL statements that took more than long_query_time seconds to execute and required at least min_examined_row_limit rows to be examined.

Maar omdat alle trage queries hierin terechtkomen is het niet altijd makkelijk om uit te maken welke nu juist de queries zijn die je best aanpakt.

Via de mensen van Openminds had ik vernomen dat er een script was die deze log gaat parsen en je kan vertellen welke queries juist aandacht vragen.

Het script analyseert de log door te gaan kijken welke queries er meerdere keren voorkomen. Daarbij vervangen ze de variabele data zodat je een goed beeld krijgt.

Hoe installeer je het script:

Download het script
Open een terminal en verplaats het script naar /usr/bin met onderstaand commando:
sudo mv path/to/download /usr/bin/mysql_slow_log_parser
Maak het script uitvoerbaar met onderstaand commando:
sudo chmod +x /usr/bin/mysql_slow_log_parser
Gebruik het script:
mysql_slow_log_parser path/to/slow_query.log

Kleine disclaimer: Wil je je database en queries tot in de puntjes optimaliseren? Neem dan een specialist onder de arm, zij kunnen je bijstaan met raad en daad. Een database-specialist weet beter dan welke tool ook hoe je database of queries kan optimaliseren

MySQL Slow Log Parser geschreven door Tijs in: webdevelopment

Tags: mysql, optimalisatie, tips, tools

Het visuele wow-effect in webdesign

netlash — Thu, 29 Oct 2009 09:42:00 UT

Er is een fundamenteel onderscheid tussen design voor drukwerk, en design voor het web. De meeste webbouwers weten dit; en diep in hun hart weten de meeste print-designers dit ook.

Uiteraard zijn er veel overeenkomsten, en zijn beide gebaseerd op dezelfde beginselen (typografie, gebruik van ritme, spatiëring, witruimte...).
Maar: het fundamentele verschil zit hem in de drager - papier is an sich statisch, en web is an sich dynamisch.

Dit verschil zorgt er voor dat je in mijn ogen een duidelijk andere aanpak moet hebben voor beide media.

Aangezien papier op zichzelf niet dynamisch is, moet je de dynamiek in de layout van de inhoud stoppen. De layout van een affiche, poster, flyer moet in volle hevigheid van het papier spatten.
Bij web is dat niet zo. Daar zit de dynamiek in het medium al ingebouwd: je kan klikken, je hebt mouse-over effecten, er zijn eventueel bewegende stukken (video, animatie, jQuery-effecten) ...
Als je dan ook in het design van je webpagina heel veel dynamiek zal steken, zal dit clashen met de intrinsieke interactiviteit van het web. Die layout zal 'in competitie' gaan met de webdynamiek - en dat eindigt in een wedstrijdje 'om ter luidst'.

Het web wordt door gebruikers voornamelijk en liefst gebruikt als informatie-, transactie- en interactiemedium (lean-forward t.o.v. lean-back). Een website of webapplicatie heeft dan ook als taak om zijn informatie (onder welke vorm ook) zoveel mogelijk te ondersteunen en naar voor te laten komen. Opnieuw een reden om de layout niet te 'luid' te laten zijn: grafiek voor het web moet vooral functionele grafiek zijn, en gemaakt zijn om de inhoud zo goed mogelijk weer te geven en te ondersteunen.

Websites en webapplicaties zijn ook 'multiple use' - als je wilt inspelen op de informatie-, transactie- en interactiezucht van de eindgebruikers, maak je sites die meermaals kunnen gebruikt worden, en waar mensen ook geneigd zijn om die meermaals te gebruiken ('verslavende websites').
Een site met een groot 'visueel wow-effect' zal de eerste keer misschien aanspreken - maar bij vaker gebruik zal dit saai worden, en zelfs in de weg komen te staan van het effectieve gebruik (consumeren van informatie, transacties uitvoeren, interactie aangaan).

Door de nadruk te veel te gaan leggen op dat visuele wow-effect, creëer je eigenlijk een tijdelijke website, met een beperkte levensduur. En websites moeten in mijn ogen toch minstens 3 jaar kunnen meegaan...

Daarom ben ik er van overtuigd dat bij het maken van sites je vooral moet denken aan een 'nul-design', een design dat ondersteunend en in de achtergrond werkt - en wel om volgende redenen:

dynamiek moet in de interactiviteit van het web zitten, en niet vechten met de dynamiek van het ontwerp
goeie websites zijn informatie- of transactiewebsites, waar het design deze informatie of transactie ondersteund, en niet de overhand heeft
bij meermalig gebruik wordt een visueel overweldigende site saai en zelfs storend
er zijn weinig tijdloze sites met een 'visueel wow-effect'; deze voelen vrij snel gedateerd aan.

Wat met campagnesites, die vooral bedoeld zijn om éénmalig het wow-effect op te wekken? Dat is het soort sites dat wij niét bouwen - vooral omdat we niet geloven dat deze duurzaam bijdragen tot de businessdoelstellingen van bedrijven op het web.

Wat denken jullie?

Het visuele wow-effect in webdesign geschreven door Bart in: webdesign

Tags: conversie, webdesign

SVN Export gewijzigde files

netlash — Mon, 19 Oct 2009 02:55:00 UT

Zoals ieder goed webbureau maken we bij Netlash gebruik van een version-control systeem. In ons geval is dit SVN.

Subversion (SVN) is een versiebeheersysteem en in 2000 opgezet door CollabNet Inc. Subversion is de opvolger van CVS, een alternatief versiebeheersysteem. Subversion is uitgebracht onder de Apache License, waardoor het open broncode programmatuur (opensourcesoftware) is.

Als je dit combineert met grote projecten dan krijg je een solide basis om wijzigingen vlot bij te houden en te releasen. Het live zetten van grote wijzigingen kan soms een pak tijd in beslag nemen als je bijvoorbeeld geen SSH-acces hebt en dus alle files manueel moet uploaden. Een oplossing is om alles te gaan overschrijven. Dit heeft als nadeel dat dit even kan duren.

Daarom is het handiger om enkel de gewijzigde files te gaan uploaden. Maar dan moet je zelf een lijst gaan bijhouden van de gewijzigde files, of een lijst compileren aan de hand van je SVN-logs. Om dit proces te versnellen heb ik een Apple-script geschreven dat enkel de gewijzigde files gaat exporteren (met behoud van de folder-structuur).

Omdat we deze oplossing natuurlijk niet enkel voor onszelf willen houden kan je hier het script downloaden.

Download het script

Hoe installeer je het script?

Download het script.

Verplaats het script naar de Userscripts-map (/Users//Library/Scripts).

Activeer het Script-menu indien nodig door /System/Library/CoreServices/Menu Extras/Script Menu.menu te openen.

Hoe gebruik je het script

Update die lokale repository.

Start het script door in die Script-menu "SVN Export changed files" te kiezen.

Selecteer de folder die je SVN-repository bevat.

Geef de start-revision op. (de revision die op dat moment live staat)

Geef de eind-revision op. (in de meeste geval de laatste revision)

Selecteer een map waar de gewijzigde files moeten komen.

Upload de files.

Opmerking: het script bevat geen error afhandeling en is een alpha. Feedback is dus steeds welkom.

SVN Export gewijzigde files geschreven door Tijs in: webdevelopment

Tags: applescript, export, svn, tools

Verslavende websites

netlash — Mon, 05 Oct 2009 08:58:00 UT

Vorige week ging Design for Persuasion door, de eerste Europese conferentie over persuasief design.

Topspreker en mede-organisator was BJ Fogg. Hij doceert aan Stanford, en is de auteur van het boek Persuasive Technology.

Daarnaast waren er nog een hele resem aan inspirerende sprekers.

Ikzelf had de eer om tussen die groten der aarde te kunnen staan met een korte presentatie over verslavende websites.

Ik citeer collega Thomas vanop zijn blog:

De basisgedachte van verslavende websites zijn de onmiskenbare maar vaak onzichtbare drijfveren eigen aan de mens. Door zich hiervan bewust te zijn is het mogelijk om uitgekiende strategieën te ontwikkelen om het gedrag van websitebezoekers te begeleiden naar gewenste acties. De lijst is nog niet volledig, maar vijf mogelijke drijfveren zijn:

Collecting: Het is van oudsher ingebakken in de mens, maar de drang om waardevolle zaken te verzamelen kan gebruikt worden om websitebezoekers ertoe aan te zetten om bijvoorbeeld een hogere reputatie in communities op te bouwen.

Social Validation: Interactie wordt beïnvloed door het gedrag van de andere consumenten. Wanneer een consument merkt dat andere consumenten een bepaald gedrag stellen, stijgt de individuele voorkeur van deze consument voor om zich op dezelfde manier te gedragen.

Reciprocity Commitment: Wanneer gebruikers zich engageren, dan zijn deze geneigd om blijvende engagement te tonen en dit rationaliseren.

Discovery: In iedereen schuilt een ontdekkingsreiziger. Door in te spelen op de drang om iets nieuws te leren, kunnen we het gedrag van bezoekers beïnvloeden.

Hieronder de bijhorende slides van de presentatie:

Ik ben van plan deze gedachten in de toekomst verder uit te werken en te documenteren op dit blog.

Verslavende websites geschreven door Bart in: conversie

Tags: conferentie, conversie, design for persuasion

Schermresolutie & webdesign

netlash — Wed, 23 Sep 2009 07:40:00 UT

Na het overzichtje van de verschillende schermresoluties uit het artikel van Karl Gilis te hebben doorgenomen dacht ik ook meteen: "Wat een zootje" (Volledige artikel: "Schermresolutie: statistieken en tips".

Laat ik daar eens wat duidelijkheid in scheppen voor mezelf, dacht ik. Laat ik dat eens visueel proberen weergeven. Dat leverde onderstaand infografiekje op.

Elk vlak in de grafiek heeft de grootte van een schermresolutie uit de lijst en een klerutint gelijk aan het percentage van bezoekers met die schermresolutie. Ik heb ook een PDF versie op ware grootte.

Het maakt volgens mij één punt heel duidelijk: ontwerp voor een schermafmeting van 1024 x 768 px. Niet meer, niet minder. Je browsercanvas is dus ongeveer 960 x 570 px groot.

Waar het ook duidelijk tijd voor wordt is experimenteren met grotere schermresoluties. De groep surfers die minimum een schermbreedte van 1280px hebben verantwoord dat wel.

En mobiel? Daar ben ik nog niet helemaal uit. Een site zoals de onze volledig aanbieden voor een mobiel platform heeft weinig zin. Bepaalde onderdelen beschikbaar stellen - zoals een contactpagina of een kaart met onze locatie - hebben wel zin. Iemand die op weg is naar ons kantoor kan daar wel nut aan hebben.

(Foto door Eyeliam - Creative Commons Attribution - Bron)

Schermresolutie & webdesign geschreven door Dirk Sabbe in: webdesign

Tags: browsercanvas, schermresolutie, webdesign

4 soorten surfers

netlash — Wed, 19 Aug 2009 09:07:00 UT

Als ik naar het surfgedrag van bezoekers kijk, dan zie ik vier grote manieren waarop ze door een website gaan.
1. Systematisch

De eerste manier om door een site te gaan is systematisch. De surfer bekijkt de boomstructuur van de website, en gaat die systematisch tak voor tak af: klikken op het eerste item in de menustructuur, scannen, klikken op het eerste subitem, scannen, 'back'-toets naar de vorige pagina, klikken op het tweede subitem... Systematisch scant deze bezoeker de site, en gaat pagina voor pagina bekijken of hij de informatie kan vinden die hij zoekt.

Deze surfer vertoont het typische 'pogostick' gedrag: hij springt naar een dieper menu-item, scant, vindt niet wat hij zoekt, en springt terug een niveau hoger.

Dit soort bezoekers vertrouwt vooral op een strak georganiseerde menu-structuur, en op een sitemap indien aanwezig.
2. Zoeken

Sommige mensen gaan recht op hun doel af: ze weten wat ze willen vinden, en duiken rechtstreeks in de zoekbox van een website. Ze hebben een bepaald woord of een bepaalde zinsnede in gedachten, en willen niet door gans de site surfen om dat te vinden.

Deze surfers verwachten een duidelijk zichtbare zoekbox al vanop de homepagina (liefst op de standaard plaats, rechtsboven, zie ook hier).
3. Serendipity

Een derde manier van door een site gaan is vertrouwen op serendipiteit. Bezoekers die op deze manier surfen gaan van link naar link: ze scannen een pagina, zien een link die hen interesseert, klikken daar op, scannen, klikken op de eerstvolgende link...

Ze gebruiken met veel enthousiasme de links die (duidelijk aangeduid) in de lopende tekst staan, beelden die klikbaar zijn, knoppen en andere call-to-actions...

Het ergste wat je deze mensen kan voorschotelen is een doodlopende pagina - een pagina waar geen enkele link op staat.
4. Social surfer

De 'sociale surfer' wil vooral zaken bekijken die anderen bekeken of aangeraden hebben; hij wil ook nieuwe mensen leren kennen. Deze surfer wordt vooral getriggerd door frases als "mensen die dit kochten, kochten ook ..." of "populaire artikelen". Ze klikken door op profielfoto's en commentaren van andere mensen.

Uiteraard is niets ooit volledig zwart-wit. Ieder van ons heeft wel aspecten van de vier soorten surfers in zich; en ons gedrag hangt zeker ook af van de context en situatie waarin we ons bevinden.

Maar meestal hebben mensen een duidelijke voorkeur voor een bepaalde manier van surfen. Meer zelfs, bij veel mensen met wie ik praat leeft vaak de overtuiging dat (bijna) iedereen surft op dezelfde manier als henzelf. Een systematische surfer zal met stelligheid beweren dat iedereen zo surft, en dat een zoekbox overbodig is; een zoek-gebruiker zal lachen bij het idee van een sitemap.

Het is de taak van een goede webbouwer (en dan vooral de informatie-architect) om alle vier de types te faciliteren. Voorzie in je site de verschillende manieren om doorheen de informatie te gaan (een goede zoekbox, een strakke menu-structuur, voldoende in-text links, sociale features).

Kijk ondertussen ook eens naar je eigen surfgedrag. Welk soort surfer ben jij?

4 soorten surfers geschreven door Bart in: webdesign

Tags: informatie-architectuur, inzicht, navigatie, surfen, webdesign

PHP TinyURL class

netlash — Fri, 24 Jul 2009 07:02:00 UT

Collega Tijs maakte vroeger al verschillende PHP wrapper classes (PHP GarageTV class, PHP Twitter class, PHP EmailGarage class, PHP Mollom class).

Hij schreef er nog één, deze keer voor TinyURL.com.

TinyURL is een webdienst die lange webadressen voor jou omzet naar een zeer korte URL. Er is een API beschikbaar om dit in te bouwen in je eigen webapplicatie.

Met de PHP TinyURL class heb je nu een makkelijk integreerbaar pakketje.

Meer info op het blog van Tijs, en downloadbaar hier.

Update: Tijs gooit er, omdat het solden is, nog gratis en voor niets een PHP bit.ly wrapper class tegenaan: http://classes.verkoyen.eu/bitly/ .

PHP TinyURL class geschreven door Bart in: webdevelopment

Tags: class, php, tinyurl

De homepagina van een website

netlash — Fri, 10 Jul 2009 05:54:00 UT

Als we spreken met klanten over de bouw van hun website, dan is één van de meestgehoorde opmerkingen 'onze homepagina is het visitekaartje van ons bedrijf'.

Er gaat dan ook meestal heel veel energie en focus naar die homepagina.

Dit is terecht: de homepagina is een belangrijke pagina in een website. Maar die speelt al lang niet meer dezelfde rol als vroeger.

De traditionele visie op de homepage is deze:

Bezoekers komen binnen op de homepagina, gebruiken het menu om in de boomstructuur van de website af te dalen, en bereiken dan de juiste pagina.

Dit is m.i. een achterhaalde visie. De homepagina is al lang niet meer de voordeur waarlangs alle bezoekers binnenkomen - de bezoekers komen voor het grootste deel binnen via de achterdeur, het raam, het balkon en het hondeluikje.

Ik blijf het herhalen: een goedgemaakte website trekt meer dan de helft van zijn bezoekers aan via zoekmachines, meer bepaald Google.
(Een bijkomend fenomeen van de laatste 6 maanden: meer en meer sites hebben als tweede grootste bron van trafiek Facebook.)

De eigenschap van die binnenkomende bezoekers is net dat ze binnenkomen via inhoudspagina's (de pagina's die in bovenstaande grafiek onderaan staan), en niet via de homepagina.

Een meer correcte visie is dan ook:

Bezoekers komen binnen via diepere pagina's, en gebruiken de homepagina als 'ankerpunt' om te navigeren binnen de site.

Dit betekent dat de homepagina zich niet meer (hoofdzakelijk) mag gedragen als 'binnenkomer', als 'visitekaartje', maar wel als een soort van wegwijzer doorheen de site.

Een even belangrijke functie, maar wel een totaal andere invulling.

Vervult jouw homepagina die functie?

De homepagina van een website geschreven door Bart in: webdesign

Tags: homepagina, informatie-architectuur, visie

Google bezoekers en maximale conversie

netlash — Tue, 07 Jul 2009 06:47:00 UT

Ik schreef er vroeger al over: voor mij is Google een deel van de interface van een website. Bij een goedgemaakte website komen tegenwoordig 50 tot 60% van de bezoekers binnen op diepere pagina's via een zoekterm in Google.

Dit is niet zomaar een losse gedachte waarmee we willen zeggen dat je een site een grondige technische optimalisatie voor Google moet meegeven. We trekken dit veel verder door, onder andere in de opbouw van ons Content Management Systeem Fork.

Ik geef een voorbeeld, vertrekkend van onze eigen Netlash website.

Zoek bijvoorbeeld op de term 'logo' in Google.be: http://www.google.be/search?hl=nl&q=logo.

Je ziet in de resultaten een artikel van het Netlash blog over logo design opduiken:

Klik door vanuit Google, en je komt op de blogpost terecht. We hebben Fork CMS zo opgebouwd dat binnenkomende bezoekers intelligent opgevangen worden. Er wordt gedetecteerd of bezoekers rechtstreeks binnenkomen, of via een zoekmachine - en indien het tweede met welk zoekwoord.

Hieronder zie je links wat een bezoeker ziet die binnenkomt via Google met het zoekwoord 'logo'. Rechts zie je wat een bezoeker ziet die op een andere manier op die pagina terechtkomt.

Je ziet het, de Google-bezoekers krijgen een extra kader met een duidelijke call-to-action.

Fork CMS laat toe om zoekwoorden waarmee mensen binnenkomen te detecteren, en daarvoor specifieke teksten en links te creëren.

Dit is één van de functionaliteiten van Fork om binnenkomende bezoekers van de website op een elegante en intuïtieve manier te begeleiden langs het door ons vooropgestelde conversiepad.

Het kadert in onze visie dat een website niet zomaar een stuk spielerei is of enkel als 'branding' vehikel werkt - een website moet bijdragen tot de bottom line van een bedrijf. Conversie - het converteren van bezoekers naar een bepaald doel (kopen in een webshop, actief lid worden van een community website, genereren van gekwalificeerde leads) - is het hoofddoel van elke website.

(Meer weten over Fork CMS? Klik door naar de website van dit krachtige Content Management Systeem.)

Google bezoekers en maximale conversie geschreven door Bart in: actualiteit

Tags: cms, fork, google, seo, zoekmachine optimalisatie

Online marketing blogkermis 11

netlash — Sun, 05 Jul 2009 12:38:00 UT

Op 7 juli gaat de elfde Online Marketing Blogkermis door. Zo'n blogkermis brengt waardevolle artikelen van bloggers over hetzelfde (brede) thema samen. Indertijd was het Netlash blog de gastheer voor de derde editie.

Het onderwerp van deze elfde editie is: 'tips voor ondernemers'.

Ik wil daaraan mijn steentje bijdragen met twee presentaties die ik onlangs nog gaf.

De eerste presentatie heet: 'Internet is de petrischaal van de maatschappij'. Daarin beschrijf ik een aantal trends die ik de voorbije jaren op het internet zag, en waarop ik me baseerde om mijn onderneming te modelleren:

De tweede presentatie bevat 10 tips voor startende ondernemers. Daarin vertel ik mijn (bescheiden) advies voor al wie wil starten met ondernemen:

Veel plezier. Bekijk op 7 juli zeker ook de andere ondernemer blogposts!

Online marketing blogkermis 11 geschreven door Bart in: marketing

Tags: blogkermis, ondernemen, online marketing

Web development vragen voor Steve Ballmer

netlash — Sat, 04 Jul 2009 12:10:00 UT

Op uitnodiging van Microsoft België ga ik van 13 tot 16 juli naar New Orleans naar Microsofts Worldwide Partner Conference.

Meer nog, ik neem samen met een 20-tal andere webdevelopers van over de hele wereld deel aan een rondetafelgesprek met Microsofts CEO Steve Ballmer.

Het onderwerp: "to engage in a rich discussion on topics that are top of mind with him, such as standards in Web browsers, building Web apps, what is happening in the market, understanding your challenges and how Microsoft can help, and what the future holds from your perspective."

Ik zou daar eigenlijk graag wat voorbereid aan die tafel komen, en een aantal pertinente vragen klaar hebben.

Daarom vraag ik het aan jullie: welke vragen moet ik stellen aan het hoofd van Microsoft over webdevelopment?

Laat jullie gedachten na in het commentaarvak hieronder.

(Oh, en graag constructieve vragen. Opmerkingen als "wanneer gaat MS deftige browsers maken" en "welke stoel heeft hij liefst" klinken misschien grappig in jullie hoofd, maar zullen een beetje lullig zijn als ik ze effectief moet maken.)

Web development vragen voor Steve Ballmer geschreven door Bart in: webdesign

Tags: ballmer, microsoft, webdevelopment

Drempels verlagen met een goede interface

netlash — Tue, 30 Jun 2009 08:22:00 UT

Vorige week in het nieuws op de YouTube blog: “In the last six months, we’ve seen uploads from mobile phones to YouTube jump 1700%; just since last Friday, when the iPhone 3GS came out, uploads increased by 400% a day.”

Geef mensen een gemakkelijke manier om iets te doen en het wordt gedaan. Eén van de mooiste eigenschappen van het web is dat alles gemakkelijker wordt.

Video was vroeger moeilijk: met tapes sleuren, de tapes digitaliseren, proberen te bewerken op een (veel) te trage computer. En dan de familie bijeen krijgen om naar een communievideo van 2 uur te kijken. Nu steek je je Flip in de USB-poort, gooi je de video op YouTube en hij is meteen klaar om te delen met de wereld.

Ook in het ontwerp van websites is faciliteren een belangrijk item om in het achterhoofd te houden. Het moet zo makkelijk mogelijk zijn om een formulier in te vullen, om je in te schrijven, om een actie uit te voeren op een website.

Een mooi voorbeeld van de “faciliteer”-strategie is Instapaper. Als je registreert voor Instapaper is het enige dat je nodig hebt een e-mailadres. Je kan een wachtwoord instellen, maar dat hoeft niet. Aangezien Instapaper een tool is die alleen jijzelf gebruikt, is het overbodig om dit te beveiligen. Wie gaat er nu ook kijken naar iemand anders zijn “te lezen artikels”-lijst?

Een gelijkaardige applicatie, Laterloop, doet het ook op een goede manier: je kan inloggen met je Google account en je bent vertrokken.

En onderaan deze blogpost? Daar kan je inloggen met Facebook Connect. Je browser vult de gegevens in en het enige dat nog rest is een reactie achter laten. Geen gedoe.

Drempels verlagen met een goede interface geschreven door Johan in: webdesign

Tags: faciliteren, instapaper, interface, laterloop

Internet is de petrischaal van de maatschappij

netlash — Thu, 18 Jun 2009 11:05:00 UT

Vandaag spreek ik op The Future Summit.

Deze conferentie wil de visie van inspirerende trendwatchers op de toekomst presenteren:

Hoe de consument zich de volgende jaren zal gedragen
Hoe bedrijven inspelen op een veranderende wereld
En wat de gevolgen zullen zijn voor media en marketing

Mijn presentatie heeft als titel 'Internet is de petrischaal van de maatschappij', met als ondertitel: How I've modelled my company on internet hypes and got away with it.

De slides hiervan vind je hieronder:

Internet is de petrischaal van de maatschappij geschreven door Bart in: webdesign

Tags: presentatie, trend

Dagconferentie voor webcreatieven: Twiist

netlash — Wed, 06 May 2009 08:42:00 UT

Op 15 mei loopt het Provinciehuis in Leuven vol voor twiist.be, een eendaagse conferentie voor webcreatives die meer willen weten rond het web. Met een internationale lijst van sprekers die hun ideeën zullen delen: Aral Balkan, Serge Jespers, Drew McLellan, Chris Messina, Elliot Jay Stocks, Brian Suda en Glenn Jones.

Tickets voor twiist.be, of The Way Internet Is Supposed To Be, kosten slechts 100 euro (exclusief BTW), dit om de conferentie betaalbaar te houden voor iedereen, of je nu student of een klein opstartend bedrijfje bent. De bedoeling is mensen bij elkaar te brengen en te inspireren, zodat je hopelijk gemotiveerd naar huis gaat.
Nog meer info kan je vinden op http://www.twiist.be.

Er zal alleszins ook een Netlash delegatie aanwezig zijn.

Komen jullie ook?

Dagconferentie voor webcreatieven: Twiist geschreven door Bart in: webdesign

Tags: conferentie, twiist, web

Google is deel van de interface

netlash — Sun, 03 May 2009 07:22:00 UT

Hier bij Netlash vinden we SEO (zoekmachine optimalisatie) zeer belangrijk. De sites die we bouwen maken we zo vindbaar mogelijk in zoekmachines.

Maar we zijn géén SEO-bedrijf.

Netlash is een webbouwer; we leggen de nadruk op een goede bruikbaarheid en interface van websites.

En dat is exact waarom we zoveel aandacht besteden aan SEO, en met name vindbaarheid in Google: Google is een deel van de interface van je website.

Het is onmiskenbaar, op dit moment is de toegangspoort van het internet de facto Google. Mensen gebruiken de zoekmachine niet alleen om dingen op te zoeken of vragen te beantwoorden - ze gebruiken het als spellingscontrole en zelfs als een manier om de URL's die ze ingeven te controleren. Veel doorsneegebruikers tikken het adres van de website waar ze naar toe willen niet in de adresbalk in, maar in de zoekbox van Google.

Een goed gemaakte website zal dan ook 50 tot 60% van zijn bezoekers zien binnenkomen via Google.

Dit maakt Google eigenlijk tot een deel van de gebruikservaring van jouw website.

Vandaar dat het belangrijk is om aandacht te besteden aan SEO, zoekmachine optimalisatie, van je website. Niet alleen om trafiek te trekken naar jouw website - maar ook omdat die pagina met zoekresultaten effectief deel uitmaakt van de user experience van jouw site.

Aandacht dus voor mooie, leesbare URL's waarin het onderwerp van die pagina staat, voor goed omschreven meta-description die opduikt in de zoekmachine, voor duidelijke en niet-misleidende meta-keywords... Zelfs de manier waarop jouw site eruit ziet in thumbnails (voor diegenen die met een image preview werken) speelt een rol.

Ik predik al een tijdje dat de grens tussen verschillende websites aan het vervagen is, dat een website geen op zichzelf staand geheel is - maar ingebed in de rest van het internet. (Zie ook: mashups, integratie van externe diensten via API's, verspreiding van content via RSS.)

Wie bezig is met interaction design van websites, zou dus eigenlijk een basis begrip moeten hebben van hoe Google websites indexeert, en dit meenemen in het ontwerp van die sites.

Google is deel van de interface geschreven door Bart in: SEO

Tags: seo, webdesign

Een testje!

netlash — Wed, 08 Apr 2009 19:11:48 UT

3deff5a6c4ed025cd356c70fc4131f6b

Webwinkel omzet 4,85 miljard in 2008

netlash — Fri, 20 Mar 2009 05:29:00 UT

Blauw Research en Thuiswinkel.org publiceerden net een studie over de webshop markt in Nederland.

In 2008 nam het aantal bestellingen per persoon met 17% toe, naar een gemiddelde van 5,3 bestellingen per persoon. Het gemiddeld besteed bedrag per online shopper stijgt daarmee naar 618 euro.

De populairste sectoren om online te kopen zijn zoals verwacht de reissector en die van de consumentenelektronica.

Dit is de jaarlijkse gemeten webwinkel omzet op de Nederlandse markt:

jaartal omzet in miljoen euro

1998
€ 41

1999
€ 147

2000
€ 312

2001
€ 527

2002
€ 937

2003
€ 1.237

2004
€ 1.678

2005
€ 2.210

2006
€ 2.820

2007
€ 3.898

2008
€ 4.848

Voor 2009 wordt ondanks de economische uitdagingen nog steeds een groei verwacht, tot 6 miljard euro.

Meer details over de studie vind je op de site van Thuiswinkel.

Webwinkel omzet 4,85 miljard in 2008 geschreven door Bart in: e-commerce

Tags: cijfers, e-commerce, webshop, webwinkel