defunkt.nu blog

Beheer zelf je website

Tue, 20 Apr 2010 08:40:33 +0200

Bekijk vooral ook even het filmpje dat ik hiernaast heb gezet. Hierin zie je hoe ik het beheersysteem van deze website gebruik.

Met zo’n beheersysteem kan je zelf heel makkellijk aanpassingen doen aan een website. Daarvoor moet je geen ingewikkelde codes vanbuiten leren. Je moet ook niet kunnen programmeren.

Een beetje met een tekstverwerker (zoals Word) kunnen werken kan handig zijn, maar is ook niet noodzakelijk.

De mogelijkheden van zo’n systeem zijn quasi eindeloos. Dit zit standaard in bijna alle sites die ik aflever:

Nieuwe pagina's aanmaken, bewerken en hun positie aanpassen.
Teksten of beelden toevoegen aan een pagina.
Foto’s beheren.

Meestal werk ik met SilverStripe, een erg flexibel systeem. Hiermee zijn de meeste sites snel te bouwen.

Sommige sites zijn erg geavanceerd of hebben heel specifieke eisen. Daarvoor kan eventueel een ander pakket worden gebruikt. Of ik maak een oplossing helemaal op maat.

Door met een beheersysteem te werken kan u heel regelmatig nieuwe informatie op uw website zetten. Dat heeft een aantal voordelen:

Google houdt rekening met hoe vaak er nieuwe inhoud op de website komt. Een site die regelmatig nieuwe artikels post zal dus ook hoger scoren.
Niet alleen de update-frequentie is belangrijk. Bij elk artikel dat je post komen er ook nieuwe zoekwoorden bij op je site. Die zoekwoorden betekenen een extra potentieel aan bezoekers.
Niet alleen Google volgt de updates op je site. Maak van occasionele bezoekers vaste klanten door regelmatig nieuwe, relevante info aan te bieden.

Met een beheersysteem kan je zelf kiezen hoe en wanneer je de website aanpast. Daardoor wordt de site veel waardevoller en kan je actief strategische beslissingen nemen.

Webpagina Prototypes

Mon, 31 May 2010 17:30:58 +0200

Als er begonnen wordt met het bouwen van een website wordt er eerst een prototype gemaakt. Een prototype is een ruw bouwplan voor een website. Op een prototype zie je nog niets van de vormgeving.

Voor de belangrijkste pagina’s in de site wordt een prototype gemaakt. Die is klikbaar en toont de logica binnen een website. Samen met de klant kan ik zo kijken of er nog dingen ontbreken of onlogisch in elkaar steken.

Allemaal goed en wel, maar hoe ziet zo’n prototype er nu uit? Zoals ze op kook-tv zeggen: “Hier is er eentje die ik eerder gemaakt heb”. Voorbeeld van een webpagina prototype.

In dit prototype zie je pagina’s voor een homepagina, nieuws, producten en een contactpagina.

In deze fase kan ik nog makkelijk wijzigingen aanbrengen zonder heel de vormgeving te moeten herwerken.

Op basis van het prototype leg ik met de klant de functionaliteit pagina per pagina vast. Er wordt bepaald wat er op elke pagina moet komen, maar nog niet hoe het eruit moet zien. Dat volgt pas in de ontwerpfase.

Mood Board

Mon, 14 Jun 2010 10:32:04 +0200

In een Mood Board staat de sfeer voor je website. Hiervoor gebruik je knipsels, kleurstalen of reeds bestaand marketingmateriaal. Vaak staan er ook waarden en stellingen op die bij je boodschap of merk passen.

Op die manier zoeken we een richting voor de grafische vormgeving en de teksten. Sfeer lijkt op het eerste zicht niet veel met gebruiksvriendelijkheid te maken te hebben. Toch ondersteunt de juiste sfeer het gebruiksgemak van de site. De bezoeker zal zich meer op zijn gemak voelen op de site, langer blijven en de inhoud makkelijker vatten.

In het beste geval zorgt de juiste sfeer voor een emotionele band tussen de bezoeker en jouw product. Het wordt dan iets waarmee je duidelijk jouw verhaal vertelt en het verschil maakt tussen jezelf en je concurrenten.

Het uitwerken van het Mood Board loopt samen met het aanmaken van de prototypes. Op die manier kunnen we dus tegelijkertijd op twee verschillende manieren over de website denken. Na deze fase is dan ook alles klaar om aan de grafische vormgeving te beginnen.

