Een responsive website briefing maak je zo

In deze blog deel ik vijf onderdelen en tips voor het maken van een goede briefing voor responsive websites. 

Wat is een responsive website?

In het kort: Een responsive web design past zichzelf aan op de diverse schermformaten van tablets, smartphones en desktop PC’s, zonder dat de URL van de website verandert. Een responsive design toont dus dezelfde content op elk apparaat en bestaat uit één en dezelfde code. Een responsive website reageert ook op het kleiner of groter worden van het browser-formaat, zodat deze makkelijk gebruikt kan blijven worden door website bezoekers.

 

 

Daarom een responsive website

De gedachte alleen al zal bij sommigen het zweet doen uitbreken: Een website geschikt maken voor mobiele gebruikers. Zo ook bij mij, toen ik een webdesign bureau moest instrueren voor het maken van een responsive website. Angst voor hoge kosten, veel ontwikkelingstijd of onwetendheid over mobiele technologie en webdesign, zorgen op zo’n moment voor veel onzekerheid.

 

‘Mobiele plannen’ worden door deze onzekerheid nog weleens uitgesteld of het volledige ontwikkelingstraject wordt uitbesteed terwijl gelijktijdig de verleiding heerst om een responsive website tegen zo laag mogelijke kosten en op korte termijn te laten ontwikkelen.

Toegeven aan deze verleiding heeft regelmatig tot gevolg dat belangrijke of zelfs essentiële functies en navigatie-elementen ontbreken. Hierdoor duurt het uiteindelijke ontwikkelingstraject langer dan verwacht, waardoor je als opdrachtgever duurder uit bent of met een responsive website opgescheept zit die niet voldoet aan jouw wensen en die van de bezoekers.

Voordelen van een responsive website

Het is goed om de voordelen van een responsive website voor jezelf en/of jouw werkgever op te sommen. Zo kan je jouw werkgever overtuigen met argumenten (en wellicht ook cijfers) om over te gaan op een responsive webdesign. Enkele voordelen van een responsive webdesign zijn:

1. Een betere waardering en mobiele indexering bij Google;

   

2. Producten, teksten en afbeeldingen kunnen prominenter getoond worden;

   

3. Directe contactmogelijkheden zoals een aanklikbaar telefoonnummer en een zakelijke WhatsApp klantenservice;

   

4. Geen extra of aparte werkzaamheden voor het beheer van een losstaande mobiele site. SEO en online marketingcampagnes gelden voor mobiel, tablet en desktop;
5. Het groeiende aantal mobiele bezoekers, inclusief tablet gebruikers, hebben een leesbare en eenvoudiger te gebruiken website. Dit voorkomt hogere bounce rates (bezoekers die afhaken), wat voor Google 1 van de 200 ranking indexatie factoren is;
6. Responsive webdesigns zijn overwegend sneller, wat wederom een belangrijke indicatie is voor Google en het levert bezoekers een betere gebruikerservaring op;

   

7. Hogere Click-Through-Rates, dankzij een overzichtelijker design en meer prominente aanwezigheid van buttons;
8. Meer terugkerende bezoekers en;
9. Meer verkoop.

De website briefing als checklist

Onderstaande opzet voor een briefing levert een gedetailleerde opdrachtformulering op voor de webdesigner.

Je denkt na, liefst samen met collega’s, over ontzettend veel onderdelen. Dit kost  tijd, maar het is uiteindelijk vele malen goedkoper dan een responsive website opgeleverd krijgen, waar achteraf nog allerlei aanpassingen aan gedaan moeten worden.

Met de briefing beschrijf je onder andere de diverse ideale navigatie-routes voor de verschillende typen bezoekers. Ook schets je een beeld van de manier waarop het beheer van de site er uit moet zien. Dat gaat dus een stuk verder dan het opstellen van een briefing voor alleen het website ontwerp.

Na het ontwikkelen van de eerste versie van de responsive website is de briefing nog steeds waardevol. Uiteindelijk is het een document waarmee de designer(s) een goede, toekomstgerichte offerte aanlevert. Eventueel met specificaties van kosten voor de benodigde (en toekomstige) functionaliteiten in versie 1.1 tot 2.0. Een website designer heeft veel aan een goede briefing, omdat er duidelijk is wat er van hem of haar verwacht wordt. En voor jou dient het als handige checklist. De briefing bevat tenslotte tot in detail een beschrijving van alles dat volgens het bedrijf nodig is, om een goede responsive website te lanceren. Zo kan je de briefing tijdens regelmatig overleg met de designers en programmeurs, gebruiken als leidend document.

De vijf onderdelen van een mobiele website briefing

1. Het idee

In dit onderdeel beschrijf je in twee á drie zinnen het concept van de website en de waarde hiervan voor de doelgroep(en). Naast het concept is het belangrijk om hier ook te beschrijven wat voor typen content er op de website komen te staan. Denk bij ’typen content’ bijvoorbeeld aan productbeschrijvingen, nieuwsberichten, achtergrondartikelen, video of audio en te gebruiken visuals. Beschrijf ook kort per doelgroep waarom de website interessant voor hen is. Eventueel kan je ook de ideale navigatie-paden schetsen en visualiseren waar een bezoeker de site binnenkomt en hoe die vanuit hier kan navigeren naar andere pagina’s.

2. Functionaliteit

