Tribal Talk

hét weblog voor online ondernemers

Print Archive for the ‘Websites Algemeen’ Category

8Oct

De selectie van een webbureau

categorie: Websites Algemeen

Met veel interesse las ik eerder deze week een goed artikel over het selecteren van een webbureau van Robert Jan van Nouhuys op Frankwatching:

http://www.frankwatching.com/archive/2009/10/06/het-selecteren-van-een-webbureau-kan-en-moet-beter/.

Wat hij schrijft komt me zeer bekend voor. Er valt dan ook eigenlijk weinig aan te merken op zijn artikel, maar via deze weg wil ik toch mijn visie op dit onderwerp geven. Aangezien we zelf een webbureau zijn zal ik niet ingaan op het tweede deel van Robert Jan’s artikel (Robert Jan, ik ben zo vrij om je bij je voornaam te noemen), en neem zijn advies in dat deel ter harte. Maar hieronder wel wat opmerkingen bij de zeven tips voor opdrachtgevers:

1. Een goede voorbereiding

“… beoordelingcriteria zijn nog niet opgesteld.[ …] Bureaus die eerst aan alle criteria leken te voldoen worden afgeschoten en zo worden er telkens nieuwe partijen opgevoerd. Een zoektocht zonder einde.”

Helemaal mee eens. De criteria zijn lang niet altijd even duidelijk en veranderen nog weleens tijdens het selectieproces. Bijkomend nadeel is dat uiteindelijk appels met peren vergeleken worden. Nou begrijp ik ook wel dat input van potentiële leveranciers kunnen leiden tot nieuwe inzichten en dat als gevolg daarvan criteria in een laat stadium veranderen. Om dat te voorkomen kan het helpen om aan het begin van het traject al eens met wat leveranciers te praten over de mogelijkheden, hun werkwijze, enz.

2. Slimme overgangsmomenten

“Door eerst te werken met een onafhankelijk bureau dat  niet zelf bouwt, kan je tot een zodanige specificatie komen, dat je voor de bouw een exacte fixed price offerte kan laten maken. Hiermee sluit je veel risico’s uit.”

Gedeeltelijk mee eens. Om bovenstaande te bereiken hoef je echter niet per se de specificatie door een onafhankelijk bureau te laten maken. Er zijn bureaus (zo ook Tribal Internet Marketing) die standaard beginnen met het uitwerken van een specificatie. Zodra deze specificatie is goedgekeurd door de klant wordt een fixed price offerte gemaakt voor de implementatie. Mocht deze offerte toch tegenvallen, dan kan de klant alsnog bij andere bureaus offertes opvragen op basis van de specificatie. Zorg dus dat je de vrijheid hebt om na de specificatiefase de samenwerking te beëindigen. Zo kun je in principe voor één leverancier kiezen, maar je zit er niet aan vast als de prijs voor de implementatie uiteindelijk tegenvalt.

3. Een geolied proces

“Een goede pitch kent duidelijke stappen…”

Zoals bij punt 1 hierboven beschreven kan het helpen om aan het begin van het proces een oriënterend gesprek te hebben met wat bureaus, om zodoende voor jezelf duidelijk te krijgen wat echt belangrijk is en welke selectiecriteria relevant zijn.

4. Leg ook zachte selectiecriteria vast

“Op basis van de harde selectiecriteria wordt een long list opgesteld en vervolgens op basis van de zachte eisen een short list van de meest geschikte bureaus.”

De besproken zachte selectiecriteria zijn uiteraard erg belangrijk. Wel vraag ik me af hoe praktisch het is om op basis van deze criteria van een long list tot een short list te komen. Zachte selectiecriteria zoals motivatie, professionaliteit en inlevingsvermogen van de leverancier zijn pas goed te beoordelen na een persoonlijk gesprek. Dit is alleen praktisch uitvoerbaar als de long list niet te lang is.

5. Een leesbaar RFP

“Laat puzzelen liever aan bejaarden over. Vanuit het perspectief van het webbureau is het een zeer onaangename kennismaking met de opdrachtgever.”

Tja, misschien is het wel een goede test om te kijken hoe een bureau omgaat met een RFP waarin niet alles wordt uitgespeld. Stellen ze de juiste vragen, gaan ze er toch voor 100% voor om de opdracht binnen te halen, enz. Echter, uiteindelijk is een duidelijk RFP natuurlijk een vereiste om duidelijke antwoorden te krijgen en dus een goede selectie te kunnen doen.

6. Laat niet hele teams opdraven

“Sommige opdrachtgevers eisen bij de eerste pitch presentatie al het gehele team aan tafel. […] Vaak wordt er ook een concept design van de website gevraagd.”

