Copyright WebsiteInEenMiddag.nl 2011 Disclaimer

Copyright © WebsiteInEenMiddag.nl – 2011 Op de inhoud en vormgeving van dit document rust, ongeacht de drager of de vorm waarin het werd verspreid, auteursrecht. Dit document werd geproduceerd en verspreid als onderdeel van de workshop Website In Een Middag en is daar onlosmakelijk mee verbonden. De gids wordt alleen verspreid onder cq ter beschikking gesteld aan deelnemers van de workshop. U mag dit document NIET verspreiden of op welke manier dan ook ter beschikking stellen aan derden. Niet in zijn geheel en niet gedeeltelijk. Als u dit document in uw bezit heeft (opgeslagen op een elektronisch medium of in geprinte vorm) zonder dat u de workshop heeft gevolgd of zich formeel voor de workshop heeft aangemeld, dan beschikt u over een illegaal exemplaar. In dat geval verzoeken we u vriendelijk dit te melden aan [email protected] Disclaimer De inhoud van deze gids is gebaseerd op de persoonlijke ervaringen van de auteur. Dat wil niet persé zeggen dat u dezelfde resultaten zult behalen. Deze gids bevat een aantal links naar pagina’s op internet. Een aantal daarvan leidt naar websites of online bestanden cq applicaties die buiten de verantwoordelijkheid van de auteur vallen. Bovendien kan het zijn dat een aantal links niet (meer) werkt. Google.com, Google.nl en Google zijn handelsnamen van Google Inc. WebsiteInEenMiddag is op geen enkele wijze verbonden met Google Inc. of elke andere in deze gids genoemde merknaam.

LAY-OUT ALS STARTPUNT Dit document gaat over de basis lay-out van je website. De lay-out is iets anders dan de vormgeving. Het is het ‘grid’ van je website of zo je wilt het ‘frame’ dat je later optuigt met vormen, kleuren (oftewel de vormgeving) maar ook met functionaliteit en content, zoals artikelen en video. Op vormgeving en content komen we in een later stadium uitvoerig terug.

Doel van dit document is dat je een basis lay-out bepaalt

Actiepunt(en):

Kies aan de hand van de informatie in dit document een lay-out die je aanspreekt en past bij je doelstellingen.

Hoofdstukken: Basisvormen Business lay-out

BASISVORMEN Je kunt een zakelijke website op honderden verschillende manieren opzetten. Je bent daarin uiteraard volledig vrij. Hieronder zie je twee willekeurige voorbeelden. Nou ja, helemaal willekeurig zijn ze nou ook weer niet. Zonder er wetenschappelijk onderzoek naar te hebben gedaan, durf ik te beweren dat zo’n 80 á 90% van de zakelijke websites volgens een van de twee lay-outs hieronder is opgebouwd. Of op z’n minst op een variant van een van de twee.

let op: de kleuren in de illustraties zijn er niet om de boel mooier te maken (vormgeving) maar puur ter illustratie van de opzet van de lay-out(s).

Links zie je de meest elementair denkbare lay-out. Rechts een iets geavanceerdere opzet. Nogmaals: voel je niet verplicht een van deze twee layouts te kiezen. Als je iets heel anders voor ogen hebt, dan is dat prima. Waar het in deze fase van de voorbereiding om gaat is dat je je een helder beeld vormt van wat je tijdens de workshop wilt bereiken. Of dat een van de twee bovenstaande lay-outs is of iets heel anders, maakt niet uit. Bovendien: binnen de lay-outs hierboven, zijn tientallen varianten denkbaar. Daar komen we verderop in dit document op terug. In de praktijk kiest overigens zo’n 70 á 80% van de deelnemers aan WebsiteInEenMiddag voor (een variant op) de rechter lay-out. De belangrijkste reden is vrijwel steevast dat die lay-out je qua vormgeving meer mogelijkheden biedt om je website een professionele uitstraling te geven. Een tweede belangrijke reden is dat het je als ‘uitgever’ beter in staat stelt om bezoekers naar pagina’s te ‘sluisen’ waarvan jij wilt dat ze ze lezen. Hoe dat precies zit, dat leg ik je zo uit. Op de volgende pagina’s bekijken we de twee lay-outs wat diepgaander en zetten we de mogelijkheden, voor- en nadelen op een rijtje.