Grafische vormgeving

Mon, 21 Jun 2010 17:38:05 +0200

Als het protoype en het mood board afgewerkt zijn, kan er met de grafische vormgeving gestart worden. Als alles goed is, weet ik nu erg duidelijk wat er op welke pagina moet komen en welke richting het uitgaat qua stijl.

Ik begin te ontwerpen in de webbrowser. Dat wil zeggen dat je geen statisch ontwerp krijgt, maar meteen kan zien hoe het er effectief zal uitziet en werken. Klik op de afbeeldingen hierboven (opgelet: dit zijn ontwerpen uit een vroeg stadium die best werken in Firefox). Het zijn allemaal fases in het ontwerp van Conceptsverde. In tegenstelling tot een Photoshop-document kan je perfect zien wat er gebeurt wanneer je een menu openklikt of over een link komt.

In elke fase van de vormgeving kan ik ook samenzitten met de opdrachtgever. Omdat het ontwerp al in de webbrowser draait is het dan makkelijk om ter plekke aanpassingen te doen en meteen uit te proberen hoe de pagina er uitziet en werkt.

Elke browser (Internet Explorer, Firefox, Safari,…) heeft zijn eigen eigenaardigheden en probleempjes. Door Photoshop over te slaan kan er in de ontwerpfase al getest worden of alles er overal goed uitziet. Op basis daarvan wordt soms beslist om bepaalde extra’s enkel in de meest recente browsers toe te voegen.

Raster

Ik doe bijna al mijn ontwerpen op een onderliggend raster. Dat zorgt er vaak voor dat je oplossingen bedenkt die interessanter zijn en die je zonder raster niet zou gezien hebben. Daarnaast zorgt het voor extra evenwicht binnen het ontwerp. Wil je het raster van deze pagina eens bekijken? Klik hier om het raster zichtbaar te maken.

Programmeren

Mon, 28 Jun 2010 11:42:52 +0200

Samen met de vormgeving kan begonnen worden met het programmeerwerk. De meeste sites hebben een beheermodule nodig, zodat de klant zelf de site kan aanpassen. Hiervoor wordt gekeken welke types van pagina’s er zijn. Er wordt rekening gehouden met wat op zo’n paginatype staat en aan de hand daarvan worden de invulvelden aangemaakt. Voor een fotogalerij-pagina zal dat bijvoorbeeld anders zijn dan voor een contactpagina.

Voor bepaalde sites, die niet meteen in een klassieke pagina-structuur passen, kan er hier meer werk zijn. Zo kan er gekozen worden om een systeem helemaal op maat te maken.

Niet enkel de beheermodule moet geprogrammeerd worden. Het deel van de site dat de bezoekers te zien krijgt, kan bijvoorbeeld invulformulieren, slideshows of bestelformulieren hebben.

Tijdens het programmeerwerk kan de klant in verschillende fases al beginnen met het systeem te testen. Door testinhoud in te geven, kan hij samen met mij kijken of alles in het beheersysteem goed en makkelijk werkt.

Prestaties van je website opvolgen

Tue, 06 Jul 2010 15:23:15 +0200

De opvolging van een site is erg belangrijk. Eerst is er opvolging waneer de planning, vormgeving en het programmeren van het beheersysteem afgewerkt zijn. De klant kan op dat moment de inhoud beginnen ingeven in dat beheersysteem. Als er dan nog problemen of onduidelijkheden kan ik die oplossen voordat de site gelanceerd wordt. Ook een kleine opleiding is op dit moment mogelijk.

Belangrijker is de opvolging na de lancering van de site. Je website is een instrument om doelstellingen te halen. Daarom stuur ik je om de drie maanden een rapport op. Hierin zie je onder andere hoeveel bezoekers je site heeft, op welke pagina’s ze binnenkomen en waar ze op klikken. Aan de hand daarvan beoordelen we samen of je doelstellingen gehaald zijn. In het rapport zet ik ook tips om de prestaties van de site nog te verbeteren.

Zo’n rapport is vaak ook een geschikt moment om eens rond de tafel te zitten. Het kan bijvoorbeeld zijn dat je verwachtingen voor de website veranderd zijn, of dat je extra vragen hebt voor nieuwe functies of webpagina’s.

