Basisprincipes voor een goed werkende website.

1. EEN WEBSITE DIE WERKT

2. Hallo, ik ben Bram

3. Projecten voor onder andere:
R

4. Informatie-architect

5. Prototype

6. Je vindt mij online op:
‣ twitter.com/bram_
‣ last.fm/user/bram_

7. EEN WEBSITE DIE WERKT
6 mei 2011 – 2de jaar marketing, Hogeschool Gent

8. slideshare.net/bram_

9. EEN WEBSITE
Is dat wel nodig?

10. absoluut.

11. Particulieren in België in 2010
‣ 78% heeft thuis internettoegang (EU: 69%)
‣ 75% surft minstens één keer in de week
‣ 49% shopte in 2010 online (EU: 56%)
Cijfers: Eurostat

12. Heb je een eigen website nodig?

13. niet per sé.

14. Internet aanwezigheid
‣ Eigen website
‣ Google Maps
‣ Sociale netwerken
‣ ...

23. Is een eigen website aangeraden?

24. Ja, als je meer controle wil over wat er over
jouw zaak te vinden is op internet.

25. En als je je wil onderscheiden van
concurrenten.

27. EEN WEBSITE DIE WERKT
Wat wil dat eigenlijk zeggen?

28. Wat is dat, een website die werkt?

29. Een website die werkt
‣ Veel bezoekers?

30. Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?

31. Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?
‣ Mooi ontwerp?

32. Een website die werkt
‣ Veel bezoekers?
‣ Op nummer 1 in Google?
‣ Mooi ontwerp?

33. Een website die werkt
‣ Converteert optimaal
‣ Scoort hoog in zoekrobots bij de juiste doelgroep
(SEO)
‣ Positieve ROI

34. 8 basisprincipes

35. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

36. 1. Consistentie

37. Verwachtingen
‣ Logo ‣ Navigatie
‣ Taalselectie ‣ Broodkruimel
‣ Home-knop ‣ Zoekveld

40. Logo
‣ Links boven
‣ Link naar homepage
‣ Optioneel met tagline

41. Logo

42. Taalselectie
‣ Rechts boven
‣ ISO (NL - FR - EN)
‣ Toon alle opties, ook de actieve taal
‣ Geen vlagjes!

43. taalselectie

44. Home-knop
‣ Eerste knop in hoofdnavigatie
‣ Altijd ‘home’

45. home-knop

46. Navigatie
‣ Hoofdnavigatie horizontaal bovenaan
‣ Subnavigatie links
‣ Vermijden: onderaan of rechts

47. Secundaire navigatie
‣ Helemaal onderaan, in de footer
‣ Privacy statement, disclaimer, sitemap

48. hoofdnavigatie
subnavigatie

49. secundaire navigatie

50. Broodkruimel
‣ Toont actieve pagina in hiërarchie
‣ Onder de hoofdnavigatie
‣ Klikbaar, behalve actieve pagina
‣ Zonder ‘je bent hier: ’

51. broodkruimel

53. Zoekveld
‣ Rechts boven
‣ Gevaarlijk!
‣ Bezoekers verwachten Google-niveau

54. zoekveld

55. Consistentie geeft houvast
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

56. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

57. 2. Typografie

58. Mensen schrijven meer naar elkaar
dan ze bellen.
“The web is text.”

59. Leeslengte
‣ Ideaal: tot ongeveer 55 karakters per regel
‣ Flexibele layout: gebruik maximumbreedte

62. Lettergrootte
‣ Minstens 12px voor broodtekst
‣ Moderne browsers schalen alles
‣ “ A A A ” is overbodig

63. Geschreefd of schreefloos?
Op een scherm: schreefloos (sans-serif)
Ed ut perspiciatis unde omnis Ed ut perspiciatis unde omnis
iste natus error sit voluptatem iste natus error sit voluptatem
accusantium doloremque accusantium doloremque
laudantium. laudantium.

64. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

65. 3. Portability

66. Mohammed en de berg
Probeer bezoeker niet naar je website te lokken.
Verspreid je inhoud op plaatsen die al
bezoekers hebben.

71. RSS
‣ Really Simple Syndication
‣ Geïnteresseerden krijgen updates
‣ Zoekrobots zijn hier gek op

74. API
‣ Application Programming Interface
‣ Toegangspoort tot een website
‣ Data toevoegen en/of data afhalen

