netlash
Trust man - 38 jaar, Gent, België
- Vrienden |
- Gastenboek
- | Foto's
- | Blog
- | Brands
- | Groepen
- | Video's
- | Shouts
- | Links
- | Applicaties
Blog 26
-
Social Media Forum
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.
-
Het grafisch proces
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
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.
- 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:
-
Queries uitsparen met behulp van IN()
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.ni- ck, 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
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
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
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
VolgendeVorigeSlideshow 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? - 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
-
MySQL Slow Log Parser
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
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
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.
Ik zal er alleszins zijn - jullie ook?
Social Media Forum geschreven door Bart in: opleiding
Tags: event, forum, opleiding, social media
Dieter Rams geschreven door Bart in: webdesign
Tags: design, usability, visie
Omdat we graag voorzien zijn op "ietsje meer", kan via enkele extra parameters je slideshow wat aangepast/uitgebreid worden.
Beschikbare parameters zijn:
Tags: javascript, jquery, slideshow
SVN Export gewijzigde files geschreven door Tijs in: webdevelopment
Tags: applescript, export, svn, tools