De rapporten die ik opstel zijn gebaseerd op Google Analytics. Dit analyseprogramma zit gratis bij elke defunkt.nu site geïnstalleerd. Wil je zelf regelmatiger de resultaten opvolgen, dan kan je uiteraard toegang krijgen tot de live resultaten.

Uit Google Analytics kan je heel wat informatie puren. Het is echter niet het enige gereedschap dat je hebt om de prestaties van je site op te volgen. Met bijvoorbeeld Clickdensity, Crazy Egg of Mint kan je nog extra informatie bij elkaar garen. Contacteer me gerust als je interesse hebt om extra analysesoftware op je website te zetten.

De oude zegswijze zegt dat meten weten is. Bij webdesign is dat zeker het geval. De middelen om prestaties te beoordelen zijn erg krachtig en je site heeft er enkel bij te winnen als je ze gebruikt.

Je website is geen eiland

Thu, 15 Jul 2010 13:24:45 +0200

Vroeger was het simpel. Je maakte een website, zette hem op je naamkaartje en je was klaar. Het was een extensie van die brochure die je al een tijdje gebruikte, het was gewoon de versie om op de computer te zetten. Het internet is echter geen verzameldoos van brochures. Het is een netwerk van sites en diensten waarop iedereen informatie kan posten, verdelen en doorsturen. Dat maakt het allemaal wat complexer, maar ook een stuk interessanter.

Het web is ontstaan om informatie makkelijk en snel te delen. Zeker met de komst van sociale media, zoals FaceBook of Twitter, kan iedereen dingen posten en met elkaar delen. Dat is tweerichtingsverkeer. Of beter gezegd miljoenenrichtingsverkeer. Mensen kunnen stukjes van je inhoud overnemen en naar je teruglinken. Inhoud die over je organisatie verschijnt, of je laatste artikel van op Twitter kan in de site verwerkt worden. Jij kan reageren als er iets over je bedrijf gezegd of gevraagd wordt op FaceBook.

Het is dus belangrijk dat je ervoor zorgt dat artikels of procuctinfo die op jouw site staan makkelijk gedeeld kunnen worden. Hou dat in gedachte bij het aanmaken van de inhoud voor je website. Het is goed dat jouw info verder verspreid wordt en zo een groter publiek bereikt. Je kan nu eenmaal geen ijzeren gordijn rond je site zetten.

Participeren in sociale media sites is zeker een interessante piste. Zo kan je een officiële communicatie over een product voeren, of reageren op wat er door anderen gezegd wordt. Dat is niet enkel dienstverlening voor je (potentiële) klanten, het is ook een interessant gereedschap om te weten wat er leeft op de markt. Het web biedt hier mogelijkheden die je bij geen enkel ander medium hebt. In dit geheel dient je eigen website hier als centraal punt, waarnaar je kan verwijzen in al je communicatie.

Twitter: waar dient het voor?

Tue, 27 Jul 2010 18:04:09 +0200

In de laatste Tour De France werd het nog maar eens duidelijk. Twitter wordt veel gebruikt en de inhoud die er opstaat wordt vlot verspreid. Op Sporza.be stond constant een een blokje open waarop het laatste Tour De France nieuws verscheen. Dat blokje is een lijst van Twittergebruikers die Sporza belangrijk vindt voor de Tour De France. Het zou ook een lijst kunnen zijn van Twittergebruikers die hun bericht gemarkeerd hebben met #tdf. Dat is een hashtag. Als er iets is waar veel over gesproken wordt op Twitter komt er na verloop van tijd meestal een aanduiding om makkelijk al die berichten te bundelen. De hashtag tdf Staat dus voor Tour De France.

In Twitter kan je dus erg makkelijk kiezen wie je volgt en wie niet. En dat hoeft niet gebaseerd te zijn op een persoon. Je kan kiezen om iedereen te volgen die het heeft over Apple aandelen, massagetechnieken, badminton… Omdat je ook kan antwoorden wordt Twitter een erg interessant communicatiemiddel. Zeker als je een bekend product of merk hebt is het aangewezen om te volgen wat mensen over je zeggen en waar nodig te reageren. Heb je nog niet zo’n bekend merk? Dan kan je berichten lezen en posten die verband houden met je activiteiten. Heeft je zaak te maken met paardensport, dan kan je bijvoorbeeld Twitterberichten volgen over paardensport, manege,…

