Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Zend Framework en jQuery formuliervalidering
2 dec 2008•Hoewel ik voldoende vertrouwd ben met php en javascript, voel ik me in de eerste plaats een ontwerper. Dat is ongetwijfeld de reden waarom ik zo hou van frameworks want als ik toch de programmeerkant opga dan laten ze me toe om snel robuuste code te schrijven. Sinds enkele maanden ben ik voor een klant intensief bezig met het Zend Framework voor php en jQuery voor javascript.
Het project waaraan ik werk maakt uitvoerig gebruik van HTML-formulieren (via Zend_Form) en dus is het valideren van de gegevens die een eindgebruiker invult een noodzaak. Een voorbeeldje van formuliervalidering vind je hieronder. Als de gebruiker op de ‘Aanmelden’ knop klikt zonder een paswoord in te vullen, dan wordt het formulier niet verzonden maar verschijnt er een boodschap op het scherm. Het paswoordveld is immers verplicht in te vullen.
Het Zend Framework zorgt voor goede validering aan de serverkant, maar ik twijfelde over hoe ik de validering zou aanpakken aan de clientkant.
Javascript en php
De meest voor de hand liggende oplossing is natuurlijk het schrijven van javascriptfuncties die de formuliervalidering aan de clientkant voor hun rekening nemen. Maar ik hou er niet van om twee keer code te schrijven met hetzelfde einddoel: één keer in php en één keer in javascript. In een project dat in de maanden na lancering ongetwijfeld nog heel wat aanpassingen zal ondergaan lijkt het me niet aangewezen om telkens zowel de php-code als de javascriptcode te moeten wijzigen wanneer er iets verandert aan een formulier.
Laat Zend_Form de validering maar doen!
Ik heb er dan maar voor gekozen om alles wat betreft formuliervalidering te laten afhandelen door het Zend Framework. Dankzij een jQuery ajax oproep naar de Zend_Form isValidPartial() functie ben ik toch in staat om een gebruiksvriendelijke en snelle validering per formulierveld op het scherm van de gebruiker te tonen.
In de indexAction() van mijn controller regelt het onderstaande stukje code de server-side validering. Niets nieuws voor wie ooit al eens Zend_Form heeft gebruikt. De isValid() functie checkt de input en geeft een foutmelding weer op het scherm van de gebruiker als die ongeldige gegevens in het formulier heeft ingebracht. Pas wanneer alle input geldig is wordt het formulier echt verzonden en de database geüpdatet.
if($this->_request->isPost()) {
$formData = $this->_request->getPost();
if($form->isValid($formData)) {
//update database
} else {
$form->populate($formData);
}
}
Het nadeel van bovenstaande code is dat de validering pas gebeurt nadat het formulier wordt verzonden. De gebruiker moet dus wachten op een paginavernieuwing alvorens te weten of zijn ingevulde gegevens geldig of ongeldig waren. ‘So nineties!’, hoor ik je roepen. Dat komt inderdaad niet overeen met de snelle responstijd die een gebruiker vandaag verwacht van een webapplicatie.
jQuery to the rescue!
jQuery zal er voor zorgen dat de ingevulde gegevens van elk veld gevalideerd worden op de server net na het invullen van het veld via een Ajax oproep. Zo weet de gebruiker meteen of het veld goed ingevuld is of niet, en dat zonder te moeten wachten op een paginavernieuwing.
jQuery roept daarvoor telkens een tweede action aan in mijn Zend Framework controller. Ik heb die validateformpartial genoemd:
public function validateformpartialAction() {
if($this->_request->isPost()) {
$formData = $this->_request->getPost();
if($form->isValidPartial($formData)) {
//update database
$this->view->result = true;
} else {
//geeft foutief ingevulde velden weer met hun foutmelding
$this->view->messages = $form->getMessages();
$this->view->result = false;
}
}
}
Het verschil zit in de aangeroepen functie: isValidPartial() laat toe om enkel het doorgegeven stukje formdata te valideren. Heb je dus een formulier dat uit 5 velden bestaat en je wil maar 1 veld valideren dan kan dat via isValidPartial(). getMessages() geeft de fouten weer per veld. (Meer informatie over getMessages vind je in de Zend Framework handleiding.)
Belangrijk is wel dat je via je javascript functie enkel json (of xml) terugkrijgt van die Zend Framework action. Je moet dus Zend_Layout en Zend_View uitschakelen voor die ene action. Dat kan makkelijk in de initAction() van je controller dankzij de AjaxContext helper:
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('validateformpartial','json')->initContext();
Alles wat je in de validateformpartialAction() als variabele aan de view meegeeft (via $this->view->variableName) wordt dan meteen door die functie als json geretourneerd. Dat maakt het makkelijk om die variabelen in jQuery op te vangen en er iets mee te doen. Zo kan je bijvoorbeeld via jQuery per veld tonen welke fout de gebruiker gemaakt heeft tijdens het invullen van het formulier.
Ter vervollediging is hier de jQuery ajax functie die de waarde van het ingevulde formulierveld doorstuurt naar de validateformpartialAction van daarnet uit de Zend Framework controller:
$.ajax({
type: "POST",
//dataString is een string in dit formaat: &naam=johnny&beroep=bouwvakker
//je geeft dus de value van alle ingevulde formuliervelden die je wil valideren mee
data: $dataString,
//baseUrl bevat het pad naar je webapplicatie
url: baseUrl + "/controllernaam/validateformpartial",
dataType: "json",
//showSpinner toont een grafisch element dat de gebruiker er op wijst dat er iets aan het gebeuren is
beforeSend: function(){ showSpinner(); },
//handleResponse verwerkt de teruggekregen json data en toont de gebruiker het resultaat van de validering
//hideSpinner() verbergt het grafische element
success: function(json){ handleResponse(json); hideSpinner(); },
});
That’s it. Door de vele requests naar de server is het misschien niet de meest aangewezen manier om formuliervalidering te doen voor grootschalige webapplicaties, maar voor het project waar ik aan werk is het zeker voldoende. Het systeem zal zelfs op hoogdagen nooit door meer dan 100 gebruikers tegelijk gebruikt worden.
Het grote voordeel is dat de formvalidering overgelaten wordt aan Zend_Form. Eén regeltje wijzigen in je Form class is dus voldoende om zowel je formulier, de ajaxvalidering als de php validering up-to-date te brengen. Geen dubbel javascript valideringswerk dus. Het maakt mijn applicatie een stuk makkelijker te onderhouden.
Categorieën: Ontwikkeling, jQuery, PHP, Zend Framework
Een masker per slimme filter in Photoshop
25 nov 2008•Photoshop CS3 maakt 1 filtermasker aan per slim object, ongeacht het aantal filters dat je er op toepast. In deze blogpost demonstreer ik een techniek die je toelaat om een filtermasker te creëren per filter. En dat zonder lagen te hoeven kopiëren of samenvoegen. Het voordeel is grandioos: nu kan je filters toepassen met de flexibiliteit van aanpassingslagen.
Het probleem
Eerst even een schets van het probleem aan de hand van een foto die ik nam op een zomeravond in Québec:
Omdat ik vond dat de keien vooraan teveel aandacht opeisten, heb ik ze onscherp gemaakt. Zo creërde ik ook meteen een groter gevoel van scherptediepte.
Het onscherp maken deed ik vrij eenvoudig via de filter Gaussiaans vervagen (Eng: Gaussian blur). En door die als een slimme filter toe te passen kan ik ten allen tijde terugkeren naar mijn oorspronkelijke scherpe keien, mocht ik me achteraf bedenken. Tegelijk kan ik met zwart op het filtermasker schilderen boven het huisje, de berg en de wolken om die delen van mijn foto perfect scherp te houden.
Uitstekend dus! De lagenpalet van mijn foto zie je hieronder. Let op het filtermasker; het zwarte stuk zorgt er voor dat de filter Gaussiaans vervagen niet zichtbaar is op die plaats van de foto.
Ik hou van het contrast tussen het warme kunstlicht en de koele tinten van de omgeving. Om de aandacht van de kijker nog meer op dat kleurenspel te richten wilde ik graag een vignet aan de foto toevoegen. Dat is een vrij populair effect dat de hoeken van de foto donkerder maakt.
Een vignettering kan je snel verkrijgen via het menu ‘Filter > Vervorm > Lenscorrectie’ (’Filter > Distort > Lens correction’). Alleen zit ik nu natuurlijk met het probleem dat het filtermasker van daarnet niet alleen de vervagingsfilter bovenaan onzichtbaar maakt, maar ook het vignet. De afbeelding hieronder toont wat er aan de hand is:
Zoals je ziet creërt Photoshop 1 filtermasker per slim object en niet per slimme filter. In het ongewenste resultaat zie je enkel een vignet in de onderste hoeken van de foto:
De oplossing
Er is gelukkig een mouw aan te passen. Volg deze werkwijze als je meerdere slimme filters wil toepassen, elk met hun eigen filtermasker:
Stap 1: Pas je eerste filter toe
Zet je laag om naar een slim object en pas je eerste filter toe. In mijn bovenstaande voorbeeld is dat de filter Gaussiaans vervagen. Gebruik het filtermasker indien nodig.
Stap 2: Dubbelklik op het slim object in de lagenpalet
Photoshop opent nu het referentiebestand waarnaar het slim object verwijst.
Stap 3: Zet de laag van dat referentiebestand om naar een slim object
Dat kan via ‘Laag > Slimme objecten > Omzetten in slim object’ (’Layer > Smart objects > Convert to smart object’). Je werkt nu dus met een slim object in een slim object!
Stap 4: Pas je tweede filter toe op dit slim object
In het geval van mijn voorbeeld is dat de vignettering. Indien nodig kan je het filtermasker gebruiken om ook deze filter lokaal onzichtbaar te maken.
Stap 5: Bewaar en sluit het referentiebestand
Je zal zien dat je bewerking hierna ook doorgevoerd wordt in het oorspronkelijke bronbestand. En de tweede filter is niet meer onderhevig aan het filtermasker van de eerste filter. In mijn voorbeeld levert dat zoals je hieronder ziet een echt vignet op. De vier hoeken zijn nu donkerder:
Je kan de bovenstaande stappen indien nodig enkele keren herhalen om meerdere slimme filters toe te passen, elk met hun eigen filtermasker. De truck bestaat er dus gewoon uit om telkens een slim object binnenin een slim object te gaan maken. Het lijkt in het begin wat ingewikkeld maar laat je zeker niet afschrikken, het is helemaal niet zo moeilijk als het lijkt.
één klein nadeel misschien
Het nadeel aan de bovenstaande werkwijze is dat het niet evident is om ook nog maanden later te weten wat er juist met de foto is gebeurd. Dan moet je er aan denken te dubbelklikken op het slimme object in de lagenpalet om dan in het referentiebestand te zien dat er ook nog een tweede filter is toegepast op de foto. Maar je zou natuurlijk de naamgeving van het slim object zo kunnen aanpassen dat je weet dat er een tweede slim object in vervat zit. Ik denk dan aan iets als ‘foto huis SO in SO’.
En in Photoshop CS4?
Ik heb de kans nog niet gekregen om Photoshop CS4 uit te testen omdat ik wacht om mijn geld boven te halen tot de Nederlandstalige versie op de markt komt. Ik weet dan ook niet of Photoshop CS4 standaard een filtermasker per slimme filter aanmaakt (laat zeker iets weten als jij het al eens hebt kunnen testen! Update: Viero laat in een reactie weten dat ook CS4 geen masker per filter aanmaakt!). Maar als dat niet zo is, dan kan je ook in CS4 ongetwijfeld gebruik maken van deze techniek.
Gebruik je zelf een andere manier om een filtermasker te bekomen per slimme filter of heb je bemerkingen bij deze werkwijze? Dan hoor ik het uiteraard heel graag van je!
Categorieën: Photoshop
Waarom ik koos voor Expression Engine als cms voor mezelf en mijn klanten
10 nov 2008•In een vorige blogpost had ik het over de reden waarom ik destijds gestopt ben met het ontwikkelen van mijn eigen handgecodeerd contentmanagementsysteem (cms) voor klanten. Vandaag wil ik je vertellen waarom ik uiteindelijk voor Expresson Engine heb gekozen als vervangend cms.
Ontwerpen in alle vrijheid
Expression Engine laat me websites ontwerpen in alle vrijheid. Het systeem is zo flexibel dat het me de vrijheid geeft te ontwerpen en coderen op exact dezelfde manier waarop ik het altijd al heb gedaan. En dat is heel belangrijk voor mij. Pas wanneer de front-end perfect werkt zoals ik het wil, begin ik met de implementatie van Expression Engine als back-end. Het cms legt me dankzij het ingenieuze gebruik van templates, velden en tags geen enkele beperking op op het vlak van vormgeving of technische functionaliteit.
Krachtig genoeg voor de meeste websites
Expression Engine is heel krachtig en aanpasbaar zodat 95% van de websites die ik ontwikkel uitgewerkt kunnen worden met Expression Engine als back-end. Geen enkele websitestructuur bleek tot nu toe niet te passen in het EE plaatje. Daarenboven laat Expression Engine me toe om veel sneller de meestgevraagde websitefuncties (ik denk aan contactformulieren, weblogs of fotogalerijen) aan mijn klanten aan te bieden, én is het uiterst zoekmachinevriendelijk.
Eenvoudig aan te leren
Expression Engine werkt heel intuïtief en was voor mezelf heel eenvoudig om aan te leren. Ik lieg niet wanneer ik je vertel dat ik in één dag in staat was om een eenvoudige bestaande website gebruiksklaar en updatebaar te maken via Expression Engine. Hoewel de broncode van EE vrij beschikbaar en aanpasbaar is, is het cms niet gratis te gebruiken in een commerciële omgeving. Dat hoeft in mijn ogen niet meteen een nadeel te zijn: als wederdienst kan je rekenen op hun uitstekende uitgebreide documentatie en de technische ondersteuning die je als EE klant krijgt is tot nu toe ongelooflijk snel en to the point gebleken.
Gebruiksvriendelijk voor mijn klanten
Op het eerste zicht leek de back-end mij klantonvriendelijk en dat is en was dan ook het grootste minpunt aan Expression Engine. Het is vaak wat zoeken naar de meest banale opties en onderdelen. Maar gelukkig kan je het cms vrij goed aanpassen via een uitgebreid rechtensysteem zodat mijn klanten toch op een overzichtelijke en duidelijke manier hun weg vinden in het updategedeelte van hun websites. Dit is essentieel in mijn ogen. Ik wilde een cms dat ook voor computerleken eenvoudig te gebruiken is.
Ik kan nog een tijdje doorgaan maar de bovenstaande punten zijn voor mij de meest belangrijke. Ter informatie geef ik je nog een lijstje mee van andere contentmanagementsystemen die ik meer of minder uitgebreid heb getest: CMS Made Simple, Modx, Wordpress, Joomla!, Textpattern, Plone en Drupal. Om één of meerdere van bovenstaande redenen hebben deze het echter niet gehaald.
Categorieën: Opinies, Webomgeving
Zwarte tekst op een witte achtergrond
2 nov 2008•Als je even snel honderden jaren boekdrukkunst en typografie overloopt, dan merk je gauw dat het gros van de gedrukte boeken bestaat uit zwarte tekst op wit papier. Dat duidelijke contrast tussen de letterkleur en de achtergrondkleur zorgt er natuurlijk voor dat we aangenaam kunnen lezen.
Ook de letterkleur van tekst die op schermen gelezen wordt, contrasteert best sterk met de achtergrondkleur om makkelijk leesbaar te zijn. Maar is zwarte tekst op een witte achtergrond ook hier de heilige graal? Mogen we met andere woorden deze typografische waarheid van honderden jaren boekdrukkunst zomaar overnemen op het web? Als we de websites van het gros van de Belgische kranten bekijken, dan lijkt dat zo te zijn.
DE PROEF OP DE SOM
Maar laat ons toch maar even op onderzoek uitgaan. Hier vind je een webpagina waarop tweemaal dezelfde tekst te lezen is. Aan de linkerkant zie je zwarte tekst (#000 voor de techneuten onder ons) op een witte achtergrond, aan de rechterkant donkergrijze tekst (#444) op een witte achtergrond. Welke vind jij het aangenaamst lezen?
Mijn gevoel neigt alvast naar de rechterkant. In het linker stuk lijkt het contrast tussen letter en achtergrond té drastisch. De rechter tekst staat zachter en leest naar mijn mening een stuk comfortabeler.
WAAR ZIT DAN HET VERSCHIL?
Wat in de wereld van drukwerk een bewezen waarheid is, lijkt op het web niet te werken. Een wit blad papier kan je nu eenmaal niet vergelijken met een wit vlak op een computerscherm. Als je even de gordijnen dicht doet en het licht uitlaat dan snap je wel wat ik bedoel: een scherm straalt licht uit; opdringerig licht.
Dat licht zorgt er voor dat het contrast tussen schermwit en schermzwart groter is dan dat tussen papierwit en drukzwart. En téveel contrast blijkt de leesbaarheid niet te bevorderen.
Conclusie
Webteksten laten we best niet té fel laten contrasteren met de achtergrond. We kiezen dus beter voor grijs-wit ten nadele van zwart-wit. Uiteraard werkt om het even welke andere kleurcombinatie die een aanvaardbaar contrast oplevert even goed. Hier zijn enkele goede online voorbeelden in verschillende kleurcombinaties. Ook eervolle vermeldingen voor onder andere deze Belgische dagbladen: De TIjd, Het Belang Van Limburg en Le Soir.
Niet geheel terzijde: alles hangt natuurlijk in grote mate af van de lichtomstandigheden van zowel het scherm (de meeste schermen kan je dimmen) als de omgeving. Als de zon op je scherm invalt, dan lijkt een zwart-wit scenario altijd beter leesbaar dan wanneer je in het donker op je computerscherm staart.
Wat vertelt jouw gevoel en je persoonlijke leeservaring op het web over deze typografische kwestie? Ik hoor graag je mening.
Categorieën: Ontwerp, Typografie, Opinies, Webomgeving
Hou de foto’s op je website haarscherp
22 okt 2008•Heb je ooit al eens een foto moeten verkleinen om die op een website te plaatsen? Misschien heb je dan gemerkt dat de verkleinde foto er plots een stuk onscherper uitziet. Het is een veelvoorkomende kwestie die vrij eenvoudig te verhelpen is.
Het probleem
Om te verkleinen ga je het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) oproepen. Je wijzigt daarna de pixelafmetingen en klaar is kees. Van een foto als deze, bekom je dan een resultaat als dit:
Ziet er goed uit? Het kan beter! Zeker als je het origineel bekijkt dan valt op dat de letters een stuk waziger zijn. Dat komt omdat Photoshop tijdens het verkleinen niet echt rekening heeft gehouden met de randen die in je foto voorkomen. Nu is het net het randcontrast in je foto die de scherpte gaat bepalen.
De oplossing
Gelukkig kunnen we Photoshop op een andere manier de foto laten verkleinen. Als je even terugkeert naar het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) dan zal je zien dat je onderaan het berekeningsalgorithme van Photoshop kan wijzigen bij ‘Nieuwe beeldpixels berekenen’. Als je wil verkleinen dan kies je hier best voor de optie ‘Bicubisch scherper (meest geschikt voor reductie)’.
Het resultaat
Het resultaat van de nieuwe verkleining kan je hieronder zien. De foto is stukken scherper en ziet er naar mijn mening veel beter uit. (Een snelle vergelijking.)
Opslaan voor web en apparaten
De meeste webdesigners gaan hun foto’s verkleinen in het dialoogvenster ‘Opslaan voor web en apparaten’ (Save for web and devices). Ook hier kan je het algorithme dat Photoshop gebruikt tijdens de verkleining gaan instellen op ‘bicubisch scherper’. De screenshot hieronder demonstreert dat:
Te scherp?
Vind je dat je foto er nu te scherp uitziet? Verklein dan op de oude manier (met het standaard ingestelde bicubisch algorithme), en ga net voor het opslaan je foto nog even verscherpen via ‘Filter > Verscherpen > Slim verscherpen’ (Filter > Sharpen > Smart sharpen). Nu heb je de hoeveelheid verscherping helemaal zelf in de hand.
Categorieën: Photoshop
Suf surfen op zondag
19 okt 2008•Heb web spuwt een onafgebroken stroom van informatie onze kant uit. Vaak is het pompen of verzuipen. Hier is een korte selectie van wat ik in de afgelopen week hoogst interessant vond.
Online productvideo’s
Vooreerst even als aanvulling op mijn post over online productvideo’s: Soundcloud heeft naast een mooi logo ook een mooie productvideo online gezet. Je kan het filmpje niet missen op hun homepage. De video van Silverback (onderaan de pagina) lijkt dan weer een stuk minder interessant. De video duurt te lang en is helemaal niet to the point.
Verder over video
Eric Velleman van Accessbility heeft het in dit artikel over hoe je video op een toegankelijke manier op je website kan plaatsen. Helemaal bovenaan het artikel kan je een voorbeeldvideo zien van de Nederlandse spoorwegmaatschappij NS, inclusief captions en audiobeschrijving voor blinden en doven. (Via)
Ode aan Josef Müller-Brockmann
Via Wilson Miners blog kwam ik terecht op een Flickr set met posters van de uitstekende Zwitserse ontwerper Josef Müller-Brockmann. Gewapend met Helvetica, eenvoudige vormen en een bijzonder goed oog voor evenwicht en spatiëring was Müller-Brockmann één van de voorvechters van een gridgebruik in de grafische vormgeving.
Wat als je sterft?
Josef Müller-Brockmann overleed helaas in de vorige eeuw. En over doden gesproken: Tech Rader heeft in de afgelopen week een opmerkelijk artikel online geplaatst (in het Engels weliswaar). Het geeft antwoorden op de vraag wat er gebeurt met je ‘online profiel’ als je sterft. Waar gaan je websiteprofielen, blogcommentaren, websites en foto’s naar toe?
Rotis FF
Sander Baumann breide dinsdag een vervolg aan zijn interessante Font Series, een reeks blogposts waarin de specialist in bewegwijzering foto’s post van gevonden typografie. Deze keer laat Baumann foto’s zien van de Rotis Font Family. Een aanrader.
Categorieën: Webomgeving
Online productvideo’s: tips en voorbeelden
15 okt 2008•Video op het web is hot. YouTube maakte het medium enkele jaren geleden ongemeen populair en is tot op de dag van vandaag een van de meest bezochte websites wereldwijd.
Maar ook steeds meer bedrijven gebruiken videofilmpjes om hun producten online voor te stellen. Op het Belgische internet is er nog niets van te merken, maar in Noord-Amerika is het een duidelijke trend. Vooral softwarefirma’s lijken ervoor te vallen.
Hieronder zie je een still uit een promotiefilmpje voor de iPod Touch van Apple, waarin een vriendelijke dame je kernachtig alle uitleg verschaft over het toestel.
Hoewel de meeste van die filmpjes vaak eenvoudig in elkaar zitten, zijn ze heel effectief. In een mum van tijd kunnen ze een potentiële klant overtuigen van de kracht van het aangeboden product. De klant zelf kan zien hoe het product werkt en aanvoelt, en hoeft daar niet eens zijn stoel voor uit.
Hieronder vind je enkele bijkomende voorbeelden samen met wat tips voor de ondernemers onder jullie die een testrit op hun eigen website wel zien zitten.
1. Hou het kort en krachtig
De aandacht van bezoekers verslapt snel. Grijp ze dus bij de keel voor ze wegklikken. Lange inleidingen en uitweidingen zijn uit den boze. Kom meteen ter zake. Niet alles over je product moet aan bod komen, enkel de echte verkoopsargumenten die twijfelaars over de streep kunnen trekken.
Hoewel Apples iPod Touchfilmpje (screenshot hierboven) professioneel overkomt, duurt het volgens mij té lang om de aandacht vast te houden.
In dat opzicht levert Vara Software beter werk. Op de productpagina van ScreenFlow krijg je een uitstekend introductiefilmpje te zien. In een minuutje tijd krijg je van de presentator alle belangrijke productinformatie te horen en kan je je een idee vormen van hoe de software werkt.
2. Zorg voor een alternatief voor je filmpje
Campaign Monitor (screenshot hieronder) overloopt gevat de belangrijkste kenmerken van zijn software meteen op de homepagina aan de hand van tekst en foto’s. Daarnaast vind je een link naar een introductievideo als aanvulling op de tekstuele presentatie van het product. Niet iedereen wil jouw video zien, zorg dan ook altijd voor een alternatief.
3. Niet te opdringerig als het even kan
Laat je bezoekers zelf beslissen of ze je filmpje willen zien of niet. Start daarom de beelden niet automatisch wanneer je webpagina geladen wordt maar voorzie een duidelijke knop: ‘Bekijk het voorstellingsfilmpje’. Dat is ook wat DropBox heeft gedaan, zoals je kan zien in onderstaande screenshot. Nu kan de bezoeker zich voorbereiden op dat filmpje: volume aanpassen, radio wat stiller, even checken of de baas niet in de buurt is…
4. Integreer het filmpje in je bestaande website
37signals toont helemaal bovenaan op de introductiepagina van hun product HighRise (screenshot hieronder) een foto van de werkruimte van het programma. Die foto verandert in een filmpje wanneer je erop klikt. Lekker makkelijk.
5. Verzacht de downloadtijd
Maar bovenstaande integratie heeft ook nog een ander niet te onderschatten voordeel op het vlak van gebruiksvriendelijkheid: je geeft je bezoeker iets te lezen terwijl het filmpje laadt. Ook tijdens minder interessante videopassages valt er altijd wat op te pikken van de tekst rondom het filmpje.
Ook Vara Software past die techniek toe, bewust of onbewust. Onder hun ScreenFlowfilmpje kan je wat bijkomende informatie over het programma lezen. Zo ben je minder snel geneigd weg te klikken terwijl het filmpje laadt.
Wat zijn jullie ervaringen met productvideo’s op het web. Kijk je ernaar of vind je ze overbodig? Vind je het een vervelende trend of net heel bruikbaar? Zou je het overwegen zo’n filmpje op je eigen website te plaatsen? Ik ben benieuwd naar jullie reacties!
Categorieën: Marketing, Opinies, Webomgeving
Over 
TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.
RSS Feed TheHotSeatLaatste blog posts
- Zend Framework en jQuery formuliervalidering
- Een masker per slimme filter in Photoshop
- Waarom ik koos voor Expression Engine als cms voor mezelf en mijn klanten
- Zwarte tekst op een witte achtergrond
- Hou de foto’s op je website haarscherp
Laatste reacties
- Dries op Een masker per slimme…
- viero op Een masker per slimme…
- viero op Een masker per slimme…
- Thomas op Een masker per slimme…
- Viero op Een masker per slimme…
Categorieën
Alle • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving