Een goede website maken

Bij wijze van inleiding vinden we het belangrijk dat je goed beseft dat een goede website aan verschillende factoren vereist. Deze factoren staan los van de werkwijze die je hanteert: HTML, Dreamweaver, Drupal, Joomla, Wordpress, MODX, enz.

Wanneer heb je een goede site? Een goede website wordt eerst goed gepland en voldoet aan verschillende factoren:

• gebruiksvriendelijk (usability)
• aantrekkelijk (vormgeving)
• toegankelijk (anysurfer)
• vindbaar (seo)
• snel (performantie)
• geschikt voor mobiel (responsive)
• voor elke browser (cross-browsercompatibiliteit)

We zullen elke vereiste apart bespreken.

FACTOR 1: een website plannen

Voordat je jezelf in de code stort, voordat je een beeldverwerkingsprogramma opstart moet je een website goed plannen. Maar hoe doe je dit?

We nemen er een voorbeeld bij: we maken een site voor een nieuw, exclusief restaurant in Brussel. Ze serveren sushi en een iets duurdere kaart. De zaak heet Nippon (fictief!).

1. Doelgroep

Voor wie is de website? Particulier en/of professioneel?

2. Frequentie

Komt men eenmalig of terugkerend naar je site?

3. Waarom wil je een website?
Voor de contactgegevens? Om te informeren? Omdat de concurrentie een site heeft? Om iets te verkopen? Om feedback te vergaren?

4. Doel

Komt de bezoeker toevallig op de site of met een bepaald doel?

5. Wat

Wat zal men zoeken op je website?

Een voorbeeld!

We koppelen terug naar het sushi-restaurant in Brussel.

Hier zullen zakenmensen komen (eerder voor de lunch), maar ook particulieren. Dit kunnen mensen zijn die in Brussel wonen en de zaak reeds kennen, maar ook toeristen die graag in een exclusieve zaak eten. Het kunnen specifiek sushi-liefhebbers zijn. Het kunnen mensen met of zonder kinderen zijn.

Alle groepen zullen andere behoeften hebben. Zakenmensen willen het adres snel vinden, weten of er parking is, en wat het lunchmenu bevat. Mensen die van de zaak gehoord hebben willen de kaart verkennen en de prijzen kennen. Anderen willen foto’s van het interieur zien of zelfs misschien van de gerechten. Sommigen willen reserveren via telefoon of e-mail.

Wanneer men meerdere keren naar de site komt, zal je soms voor nieuwe inhoud op de site moeten zorgen. Dit is belangrijk voor Google, maar het mag geen onterecht hoofddoel worden. Je kan elke dag een bereidingswijze op je website plaatsen, waardoor het een uitgebreid kookboek wordt. De vraag is of hierdoor meerdere mensen in het restaurant gaan belanden, wat nog steeds de belangrijkste reden van de site is.

Mensen die het restaurant reeds kennen zullen anders op de site belanden dan toeristen. Mogelijk heeft men de url ergens opgepikt, of men zoekt in Google naar “Nippon Brussel” of “Nippon kaart”. Hij komt doelgericht naar de site.

Iemand die de zaak NIET kent, zoekt naar “sushi Brussel” of “restaurant Brussel”. Deze persoon kent de naam van de zaak nog niet. Hij komt wellicht toevallig op de website.

Zo! Bovenstaande vragen hebben ons helpen reflecteren. We weten nu beter wat op de website moet komen staan. Nu moeten we deze informatie gaan structureren. We maken een sitemap.

Een sitemap is een diagram van de website, waarop de verschillende pagina’s geplaatst worden. Dit is een erg uitgebreid voorbeeld. Een sitemap mag gerust een schets zijn.

Denk in deze fase ook na over je navigatie.

Schrijf op welke knoppen je nodig hebt.

Tracht het aantal te beperken. Gebruik krachtige, korte woorden.

Een slecht voorbeeld:

Deze tennisclub heeft zoveel knoppen dat ze op 2 rijen staan.

Denk altijd goed na of je niet bepaalde zaken kan bundelen. Zo kan je best Interclub, Tornooi, Clubcompetitie en Clubkampioenschap bundelen tot Competitie. Indien elk onderdeel eerder kort is, plaats je dit op één pagina. Indien dit telkens uitgebreid is kan je een uitklapmenu of extra menu, tabbladeren, accordion, enz overwegen.

