An introduction when you want to develope your website.

1. november 2014
Jolanda Peters
:ORKSHOP
MMM
WebBasic
$LSJEDOORDE
BOMENHETBOS
WILTZIEN
Ik leg uit waar je allemaal op moet (kan) letten bij het ontwikkelen van een website.

2. Wat zijn de onderwerpen
• Het begin
• De inhoud / content van jouw website
• Waar moet een website aan voldoen?
• Open Source, CMS systemen
• Site structuur
• Site lay-out
• Responsive webdesign
• SEO
• Web statistieken
• Sociale Media
• Ambassadeurs

3. Het begin
Doel: Formuleer het doel wat je wilt bereiken.
Waar wil je je website voor gebruiken?
- omzet verhogen
- communiceren met bestaande klanten
- jouw werk onder de aandacht brengen
- klanten werven

4. Het begin
Doelgroep:
- Wie zijn dat?
- Welke vragen hebben zij?
- Welke antwoorden kun jij geven?

5. Het begin
Communiceer:
- Vertel alle interessante dingen die je doet, deed en weet
- Laat zien wie je bent (Personal branding)
- Ben een informatiebron over jouw passie (product)
- Gun factor
- Vraag om reacties

6. Het begin
Hoe?
Website
Filmpjes
Evenement organiseren
Posters
Facebook
Informatiebord
Bloggen
Flyers
YouTube
Mond op mond reclame
Clubjes initiëren
Nieuwsbrieven
Rondbellen
Publiceren in de media
Twitter
Boekje maken

7. De inhoud / content van jouw website

8. Waar moet een website aan voldoen?
• Veiligheid
• Leesbaarheid
• Scanbaarheid
• Toegankelijkheid
• Duidelijke identiteit
• Goede navigatie, functionaliteit

9. Waar moet een website aan voldoen?
Veiligheid:
• Technische maatregelen tijdens de
installatie
• Maak regelmatig een back-up (kan
automatisch)
• Regelmatig up-daten, ook de plugins
• Gebruik nooit een standaard
gebruikersnaam (zoals admin)
• Installeer beveiligings plugins
• SSL certificaat voor website met
shop (is verplicht) of gevoelige
informatie
• Bescherm je inlog gegevens
• Gebruik alleen betrouwbare plugins
en verwijder de overbodige

10. Waar moet een website aan voldoen?
Leesbaarheid:
• Een schreefloze letter als de Verdana leest op een scherm beter dan Times
• Afstand tussen de regels is belangrijker dan de grootte van het font
• Font te groot lijkt onprofessioneel, te klein is zielig voor slechte ogen
• Hoe kleiner een scherm hoe groter het font
• Zwart op wit leest het fijnst
• Drukke of bewegende achtergronden is not done

11. Waar moet een website aan voldoen?
Scanbaarheid:
• Kopjes en tussenkopjes
• Lijsten, bulletpoints
• Foto’s, illustraties en tabellen
• Buttons
• De eerste woorden van een paragraaf

12. Waar moet een website aan voldoen?
Toegankelijkheid:
• Moet snel zijn
• Moet functioneren in de meest gebruikte Browsers Firefox, IE, Safari,
Opera en Google Chrome
• Moet werken op mobiele apparaten; tablets en telefoons
• Ctrl+ om in te zoomen (zit standaard in WP)
• Sommige sites hebben een voorlees hulp

13. Waar moet een website aan voldoen?
Duidelijk identiteit:
• Wie ben je? Logo links bovenin (link naar homepage)
• Wat doe je? Verzin een sterke tagline (Sitetitel)
• Waar sta je voor? Over Ons pagina
• Vertrouwen? Zorg voor een sterke visuele identiteit

14. Waar moet een website aan voldoen?
Goede navigatie en functionaliteit:
• Zet in de horizontale balk de standaard informatie: Over ons, Contact, Visie
• In de rechter kolom dingen die onder de aandacht gebracht moeten worden
• Of actueler: standaard informatie helemaal bovenin en verdere info in een
tweede horizontale balk
• Zorg dat men via meerdere wegen de weg naar Rome vindt
• Gebruik woorden in je menu die echt iets zeggen

15. Een gemiddelde bezoeker heeft maar 5 seconden nodig
om te bepalen of dit de website is die hij zoekt.

16. Open Source CMS-systemen
• Waarom Open Source en waarom CMS?
• WordPress
• Joomla
• Drupal

17. Verschillende Open Source CMS-systemen
Waarom Open Source en waarom CMS
• Uitgebreider
• Flexibeler
• Inzichtelijker dan commerciële
systemen
• Veel mensen werken met hart
en ziel aan de ontwikkeling
• Razendsnel en actueel
• Je kunt zelf je website
onderhouden
• Je kunt je website gebruiken als
communicatiemiddel
• Past goed bij creatieve
zelfstandige ondernemers
• Onafhankelijk van ontwerpers
en bouwers

