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

‣ Google

‣ Facebook

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!

Google

‣ ‘Like’ + Open Graph

‣ Zoekmachine

Facebook

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