Om tot een goed eindresultaat te komen is het belangrijk een iteratief proces te doorlopen. Eerst dienen doelstellingen, doelgroepen en de belangrijkste functionaliteiten bepaald te worden. Daarna volgen vaak de functionele beschrijving, de wireframes en dan pas het grafisch design. Tijdens dit traject wordt stap voor stap duidelijk hoe de website eruit moet gaan zien, maar ook welke expertise in elke stap nodig is om tot een goed eindresultaat te komen. Het heeft dus weinig zin om te eisen dat er direct een compleet team gepresenteerd wordt. En het opleveren van een concept design tijdens het selectieproces is nutteloos, omdat een aantal essentiële stappen worden overgeslagen.

7. De onderhandelingen

“…zorg er dan wel voor dat er nog voldoende ruimte in de planning is voor onderhandelingen. Een voorstel van een bureau is zelden in een keer goed.”

Wat de onderhandelingen kan bespoedigen is openheid over het beschikbare budget vanaf het begin van het selectieproces. Dit geeft bureaus de mogelijkheid om hun voorstel direct af te stemmen op de financiële mogelijkheden. Het heeft weinig zin om in de RFP te vragen om allerlei geavanceerde functionaliteiten als het budget er niet naar is. Een leverancier kan een dergelijke mismatch direct in zijn voorstel afvangen, bijvoorbeeld door bepaalde zaken optioneel te prijzen, zodat de opdrachtgever een goede afweging kan maken van functionaliteit versus kosten.

Tenslotte, er is natuurlijk altijd nog de mogelijkheid om een webbureau te selecteren zonder uitgebreid pitchproces. Bijvoorbeeld door af te gaan op goede ervaringen met een bepaald bureau van mensen in je netwerk. Of door gewoon eens met wat partijen om tafel te gaan en een snelle eerste selectie op basis van zachte criteria te maken. Vraag vervolgens om een offerte. Sluit het resultaat aan bij de verwachtingen, dan heb je jezelf een lang selectieproces bespaard.

9Sep

5 tips om website laadtijd te verminderen

categorie: Websites Algemeen Zoekmachine Optimalisatie

Verminder de laadtijd van uw website

Snelheid is op Internet de belangrijke sleutel tot succes. Kijk maar naar het succes van Google. Een belangrijke reden van het succes is de snelheid van hun zoekmachine en aanverwante producten. Door de laadtijd van je website te optimaliseren kun je conversiepercentages omhoog krijgen, klanten winnen en ze tevreden houden.

Met behulp van de volgende tips kun je de laadtijd van je website flink reduceren:

1. Optimaliseer de HTML

Begin met het verzamelen van alle ‘style’ elementen in de broncode, zodat we pure HTML code over houden. Kijk naar alle pagina’s en kijk of bepaalde elementen efficiënter kunnen worden opgebouwd. Tabellen kunnen bijvoorbeeld naar CSS worden omgezet. Als eenmaal alle <style> elementen verzameld zijn, kunnen ze in één of meerdere CSS bestanden geplaatst worden.

  • Zet alle visuele aspecten van de pagina in een CSS bestand en plaats de verwijzing bovenin de <head> sectie van de code.
  • Zet alle losse JavaScript code in externe .js bestanden en plaats de verwijzingen naar deze bestanden onderin de <head> sectie. Dit zorgt ervoor dat webbrowsers eerst de content en de visuele aspecten kunnen laden, en zich dan pas gaan bemoeien met de JavaScript van de pagina.

2. Verminder het aantal HTTP requests

Elk onderdeel van een webpagina dient een verzoek in bij de server. Als je 30 afbeeldingen op de webpagina hebt staan, dan dient iedere afbeelding een apart verzoek in bij de server. Als we spreken over een hoog aantal objecten (10+) dan domineren deze verzoeken de laadtijden van de pagina enorm. Door dit aantal objecten omlaag te brengen, verminder je het aantal verzoeken naar de server en dus ook de laadtijd van de desbetreffende pagina.

  • Converteer grafische tekst naar CSS
    Tekst op basis van afbeeldingen kosten nu eenmaal meer tijd om in te laden. Gebruik daarom CSS-style headers om dezelfde of een vergelijkbare uitstraling te krijgen.
  • Combineer externe CSS en JavaScript bestanden
    Des te minder verwijzingen er staan naar CSS en JavaScript bestanden, des te minder verzoeken er bij de server ingediend hoeven te worden.
  • Gebruik géén frames
    Jawel, er wordt nog steeds gebruik van frames gemaakt. Vraag me niet waarom. Zoekmachines zien frames als losse pagina’s en worden dan ook apart beoordeeld op relevantie. Het zorgt verder ook voor veel gebruikersvriendelijkheidproblemen.