78. Social Media plugins
‣ Makkelijk te integreren
‣ 1 klik
‣ “Mond-aan-mond”

79. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

80. 4. Snelheid

81. Wat volgt is de hoeveelheid tijd die een
bezoeker wil spenderen om uit te zoeken hoe
een website werkt:

82. 0

83. Bezoekers hebben geen geduld
‣ Snel laden (technisch)
‣ Focus (inhoud)
‣ Scanbaar (structuur)

84. Korte quiz

89. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

90. 5. Inhoud

91. Vers en fris!

93. “A website is like underwear.
Refresh every day.”

94. Publiceer op regelmatige basis
‣ Kies relevante onderwerpen
‣ Nieuws
‣ SEO vs. bezoeker

95. Hou statische inhoud vers
‣ Schrap pagina’s die niet bezocht worden
‣ Kijk af en toe of inhoud nog up-to-date is
‣ SEO vs. bezoeker

96. Publiceren, updaten, ...
Iedere keer langs IT-dienst of webbouwer?

99. CMS
‣ Content Management System
‣ De motor van de website
‣ Makkelijk zélf inhoud bewerken
‣ SEO!

102. Een CMS moet je toelaten om het dagelijkse
beheer van je website onafhankelijk en zonder
technische kennis uit te voeren.

103. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

104. 6. Toegankelijkheid

105. Bouw een toegankelijke website
‣ Gebruiksvriendelijk
‣ Cross-browser, cross-platform
‣ Anysurfer
‣ Google
‣ Facebook

106. Gebruiksvriendelijk
‣ User Centered Design
‣ Gebruikerstest

107. Cross-browser, cross-platform
‣ Windows, Mac OS (Apple), Linux
‣ IE, Firefox, Safari, Chrome, Opera
‣ Webstandaarden
‣ iPad & smartphone!

111. Anysurfer
‣ Kwaliteitslabel
‣ Website toegankelijk voor iedereen,
ook voor mensen met een functiebeperking

112. Google
‣ Grootste bron van traffiek
‣ SEO!

113. Facebook
‣ ‘Like’ + Open Graph
‣ Zoekmachine

114. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

115. 7. Technologie

116. Er zal altijd nieuwe technologie zijn
‣ Flash
‣ Ajax
‣ HTML 5
‣ Video

117. Technologie mag geen drijfveer zijn.
Denk na over de waarde.

120. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

121. 8. Interactie

122. Laat bezoekers participeren
‣ Poll, testjes, ...
‣ Feedback mechanismen
‣ Reacties plaatsen, forum
‣ Zelf inhoud toevoegen

126. + interactie met het merk verhoogd
+ ‘gratis’ input voor web en print
+ workload webredactie verminderd
+ rijke data over voorkeuren van leden

127. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

128. En het grafisch ontwerp?

130. Een goed ontwerp valt niet op.
Het staat ten dienste van de inhoud.

131. En social media?
Wat daarmee?

132. 9
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie
social

133. 9. Social

134. Het web gisteren
‣ Website is een doorgeefluik voor info
‣ Digitaal magazine

135. Het web vandaag
‣ Een website (ver)bindt mensen
‣ Web = mensen

136. Mensen converseren

137. Social Media
‣ Conversaties initiëren
‣ Conversaties voeden
‣ Conversaties opvolgen
‣ Enorme (marketing) waarde

138. Tips
‣ Lanceer liever vandaag dan morgen
‣ Niet alles ineens, kleine stappen
‣ Meet, evalueer, stuur bij

139. VRAGEN?

140. twitter.com/bram_
www.netlash.com

142. Trafiek

143. Built it and they will come

144. Built it and they will come

145. Trafiek
‣ SEO - SEA
‣ Affiliate Marketing
‣ E-mail Marketing
‣ Social Media Marketing

146. SEO - SEA
‣ Search Engine Optimization
‣ Search Engine Advertising

150. Affiliate marketing
‣ Juiste advertentie op de juiste website
‣ CPC (cost per click)
‣ pay-for-performance (TradeTracker Belgium)

151. E-mail Marketing
‣ Nieuwsbrieven & direct mailings
‣ Statistieken!
‣ CRM met klantenprofielen

152. Social Media Marketing
‣ Conversaties initiëren
‣ Conversaties opvolgen

153. twitter.com/bram_
www.netlash.com