BASIC LAY-OUT De lay-out hieronder oogt op het eerste gezicht misschien eenvoudig, maar vergis je niet in de effectiviteit. Kenmerk van deze lay-out is dat elke webpage (dus ook de homepage) bestaat uit een compleet en volledig uitgeschreven artikel. Dat heeft als voordeel dat elke webpage rijk is aan content. Dat vinden vooral de zoekmachines erg prettig. Zodoende kan deze lay-out (als je de goede keywords kiest) je een voorsprongetje geven op de resultaatpagina’s van Google. Je bouwt je website echter niet (alleen) voor Google. Je bouwt ‘m vooral voor bezoekers: potentiële klanten die op zoek zijn naar wat je te bieden hebt. En of die direct gecharmeerd zijn van deze lay-out laat ik over aan je kennis van de markt. Deze lay-out oog (en is) wat gedateerd. In de ene markt is dat geen enkel probleem, in de andere wel. Een ander puntje om over na te denken, is dat deze opzet nogal tekstueel van opzet is. Als je veel te vertellen hebt, kan dat een voordeel zijn. Maar in onze visueel ingestelde maatschappij kan dat ook tegen je werken. Uitstapje: over de lengte van teksten op websites is veel te doen. Over het algemeen wordt gedacht dat korter altijd beter is dan langer. Dat is een misverstand. Wat er wordt bedoeld is dat kernachtig beter is dan uitgebreid – laat staan langdradig. Schrijf wat je te vertellen hebt, doe dat kernachtig, maar neem de ruimte die je nodig hebt. Hak écht lange teksten in delen en publiceer ze op verschillende webpages. Bezoekers die echt geïnteresseerd zijn in wat je te bieden hebt, lezen je teksten van voor naar achter! Het zijn vooral de toevallige bezoekers die afhaken zodra ze meer dan drie alinea’s op hun netvlies krijgen. Die bezoekers kun je missen als kiespijn.

Overige kenmerken

Behalve een artikel, bevat elke webpage in deze lay-out een ‘sidebar’ met daarin de navigatie naar de overige pagina’s. Het geheel wordt afgemaakt met een ‘header’ en een ‘footer’. In het voorbeeld is de sidebar rechts naast het artikel geplaatst. Dat kan ook links van de content. En als je links en rechts een sidebar wilt, dan kan dat ook. De header gebruik je om de website visueel aantrekkelijk(er) en herkenbaar te maken. Het is meestal een grafisch element waarin je logo is verwerkt. Meestal is de header op alle webpages van de website hetzelfde. Dat is echter geen wet van Meden en Perzen. In de footer (helemaal onderin de webpage) vind je vaak de broodnodige en onmisbare links naar contact, routebeschrijving, privacy, disclaimer, voorwaarden en de auteursrechtelijke informatie. De footer is meestal op alle webpages identiek. Online voorbeeld Leuk natuurlijk, zo’n plaatje in een eBook, maar hoe ziet dat er online uit? Dat is een logische vraag, dus heb ik een testwebsite waar je deze lay-out in ‘het wild’ kunt bekijken. Zoals gezegd, het gaat ons in dit stadium om de lay-out en niet om de toeters en bellen. Daarom is de lay-out niet ‘aangekleed’. Zoals gezegd, aan vormgeving gaan we in dit stadium voorbij. Afijn, hier is de link naar het online voorbeeld: http://wiem-demo.info/basic/ Varianten Nergens staat geschreven dat je de Basic lay-out exact moet gebruiken zoals je ‘m zojuist hebt leren kennen. Er zijn tientallen varianten mogelijk. In het volgende hoofdstuk bekijken we de meest voor de hand liggende.