Op die manier wordt het makkelijk om te communiceren met mensen binnen je sector of met (potentiële) klanten. De berichten (of Tweets) kan je lezen op de site van Twitter (www.twitter.com) of met een speciaal programma (zoals TweetDeck). Nog een mogelijkheid is om je Tweets (of Tweets van een lijst Twittergebruikers, of Tweets rond een bepaald thema) op je website te zetten.

De Tweets zijn kleine stukjes informatie die een goed beeld schetsen van wat de wereld over een bepaald onderwerp denkt. Met alle programma’s of manieren om ze te delen heb je tegenwoordig heel veel manieren om op die stroom in te pikken. Een leuk voorbeeld dat weergeeft hoe ver je daarin kan gaan is FlipBoard. Deze applicatie voor de Apple iPad haalt alle links uit Tweets (en FaceBook berichten) van mensen die jij volgt en bouwt daar een magazine van artikels mee waar je door kan bladeren:

Het basisconcept van Twitter is erg simpel: een bericht van 140 karakters dat je kan delen met vrienden. De toepassingen die er mee kunnen bedacht worden zijn echter eindeloos. Bepaalde mensen vinden de 140 karakters beperking een uitdaging en beschouwen hun Tweets een beetje als poëzie, vergelijkbaar met bijvoorbeeld haiku’s. Tweets worden ook vaak gebruikt om informele afspraken te maken. Twunches (Twittergebruikers die gaan lunchen) of Twoozes (hetzelfde maar dan op café) zijn al een fenomeen.

Benieuwd of Twitter ook interessant is voor jou bedrijf of organisatie? Neem gerust contact op.

Programma’s om afbeeldingen te bewerken voor het web

Fri, 06 Aug 2010 18:06:40 +0200

Klanten vragen me vaak hoe ze afbeeldingen op het juiste formaat kunnen krijgen om op een website toe te voegen. Het beheersysteem vangt vaak al de meeste problemen op. Soms wil je toch nog zelf kiezen hoe een beeld wordt uitgesneden of er kleine correcties op doen. Als je jezelf wil verdiepen in de materie is een pakket als Photoshop (de commerciële marktleider) of Gimp (de gratis marktleider) een goed idee.

Als je echter maar af en toe een afbeelding moet bijwerken zijn er meer simpele oplossingen.

Op Windows is InfranView een goede optie. Er zijn geen duizenden opties, maar je kan makkelijk een foto bijsnijden, de afbeeldingsgrootte veranderen of kleurcorrecties doen.

Voor Mac is er Image Tricks waar je grotendeels hetzelfde mee kan.

Nog een ander alternatief is een online fotobewerkingspakket. Met Pixlr heb je een makkelijk te bedienen programma waarmee je alle nodige bewerkingen kan doen.

Er zijn nog honderden andere mogelijkheden, maar met één van deze drie paketten zal je alles kunnen doen om je afbeeldingen klaar te krijgen voor je website.

SilverStripe les 1: inloggen en pagina’s bewerken

Mon, 16 Aug 2010 14:25:41 +0200

De meeste sites die ik aflever draaien op het beheersysteem SilverStripe. Het is een makkelijk systeem, maar in het begin is het soms nog wat wennen. Er is een goede engelstalige handleiding beschikbaar waar je zeker eens moet doorgaan.

Als extra maak ik vanaf deze week lessen aan waarin ik de belangrijkste principes uitleg. In het filmpje hiernaast leer je het volgende:

Inloggen doe je via je het adres van je website met /admin er achter. Dus bijvoorbeeld: http://www.mijnsite.com/admin
Aan de linkerkant van het beheersysteem zie je de pagina’s in je website. Als je op een pagina klikt zie je inhoud van de pagina die je kan bewerken.
Met de knopjes boven je tekst kan je links en foto’s toevoegen.
Met create boven de paginalijst kan je een nieuwe pagina aanmaken. Je kiest hier ook het paginatype (meestal gewoon pagina).
Als je 'Drag & drop herordenen' toestaan aanvinkt kan je de pagina’s verplaatsen.

Bekijk zeker ook de andere SilverStripe lessen:

Silverstripe les 2: afbeeldingen beheren

Fri, 27 Aug 2010 17:44:06 +0200

Het beheersysteem SilverStripe dat achter de meeste sites zit die ik aflever is erg flexibel. Veel sites hebben een pagina met verschillende afbeeldingen. Met een apart paginatype kan je die afbeeldingen makkelijk beheren. In deze les laat ik je zien hoe je dat moet doen.