Is Geschiedenis een meerwaarde voor een website? Misschien dat je een korte tekst op de homepage kan plaatsen met een lees meer? Of plaatsen bij Clubnieuws?

Clubnieuws kan je beter hernoemen naar Nieuws. Dit is voldoende duidelijk.

Zo, de structuur is nu klaar. Nu gaan we schetsen hoe de pagina eruit moet zien. We maken een wireframe. Er is geen standaard voor een wireframe. Sommigen schetsen dit, anderen gebruiken een website en maken dit digitaal. Soms voorziet men veel detail (iconen volledig uittekenen), soms houdt men het heel algemeen.

Twee voorbeelden:

Bovenstaand wireframe werd digitaal getekend en werd erg uitgebreid en gedetailleerd gemaakt.

Bovenstaand wireframe werd geschets. Er is minder detail, hoewel de afbeelding met vrij veel detail geschetst werd.

Opmerking: wanneer je een onepager hebt, moet je één wireframe maken voor de hele site. Je hebt dan ook geen nood aan een sitemap, hoewel je de structuur goed moet bedenken. Indien je een website met meerdere pagina’s hebt, moet je mogelijk meerdere wireframes uittekenen, indien elke pagina een andere opbouw/structuur heeft.

Ziezo, je hebt nu goed nagedacht, gestructureerd en geschetst. Je kan nu starten met de bouw ervan.

Toch nog iets: is je site klaar? Dan is het ook leuk om je klant/kennis hiermee te overbluffen. Dit kan via een mockup. Op http://magicmockups.com kan je gratis mooie mockups maken.

 

FACTOR 2: Usability - een gebruiksvriendelijke website

Gebruiksvriendelijke websites maken, wordt ook usability genoemd.

Een goede website is gestructureerd, duidelijk, leesbaar. Bezoekers moeten snel de website terugvinden. Dit kan je bekomen door de navigatie duidelijk en overzichtelijk te houden. Tracht het aantal knoppen (en menubalken) te beperken. Houd de tekst op knoppen krachtig en kort.

Zorg dan men zo snel mogelijk de gewenst informatie op de site vindt.

Wanneer je een onepager maakt, verandert dit natuurlijk weeral een beetje.

Verder moet je informatie ook duidelijk en leesbaar zijn. Gebruik voldoende contrast (dus niet lichtgele tekst op witte achtergrond), leesbare lettertypes, goede kleuren, herkenbare hyperlinks.

Een authoriteit in Usability is de deen Jakob Nielsen - http://www.useit.com. Hij ging voor het eerst op grote schaal onderzoeken hoe mensen reageren op websites. Hij plaatste groepen van 100 of 200 mensen in grote zalen en onderzocht aan de hand van eyetracking hoe deze mensen websites bekijken. Via gespecialiseerde software kan je vervolgens heatmaps maken. Dit lijkt op een weerkaart. Rood wijst op druk bekeken gebieden, blauw op zwak bekeken gebieden. Voor het plaaten van navigatie, belangrijke informatie en advertenties is het belangrijk te weten waar mensen eerst kijken.

Via CrazyEgg kan je heatmaps maken, aan de hand van waar men klikte. Via deze tool kan je erg belangrijke informatie vernemen van je website.

Een heatmaps is erg bruikbaar na een redesign van een website. Werk dan steeds via het A/B-principe. Wijzig niet de hele site, maar bv de plaats van de sociale media, de knoppen van de navigatie, de plaats van de login, enz.

Uit bovenstaande heatmap leerden we na onze vorige redesign dat de inlogfunctie erg vaak gebruikt wordt, verder de knop Cursussen erg belangrijk is, de knop Principe wat minder (of onduidelijk is wat men hier vindt) en dat de sociale knoppen FB en FW weinig gebruikt worden. Het menu in de footer wordt gebruikt, maar weinig.

 

FACTOR 3: Anysurfer - een toegankelijke website

