Twist Ontwerp Digizine#2 responsive webdesign

Digizine inspiratiemagazine #2 - 2015

Op de bank, in de trein, op kantoor...

Is jouw website geschikt voor mobiel? SEO-tips!

Design: het belang van beleving

Kies voor een duurzame website Checklist: in 5 stappen een goede homepagina

responsive

Overal online!

responsive

2

“Choose a job you love have to work a day in

Welkom!

pagina 4-5 We zijn overal online: op de bank, in de trein, op kantoor... Het aantal schermen neemt daarbij hand over hand toe, van breedbeeld TV tot smartwatch. Hoe bouw je aan een duurzame website waar je weer jaren mee vooruit kunt? pagina 6-7 Is design belangrijk voor een succesvolle website?

Ja, blijkt uit onderzoek. Slechte vormgeving kost klanten! pagina 8-9 Wij houden van lijstjes. Check 5 tips voor je HOME en onze poster met handige weetjes over mobiele trends. pagina 10-11 Met responsive design hoger in Google doe je zo: SEO-tips!

Veel leesplezier!

Margriet Twisterling

e and you will never your life” Confucius

foto: Margreet Vloon

responsive

Het thema van dit digizine is ‘Responsive Webdesign’. Sinds november 2014 geeft Google mobiele websites een aparte status in de zoekresultaten. En onlangs, op 21 april 2015, paste Google zijn algoritmes aan die bepalen hoe hoog jouw website in de zoekresultaten wordt weergegeven. Daarbij bevoordeelt Google websites die op àlle apparaten goed leesbaar zijn. Google heeft als grootste zoekmachine in Nederland veel invloed op het aantal mensen dat jouw website weet te vinden. Wil je online goed zichtbaar blijven en heb je nog geen mobiele website, dan is nu actie ondernemen écht noodzakelijk.

Dit digizine helpt je erbij. Heb je nog vragen? Bel ons!

3

De duurzame website Breedbeeld TV - Desktop - Laptop - Tablet Smartphone - Smartwatch - Googleglass - ............?

responsive

W

4

e zijn overal online: op de bank, in de trein en op kantoor. Het aantal schermen neemt daarbij hand over hand toe, van de hele grote schermen, zoals een breedbeeld TV, tot hele kleine schermen zoals de smartwatch. We ‘multi-screenen’ en bezoeken websites vanaf meerdere apparaten, soms zelfs op hetzelfde moment. De vraag is hoe

je hierop in kunt spelen: hoe maak je je website klaar voor de toekomst? Het is onmogelijk om nu al te zeggen hoe de techniek er over vijf jaar uitziet. Hadden we gedacht dat de CD zo snel zou verdwijnen? De DVD-speler? Nee toch?

Ontwikkelingen volgen elkaar in hoog tempo op. Dus wat is het recept voor een duurzame website, die je niet elke

foto: Margreet Vloon

2-3 jaar helemaal hoeft te vernieuwen?

Voor het antwoord kijken we naar de onderdelen waaruit een website bestaat.

Platform, design en inhoud In principe bestaat een website uit drie delen: het platform, het design en de inhoud. Als het gaat om het platform dan bestaat dit uit een framework met een Content Management Systeem (CMS) waarmee je de website kunt beheren. De vormgeving van de website wordt beschreven in het design. Alles wat de gebruiker ervaart, hoort daarbij.

Van logo tot laadsnelheid en van navigatie tot foutmelding. De inhoud (content) kan uit tekst, beeld, geluid en video bestaan. Wil je onafhankelijk van de techniek je website kunnen aanpassen aan nieuwe inzichten en veranderende markten, dan moet je inhoud volledig gescheiden blijven van het design en de code. Zo kun je de presentatie van je website gemakkelijk veranderen, zonder de website helemaal opnieuw te hoeven bouwen. Dit kan

Bron: mediaweb.nl

omdat de visuele lagen (de zogenaamde templates) gescheiden werken van de content en de techniek. Een nieuwe huisstijl betekent dan niet gelijk een nieuwe website.