3. Converteer JavaScript naar CSS

Er wordt veel gebruik gemaakt van JavaScript voor diverse doeleinden, waaronder menu’s. Het voornaamste probleem dat JavaScript met zich meedraagt is dat zoekmachines deze techniek niet kunnen lezen en het vereist een apart bestand dat de laadtijd weer langer maakt.

Maak gebruik van CSS i.p.v. JavaScript voor functies als iets zichtbaar/onzichtbaar maken, een dropdown, etc. Je moet uiteraard wel redelijk bekwaam zijn in zowel CSS als JavaScript om dit voor elkaar te krijgen.

4. Gebruik de juiste afbeeldingformaten en -grootten.

Afbeeldingen zijn over het algemeen de grootste bestanden van een website en nemen de meeste tijd in beslag om te laden. Het is dus van belang dat afbeeldingen zo goed mogelijk geoptimaliseerd zijn.

Maak ten eerste geen gebruik van de TIFF en BMP formaten. JPEG, GIF en PNG zijn voor websites de meest gangbare afbeeldingformaten. Elk formaat heeft weer zo z’n voor- en nadelen, en elk van deze drie formaten is weer beter toepasbaar op ander beeldmateriaal:

  • Gebruik JPEG voor foto’s, zoals productafbeeldingen. JPEG biedt de beste compressie. Er zit qua beeldkwaliteit weinig verschil tussen hoge of gemiddelde compressie, maar de bestandgrootte kan soms de helft kleiner zijn.
  • Gebruik GIF voor icoontjes, achtergronden en kleine visuele elementen.
  • Gebruik PNG voor hoge kwaliteit screenshots, transparante elementen en icoontjes.

Aanvullende optimalisatie tip:

  • Pas de resolutie van de afbeelding aan naar de exacte grootte die je op de website gebruikt. Extra resolutie die niet gebruikt wordt kost onnodig veel tijd.

5. Gebruik externe host voor video’s

Het optimaliseren van video’s heeft alleen zin als je ze zelf ook host op de website. Maar in de tijd van online video is dit meer nodig. Losse videobestanden kosten heel veel bandbreedte en vereisen handmatige optimalisatie. Door een video te uploaden, naar b.v. YouTube , Vimeo of blip.tv, en dan te implementeren op je website bespaar je internetverkeer en biedt je de video’s in hoge kwaliteit aan.

De hoofdregel bij dit alles is dat de hoofdcontent altijd voor gaat. Bezoekers willen hun gevraagde informatie direct kunnen benaderen. Zorg er daarom voor dat de gevraagde content altijd als eerste geladen wordt. Als bezoekers op een pagina terecht komen waar ze gebruik willen maken van een bepaalde applicatie, laadt dan eerst die applicatie in en dan de rest.

Ik hoop dat dit artikel geholpen heeft, en website-eigenaren aan het denken heeft gezet. Uiteraard zijn er nog meer tips om laadtijd te verminderen die ik heb overgeslagen. Laat ze achter in de reacties hieronder!

12Aug

Handige tools voor webdesigners & developers

categorie: Websites Algemeen

webdesign-toolsAls het gaat om het ontwerpen en ontwikkelen van websites is er aan handige tools absoluut geen gebrek. Of het nu gaat om het maken van een interactie of grafisch design, de technische implementatie of het plannen van een project, je zult niet snel met legen handen staan. Hieronder vind je een aantal tools die ikzelf bijzonder nuttig vind.

Plannen is vooruitzien
Stel je staat aan het begin van een web project. Tenzij je die handige buurjongen bent die in z’n uppie wel even een website in elkaar zet, zul je al snel iets van een planning willen maken. Natuurlijk zijn er betaalde tools zoals MS Project, maar voor het maken van een planning zul je meestal voldoende hebben aan een open-source alternatief GanttProject genaamd. De naam zegt het al, je kunt er Gantt diagramen mee maken. Maar ook een PERT diagram en een resource planning is zo gemaakt.

Functioneel design
Vervolgens maak je natuurlijk functionele schetsen van de website in de vorm van wireframes. Een geweldige tool daarvoor is Axure. Deze tool is niet gratis, maar is de investering meer dan waard. Het tekenen van wireframes is een kwestie van het slepen en plaatsen van webcomponenten (zoals radio buttons, check boxes, enz.). Extra bijzonder is dat je van de wireframes met het grootste gemak een klikbaar HTML prototype genereert, zodat je direct inzichtelijk maakt hoe de interactie binnen de website eruit gaat zien.

