Marketingfacts 2.0: the making of
Voila. De nieuwe Marketingfacts. Het is best even slikken voordat je met je tengels aan zoiets persoonlijks als een weblog gaat zitten, vooral als er nog wel eens iemand komt kijken, maar we hebben het er toch maar op gewaagd. Enkele maanden geleden kregen wij van Onstuimig dan ook de officiële opdracht om project ‘Marketingfacts v2.0’ uit te voeren. Leuk, want wij pretenderen goed te zijn in het optimaliseren van ‘bestaande uitingen’.
Marco voelde dat het beter was dat hij op de achtergrond zijn hart vasthield en wees Erik van Roekel aan als projectleider. Erik had geduld, behield op elk moment het overzicht en zorgde er vooral voor dat het net leek alsof Marco altijd precies wist welke kant hij op wilde. Ook werd Anders Floor van eBase gevraagd om zijn rol van criticus te spelen. Dat deed hij met verve.
Afijn, de omstandigheden waren goed, dus we hebben nogal wat veranderd. Tegelijkertijd is de oude site altijd het vertrekpunt gebleven. Het afstemmen van de juiste doseringen ‘nieuw’ en ‘vertrouwd’ was een belangrijk punt. Balans, lispelde de oude meester. Zen. Ommm.
Huisstijl
Wat het eerst zal opvallen is dat Marketingfacts een nieuwe huisstijl heeft. Nu was er eigenlijk niet echt een oude huisstijl: de verschijningsvorm van ons favoriete weblog is in de loop der jaren geworden tot wat het was. Zonder dat eens iemand de kans kreeg om daar met een frisse blik opnieuw naar te kijken. Voer voor collega Laurens van Klaveren, die zich op zowel huisstijl als site-redesign stortte.
Voor het eerst in het bestaan is er daarom nu een echt logo. De M met het uitroepteken, opgenomen in een blauw blokje met afgeronde hoeken, vormt de basis. De M staat voor marketing, het uitroepteken voor ‘facts’ en samen symboliseren ze nog eens de voor marketeers niet vreemde kunst van het aandacht trekken: hier ben ik! (Zo’n blokje met afgeronde hoeken zou ook nog best eens een beeldscherm kunnen symboliseren, bedenk ik me nu. Maar wie er vooral zijn favoriete filmster in denkt te zien, zullen wij geen strobreed in de weg leggen. Kwestie van interpretatie.)
De M!-combinatie kan het vaak best alleen af, als beeldmerk. Toch moeten we onze plaats kennen -Marketingfacts is (nog 🙂 ) geen Nike, Shell of Apple- dus waar wenselijk of noodzakelijk plakken we er de woorden ‘Marketing Facts’ in het lettertype van de M! aan vast.
Ontwerp
Het logo staat in vorm (strak maar niet streng), kleur (blauw, zei Marco, blauw!) en vooral in uitgangspunten model voor het design van de pagina’s. Rust, vriendelijkheid, overzichtelijkheid en flexibiliteit waren uitgangspunten. Je onderscheiden door bescheiden te zijn. Het design moest z’n plaats kennen en geen doel op zich worden. De content het werk laten doen, heeft een groot sportman ons ooit geleerd. Zo hebben we alle ruimte om de komende tijd te experimenteren met nieuwe features.
De breedte van het site-ontwerp is vergroot en daarmee aangepast aan de beeldschermresolutie die het Marketingfacts-publiek vandaag de dag overwegend gebruikt. Zo krijgen we meer ruimte om de inhoud waar het allemaal om draait op een goed te consumeren manier te presenteren: een duidelijker onderscheid tussen artikelen, wat meer ruimte tussen de tekstregels voor prettiger lezen en visuele nadruk op dat wat belangrijk is.
Het voor optimaal contrast hoofdzakelijk wit gebleven contentveld verschilt nu ook in visueel opzicht van de inmiddels lichtblauwe balken aan de zijkanten. Door de pagina-inhoud letterlijk iets boven de zijkolommen uit te tillen, scheiden we hoofdzaak en periferie, met een evenwichtiger beeld als gevolg. Nu we het toch over de periferie hebben: daarin is behoorlijk getuinierd, met een wat logischer indeling en een goed als menubalk te herkennen menubalk als gevolg.
Kopjes, tussenkopjes en de linkjes bij elk artikel hebben een nieuw, beter scanbaar uiterlijk en soms een nieuwe positie, allemaal met als doel om het gebruik intuïtiever, sneller en daarmee prettiger te maken. Ook op de reactiepagina’s hebben zowel het uiterlijk van de reacties als het reactieformuliertje de facelift gehad die ons een stapje dichterbij de usability-hemel moet brengen.
Last but not least: zelfs het meest omstreden onderdeel, de kalender, mag ons na veel druk van de voorstanders in een nieuw jasje vol slicke controls opnieuw proberen te bekoren.
Toegankelijkheid
Veel aandacht is gegaan naar het toegankelijker maken van Marketingfacts door het gebruiksgemak te vergroten, door na te denken over hoe een mens nu in de praktijk een weblog leest. Da’s voor een deel een gok, tenzij je goed en kostbaar onderzoek doet. Gelukkig hebben we aan feedback in de regel niet te klagen, dus maak daar vooral gebruik van.
Daarnaast is geprobeerd de toegankelijkheid te vergroten door eens kritisch te kijken naar hoe stevig we met beide benen op de grond staan. We probeerden, hoe moeilijk ook in een door buzzwords vervuild vakgebied, onnodige Engelstalige terminologie te vermijden door wat veelvoorkomende woorden in de uh… interface (sorry… gebruikersomgeving?) nog eens onder de loep te nemen. ‘Comments’ heten vanaf vandaag dus gewoon ‘reacties’, ‘search’ heet ‘zoek’ en ‘channels’ gaan verder als ‘rubrieken’. We gaan het niet overdrijven, dus voordat we een website ‘webstek’ gaan noemen moet er nog heel wat gebeuren.
Techniek
Tegelijk met de wijzigingen aan het zichtbare deel van de site is de techniek onder handen genomen. Achter de schermen hebben we de overstap gemaakt van het weblogpakket pMachine naar een blinkend nieuwe versie van de opvolger daarvan: Expression Engine.
En da’s niet zomaar een pakket. Het kan enorm veel, in potentie, maar het kost wat tijd en moeite om het zo in te richten als de bedoeling is. Zeker als je minstens de mogelijkheden van een al bestaand weblog op een zo goed lijkende manier wil nabouwen. Om het niet te hebben over het inpassen van nieuwe dingen die we onder invloed van goede en minder goede pizza in het projectteam bedachten.
Hoe dan ook, ondergetekende installeerde een verse Expression Engine, viel de makers op het support-forum lastig met uitzinnige feature-requests, migreerde alle oude data en knoopte vervolgens de losse eindjes aan elkaar. Vervolgens werd stukje bij beetje de inmiddels uitontwikkelde eerste versie van het nieuwe uiterlijk van de site in de voor Expression Engine noodzakelijke templates geïntegreerd.
Mijlpaal één hebben we vandaag bereikt: Marketingfacts v2.0 doet bijna helemaal wat Marketingfacts v1.0 ook deed. Nu is het tijd om de naar ‘later’ opgeschoven nieuwe features stuk voor stuk te gaan afronden en inpassen.
Zoekmachines
We zouden het bijna vergeten, maar er was nog één dingetje. Er was al een enorme berg content. Meer dan 7500 berichten met bijbehorende reacties stonden te wachten om opgenomen te worden in de nieuwe site.
Een extra probleem was dat al die artikelen inmiddels door zoekmachines als Google in hun index waren opgenomen. Da’s op zich super, want zo is Marketingfacts goed vindbaar op waar het om gaat: de inhoud. Nadeel was alleen dat alle content geïndexeerd was op basis van de domeinnaam mediafact.nl, die we met deze operatie voor eens en voor altijd wilden inruilen voor marketingfacts.nl. Ook hadden we ons stellig voorgenomen om de cryptische oude cijfertjes-url’s naar leesbare varianten om te zetten.
Om ervoor te zorgen dat een Google-bezoeker zijn content netjes binnen de nieuwe site, op de nieuwe domeinnaam en met de juiste url terug zou kunnen vinden, werd na overleg met Remi van Beekum van Traffic4U door ons een remapping-script geschreven dat dit zou moeten afhandelen. Remi had overigens nog meer tips, bijvoorbeeld voor het zo goed mogelijk voor zoekmachines leesbaar maken van alle pagina’s, en sprong van tijd tot tijd bij om onze code (en die van Expression Engine 🙂 ) ook daarvoor te optimaliseren. Hoe dat allemaal zit, kan hij vast beter zelf vertellen.
Eind goed, al goed
Een weblog is nooit af, zeggen ze. Klopt. We gaan vrolijk verder.
Stay tuned.
Ralph Bom is mede-eigenaar van online bureau Onstuimig.
@Ralph
Bedankt voor jouw uitleg.
Ik zie dat op de gebieden design en SEO nog puntjes op de i moeten, maar dat komt vast nog.
Gaat de site nog geoptimaliseerd worden voor Opera en andere browser?
Het is allemaal heel mooi geworden! Maar eh: kunnen de letters niet een puntje groter gezet worden? Schermen krijgen immers een steeds hogere resolutie (= kleinere lettertjes), terwijl de mensen die ernaar kijken steeds ouder worden (= minder scherp zicht).
Ik heb nog niet echt het gevoel dat ik op de website van Marketingfacts zit. Looks ok feels moet nog groeien….
Een mooie en rustige layout. Gefeliciteerd met de geslaagde migratie en blog ze!
Persoonlijk vind ik het wat rommelig op ’t eerste oog en ook het lettertype vind ik niet fantastisch. Maar zoals het bij veel verbeteringen is; ik zal er vast ook nog aan moeten wennen voordat ik het ga waarderen.
Is de site ook getest met IE7? De invulvelden van het reactieformulier zien er niet helemaal lekker uit! Zie de screendump bij Flickr met de tag: marketingfacts2.0
@Carl
Ze staan al een puntje groter
@Albert
Kan me voorstellen dat het opeens wat anders is. Is een grote omschakeling geweest. Alleen de basis staat nu nog, maar de muren zijn totaal vernieuwd.
@Wow!ter
Linkrot wilden we zeker voorkomen. Al helemaal omdat er nu zo’n dikke 8000 berichten zijn geplaatst. Dit is/was ook onze voornaamste zorg voor de eerste fase, maar goed kunnen tackelen ism Traffic4U
@Willem
IE7 is nog beta. Aanpassingen die we nu doen -zoals achtergronden van inputvelden- kunnen over een week al overbodig zijn. Daarom wachten we ‘met smacht’ op de definitieve eerste release.
Ik vind MF persoonlijk erg saai en erg doorsnee geworden qua layout. Het leest wel uiermate rustig en prettig, maar het doet mij overkomen als een soort standaard template die slechts een paar kleine aanpassingen heeft gehad.Maar goed het is met een weblog toch vrij moeilijk om je te onderscheiden qua layout en toch overzichtelijk te blijven, eigenlijk is dat gewoon ook de reden dat ik mijzelf zoveel mogelijk van vormgeven af hou.
Het lezen is prettiger geworden en dat vind ik toch het belangrijkste :).
Best wel heel erg netjes.
Hier op de Mac met Firefox is ie perfect.
Zeer moei geworden, heerlijk dat het een website is die vernieuwd is en meteen om mijn mac met safari werkt, zie je helaas niet vaak.
Binnenkort een SEO dossier/online workshop met MF2.0 als case?
@ Jelmer, ik ben druk aan het typen. Ik hoop morgen ‘Marketingfacts 2.0: the Search engine optimization’ te plaatsen.
Super, ik ben benieuwd!
p.s. ‘moei’ in mijn vorige post moest natuurlijk ‘mooi’ zijn maar aangezien ik zelf ‘moe’ ben ging het was mis.
Ik kan het me ook wel een beetje vinden in de reactie van Rick. Waar de oude site toch kleinschalig/knus en gezellig overkwam – ookal was het een standaard template – is het wel even wennen naar deze toch wat gladde/stijve en meer commerciële layout. Niets dan lof hoor trouwens, maar dit is gewoon een gevoel wat bij me opkomt. Ook idd dat template-gevoel.
@Marco
Ik kan niet wachten tot die banners er zijn :P. Het is zonde dat de crazyfrog gestopt is, anders had deze er goed bijgepast :P.
Qua saaiheid bedoel ik met de name de kleurstelling en de in mijn ogen standaard verloopjes die tussen vlakken zitten (en wellicht omdat ik de afgelopen weken veel templates in mijn “handen” heb gehad oogt deze ook voor mij wat standaard in het algeheel).. Eigenlijk zorgt deze saaiheid ook voor een betere leesbaarheid dus op dat punt ligt het maar er net aan wat je doel is 😉 en persoonlijk vind ik dat geval de leesbaarheid een stuk belangrijker dan een een mega flitsende layout, de layout is gewoon niet slecht, maar wat minder flitsend dan ik verwacht/ gehoopt had ;).
Daarnaast als ik wat leuke feature request zou morgen doen ;):
In het reageer-vak zou ik persoonlijk het prettig vinden als ik op een knop kan drukken in plaats van een linkje (qua functionaliteit maakt het niet uit, maar voor mij is het gewoon een stukje perceptie dat je berichten plaatst door op een knop te drukken ;)). Daarnaast zou het, mijn inziens, mooi zijn als je na het reageren direct doorverwezen wordt naar je bericht (door een anchor). Ook zou dat anchor handig zijn voor de mailtjes die je krijgt zodra iemand hier gereageerd heeft, scheelt weer wat scrollen ;).
Daarnaast zijn er nog zaken qua mark-up niet geheel in orde (sorry, het blijft mijn fetish als ik sites bekijk ;)):
* in het navigatiesysteem van de rubrieken wordt een selecti gebruikt (prima, al is het niet super uservriendelijk en handig voor SEO), maar binnen die select worden een ul en links gebruikt. Iets wat niet echt heel valide is.
* Als doctype wordt XHTML 11 gebruikt, sowieso is dat nu niet zinnig omdat a) de pagina geserveerd wordt als text/html en b) omdat er nog veel fundamentele zaken niet inzitten om een validerende XHTML 11 pagina op te leveren (target en center elementen, sommige attributen geschreven in hoofdletters in plaats van lowercase etc.)
* een leuke toevoeging zou bijvoorbeeld nog accesskeys zijn waardoor je makkelijker kan navigeren (of posten).
Maar goed, aangezien bovenstaand geneuzel echt een te hoog nerd gehalte heeft, kan dit ook rustig genegeerd worden, want er is op zich niets mis mee (behalve dat de site niet aan de standaarden vanuit het w3 voldoet, dan breekt toch mijn nerden-hart ;)).
Ik wilde alleen even zeggen dat het een mooie site is geworden. Zakelijk maar niet saai, overzichtelijk, goed leesbaar – mijn complimenten!
In zijn geheel zeer zeker een voorruitgang. Vind de voorpagina wat druk en denk dat de lettergrootte van de linker en rechter colom (en ook bij reageren) groter moeten.
Voor de rest lekker strak en overzichtelijk.
Nog een puntje. Bij het invoeren van een reactie staat niet vermeld welke velden verplicht zijn om in te vullen en als je er dan 1 niet invult, krijg je een error en kun je vervolgens alles weer opnieuw gaan invullen.
Als ik deze pagina oproep krijg ik een Javascript foutmelding:
Er is een runtime-fout opgetreden.
Wilt u beginnen met de foutopsporing?
Regel: 1106
Fout: Object wordt verwacht
Op de voorpagina is het Regel: 1131
@rick, @jxxst: Jullie zien het goed. We hebben niet geprobeerd het wiel opnieuw uit te vinden. Bruikbaarheid ging inderdaad boven opvallend, flitsend of baanbrekend ontwerp. Eerlijk gezegd vonden we dat ook het meest ‘des Marketingfacts’.
Verzorgd en gepolijst moest het wél zijn. Ik denk dat een redesign er in dat opzicht überhaupt iets minder gezellig uit zal zien dan het origineel. (Ik herinner me discussies over sites als Marktplaats: handhaven zij expres hun home-made ontwerp om het licht kneuterige, vertrouwde sfeertje te behouden?).
Dat ontwerpen die streven naar overzichtelijkheid en gebruiksgemak het een en ander gemeen hebben is trouwens op zich niet verrassend: de makers zullen globaal aan dezelfde basisregels moeten voldoen om dat doel te bereiken.
Toch even ’n paar voorbeeldjes:
-Zo’n driekoloms-layout met header en footer is volstrekt niet origineel, maar domweg in veel gevallen het meest praktisch.
-Zachte lijnen en subtiele verloopjes zijn prettiger voor je ogen dan harde lijnen en felle kleuren. Vooral naast een artikel dat je graag wil lezen. En al helemaal als je vaak veel artikelen graag wil lezen. 🙂
-Blauw is de Sky Radio van het design: je kunt je er niet echt een buil aan vallen, want gemiddeld genomen vindt niet snel iemand het een storende kleur. Maar in het algemeen wordt het gebruik van blauw niet als creatief ervaren. En dat is terecht.
-Logo linksboven, zoekbox rechtsboven? Door gewenning van website-bezoekers een verstandige keus. Onorigineel? Ja. Stap dichter bij de totale internet-eenheidsworst? Ja. Daarom niet doen? Nee.
Enzovoort!
De rest heeft al snel met smaak te maken. En daarvoor gelden heel oude wetten. 🙂
Wat ik erg mis in dit verhaal is:
Wat gaan jullie doen met de Leden?
CRM plan?
De backedn voor de Leden vindt ik erg rommelig en eigenlijk kan ik er niet echt mee werken. Wat ik graag zou zien bij een dergelijke site is links naar LinkedIn / OpenBC. Veer meer een user ding om ook een community verhaal te gaan worden. Er zitten hier namelijk erg veel mensen die via postings met elkaar communiceren. Nou vindt ik een forum niets dus een speciale user backend zou wel handig zijn.
En is er een openbare Bugtracker? Jira? of een plek waar ik dingen kan melden?
Kjeld, goed punt! Communicatie en contactmogelijkheden tussen leden verder uitbouwen en integreren in het huidige format. Misschien moet ik hier een aparte post over maken met de vraag wat de leden eigenlijk willen. Later deze week! Eerst maar eens aan het werk 😉
Over Marketingfacts 2.0:
* Als ik bij een reactie op Preview klik, wordt het bericht gewoon geplaatst!
* Waar is de melding van de Most Popular Links gebleven (als je een linkje aanklikt)?
* Bij het ledenoverzicht worden replies en postings bij elkaar opgeteld, waardoor ik als bezoeker niet meer kan zien wie hier de meest frequente bloggers zijn.
* En wat ik me afvraag: hoe is die blog top-100 opgesteld? Waar is de volgorde op gebaseerd?
Jeroen, je opmerkingen zullen worden meegenomen in de verdere verbetering van Marketingfacts 2.0.
Wat bedoel je met de most popular links? De top-25? Die zal terugkomen; moet er nog een plekje voor vinden.
De blog top-100 is nu nog op basis van startdatum maar zal binnenkort ook zijn gebaseerd op een aantal andere criteria. We zijn aan het kijken of en zo ja hoe een votingsysteem zou kunnen worden geimplementeerd.
@ Marco: Ik bedoel inderdaad de top-25. Leuk tooltje is dat.
Over de Blog Top-100: kun je daar niet gewoon Technorati op loslaten?
Ik heb inderdaad aan Technorati zitten denken maar helaas zijn niet alle Nederlandse blogs daar aangemeld. Een evt. alternatief is om iets te doen met Google PageRank en/of aantal backlinks in Google en dat gecombineerd met een votingsysteem.
De italic stukken werken niet zo heel erg mooi vind, ze zijn nogal slecht leesbaar. Misschien kun je ze een class geven met een andere achtergrondkleur en wat “tekens?
Gerelateerde artikelen
Marketingfacts. Elke dag vers. Mis niks!
Marketingfacts. Elke dag vers. Mis niks!