De zwakkere bezoekers. Hier wordt vaak weinig aandacht aan besteed. Thans vallen we allemaal wel eens onder deze noemer. Surfen via een mobiel apparaat met klein scherm, surfen in een luidruchtig station, surfen via een trage verbinding. Natuurlijk mogen we zeker slechtzienden en –horenden, hypersensitieve en andere bezoekers niet vergeten. 15% van alle bezoekers valt onder de noemer “zwakkere bezoeker”.

Wanneer je website aan enkele eisen voldoet en optimaal toegankelijk is, dan verdien je het anysurfer-label. Op de site van Anysurfer  http://www.anysurfer.be/nl, vind je een complete checklist terug.

Zwakkere gebruiker:

-       Blind/slechtziend

-       Doof/slechthorend

-       ADHD

-       communicatiestoornis

-       Hypersensitief

-       Surfen in omgeving met veel geluid

-       Mobiel surfen

Wat moet je allemaal doen? Beperk beweging op je site: animatie, slideshow, video, enz. Voorkom ook geluid op je website. Verder moet je goed nadenken of je navigatie gebruiksvriendelijk is. Hebben je afbeeldingen een beschrijving? Dit zijn slechts enkele factoren.

Hier vind je een complete checklist.

 

FACTOR 4: SEO – een vindbare website

Een mooie, snelle website is allemaal goed en wel, maar indien deze niet gevonden wordt, is het zonde van de tijd die je erin gestoken hebt. We focussen vooral op Google, omdat deze zoekmachine voor meer dan 90% gebruikt wordt.

Google bestaat uit 3 delen:

-       database: elke url, inhoud, enz.

-       spider – googlebot: robot die sites doorzoekt en zoekt naar nieuwe sites
je kan je website manueel aanmelden via http://google.com/addurl.html

-       algoritme: bepaalt de ranking

Trachten zo hoog mogelijk te scoren in de ranking van Google, wordt SEO genoemd.

Denk altijd goed na over de trefwoorden waarop je gevonden wil worden. Laat je helpen door de keyword planner.

Er zijn nu twee opties: betalen om in Google te staan (adverteren) of ervoor zorgen dat je zo hoog mogelijk in de gewone ranking staat.

Je kan adverteren op http://www.google.be/adwords. Je kan zelf ook een graantje meepikken en laten adverteren op jouw site via https://www.google.com/adsense.

Het belangrijkste is zijn de backlinks. Dit zijn linken naar jouw site vanuit een externe website. Niet enkel het aantal, maar ook de kwaliteit (hoge pagerank) en relevantie is erg belangrijk.

Google geeft elke webpagina een score. Dit is de PageRank. Hoe hoger, hoe meer invloed je hebt. Deze score gaat op 10. 3 is al een leuke score. 5 is al heel goed. De beste Belgische/Nederlandse sites scoren 6 a 7. Facebook en Twitter gaan lopen met scores als 9/10. Hoe hoger de PageRank, hoe hoger je scoort. Volgende factoren zorgen dat je hoog in Google scoort en een betere PageRank bekomt:

- een goede domeinnaam, goede paden.
bv www.zelfstudie.be, www.xxxxxx.be/zelfstudie-leren

- sterke <title>, kort en uniek per webpagina

- goede h1, h2, h3

- goede trefwoorden in de leestekst, meta description, alt in afbeelding en hyperlinks.

Zo maak je een meta description:
<meta name="description" content="Hier een korte beschrijving">

Deze moet uniek zijn per webpagina!

Speel nooit vals. Waag je NIET aan blackhat of whitehat SEO! De optimale densiteit van een webpagina is 7%. Dit wil zeggen dat een trefwoord 7 keer per pagina voorkomt (domeinnaam, title, enz inclusief). Of anders gezegd: te weinig is even erg als teveel!

Je kan ook slechte dingen doen en daardoor slecht scoren:

-       broken links

-       frames !!!

-       slechte code    <font>, foutief, teveel code, geen css, …

En verder is er nog Google Panda, Pinguin, enz enz. Over SEO kunnen we zoveel vertellen, dat we graag naar onze cursus verwijzen: Bekijk onze uitgebreide cursus.

 

FACTOR 5: Performantie – een snelle website