Tekstvlakken binnen de wireframes vul je vervolgens door gebruik te maken van de Blind Text Generator. Deze website genereert de veel gebruikte ‘Lorum ipsum’ teksten, maar je kunt ook kiezen voor alternatieve teksten van bijvoorbeeld Cicero of Kafka.

Fonts maken het verschil
Bij het maken van het grafisch design is Font Tester een handige website om te experimenteren met verschillende lettertypes. Natuurlijk kun je ook in Photoshop je typografie bepalen, maar dan zie je nog niet hoe de lettertypes er in (verschillende) web browsers uitzien en dan kun je nog weleens voor verrassingen komen te staan.

Kleuren & paletten
Ook voor het bepalen van kleuren zijn interessante hulpmiddelen beschikbaar. Zie je op een andere website een kleur die je mooi vindt, dan bepaal je met één klik de exacte kleurcode met de ColorZilla Firefox plugin. Deze kleurcode kun je vervolgens invoeren op de Color Scheme Designer website en op basis van die kleur wordt automatisch een compleet kleurenpalet voor je gegenereerd. Een andere leuke manier om aan een kleurenpalet te komen is door gebruik te maken van de ColorSuckr Firefox Plugin of de ColorSuckr website. Hier kun je onder andere een foto uploaden waarvan je de kleuren mooi vindt, en hieruit wordt vervolgens een kleurenpalet gedestilleerd.

Meten is weten
Heb je de behoefte om snel even te meten hoe groot bepaalde elementen op een website zijn, of in een Axure HTML prototype, gebruik dan de MeasureIt Firefox plugin. Selecteer een deel van het scherm en je ziet direct de bijbehorende afmetingen.

Taken & bugs
Als je website de ontwikkelingsfase ingaat, dan heb je wellicht de behoefte om taken toe te wijzen aan verschillende ontwikkelaars en te monitoren wat de voortgang is van het project. Een erg goede tool hiervoor is JIRA. Aangezien JIRA webgebaseerd is heeft iedereen in het ontwikkelteam te allen tijde een compleet beeld van de openstaande taken, verantwoordelijkheden en voortgang.  Na de gratis trial periode moet een licentie betaald worden, maar voor grotere complexere ontwikkelprojecten verdien je dit snel terug.

Ook tijdens het testen van de website komt JIRA zeer goed van pas bij het rapporteren van de onvermijdelijke bugs. Vaak kun je makkelijker uitleggen wat het probleem is aan de hand van een screenshot van de web pagina. JIRA heeft een speciale feature waarmee screenshots makkelijk als afbeeldingen kunnen worden toegevoegd. En die screenshots maak je enorm snel en makkelijk met een geweldige tool; Jing. Hiermee selecteer je met het grootste gemak het relevante deel van je scherm. Teken er een pijl of kader bij, voeg eventueel wat tekst toe en kopieer het geheel naar je klembord of naar een URL, zodat je het resultaat makkelijk met anderen kunt delen.

De hier besproken tools vormen uiteraard slechts het tipje van de ijsberg, maar zijn wellicht toch bruikbaar voor je. Heb je zelf nog onmisbare aanvullingen? Laat gerust een reactie achter ;-)

5Aug

Website verhuizen? Zo ziet dat eruit!

categorie: Websites Algemeen

easy-animatie-website-verhuizing-3-extraEasy Internet Marketing (dochter van Tribal) lanceert vandaag een nieuwe website op een nieuwe domeinnaam. In een animatie op die site is te zien hoe de oude pagina wordt ingepakt en de nieuwe tevoorschijn komt.

Verhuizing naar nieuw domein: Easy.nl
Reden hiervoor is het nieuwe design maar vooral ook de nieuwe URL van de website van Easy Internet Marketing. Voorheen was de site te vinden op www.e-asy.nl aangezien de versie zonder het streepje destijds niet beschikbaar was. Hier kwam een paar weken geleden verandering in, toen easy.nl te koop werd gezet. Easy directeur Ron Castelijns hierover:

“Het lijkt een detail maar vooral in de communicatie met klanten bleek het streepje in de URL erg lastig. Toen de variant zonder het streepje onlangs via een internetveiling te koop werd aangeboden is het gelukt deze te kopen. Het was de investering waard. De nieuwe domeinnaam ligt veel meer voor de hand en voorkomt miscommunicatie. We zijn er blij mee en daarom besteden we extra aandacht aan de website verhuizing.”

Meer info over deze animatie vind je op de site van Easy Internet Marketing.

28Jul

XML sitemaps: Het hoe, wat en waarom

categorie: Websites Algemeen Zoekmachine Optimalisatie

