november 2014Jolanda Peters

:ORKSHOPMMM

WebBasic$LS�JE�DOOR�DE�BOMEN�HET�BOS�WILT�ZIEN

Ik leg uit waar je allemaal op moet (kan) letten bij het ontwikkelen van een website.

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

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

Het begin

Doelgroep:

- Wie zijn dat?- Welke vragen hebben zij?- Welke antwoorden kun jij geven?

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

Het begin

Hoe?

WebsiteFilmpjes Evenement organiserenPosters FacebookInformatiebordBloggenFlyers

YouTubeMond op mond reclameClubjes initiërenNieuwsbrievenRondbellenPubliceren in de mediaTwitterBoekje maken

De inhoud / content van jouw website

Waar moet een website aan voldoen?

• Veiligheid

• Leesbaarheid

• Scanbaarheid

• Toegankelijkheid

• Duidelijke identiteit

• Goede navigatie, functionaliteit

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

Leesbaarheid:

Waar moet een website aan voldoen?

• 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

Waar moet een website aan voldoen?

• Kopjes en tussenkopjes

• Lijsten, bulletpoints

• Foto’s, illustraties en tabellen

• Buttons

• De eerste woorden van een paragraaf

Scanbaarheid:

Waar moet een website aan voldoen?

• 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

Toegankelijkheid:

Waar moet een website aan voldoen?

• 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

Duidelijk identiteit:

Waar moet een website aan voldoen?

• 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

Goede navigatie en functionaliteit:

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

Open Source CMS-systemen

• Waarom Open Source en waarom CMS?

• WordPress

• Joomla

• Drupal

• 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

Verschillende Open Source CMS-systemen

Waarom Open Source en waarom CMS

Verschillende Open Source CMS-systemen

• € 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

WordPress Joomla Drupal

Verschillende Open Source CMS-systemen

WordPress Joomla Drupal

Site structuur

Site lay-out

M e n u

L o g oH e a d e r

B l o g

F o o t e rW i d g e t s

C o n t e n t

• Enfold pagina’s voorbeeld website

• Enfold blog mogelijkheden

• Ego one-page website voorbeeld website

• Inovado alleen shortcodesvoorbeeld website

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.

Site lay-out

Menu

Side-menu

Logo

Blog

Content

Footer

Header

Widgets

Menu

Logo Header

Blog

Footer

Menu

Widgets

Content

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 ublogss

C o n t e n t

C o n t e n t

Responsive webdesign

• Wat is Responsive webdesign ?

• Waarom ?

• Is het ingewikkeld ?

Responsive webdesign

Wat is responsive webdesign ?

Voorbeeld van Oretis

De website reageert op de breedte van het apparaat

Responsive webdesign

• 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

Waarom ?

Responsive webdesign

• 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

Is het ingewikkeld ?

Search Engine Optimalisation

• De technische basis voor SEO

• Schrijven voor zoekmachines

• Zoekwoorden zoeken

• Zoekwoorden op de juiste plekken

• Linking

Search Engine Optimalisation

• Basis instellingen in het CMS

• SEO Modules installeren

• Permalinks

• Sitemap (zijn plugins voor)

• Geen frames en javascript

De technische basis voor SEO

Search Engine Optimalisation

• Val met de deur in huis

• Houd de ‘zoekvraag’ van de bezoeker voor ogen

• Schrijf ‘scanbaar’

• Schrijf beknopt, helder en aantrekkelijk

• Gebruik betekenisvolle linkteksten

Schrijven voor zoekmachines

Search Engine Optimalisation

• Gebruik Google Adwords ; de zoekwoord planner

Zoekwoorden zoeken

Search Engine Optimalisation

• 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

Zoekwoorden op de juiste plek

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”.

Webstatistieken

• Wat zijn webstatistieken ?

• Waarom willen we deze weten ?

• Wanneer moet ik gaan meten ?

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

Webstatistieken

Wat zijn webstatistieken ?

• 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

Webstatistieken

Waarom willen we deze weten ?

Meten is weten

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

Webstatistieken

Wanneer moet ik gaan meten ?

Webstatistieken

Google Analytics

Sociale Media

• Wat is Sociale media ?

• Welke sociale media zijn er ?

• Is het nuttig ?

• Hoe gebruik je sociale media ?

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

Wat is sociale media ?

Sociale Media

Welke sociale media zijn er ?

Sociale Media

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”

SOCIALE MEDIA UITGELEGD MET KOFFIE

Sociale Media

Sociale Media

• 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

Is het nuttig ?

To socialize or not to socialize?

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 ...

Hoe gebruik je sociale media ?

Weet wat je deelt, want iedereen kijkt mee

Ambassadeurs

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.

Laat anderen reclame voor je maken

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

EINDE

www.moose-design.nl