Je kan je geen trage website veroorloven. Het is geen geheim dat surfende mensen geen geduld hebben bij het inladen van een website. Je kan dan wel stellen dat iedereen tegenwoordig wel breedband heeft, maar mobiel wordt er vaak nog traag gesurft. Er zijn nog voldoende plaatsen waar enkel Edge (en geen 3G of 4G) beschikbaar is. Hoe bekom je een snelle website?

Er zijn twee hoofdfactoren:

1: een snelle webserver. Zorg dat je performante hosting hebt.

2: een snelle website. Hiervoor dien je een hele checklist af te werken en je aan heel wat regels te houden.

a/ zorg voor zuivere, korte code. Gebruik geen overbodige code. Zorg dat de code correct is.

b/ verklein je code (spaties en lege regels worden ook gelezen!) via http://cssminifier.com  en http://javascript-minifier.com

c/ beperk het aantal requests. Hoe meer gekoppelde bestanden, hoe meer requests er gedaan moeten worden. Tracht het aantal gekoppelde CSS-, JS-bestanden te beperken. Het aantal requests vind je op http://tools.pingdom.com.

d/ bekom geoptimaliseerde afbeeldingen. Zorg dat een afbeelding geoptimaliseerd wordt. Verwijder ook de laatste overbodige bits in je afbeelding via tools als  www.optimizilla.com (JPG), http://pngcrush.com (PNG) en https://tinypng.com (PNG)

e/ vermijd @import in je website! Zorg dat er geen redirects zijn. Voorkom broken links.

f/ gebruik CSS-sprites

g/ zet browsercaching en comprimeren aan op de server.

h/ laad JS-bestanden als laatste in (net boven </body> linken)

TEST JE SITE OP https://developers.google.com/speed/pagespeed/insights.
Wij maakten een gratis gids die je hierbij helpt.

 

STAP 6: Responsiviteit – een mobiele website

Een website hoort tegenwoordig geschikt te zijn voor mobiele apparaten, met name smartphone en tablet. Maar ook mensen met een erg groot beeldscherm verdienen een aangepaste weergave. Dit alles valt onder de noemer “responsiviteit”.

Er zijn twee mogelijkheden:

1: Je maakt twee verschillende sites. Eentje voor desktop, eentje voor mobiel. Dit kan via een script, dat het apparaat herkent.

2: Je werkt via mediaqueries. Deze springen in op de schermbreedte.

Ook hier zijn twee opties:

2a: de mediaqueries zelf schrijven

2b: werken met een CSS framework zoals Bootstrap, Skeleton of Foundation.

Over responsiveness kunnen we zoveel vertellen, dat we graag naar onze cursus verwijzen: Bekijk onze uitgebreide cursus

 

FACTOR 7: Cross-browsercompatibiliteit – in elke browser hetzelfde resultaat

Een browser hoort in elke browser behoorlijk te werken. Voor sommigen betekent dit op zijn minst leesbaar, anderen vinden een identiek resultaat het minimum.

Het probleem wordt enkel erger, gezien er steeds nieuwe browser(versies) bijkomen.

http://gs.statcounter.com leert ons dat in België/Nederland Chrome het meest gebruikt wordt, gevolgd door Internet Explorer, Firefox en Safari.

Nadat je site klaar is, moet je deze testen. Het beste is in de browser zelf. Installeer Chrome, Firefox en Safari op je computer. Dit kan gratis. Op een Mac heb je problemen, want je kan Internet Explorer niet installeren op Apple. Maar ook onder windows kan je slechts één IE opstarten, terwijl de onderlinge versies een erg groot verschil in resultaat geven.

Via http://netrenderer.com kan je elke IE-versie testen. Het levert je wel enkel een prent (en niet browsebare site) op.

Via http://www.browserstack.com kan je op elk systeem elke browser testen. Dit is een aanrader, hoewel de gratis versie je slechts 10 minuten preview biedt.

Verder zou je nog virtuele systemen (VirtualBox, Parallels, Bootcamp) kunnen gebruiken. Lees meer over het testen in verschillende browsers.

Wanneer je problemen opmerkt (vooral in Internet Explorer kan je deze verwachten), kan je conditionele opmaak of browserhacks uitvoeren. Lees meer.

CSS3Pie en Prefixen helpen ook.