Over het algemeen zijn er twee soorten sitemaps. De HTML sitemap en de XML sitemap. De HTML sitemap wordt door bezoekers van de website gebruikt om de informatie te vinden die ze nodig hebben. De XML sitemap wordt gebruikt om de pagina’s van een website effectiever door zoekmachines te laten indexeren. In dit artikel zal ik aangeven waarom XML sitemaps nuttig kunnen zijn, hoe je ze moeten maken en hoe ze aan te melden bij Goositemap_icon_mangle.

Waarom zijn sitemaps nodig?

Sitemaps zijn niet per se noodzakelijk. Als de website technisch op orde is, zijn zoekmachines in staat de pagina’s van je website te analyseren en te indexeren. Zoekmachines weten echter niet:

  • Welke pagina’s belangrijk zijn
  • Welke pagina’s vaak bezocht worden en welke niet
  • Hoe de structuur van de website in elkaar steekt.

Zoekmachines tasten zonder sitemap als het ware in het duister. Met behulp van sitemaps begrijpen ze de website beter, en zullen de belangrijke pagina’s ook vaker bezocht worden door de zoekmachines. Bovendien zijn sitemaps bijzonder handig als jouw website dynamische inhoud bevat, of pagina’s heeft die AJAX of Flash bevatten.

Mocht je dezelfde content hebben die via verschillende URL’s te benaderen is, dan kun je ook dubbele content issues voorkomen door in de sitemap voorkeur te geven aan de URL die je geïndexeerd wilt zien.

Hoe maak je een XML sitemap?

Er zijn veel gratis online softwarepakketten om sitemaps aan te maken. Ik noem hier enkele voorbeelden:

XML-Sitemaps.com

    Simpel en eenvoudig online te gebruiken. Meld de URL van je website aan. Vul enkele basisgegevens in, zoals de datum en prioriteit. De gehele sitemap wordt online gegenereerd. De gratis versie van deze sitemap generator is wel beperkt tot 500 pagina’s. Tegen een kleine vergoeding kun je ook gebruik maken van hun onbeperkte versie waar dus geen paginalimiet op zit.

  1. Gsite Crawler
  2. Je moet de URL van de website en de bestandstypen opgeven. De prioriteitsinstellingen worden automatisch gedetecteerd. Deze geeft bovendien een overzicht van broken links etc. Handig als je een wat grotere website hebt.

  3. Google Sitemap Generator
  4. Dit is wel de meest uitgebreide sitemap generator, maar ook gelijk de lastigste om geïnstalleerd te krijgen. Je moet namelijk enigszins bekend zijn met Python programmeertaal. Je zult daarom wel enige technische kennis moeten hebben om deze applicatie werkende te krijgen. Niet aan te raden voor de beginner. Maar eenmaal gestart is het wel één van de betere toepassingen.

Sitemap aanmelden via Google Webmaster Tools

Zodra je een XML sitemap hebt aangemaakt met behulp van bovenstaande programma’s, kun je hem in drie stappen aanmelden bij de Google Webmaster Tools:

Stap 1

Wanneer je bent ingelogd, word je geleid naar de startpagina waar je nieuwe websiteprofielen kunt aanmelden of reeds aangemelde websiteprofielen kunt selecteren.

site-toevoegen

Stap 2

Als je eenmaal een nieuw profiel hebt toegevoegd middels bovenstaande functie – zie screenshot – zal de website geverifieerd moeten worden. Klik hiervoor op de knop die naast de website staat.

site-verifieren

Hiervoor krijg je twee verificatie opties:

  • Een unieke META-tag toevoegen in de header van de website
  • Een uniek HTML bestand uploaden in de root van de website

Kies je voor het uploaden van een HTML bestand dan is het van belang dat incorrecte of achterhaalde URL’s een 404 server code mee krijgen, anders zou ieder bestand ter verificatie voldoen. Dit kun je controleren met elke willekeurige
server header checker.

sitemap-aanmelden

Stap 3

Is de website eenmaal geverifieerd dan navigeer je naar “Siteconfiguratie” waar onder een link staat genaamd “Sitemaps”. Vul daar de URL aan met de locatie van de XML sitemap en klik op “Sitemap verzenden”. Geef Google wat tijd om alle informatie van de sitemap te verwerken. Dit is uiteraard afhankelijk van de hoeveelheid URL’s die er in verwerkt zijn. Eenmaal goedgekeurd door Google, kun je de statistieken van Google Webmaster Tools in gaten gaan houden met opties aan de linkerzijde.

Je XML sitemap moet nu goed aangemeld zijn bij Google. Doe er je voordeel mee!