18. Verschillende Open Source CMS-systemen
WordPress Joomla Drupal
• € 1000,- / € 14.000,-
• 45 %
• sinds 2003 (nu populair)
• Versie 4.0.1
• enorm aantal themes
• Niet veel toeters en bellen
• CNN, UPS, Red Hot Chilli
Peppers
• € 2.200 / € 18.000,-
• 35 %
• sinds 2005 (beetje uit)
• Versie 3.3
• groot aantal themes
• Paar toeters en bellen
• Orange, Ebay, Pizza hut
• € 4.500,- / € 45.000,-
• 8 %
• sinds 2001 (in NL in opkomst)
• Versie 7.34
• beperkt aantal themes
• Veel toeters en bellen
• Ahold, Het witte huis,
Amnesty International

19. Verschillende Open Source CMS-systemen
WordPress Joomla Drupal

20. Site structuur

21. Site lay-out
M e n u
L o g o
H e a d e r
B l o g
F o o t e r
C o n t e n t
W i d g e t s
• Enfold pagina’s
voorbeeld website
• Enfold blog mogelijkheden
• Ego one-page website
voorbeeld website
• Inovado alleen shortcodes
voorbeeld website

22. Site lay-out
Diensten, About us, Algemene voorwaarden, inloggen en Contact
Onderwerpen die onder de man moeten worden gebracht
Linksboven met link naar homepage
Deel je persoonlijke kennis
De tekstinhoud
Links, Contact gegevens, Sociale media, hoofdmenu
Kan een kleur of afbeelding zijn, met of zonder je logo
Kleine apps in je website; calendar, inloggen, nieuwsbrief, tips enz.
Menu
Side-menu
Logo
Blog
Content
Footer
Header
Widgets
Menu
Logo Header
Blog
Footer
Menu
Widgets
Content

23. Site lay-out
M e n u
H e a d e r
F o o t e r
W i d g e t s
C o n t e n t
E x t r a m e n u
blogss
C o n t e n t
C o n t e n t

24. Responsive webdesign
• Wat is Responsive webdesign ?
• Waarom ?
• Is het ingewikkeld ?

25. Responsive webdesign
Wat is responsive webdesign ?
Voorbeeld van Oretis
De website reageert op de breedte van het apparaat

26. Responsive webdesign
Waarom ?
• 90% van de smartphone gebruikers kijkt websites op de telefoon
• In november 2014 heeft 3/4 van de Nederlanders een smartphone
• De helft heeft een tablet
• Website goed leesbaar op ieder apparaat
• Grotere knoppen op kleine devices omdat je dan geen
kleine cursor, maar een vinger hebt
• Device wisselt portret en landscape lay-out

27. Responsive webdesign
Is het ingewikkeld ?
• Er zijn al standaard responsive themes
• Tot op zekere hoogte eenvoudig toe te passen op
bestaande website
• Je moet op basis van de schermgrootte bepalen wat
belangrijke content is
• De lay-out van veel websites zal veranderen n.a.v. het
toenemende gebruik van mobile devices

28. Search Engine Optimalisation
• De technische basis voor SEO
• Schrijven voor zoekmachines
• Zoekwoorden zoeken
• Zoekwoorden op de juiste plekken
• Linking

29. Search Engine Optimalisation
De technische basis voor SEO
• Basis instellingen in het CMS
• SEO Modules installeren
• Permalinks
• Sitemap (zijn plugins voor)
• Geen frames en javascript

30. Search Engine Optimalisation
Schrijven voor zoekmachines
• Val met de deur in huis
• Houd de ‘zoekvraag’ van de bezoeker voor ogen
• Schrijf ‘scanbaar’
• Schrijf beknopt, helder en aantrekkelijk
• Gebruik betekenisvolle linkteksten

31. Search Engine Optimalisation
Zoekwoorden zoeken
• Gebruik Google Adwords ; de zoekwoord planner

33. Search Engine Optimalisation
Zoekwoorden op de juiste plek
• Page description / Meta omschrijving (150 tekens)
• De pagina titel (30-80 tekens)
• Hoofdtitel en subtitels
• Bulletpoints of nummering
• Alt-tag bij afbeeldingen
• Interne en externe links

34. Search Engine Optimalisation
• Interne links
Bedenk dat een bezoeker van jouw website op
allerlei manieren bij de juiste informatie moet
kunnen komen.
• Externe links
Hoe meer links naar jouw website gaan des te beter
ben je te vinden voor de mensen die jou zoeken.
Ga actief op zoek naar sites waar je jouw website op
kunt vermelden.
Linking
Op YouTube is een mooi filmpje te vinden
wat laat zien hoe de zoekmachines hun weg vinden.
Zoek naar “How search works”.