Responsive webdesign ‘s Morgens kijk ik altijd even op de iPad welk weer het wordt. Op kantoor heb ik mijn smartphone vlak naast me liggen om te ‘appen’ of te ‘skypen’ met thuis terwijl ik werk op mijn desktop computer. ‘s Avonds surf ik op onze smart-TV. Wat zou het toch geweldig zijn om op al die apparaten dezelfde gebruikerservaring van websites te hebben! Veel websites zijn hier echter helemaal niet voor uitgerust.

Er is wel een oplossing: responsive webdesign. Een responsive website is zodanig ontworpen dat hij zichzelf aanpast aan elk denkbaar scherm. Je hebt dan één website, één content management systeem en één merkbeleving op alle platforms. Als dat niet duurzaam is...

Wil jij een responsive website voor jouw bedrijf of organisatie? Neem dan contact op met Margriet voor een vrijblijvend inspiratiegesprek.

responsive

Margriet: “Een duurzame aanpak bespaart je tijd én geld.”

5

80%

kiest voor een product of dienst van een concurrent, omdat deze een mooiere website heeft

Design: het belang van beleving De tijd dat de buurjongen de website mocht ontwerpen ligt gelukkig ver achter ons. Maar er zijn nog steeds veel webbureau’s die beweren dat de vormgeving helemaal niet van belang is voor je website. Tja... van de internetgebruikers voor de concurrent kiest, wanneer zijn site aantrekkelijker is vormgegeven. Daarom ons advies: investeer niet alleen in goede techniek, snelle laadtijd en een slimme menu-indeling, maar vooral ook in beleving, style en tone-of-voice!

responsive

Wij zijn de eersten die functionaliteit en gebruiksgemak voorop stellen. Uit een onderzoek van Visible Logic blijkt dat 95% van de ondervraagden hecht aan een snelle, functionele website en anders wegzapt. Uit hetzelfde onderzoek blijkt echter ook dat 80%

74%

verlaat regelmatig een site vanwege de slechte vormgeving

6

Een goed design sluit aan bij de doelgroep waarop je je richt. Verdiep je dus in je doelgroep. De beste methode is om een testpanel te vragen wat ze vinden van het ontwerp.

Veel klanten vinden het heel erg leuk om met je mee te denken!

Weber heeft goed begrepen dat het niet om het kookproduct gaat, maar om de sfeer eromheen. Geweldige website!

Hoe belangrijk is het design?

89%

belangrijk

9%

geen mening

2%

niet belangrijk

“Design can be art.

Design is so simple,

responsive

Design can be aesthetics.

THAT’S WHY

7

it is so complicated.”

Paul Rand

Checklist HOME page

Weet

Meer succes in 5 stappen Hoewel niet iedereen de HOME-pagina op je website als eerste zal zien, is dit toch een heel belangrijke pagina.

Iedereen klikt vroeg of laat door naar de HOME. Hoe wordt deze succesvoller?

van de volwassenen de mobiele website bedrijf net zo goed dan hun desktop si worden.

responsive

1 herkenning

8

Een open deur, maar toch zo belangrijk dat we ‘m niet kunnen overslaan. De identiteit van je organisatie moet direct zichtbaar zijn op de HOME. Linksboven het logo en gebruik de juiste kleurstelling, lettertypes en beeldtaal.

2 tagline

Direct bovenin, liefst naast het logo, vertel je in een paar woorden wat het doel van de website is. Probeer hier niet creatief te zijn, maar zorg ervoor dat bezoekers in één oogopslag kunnen begrijpen wat je aanbiedt.

gebruikt meerdere apparaten tegelijkertijd

3 duidelijke navigatie

Mensen houden er niet van om lang te zoeken. Zet je menu bovenin en kies duidelijk teksten voor de knoppen.

4 doseer

Ken je het gezegde ‘door de bomen het bos niet meer zien’? Op veel websites worden bezoekers met zoveel informatie overspoelt, dat ze er helemaal niet aan beginnen. Durf dus te kiezen: welk product of dienst is het belangrijkste? Gebruik korte teksten en verwerk direct een ‘call to action’ (wat wil je dat je bezoeker doet?).

5 verleid

Bezoekers scannen je pagina en weten dan direct: hier ben ik op de goede plek! Verleid je gasten bijvoorbeeld met video, mooi beeld, actuele inhoud en interessante links en beloon interactie met interessante (gratis) informatie of een andere waardevolle propositie.

