Tips vr een kwaliteitsvlle website: De milieubeweging p het wereldwijde web In de cmmunicatiemix van je vereniging is de website één van de kanalen die je gebruikt m je bdschap en activiteiten kenbaar te maken. Veel verenigingen starten daarm met een eigen rudimentaire website. Om dan snel tt de cnclusie te kmen dat dit inhudelijk, vrmelijk én technisch geen sinecure is. Het buwen van een website vernderstelt kennis van navigatieprincipes, grafisch design en sftwareprgramma s. Website is k een snel medium. Dit vereist een speciale aanpak in het ntwerp, de navigatie en in het srt infrmatie die je via de website brengt. Deze inffiche is geen cursus website pmaken, maar bevat wel tips en een checklist vr het uitbuwen van een kwaliteitsvlle website. We hebben ns hiervr gebaseerd p de Checklist kwaliteit website van Scius het Steunpunt vr sciaal-cultureel vlwassenwerk. Vier principes staan hierbij centraal: navigatie, ntwerp, inhud en de interactiviteit. Ze vrmen een leidraad vr elke vereniging die zelf f via een prfessinele webdesigner een website pmaakt. De checklist vr het pmaken van een kwaliteitsvlle website vind je p het einde van deze inffiche. 1. Praktische inf vr pstarten website Vr we ingaan p de tips en checklist geven we eerst de ndzakelijke en technische infrmatie vr het pstarten van een website. Geschikte dmeinnaam zeken. Een dmeinnaam is de naam van je website (bijvrbeeld bndbeterleefmilieu.be) in het Dmain Name Systeem (DNS), het naamgevingsysteem p internet waarmee netwerken, cmputers, webservers, mailservers en andere tepassingen wrden geïdentificeerd. Je kiest bij vrkeur de naam van je vereniging als dmeinnaam. Op www.dns.be (Belgische Vereniging vr Internet Dmein Naam Registratie) kan je nagaan f je dmeinnaam ng beschikbaar is. Dmeinnaam aanvragen en registreren. Via dezelfde website kan je een dmeinnaam laten registeren bij verschillende agenten. Je betaalt hiervr een kleine licentiekst. Ok hsting prviders kunnen dit vr ju regelen (ze maken hierp dan wel een kleine winst). Hsting prvider zeken. Vergelijk de aanbiedingen van verschillende hsting prviders die prijs-kwaliteit vldende webserverruimte (100 MB vr een drsnee website) en andere faciliteiten (e-mailaccunts, ) ter beschikking stellen én dit znder reclamebanners. Vaak irriteren deze banners en zijn ze meestal in tegenspraak met de bdschap van je vereniging. Een gids van Belgische hsting prviders vind je p www.hstmarkt.be. Een gren hstingsbedrijf waarmee verschillende milieuverenigingen samenwerken is de webfabriek. Meer inf: http://www.webfabriek.be Bewegingswerk Inffiches - Cmmunicatie 1
Installeer de ndige sftware. Z heb je een webpage-editr ndig vr de pmaak van je website en een FTP-prgramma m webpagina s te verzenden naar de webserver van je hsting prvider. Webpage f html-editr: Cmmerciële prgramma s: Micrsft Frntpage Gratis prgramma: Nvu. Meer infrmatie en dwnlads p: http://www.e-cp.be/grafisch/nvu-4.html FTP-prgramma: Gratis prgramma: Filezilla. Meer infrmatie en dwnlads p: http://www.e-cp.be/internet/filezilla-4.html Installeer grafische sftwareprgramma s. Vr het bewerken van afbeeldingen, ft s, enz heb je dergelijke prgramma s ndig. Cmmerciële prgramma s: adbe phtshp (duur), adbe phtshp elements (gedkpere variant); Gratis prgramma s. Meer infrmatie en dwnlads: - Gimp: http://www.e-cp.be/grafisch/the-gimp-3.html - Picasa: http://picasa.ggle.be/intl/nl/ - Picnik: http://www.picnik.cm/ Tip: Ben je geen cmputerwizard? Of heb je met de vereniging nch tijd en geld m in een website te investeren? Een eenvudig alternatief is het pstarten van een blg. Technisch is dit heel gemakkelijk via https://www.blgger.cm/start. Z surft juw vereniging k p het wereldwijde web en kan je heel snel cmmuniceren ver standpunten, activiteiten, enz naar een ruim publiek. 2. Vier principes vr een kwaliteitsvlle website 2.1. Navigatie Overzichtelijke navigatiestructuur. Internet is een snel medium, en de surfers stellen dan k hge eisen aan de gebruiksvriendelijkheid van een website. De navigatiestructuur speelt hierbij een belangrijke rl. Z met de surfer nmiddellijk een duidelijk verzicht hebben en kunnen behuden van de infrmatie p je website (waar ben ik, waar was ik, waar kan ik heen vr de infrmatie die ik zek). En als de surfer dan tch eventjes de weg kwijt is, dan met hij steeds met een start- f welkmpagina knp naar het begin van je website kunnen terugkeren. Ok een sitemap met de inhudspgave van de website is hiervr een handig hulpmiddel. 2 Tips vr een kwaliteitsvlle website
Navigatiemenu met duidelijke titels. De titels van het navigatiemenu meten de infrmatie dekken van de achterliggende pagina s. Dit versnelt de zektcht van de surfer naar de juiste infrmatie. Navigatiemenu met eenvudige knppen. Het navigatiemenu met met eenvudige knppen te bedienen zijn. Visueel mie, maar ingewikkelde knppen m dr te klikken leiden de aandacht af van de surfer en de infrmatie waarnaar hij p zek is. Afznderlijke navigatiemenu s: De gebruiksvriendelijkheid en de snelheid van het raadplegen van infrmatie stijgt als je een afznderlijke navigatiestructuur hebt vr inhudelijke en meer algemene rubrieken. Inhudelijke rubrieken (navigatiemenu links p de pagina): startpagina/welkmpagina agenda/activiteitenkalender aankndigingen en verslagen (k beeldmateriaal) van activiteiten nieuws uit milieuraad en andere adviesraden standpunten inf ver lidmaatschap/vrijwilligerswerk persberichten vacatures pagina met aanverwante links (bijv. links naar website van andere milieuverenigingen bijv. BBL, Natuurpunt, enz ) Algemene rubrieken (navigatiebalk bven f nderaan de pagina): cntactpagina van de vereniging: algemeen cntactadres en/f cntactgegevens (e-mail) van bestuursleden f prfessinele medewerkers reageer f feedbackpagina abnnementpagina vr e-zine rutebeschrijving vr secretariaat zekmachine sitemap Bewegingswerk Inffiches - Cmmunicatie 3
Vrbeeld navigatiestructuur website Gents MilieuFrnt Scrlling minimaal huden. Op een cmputerscherm kan je minder infrmatie zetten dan p een A4-papier. Beperk de zektcht naar infrmatie en zet de belangrijkste infrmatie bvenaan het cmputerscherm en niet nder de scrllijn. Ok hrizntaal scrllen - mdat de tekst te breed is is niet bevrderlijk vr een vltte lectuur. 2.2. Ontwerp/vrm Snelle plaadtijd van webpagina s. De startpagina en alle andere pagina s van de website meten binnen de 5 secnden p het scherm verschijnen. Het zijn vrnamelijk grte beeldbestanden (ft s, lg s en andere grafische elementen) die de plaadtijd vertragen. Sla daarm beelden p in lage reslutie. Of gebruik de zgenaamde thumbnails (miniatuurweergave) waarp je kan drklikken vr de grtere afbeelding. Ok handig is het vermelden van de grtte (in Kb) van dwnladbare bestanden p je website. De reslutie van afbeeldingen verlagen de je met een grafisch sftwareprgramma vr het bewerken van ft s en ander digitaal beeldmateriaal (zie k 1. Praktische inf vr pstarten website). 4 Tips vr een kwaliteitsvlle website
Duidelijke en aantrekkelijke lay-ut Lg en huisstijl: Gebruik cnsequent het lg van je vereniging en de kleuren, lettertype, enz van de huisstijl. Vergeet k niet het lg van Bnd Beter Leefmilieu p te nemen p je website. Deze kan je dwnladen p http://www.bblv.be/page.php/1 Kleur en cntrast: Gebruik vr de leesbaarheid van de teksten een licht achtergrndkleur met dnkere letters. Lichte lettertypes p een dnkere achtergrnd gen misschien mier, maar zijn meilijk te lezen p een pc in een nrmaal verlichte kamer f bureau. Leesbare lettertypes: Gebruik enkel standaardlettertypes (webfnts) die aanwezig zijn in Windws, Linux en Mac besturingssystemen. De schreeflze letters (znder phaaltjes aan de uiteinden), zals Verdana, Arial, Helvetica en sans-serif zijn beter leesbaar p een cmputerscherm dan schreefletters (bijv. Times New Rman). Dit heeft alles te maken met de meer ingewikkelde vrm van schreefletters die niet nauwkeurig p het cmputerscherm afgebeeld wrden. Kies k vr een aangenaam leesbare lettergrtte (fnt size 12 pixels). Visuele structuur: De inhud (tekst) die je aanbiedt met gestructureerd zijn zdat de surfer de tekst p relevante infrmatie kan scannen. Enkele tips: - witregels tevegen; - alinea s psplitsen; - tekstblkjes met titel; - tekstbullits (lijstje van psmmingstekens); - wrden in vet f cursief. Sbere lay-ut: Het ntwerp van het navigatiemenu en knppen met esthetisch én functineel zijn. Neem k enkel ft s en afbeeldingen p die de inhud van de website ndersteunen. Vermijd technische hgstandjes, zals bewegende beelden, animaties f geluiden want ze leiden enkel de aandacht van de surfer af. Technisch eenvudig: Je kan van de drsnee internetgebruiker niet verwachten dat hij p een spiksplinternieuwe PC werkt met de allernieuwste versies van internetbrwsers, plugins f andere prgramma s. Gebruik dus niet de nieuwste technlgie en hu de pmaak van je website eenvudig. Aangepast aan verschillende internetbrwsers: Zrg dat je website er vr iedere internetbrwser (Micrsft Internet Explrer, Mzilla Firefx, Mac Safari) fatsenlijk uitziet. Hu rekening met de standaard schermreslutie (1024 x 768 pixels): Ontwerp je de webpagina s p een grt cmputerscherm (en dus schermreslutie) dan verschijnt deze k grt en breed p een standaard cmputerscherm, waardr de surfer hrizntaal met scrllen. Gebruik daarm de standaard schermreslutie van 1024 x 768 pixels. Eenvudige pmaakstijlen en webtechnieken: gebruik standaard HTML- en CSS-cde vr de lay-ut en standaard Javascript-cde vr andere functinaliteiten (bijv. Bewegingswerk Inffiches - Cmmunicatie 5
aanmaak van inschrijf- f andere frmulieren. Vermijd speciale plugins (Macr Media Flash, Real, ) vr bewegende beelden. Een creatief webdesign gt mi, maar leidt de aandacht af van de inhud en bemeilijkt bvendien de vindbaarheid van infrmatie p je website (zie k verder). 2.3. Infrmatie/inhud Duidelijke titels: de hfdingen f titels van het navigatiemenu meten accuraat de inhud van de nderliggende pagina weergeven. Krtm de titel met de lading dekken. Per titel f subtitel met er een cmpacte inleiding zijn die antwrd biedt p de vragen wat, waar, waarm, wanneer, welke. Inhud is afgestemd p je delpubliek. Je met eerst nagaan wie je delpubliek is en f de beschikbare infrmatie relevant is vr deze delgrep. Uit nderzek blijkt dat de gemiddelde surfer een hger pgeleide man is tussen de 30-45 jaar. Jngeren tussen de 15-30 jaar beschuwen het internet als het belangrijkste infrmatiemedium. En k de actieve senir heeft het internet ntdekt. Vral udere surfers zijn geïnteresseerd in wat er in de eigen streek gebeurt. Cpywriting: Omdat lezen p een scherm meilijker is gebruiken we ng meer spreektaal dan p papier, ng krtere zinnen, ng eenvudiger taal. Algemene tips vr het schrijven van vlt leesbare teksten lees je p Bewegingswerk Inffiches Cmmunicatie: Facelift vr de nieuwsbrief: tips m de aandacht van de lezer te krijgen. De inhud primeert: enkel die teksten, maar k afbeeldingen en andere multimediale tepassingen die de bdschap van de vereniging verduidelijken f versterken, zijn waardevl en meten p de website een plaats krijgen. Actuele en juiste infrmatie: Je website ndigt uit tt herhaald bezek als de meest actuele infrmatie wrdt vermeld (eventueel met een extra visuele aandachtstrekker en datum). Ok de hyperlinks meten werken en up-t-date zijn. Hyperlinks naar interessante websites: Blauw en nderstreept springen deze hyperlinks in het g en bieden extra infrmatie vr de geïnteresseerde surfer. Printvriendelijk webpagina s speciale printknp: Interessante infrmatie wrdt drgaans na een vluchtige leesbeurt p het scherm tch ng uitgeprint. Het is heel vervelend als de geselecteerde tekst nvlledig uit de printer rlt. Wees pr: insinuaties f erger scheldpartijen hren niet thuis p een website. Wees kritisch maar k een heer in het internetverkeer. 6 Tips vr een kwaliteitsvlle website
2.4. Interactiviteit Kijk kritisch naar de interactiemgelijkheden van je website. Gede internetsites zijn meer dan eenzijdige infrmatieverstrekkers. De surfer wil eigenlijk spelen, dingetjes aanklikken, iets den. Je kan de interactie p de vlgende manieren verhgen: Hyperlinks: Op elke pagina is er minstens een link naar andere externe websites ver gelijkaardige nderwerpen. Discussiefrum: Geeft je de mgelijkheid m met verschillende mensen het debat aan te gaan en z km je van hen te weten he zij tegenver de standpunten en bdschap van de vereniging staan. Feedback f reageermgelijkheden: Ls van een frum met je k p verschillende plaatsen p je website de mgelijkheid aanbieden m tips, pmerkingen en vragen via mail dr te geven. Hiervr kan je een feedbackfrmulier (met Javascript-cde) pmaken met verplichte invulvelden vr naam, adres en mailadres. Op deze manier verzamel je e-mailadressen en kan je een gede mailinglist van sympathisanten aanleggen. Abnneermgelijkheden: Als je vereniging een e-zine heeft kan je k een abnnementpagina aanmaken (met Javascript-cde). Ok hier vrzie je verplichte invulvelden en zrg je vr een gede afmeldingregeling. Standaardmailtje (breng een vriend f kennis p de hgte van deze site). Nieuwe infrmatie duidelijk visueel (eventueel met datum) presenteren p de website. Wedstrijden, plls kppelen aan leuke prijzen. Zekmachine vriendelijke website. Is je website gemakkelijk te vinden p het internet? Trekt je website bezekers aan via diverse kanalen, zals Ggle f andere zekmachines? Enkele tips m je ranking bij zekpdrachten via zekmachines te verhgen: Verkies inhud bven vrm Zekmachines en Ggle in het bijznder stellen veel en gede inhud van webpagina s p prijs. Niet vr niets scren Startpagina s en prtaalsites met veel vakspecifieke hyperlinks beter bij zekpdrachten dan kleinere websites die maar enkele pagina s beslaan. Ok het aantal bezekers p je pagina hebben een psitief effect p de ranking. De reden is simpel: een zeer mvangrijke en vaak bezchte brn (website) zal waarschijnlijk eerder de gezchte infrmatie aanbieden rndm een bepaald thema dan een kleine brn. Keep it simple Bewegingswerk Inffiches - Cmmunicatie 7
Vermijd speciale plugins (Macr Media Flash, Real) vr bewegende beelden, creatieve pmaakstijlen f andere webtechnieken want ze bemeilijken de vindbaarheid van de inhud p je website. Z kunnen zekmachines bijvrbeeld meilijk teksten en hyperlinks in Macr Media Flash lezen. De pmaak van je webpagina s bestaat daarm best uit zveel mgelijk tekst gelayut in standaard HTML- en CSS-cde. Enkele trucjes Een zekmachine scant een webpagina p dezelfde manier zals een mens een krant leest. Titels, tussenkpjes f wrden die vetgedrukt zijn wrden dr de lezer het eerst pgemerkt. Z k bij een zekmachine. Bij het drzeken van de teksten p je webpagina zijn vral metatags (kleine stukjes html-cde) belangrijk vr het bepalen van je ranking bij zekpdrachten. Enkele vrbeelden van metatags zijn keywrds en descriptin. Neem daarm de belangrijkste trefwrden f keywrds uit de teksten van je webpagina p in de Meta Keywrd Tag. Begin altijd met de meest belangrijke keywrds (max. 10) en gebruik indien mgelijk k synniemen van deze trefwrden. <meta name= keywrds cntent= hier,kmen,de,keywrds,vr,je,webpagina,gescheiden,dr,een,kmma In de Meta Descriptin Tag geef je een mschrijving van je website (max. 250 karakters inclusief spaties). En neem je pnieuw de belangrijkste keywrds p. <meta name= descriptin cntent= beschrijf hier krt je pagina. Vergeet de aanhalingstekens f de < en > niet. En zwel de Meta Keywrd Tag als de Meta Descriptin Tag meten k ng p de juiste plaats staan in de brncde van je webpagina, nl. tussen de <head> en </head> tags. Interne zekmachine Een interne zekmachine verhgt de interactiviteit van je website. Dit laat je te m te zeken p titel, trefwrden f datum. Natuurlijk heeft dit pas zin bij een mvangrijke website met veel tekst. Enkele mgelijkheden m te zeken p je eigen site: Scripts: Er bestaan veel scripts p het internet die je als zekmachine kan gebruiken: CGI, PHP, ASP. Dit vereist wel een grndige kennis van prgrammeertaal. Gratis zekdiensten: Je kan bijvrbeeld FreeFind installeren p je website. Op de resultatenpagina van de zekpdracht wrdt dan wel de gespnsrde tekst links van Ggle getnd. Meer infrmatie en dwnlads p http://www.freefind.cm/. Zekmachine p je site: Je kan k de zekfunctie van een zekmachine pnemen. Bezekers kunnen dan van p je eigen site k zeken p het wereldwijde web. 8 Tips vr een kwaliteitsvlle website
Statistiekenteller Om het aantal bezeken van je website te kunnen pvlgen kan je eventueel k een statistiekenteller installeren. Sms bieden de hsting prviders dit k aan in hun pakketten. Of je kan een gratis teller (met gespnsrde pp-ups) dwnladen p www.webstats4u.cm. Bewegingswerk Inffiches - Cmmunicatie 9
Checklist: 1. Navigatie -Duidelijke navigatiestructuur: wrdt de infrmatie verzichtelijk aangebden? -Is er een start/welkmpagina knp vrzien? -Is er een sitemap met de inhudspgave van de website vrzien? -Zijn de titels van het navigatiemenu duidelijk en dekken deze de lading? -Is het navigatiemenu gemakkelijk te bedienen met eenvudige knppen? -Zijn er afznderlijke navigatiemenu s met inhudelijke en meer algemene rubrieken? 2. Ontwerp/vrm Snelle plaadtijd van webpagina s -Is de plaadtijd van de start en alle andere pagina s minder dan 5 secnden? -Is de grtte (in Kb) van dwnladbare bestanden weergegeven? Duidelijke en aantrekkelijke lay-ut -Wrdt het lg en huisstijl cnsequent tegepast p de hele website? -Is de tekst ged leesbaar p het scherm? -Is het ntwerp van het navigatiemenu en knppen esthetisch én functineel? -Ondersteunen ft s en afbeeldingen, animaties de inhud p de website? -Wrdt de inhud/tekst p de website gestructureerd weergegeven? Technisch eenvudig -Is het ntwerp van de website aangepast aan verschillende internetbrwsers? -Is het ntwerp van de website aangepast aan verschillende besturingssystemen? -Hu je rekening met de standaard schermreslutie (1024 x 768 pixels)? -Gebruik je vr de lay-ut eenvudige pmaakstijlen (standaard HTML- en CSS-cde)? -Gebruik je vr andere functinaliteiten standaard Javascript-cde? 3. Infrmatie/inhud -Dekken de titels van het navigatiemenu accuraat de inhud van de nderliggende pagina s? -Wrdt per titel f subtitel een cmpacte inleiding vrzien? -Is de inhud van de website afgestemd p het delpubliek van de vereniging? -Wrdt er cpywriting tegepast p de teksten van de website? -Is de infrmatie p de website actueel en juist? -Wrden nieuwigheden p de website in de kijker geplaatst? -Vrziet de website in hyperlinks naar aanverwante en interessante websites? -Werken deze hyperlinks ng en zijn ze actueel? -Vrziet de website in printvriendelijk webpagina s f een speciale printknp? -Is de bdschap van de website psitief? 4. Interactiviteit -Is er minstens één hyperlink p elke pagina? -Is er een discussiefrum p de website? -Zijn er reageer/feedbackmgelijkheden p verschillende plaatsen p de website? -Zijn er abnneer- en afmeldingmgelijkheden vr een e-zine p de website? -Wrdt nieuwe infrmatie duidelijk visueel gepresenteerd p de website? -Zijn er wedstrijden, plls met leuke prijzen p de website? -Is de website zekmachine -vriendelijk? -Is er een interne zekmachine p de website? Kan deze zeken p titel, trefwrd f datum? -Is er een statistiekenteller vr het aantal bezeken p de website? 10 Tips vr een kwaliteitsvlle website