36. Webstatistieken
• Wat zijn webstatistieken ?
• Waarom willen we deze weten ?
• Wanneer moet ik gaan meten ?

37. Webstatistieken

38. Webstatistieken
Wat zijn webstatistieken ?
Webstatistieken geven inzicht in de prestaties van je website
• Aantal bezoekers
• Tijdstip en lengte van het bezoek (ook per pagina)
• Welke zoekwoorden gebruikt zijn
• Welke browsers gebruikt worden
• Van welke website (dmv link naar jouw website) ze komen

39. Webstatistieken
Waarom willen we deze weten ?
• Als je een verandering doorvoert op je site (of je hebt een event
georganiseerd, of een nieuwsbrief verstuurd) kun je kijken welk
resultaat dit oplevert
• Je kunt in de gaten houden of de maatregelen die je voor de SEO treft
wel zin hebben
• Je kunt kijken of je sociale media van invloed zijn
Meten is weten

40. Webstatistieken
Wanneer moet ik gaan meten ?
METEEN
• Je host houdt al statistieken voor je bij
• Je kunt heel eenvoudig Google analytics in gebruik
nemen
• Als je er aan toe bent om te gaan interpreteren
moet je geschiedenis hebben opgebouwd

41. Webstatistieken
Google Analytics

42. Sociale Media
• Wat is Sociale media ?
• Welke sociale media zijn er ?
• Is het nuttig ?
• Hoe gebruik je sociale media ?

43. Sociale Media
Wat is sociale media ?
• Online platformen waar gebruikers, met geen of weinig tussenkomst
van redactie, de inhoud verzorgen
• Aangaan van relaties: vertrouwen, relevantie, interactie en luisteren
• Geen monoloog, maar een dialoog
• Socializen is oud, de media is nieuw

44. Sociale Media
Welke sociale media zijn er ?

45. Sociale Media
SOCIALE MEDIA UITGELEGD MET KOFFIE
Met dank aan www.marketplacemaven.com voor het idee van de koffie,
die het ook weer van iemand heben. Based on: “ The White board Picture with the Donut analogy”

46. Sociale Media

47. Sociale Media
Is het nuttig ?
• Niets werkt zo goed als mond op mond reclame
• Sociale media linken alles aan elkaar, top voor SEO
• Branding, klantcontact, klantenservice, feedback: “Zakelijk vlooien.”
• Triggeren websitebezoek, snel, persoonlijk, groot bereik met
weinig budget
To socialize or
not to socialize?

48. Sociale Media
Hoe gebruik je sociale media ?
• Ontwikkel een goede strategie (doel, doelgroep, planning)
• Ontwikkel relevante content
• Experimenteer, meet en monitor
• Integreer de sociale media in je website
• Gebruik de sociale media met events
• Heb geduld ...
Weet wat je deelt,
want iedereen kijkt mee

49. Ambassadeurs
Laat anderen reclame voor je maken
Betrek mensen bij het opbouwen van je site, het vullen van de content.
Als je een geslaagde activiteit hebt gehad vinden mensen het leuk te worden uitgenodigd daar iets over te zeggen
op jouw site. Of je neemt zelfs een vaste ambassadeur ‘in dienst’. Iemand die betrokken is bij jouw activiteiten. Zoek
een win/win situatie. Niet voor wat hoort wat, maar gedeelde interesse en plezier in wat jullie doen.
• Gebruik de sociale media zodat je allemaal losse ambassadeurs verzamelt.
Mensen die jouw activiteiten gaan bezoeken en daar over vertellen op Twitter en Facebook.
• Gebruik de mogelijkheid mensen een reactie op jou blog te laten geven.
Dit zorgt voor referenties. Mensen lezen referenties om de betrouwbaarheid te onderzoeken.

50. Bronnen en links naar meer informatie
• Yourhosting: 5 x 5 tips voor een veilige website: Veiligheid, Instellingen, Malware, Gegevens, Bezoekers
• FrankWatching: Webstatistieken, 10 aandachtspunten bij het maken en interpreteren van webstatistieken
• Marketing facts: Sociale media in Nederland 2013
• Allebedrijvenin: 15 SEO tips voor MKB websites
• Allebedrijvenin: 9 tips om meer te verdienen
• Ravenstein Zwart: De 10 eigenschappen van een goede blog
• InfoNu: Tips voor het opmaken van een tekstbestand
• Filmpje met uitleg over hoe zoekmachines werken: How search works
• AdWords Keyword Tool van Google voor het bestuderen van zoekwoorden

51. EINDE
www.moose-design.nl