Download - Een website die werkt (Hogeschool Gent)
EEN WEBSITE DIE WERKT
Hallo, ik ben Bram
Projecten voor onder andere:
R
Informatie-architect
Prototype
‣ twitter.com/bram_
‣ last.fm/user/bram_
Je vindt mij online op:
6 mei 2011 – 2de jaar marketing, Hogeschool Gent
EEN WEBSITE DIE WERKT
slideshare.net/bram_
EEN WEBSITEIs dat wel nodig?
absoluut.
‣ 78% heeft thuis internettoegang (EU: 69%)
‣ 75% surft minstens één keer in de week
‣ 49% shopte in 2010 online (EU: 56%)
Particulieren in België in 2010
Cijfers: Eurostat
Heb je een eigen website nodig?
niet per sé.
‣ Eigen website
‣ Google Maps
‣ Sociale netwerken
‣ ...
Internet aanwezigheid
Is een eigen website aangeraden?
Ja, als je meer controle wil over wat er over jouw zaak te vinden is op internet.
En als je je wil onderscheiden van concurrenten.
EEN WEBSITE DIE WERKTWat wil dat eigenlijk zeggen?
Wat is dat, een website die werkt?
‣ Veel bezoekers?
Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?
Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?
‣ Mooi ontwerp?
Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?
‣ Mooi ontwerp?
Een website die werkt
‣ Converteert optimaal
‣ Scoort hoog in zoekrobots bij de juiste doelgroep
(SEO)
‣ Positieve ROI
Een website die werkt
8 basisprincipes
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
1. Consistentie
‣ Logo
‣ Taalselectie
‣ Home-knop
Verwachtingen
‣ Navigatie
‣ Broodkruimel
‣ Zoekveld
‣ Links boven
‣ Link naar homepage
‣ Optioneel met tagline
Logo
Logo
‣ Rechts boven
‣ ISO (NL - FR - EN)
‣ Toon alle opties, ook de actieve taal
‣ Geen vlagjes!
Taalselectie
taalselectie
‣ Eerste knop in hoofdnavigatie
‣ Altijd ‘home’
Home-knop
home-knop
‣ Hoofdnavigatie horizontaal bovenaan
‣ Subnavigatie links
‣ Vermijden: onderaan of rechts
Navigatie
‣ Helemaal onderaan, in de footer
‣ Privacy statement, disclaimer, sitemap
Secundaire navigatie
hoofdnavigatie
subnavigatie
secundaire navigatie
‣ Toont actieve pagina in hiërarchie
‣ Onder de hoofdnavigatie
‣ Klikbaar, behalve actieve pagina
‣ Zonder ‘je bent hier: ’
Broodkruimel
broodkruimel
‣ Rechts boven
‣ Gevaarlijk!
‣ Bezoekers verwachten Google-niveau
Zoekveld
zoekveld
Het is duidelijk
‣ waar je vandaan kwam
‣ waar je nu bent
‣ waar je naartoe kan gaan
in de visuele taal die andere websites ook spreken
Consistentie geeft houvast
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
2. Typografie
Mensen schrijven meer naar elkaar
dan ze bellen.
“The web is text.”
‣ Ideaal: tot ongeveer 55 karakters per regel
‣ Flexibele layout: gebruik maximumbreedte
Leeslengte
‣ Minstens 12px voor broodtekst
‣ Moderne browsers schalen alles
‣ “ A A A ” is overbodig
Lettergrootte
Geschreefd of schreefloos?
Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Op een scherm: schreefloos (sans-serif)
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
3. Portability
Probeer bezoeker niet naar je website te lokken.
Verspreid je inhoud op plaatsen die al
bezoekers hebben.
Mohammed en de berg
‣ Really Simple Syndication
‣ Geïnteresseerden krijgen updates
‣ Zoekrobots zijn hier gek op
RSS
‣ Application Programming Interface
‣ Toegangspoort tot een website
‣ Data toevoegen en/of data afhalen
API
‣ Makkelijk te integreren
‣ 1 klik
‣ “Mond-aan-mond”
Social Media plugins
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
4. Snelheid
Wat volgt is de hoeveelheid tijd die een bezoeker wil spenderen om uit te zoeken hoe een website werkt:
0
‣ Snel laden (technisch)
‣ Focus (inhoud)
‣ Scanbaar (structuur)
Bezoekers hebben geen geduld
Korte quiz
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
5. Inhoud
Vers en fris!
“A website is like underwear. Refresh every day.”
‣ Kies relevante onderwerpen
‣ Nieuws
‣ SEO vs. bezoeker
Publiceer op regelmatige basis
‣ Schrap pagina’s die niet bezocht worden
‣ Kijk af en toe of inhoud nog up-to-date is
‣ SEO vs. bezoeker
Hou statische inhoud vers
Publiceren, updaten, ...
Iedere keer langs IT-dienst of webbouwer?
‣ Content Management System
‣ De motor van de website
‣ Makkelijk zélf inhoud bewerken
‣ SEO!
CMS
Een CMS moet je toelaten om het dagelijkse beheer van je website onafhankelijk en zonder technische kennis uit te voeren.
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
6. Toegankelijkheid
‣ Gebruiksvriendelijk
‣ Cross-browser, cross-platform
‣ Anysurfer
Bouw een toegankelijke website
‣ User Centered Design
‣ Gebruikerstest
Gebruiksvriendelijk
‣ Windows, Mac OS (Apple), Linux
‣ IE, Firefox, Safari, Chrome, Opera
‣ Webstandaarden
‣ iPad & smartphone!
Cross-browser, cross-platform
‣ Kwaliteitslabel
‣ Website toegankelijk voor iedereen,
ook voor mensen met een functiebeperking
Anysurfer
‣ Grootste bron van traffiek
‣ SEO!
‣ ‘Like’ + Open Graph
‣ Zoekmachine
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
7. Technologie
‣ Flash
‣ Ajax
‣ HTML 5
‣ Video
Er zal altijd nieuwe technologie zijn
Technologie mag geen drijfveer zijn.
Denk na over de waarde.
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
8. Interactie
‣ Poll, testjes, ...
‣ Feedback mechanismen
‣ Reacties plaatsen, forum
‣ Zelf inhoud toevoegen
Laat bezoekers participeren
+ interactie met het merk verhoogd
+ ‘gratis’ input voor web en print
+ workload webredactie verminderd
+ rijke data over voorkeuren van leden
consistentie
8
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
En het grafisch ontwerp?
Een goed ontwerp valt niet op.Het staat ten dienste van de inhoud.
En social media?
Wat daarmee?
consistentie
9
typografie
portability
snelheid
inhoud
toegankelijkheid
technologie
interactie
social
9. Social
‣ Website is een doorgeefluik voor info
‣ Digitaal magazine
Het web gisteren
‣ Een website (ver)bindt mensen
‣ Web = mensen
Het web vandaag
Mensen converseren
‣ Conversaties initiëren
‣ Conversaties voeden
‣ Conversaties opvolgen
‣ Enorme (marketing) waarde
Social Media
‣ Lanceer liever vandaag dan morgen
‣ Niet alles ineens, kleine stappen
‣ Meet, evalueer, stuur bij
Tips
VRAGEN?
twitter.com/bram_www.netlash.com
Trafiek
Built it and they will come
Built it and they will come
Trafiek
‣ SEO - SEA
‣ Affiliate Marketing
‣ E-mail Marketing
‣ Social Media Marketing
SEO - SEA
‣ Search Engine Optimization
‣ Search Engine Advertising
‣ Juiste advertentie op de juiste website
‣ CPC (cost per click)
‣ pay-for-performance (TradeTracker Belgium)
Affiliate marketing
‣ Nieuwsbrieven & direct mailings
‣ Statistieken!
‣ CRM met klantenprofielen
E-mail Marketing
‣ Conversaties initiëren
‣ Conversaties opvolgen
Social Media Marketing
twitter.com/bram_www.netlash.com