BASIC LAY-OUT ‘PLUS’ Als je de Basic lay-out wilt ‘upgraden’ naar een meer volwassen, professionele uitstraling, dan heb je verschillende mogelijkheden. Een veelgebruikte techniek is het toevoegen van ‘ankeilers’. Ho stop! What the heck is dat, een ‘ankeiler’…???? Het begrip ‘ankeiler’ komt uit de bladenwereld. Het zijn die ogenschijnlijk losse kreten op de cover. Altijd kort, krachtig en intrigerend. Ze spelen in op je aangeboren nieuwsgierigheid. Op een béétje magazine staan er vaak vier of vijf. Dat is geen toeval. Elke ankeiler is op een specifiek segment van de doelgroep gericht, zodat iedere potentiële koper een op maat gesneden reden krijgt aangedragen het blad te kopen. Ankeilers kunnen het verschil maken tussen topverkoop of flopverkoop. Zó belangrijk zijn ze. Voor de duidelijkheid zie je hieronder een willekeurige cover van een bekend wachtkamerblad (sorry Wendy, dat ik weer even een “Groot Drama” oprakel!).

Deze bewezen succesvolle techniek kunnen we ook inzetten als het gaat om je website. Minder schreeuwerig (meestal) en niet om bezoekers te laten kopen, maar om ze te ‘sturen’. Een paar goed gemikte ankeilers kunnen ervoor zorgen dat de bezoeker zijn weg vervolgt langs een pad dat jij voor hun uitstippelt zodat je ze naar de belangrijkste boodschap van je website sluist. Kortom, met goed geformuleerde ankeilers heb je invloed op het klikgedrag van je bezoekers. Je stúúrt ze in plaats van dat je het ze zelf laat uitzoeken. Een goede ankeiler is altijd kort (een kreet), altijd krachtig en vaak ondersteund door beeld. Dat kan een foto zijn, maar ook een kader of een achtergrondkleur. Oke, nu je dat weet, heeft het zin om verder te praten. We waren gebleven bij wat we de Basic lay-out noemen, aangevuld met ankeilers. Hier vind je een voorbeeld van hoe dat er qua lay-out ongeveer uit zou kunnen zien: http://wiem-demo.info/basic-ankeilers/ In het voorbeeld staan de ankeilers (3 in dit geval) tussen de header en het (hoofd)artikel. In elk blok heb je de mogelijkheid één artikel/pagina op je website extra nadrukkelijk onder de aandacht te brengen. Los van het ‘sturende’ karakter, hebben ankeilers trouwens nog een voordeel. Ze geven je webpagina net even wat meer ‘body’. Meer mogelijkheden Deze lay-out (met of zonder ankeilers) kun je uiteraard ook op andere manieren aanpassen. Je kunt de ankeilers bijvoorbeeld onder het artikel zetten in plaats van er boven. Maar je kunt ook je sidebar (links, rechts of beiden) gebruiken om bepaalde content duidelijker voor het voetlicht te brengen. In feite is je fantasie de enige beperking. Tot zover deze lay-out. Laten we eens naar die andere gaan kijken.

BUSINESS