Bekijk zeker ook de andere SilverStripe lessen:

Moet mijn website er overal hetzelfde uitzien?

Wed, 09 Feb 2011 08:41:53 +0100

Voor bezoekers bij wie dit een erg prangende vraag is: het antwoord is nee!

Momenteel lees ik het boek Hardboiled Webdesign. In dit boek houdt Andy Clarke een warm pleidooi om elke browser de meest geschikte website te geven. Dat wil dus zeggen dat een website niet in elke browser hetzelfde werkt of er hetzelfde uitziet.

Enkel voor mensen met een groene hoed

Ik hoor je al roepen: “Moeten we dan terug naar de Browser Wars van de jaren ’90?” Ok, misschien riep je dat niet écht, maar doe even alsof, dat past beter in dit artikel.

Tijdens die Browser Wars stopte elke fabrikant naar eigen goeddunken extra functies in zijn product om concurrenten te overtreffen. Er waren geen afspraken en dat leidde tot bizarre situaties. Mogelijke klanten werden op een site weggestuurd omdat die bijvoorbeeld “Best viewed” was in “Netscape 4”. Of je kon de site helemaal niet openen als je niet met Internet Explorer werkte.

Onzin natuurlijk! De kans dat bezoekers een programma gaan downloaden en installeren, enkel om jouw site te bekijken is heel erg klein. Het kan jouw klanten niets schelen met welke software ze werken.

Vergelijk het met iemand die voor zijn winkel een bord zet met: “Deze winkel is enkel toegankelijk voor mensen met een groene hoed.” Niet zo'n sterke manier van zakendoen eigenlijk.

Andere browsers, andere noden

Na de Browser Wars begon zowat iedereen met webstandaarden te werken. Alles werd weer peis en vree. Tot de eerste webdesigner riep “Die verdomde %*$//!! browser x ondersteunt die standaard niet volledig!”. Meestal gevolgd door een paar uren gesakker om het probleem te omzeilen.

De ondersteuning voor standaarden is ondertussen al veel verbeterd. Toch gebruiken veel ontwerpers nieuwere standaarden niet omdat ze nog niet in alle browsers werken. Of ze zoeken erg ingewikkelde oplossingen om ervoor te zorgen dat een site er ook in oudere (minder capabele) browsers exact hetzelfde uitziet. Kortom, nieuwe (standaard) technologie wordt niet gebruikt en er wordt veel geld gestoken in oude systemen.

Aanvaarden we niet beter dat elke browser andere mogelijkheden heeft? Natuurlijk is het belangrijk om je inhoud voor iedereen beschikbaar te houden. Enkel toegang geven aan groene hoeden is belachelijk.

We moeten elke browser geven wat bij zijn capaciteiten past. Internet Explorer 6 is een oude browser waar veel op gevloekt wordt. Een groot stuk van het budget gaat meestal naar problemen voor deze browser oplossen.

Andy Clarke (die van dat boek, ja ik ben een beetje fan) lost het zo op: browsers die nieuwe technologie aankunnen krijgen de normale weergave:

Internet Explorer 6 wordt niet uitgesloten, maar krijgt de website op deze manier te zien:

Voor de klant heeft dit grote voordelen. Het budget dat normaal naar Internet Explorer 6 gaat kan nu beter besteed worden of voor een goedkoper project zorgen.

Steeds meer verschillende browsers

Het gaat hier wel degelijk om méér dan oude browsers op een budgetvriendelijke manier ondersteunen. Er komen steeds meer verschillende browsers bij. Er vanuit gaan dat die allemaal exact hetzelfde kunnen is niet houdbaar. Wat die browsers (en hun gebruikers) nodig hebben, is verschillend.

Meer en meer bezoekers komen tegenwoordig bijvoorbeeld met een smart phone op je website. Hun scherm is kleiner en ze hebben vaak andere doelen (snel contactgegevens vinden, een nieuwsupdate nakijken,…). Het is dus niet zo gek dat ze een andere vormgeving krijgen.

Voordelen voor de klant

Voor klanten betekent dit alleen maar voordelen:

Samen met je webbureau kan je bepalen om oudere browsers niet op dezelfde manier te ondersteunen en zo budget vrij te maken.
Je krijgt ook websites die flexibeler zijn. De site brengt de beste oplossing voor de noden van iedere browser.
Je kan ermee uitpakken bij vrienden en kennissen dat je website er niet overal hetzelfde uitziet.