In dit gedeelte beschrijf je per doelgroep de functies die een responsive website moet hebben. Het kan slim zijn om dit per ‘gebruiker’ (of doelgroep) te specificeren. Zo zal een webredacteur of website beheerder van andere functionaliteiten gebruik maken dan een adverteerder, (potentiële) klant of partner.
Functionaliteiten die je hier beschrijft zijn bijvoorbeeld het registratieproces van een bezoeker om lid te worden van de nieuwsbrief of om een account aan te maken, inclusief een specificatie van de (optioneel verplicht) in te vullen gegevens (naam, mail-adres en/of meer). De mogelijkheid om reacties te geven op content, contact op te nemen met de website beheerder of pagina’s te delen op social media, staat eveneens in dit gedeelte. Ook beschrijf je wat de webredacteur(en) met het CMS-systeem moet kunnen doen, zoals het aanpassen van zijn/haar profiel met tekst of verwijzingen naar zijn of haar social media links. Ook functies die hij moet kunnen gebruiken zoals het toevoegen van nieuwe pagina’s, meta-titels en -beschrijvingen, artikelen, video’s, tags, categorieën, sub-titels etcetera komen hier terecht.
Voor elke doelgroep beschrijf je (het liefst tot in detail) wat zij moeten kunnen doen op de website. Zo voorkom je dat er achteraf onduidelijkheden zijn of cruciale functionaliteiten ontbreken. Het zou toch zonde zijn als een klant zich bijvoorbeeld niet kan registreren voor dat mooie evenement dat je net aangekondigd hebt op de website. Of als een bezoeker geen zoekmachine kan gebruiken om een bepaald product of artikel te vinden waar hij of zij naar op zoek is.
Denk ook aan de manier waarop de eerder beschreven typen content gepresenteerd kunnen worden. Wellicht zijn er bepaalde typen content of advertenties die je bijvoorbeeld wil kunnen uitlichten op de home page of andere (gedeeltes van) pagina’s. Dit komt eveneens in de functionaliteit beschrijving terecht.

3. Interaction design

Het interaction design beschrijft naar welke pagina’s bezoekers moeten kunnen navigeren en (eventueel) waar de verwijzingen (buttons) naar deze pagina’s te vinden zijn en hoe die eruit zien. Dit kan onder andere in een schema gevisualiseerd worden. (Zie voorbeeld hieronder) Ben je creatief en wil je ook tot in de puntjes beschrijven wat er bijvoorbeeld gebeurt wanneer iemand op een pijltje drukt of wanneer iemand met een muis over knoppen, galerieën en andere website-elementen hovert, dan noteer je dat in dit gedeelte van de website briefing. Als inspiratiebron kan je hiervoor ook kijken op littlebigdetails.com

4. Look & feel

De ‘Look & feel’ geeft de designers een idee van de gewenste uitstraling die de site moet hebben. Zelf verwijs ik in dit gedeelte graag naar bestaande websites, om te illustreren naar wat voor uitstraling ik op zoek ben en wat voor eerste indruk ik de bezoeker wil geven. (Zakelijk, strak, formeel vs informeel etc.) Als ik verwijs naar Porsche.com bijvoorbeeld, dan licht ik ook toe waarom (rustige uitstraling, prominent gebruik van visuals) en/of welke specifieke onderdelen van deze website mij aanspreken (sliders, buttons etc.). Daarnaast is het van groot belang om ook te verwijzen naar websites die niet de gewenste look & feel hebben, zodat de designer niet de mist in kan gaan.

Op deze manier kan een designer in slechts enkele minuten een goed beeld vormen van wat je wel en niet wil voor de look&feel  van de responsive website.

 

 

5. Toekomst

Als je toekomstplannen hebt, die één van de onderdelen van de site op wat voor manier dan ook kunnen beïnvloeden, komen die hier terecht. Wie weet moeten de programmeurs hier namelijk nu al rekening mee houden, tijdens de bouw van de eerste versie. Een content-gedreven website, kan in de toekomst bijvoorbeeld ook diensten of evenementen aanbieden. Wellicht dat er dan ook een betaalsysteem geïntegreerd moet worden in de toekomst. Een webdesign bureau kan al deze zaken opnemen in de offerte, zodat er een beeld ontstaat van de kosten die verwacht kunnen worden voor toekomstige nice-to-haves en/of must-haves.

6. Techniek

Eventuele voorkeuren voor (open source) CMS-systemen en andere technische zaken kan je hier opnemen. Wil je dat men de responsive site ook als web-/app-icon op zijn of haar tablet en smartphone kan installeren? Dan noteer je hier bijvoorbeeld dat bezoekers hierover genotificeerd moeten worden. Ook pop-ups, zoals een Cookie-melding, worden hier genoteerd. Vergeet ook niet te vermelden met welke Analytics software je werkt en wat je allemaal wil kunnen meten. Zo kan er bij oplevering direct gemeten worden hoe de website gebruikt wordt en hoe de eventuele shop- en lead-generatie elementen presteren.

Tot slot…
Een responsive website ontwerpen kan kostbaar en tijdsintensief zijn. Vaak ontbreekt de tijd om op belangrijke momenten betrokken te zijn bij het ontwikkelingstraject. Probeer daarom vooraf afspraken te maken met de designers over terugkoppelmomenten. Er zijn webdesign bureaus die, voordat er geprogrammeerd wordt, eerst diverse visuele voorstellen doen van de te bouwen pagina’s. Dit kan, net als na het testen van de mobiele site, een goed moment zijn om een afspraak te maken. Vraag ook altijd aan het bedrijf of zij met inhouse programmeurs op locatie werken, of met programmeurs uit het buitenland. Qua communicatie kan een externe programmeur namelijk nog weleens voor strubbelingen zorgen en het is goed om hiervan op de hoogte te zijn.

Heb je behoefte aan ondersteuning of advies nodig voor een goed responsive website ontwerp?

Neem dan contact met mij op.

Ik help je namelijk graag bij het vertalen van jouw wensen naar een goede responsive website.

Tips, suggesties of opmerkingen zijn natuurlijk altijd welkom door een reactie onder dit artikel te plaatsen.