mobie nu goe

v w

le e i b o m

etjes over het web mobiele gebruikers zullen desktopgebruikers overtreffen vóór het einde van 2015.

n denkt dat e van een d of beter ite moet

van de internetgebruikers maakt dagelijks gebruik van een smartphone.

van de gebruikers zegt dat als een website niet goed werkt op hun smartphone, ze er geen vertrouwen in hebben dat ze goed voor hun klanten zorgen.

d.

van de smartphone- en tabletgebruikers hebben geklaagd dat websites niet geoptimaliseerd zijn voor mobiele apparaten.

el verkeer is ed voor

van al het webverkeer.

responsive

Volgens

van de gebruikers hebben meer kans om een aankoop te doen met een smartphone van een bedrijf dat een mobiel -vriendelijke website heeft.

van de tablet-gebruikers hebben gewinkeld op hun tablet in de afgelopen 30 dagen.

van de smartphone en tablet -gebruikers zijn gefrustreerd over de laadtijd. Responsive design moet dus snel en vloeiend te zijn.

Bron: lwsmarketing.co.uk

9

Met responsive design hoger in Google responsive

bezoek de websites voor de responsive ervaring met je smartphone

10

V

roeger, zo’n jaar of zes(!) geleden, werden websites eigenlijk alleen bezocht met desktop- en laptopcomputers. Inmiddels hebben smartphones en tablets de wereld op zijn kop gezet en komen er steeds meer apparaten bij.

De aloude website voldoet niet meer. Open je zo’n website op je smartphone en wordt de hele site verkleint tot de breedte van het beeldscherm, dan valt er geen letter meer te lezen, laat staan dat je op een knopje kunt klikken.

Tip 1: Schaalbaarheid Er zijn inmiddels meerdere technieken ontwikkelt om alle verschillende schermgroottes te kunnen aansturen. Zo kun je kiezen voor een aparte mobiele website naast je gewone website, is er ‘adaptive’ webdesign en ‘responsive’ webdesign. In de meeste gevallen is responsive webdesign de goedkoopste en handigste keuze. Alle bedrijven die overstappen op een nieuw systeem dat rekening houdt met mobiel gebruik, zien een flinke toename van het aantal mobiele bezoekers. Niet in de laatste plaats omdat we steeds vaker onze smartphone gebruiken op sociale media en via die kanalen onze informatie vinden. Je kunt met een een-

Bron: mediaweb.nl

voudige test van Google controleren of je website al geschikt is voor mobiele apparaten.

Tip 1: SEO-tips Ook snelheid is een punt dat aandacht verdient.

Laad je website niet snel genoeg, dan klikt de bezoeker alweer weg. Met de PagesSpeed Insights tool van Google kun je meten hoe snel je website is. Wanneer je website geschikt is voor mobiel gebruik én voldoende snelheid heeft, kun je nog twee acties ondernemen om hoger in de zoekresultaten te worden weergegeven. De eerste is door deelopties aan te bieden. Het tweede is door het invoeren van metadata. Met metadata geef je een logische structuur aan je website, die door de zoekmachines beter geïndexeerd kan worden.

Wil je dat je website ook in de toekomst vindbaar blijft, zorg dan in ieder geval dat: • Je website mobielvriendelijk is • Je website snel is, ook op smartphones • Je content deelbaar is (deelopties) • Je content is voorzien van metadata

GEMEENTE TILBURG >

TRIAS >

RENOVATIE PLANNER >

responsive

ART OF THE CAP BY SPEEDO >

11

ELFERINK MODE >

PROFIPRODUCTS >

ZP NETWERKEN >

BLAUWVINGER ENERGIE >

Google geeft aan of je website geschikt is voor mobiele apparaten.

creatieve identiteitsmarketing

thema #3:

Content en Storytelling

Wil je bericht ontvangen als het volgende Digizine verschijnt?

Schrijf je dan in voor mijn nieuwsbrief!

Š Twist Ontwerp & Advies

(038) 421 03 09

info@twistontwerp.nl

www.twistontwerp.nl