De lay-out hierboven is een veel gebruikte lay-out voor zakelijke websites. Eén korte, kernachtige boodschap op de homepage (hierboven in het grijze kader) ondersteund door beeld (of video), aangevuld met enkele ‘ankeilers’. In dit geval twee ankeilers met rechts daarvan navigatie naar de overige pagina’s. Waarom die ene, krachtige kopregel? Je hebt tenslotte wel meer sterke punten, niet waar? En het liefst wil je die allemaal op je bezoeker afvuren. Blij dat je het vraagt. Als jij tegenover me staat en ik gooi met enige beheersing (en gemikt) een bal naar je toe, vang je die waarschijnlijk moeiteloos. Maar…. gooi ik tegelijkertijd drie ballen op je af, dan is er een behoorlijke kans dat je er minstens twee laat vallen. En in de paniek misschien zelfs alle drie. Dan sta je dus – letterlijk – met lege handen. Met de boodschappen die je op je doelgroep af wilt vuren, is het niet veel anders. Als ik drie dingen tegelijk roep, is het maar de vraag of je er éénn zult onthouden en welke dat is. Laat staan alle drie. Vuur ik één goed geformuleerde boodschap op je af, dan weet ik bijna zeker dat die aankomt. Vervolgens heb ik je aandacht (als je bent geïnteresseerd in wat ik te vertellen heb) en heb ik de mogelijkheid boodschap 2, 3 enzovoorts over te brengen. De “Grote Vraag” is natuurlijk wat jouw bedrijf zo uniek maakt dat het je “Grote Boodschap” wordt – de bal die je gemikt en beheerst naar je bezoeker gooit.

Die vraag kan ik uiteraard niet voor je beantwoorden. Het kan kwaliteit zijn, prijs, leveringssnelheid, betrouwbaarheid – ik daag je uit je bedrijf tegen het licht te houden en die boodschap zo goed mogelijk te verwoorden. Tot zover de marketinglessen. Terug naar je website  Deze ‘business’ lay-out biedt veel ruimte en vrijheid voor een visuele, grafische aanpak. Je hebt alle ruimte om je zakelijke identiteit uit te dragen en haakt in op de trend waarin visuele aspecten meer gewicht krijgen dan inhoudelijke cq tekstuele. Bijvoorbeeld door het gebruik van kleur, kaders en beeldmateriaal zoals foto’s en ‘icons’. Dat is mooi, maar heeft natuurlijk ook een keerzijde: het grafische karakter vraagt iets meer creativiteit dan de vorige lay-out. Daar staat tegenover dat er online een enorme hoeveelheid aan inspirerende voorbeelden te vinden is. Als je deze lay-out op je scherm wilt zien, klik op de link hieronder voor een ‘kaal’ online voorbeeld: http://wiem-demo.info/business/ Als we het een fase verderop over vormgeving gaan hebben, dan zul je merken dat er honderden varianten denkbaar zijn om van deze kale lay-out een aansprekende, grafisch sterke website te maken. Om je een idee te geven van de talloze mogelijkheden, tref je hieronder een aantal ‘echte’ voorbeelden van websites die zijn gebouwd op basis van (varianten van) de Business lay-out. Happy browsing  http://www.bloglines.com/ http://www.cooliris.com/ http://www.imemories.com/ http://www.fontexplorerx.com/ http://www.slickplan.com/ http://areyoufrank.com/ http://www.albumdruck.de/ http://usa.asus.com/index.aspx http://www.symantec.com/index.jsp http://www.ribbit.com/ Je weet: de ‘interwebs’ is dynamisch. Mocht een van de bovenstaande links niet meer werken, laat me dat dan aub weten. Dank!

Actie: Selecteer een lay-out die je aanspreekt en past bij je doelstelling. Of bedenk er zelf een door elementen uit de voorbeelden in dit eBook te combineren. Een derde optie is een basis lay-out te bedenken op basis van je creativiteit of voorbeelden die je op het www bent tegengekomen. !! Belangrijk: zet je keuze op papier! Schets ‘m. Dat hoeft niet in detail en het mag op de achterkant van de spreekwoordelijke sigarendoos, maar zorg dat je ‘m op de een of andere manier visualiseert. Neem die schets (die we in een later stadium gaan invullen) mee naar de workshop. Als je om wat voor reden dan ook twijfelt aan de haalbaarheid of effectiviteit van je lay-out, mail ‘m dan naar [email protected]. Je hebt (doorgaans) binnen 24 uur een reactie.

Hoe nu verder? Als je deze fase hebt afgerond, ga dan verder met het document “Navigatie & Structuur”.