responsive design & merkbeleving

responsive design & merkbeleving responsive design & merkbeleving

responsive design & merkbeleving

Onderzoeksverslag Responsive design & merkbeleving Door Nils Vermeulen, 11 juni 2014 Studentennummer: 1605820 Docent: Tom Wolvers

Inhoudsopgave

2

Samenvatting

3

Inleiding

5

Onderzoeksvragen

6

Bevindingen

7

Eindconclusie

17

Bronnen

18

Bijlage

19

Responsive design & Merkbeleving | 2

Samenvatting Tijdens mijn stage bij Enof Communicatiegroep was er veel aandacht voor responsive webdesign. Er hing een mobile wall waarop direct te zien was hoe een website er op verschillende apparaten uitzag. Kleur kwam matig terug en het lettertype was voornamelijk Arial. Er werd vooral gekeken naar de functionaliteit. Gebruikersgemak is belangrijk, maar het visuele aspect van een merkbeleving mag niet achterblijven. Vandaar ontstond mijn interesse in dit onderzoek. Hoofdvraag

‘Hoe blijft het visuele aspect van een merkbeleving overeind in een responsive (web)design?’ Deelvragen • Waarom kiest men voor responsive design en niet voor alternatieve mogelijkheden? • Hoe ontwikkel je een responsive design en op welke manier verwerk je het in een stijlgids? • Wat zijn de kenmerken van een responsive identity? • Is een responsive identity de toekomst van elk bedrijf/merk, of is het enkel voor grote bedrijven/merken op de markt? Responsive (web)design: Responsive webdesign gebruikt een serie layouts waarin, bij elke variant, het schalen vloeiend (fluid) verloopt. Hierdoor dekt responsive de meeste schermgroottes zonder dat het een negatief effect heeft op de gebruikerservaring. Het nadeel is wel dat voor elke grootte een aparte afbeelding beschikbaar moet zijn. Op mobiele apparaten kan het laden van een afbeelding bijvoorbeeld erg lang duren als deze in volle resolutie wordt afgebeeld. De techniek Responsive websites zijn gebouwd op een fluid/liquid grid. Ze gebruiken media queries (adaptive) zodat het ontwerp en de content, waarneer het venster groter of kleiner wordt, meeschalen. In het boek responsive webdesign van Ethan Marcotte (2011) spreekt men over drie hoofdingrediënten: 1. Een flexibel, grid-based layout 2. Flexibele afbeeldingen en media 3. En mediaqueries (verwerkt in de CSS3-code) Sinds HTML 5 zijn intrede deed kan men voor mobiele aparaten, los van de ‘normale’ website, een web app ontwikkelen die dezelfde look en feel heeft als een (native) app. Een web app is een goede toevoeging, of vervanging, voor het responsive reageren van een website. Naar een styleguide Voor het ontwikkelen van een responsive design is het belangrijk om geen voorbeelden te geven van vaste ontwerpen. Belangrijk is om designen interface-elementen (iconen, headers, etc) bij elkaar te zetten op een styleboard. Zo wordt een beeld getoond van hoe men het ontwerp voor ogen heeft, zonder te gedetailleerde voorbeelden te geven. De volgende stap is het verwerken van deze designen interface-elementen in de stijlgids.


Samenvatting (vervolg) Van responsive (web)design naar responsive identity Een responsive identity kenmerkt zich door een uitgesproken stijl i.p.v. een minimalistische stijl. Logo’s zijn aangepast zodat ze de minimale ruimte in beslag nemen. Ook de typografie moet herkenbaar zijn. Door HTML5 is het mogelijk om te kiezen uit een brede lettertypecatalogus (Webfonts). Daarnaast moet de huisstijlkleur duidelijk zichtbaar zijn. Door typografie, kleur en fotografie samen te voegen tot één compositie blijft de identiteit van een bedrijf of organisatie gewaarborgd. Zowel bij grote als kleine schermen ervaart de bezoeker dezelfde merkbeleving. Tot slot Responsive webdesign is hot and happening en niet geheel onterecht. Enkele belangrijke redenen om te kiezen voor een responsive webdesign zijn: het stijgende gebruik van mobiel internet ten opzichte van desktop internet, de positieve gebruikerservaring en de kijk op de toekomst. Veel bedrijven laten echter nog steken vallen door zware content (afbeeldingen) niet responsive te maken. Hierdoor is de laadtijd op een mobiel velen malen langer dan op een desktop wat niet ten goede gaat van de gebruikerservaring. Het is voor elk bedrijf/merk belangrijk om een goede mobiele ervaring te leveren. Responsive identity staat nog in zijn kinderschoenen. Toch zie je dat zowel grote als kleine bedrijven gebruik maken van schaalbare vector logo’s, favicons, responsive iconen of stevige typografie. De eerste stappen naar een responsive ‘tijdperk’ zijn gezet. Eindconclusie De ontwikkelingen op het world wide web gaan razendsnel. Omdat er verschillende apparaten zijn waarop het web bekeken wordt, zijn websites responsive gemaakt. Responsive webdesign gebruikt een serie layouts waarin, bij elke variant, het schalen vloeiend (fluid) verloopt. Er zijn een hoop goede redenen om te kiezen voor een responsive webdesign: het stijgende gebruik van mobiel internet ten opzichte van desktop internet, de positieve gebruikerservaring en de kijk op de toekomst. Echter, slaan bedrijven de plank mis door voor elk schermformaat dezelfde afbeeldingen te gebruiken met als gevolg een lange laadtijd op mobiele apparaten. Als het gaat om kleine schermen kiezen veel webdesigners voor een minimalistische. Er is immers weinig ruimte voor content. De gebruiker ervaart hierdoor een slechtere merkbeleving. Toch kun je een minimalistische stijl handhaven zonder dat het visuele aspect onderuit gehaald wordt. Dit kan door: logo’s aan te passen zodat ze een minimale ruimte in beslag nemen, typografie en huisstijl kleur herkenbaar te maken en consequent om te gaan met beeld en fotografie. Door dit samen te voegen blijft de identiteit van een bedrijf, merk of organisatie gewaarborgd.


Inleiding Gek opkijken van een internetpagina die een andere indeling heeft op een smartphone, dan op een monitor, doen we niet meer. Het zogenoemde responsive webdesign is hot and happening en wordt steeds belangrijker voor bedrijven. Maar toch wordt regelmatig de plank volledig misgeslagen. Het enkel responsive maken van een webpagina is niet meer voldoende voor de juiste merkbeleving. Naast content first, een (web)design methode waarbij content centraal staat ongeacht waar het op wordt afgebeeld (schermformaten), doet responsive identity zijn intrede. Bij responsive identity is niet alleen de pagina schaalbaar maar zijn de huisstijlelementen van een bedrijf/merk schaalbaar. Met dit onderzoek omschrijf ik hoe het visuele aspect van een merkbeleving overeind kan blijven bij een responsive design. Nils Vermeulen Utrecht, 11 juni 2014 Aanleiding Tijdens mijn stage bij Enof Communicatiegroep was er veel aandacht voor responsive webdesign. Er hing een mobile wall waarop direct te zien was hoe een website eruit zag op verschillende apparaten. Kleur kwam matig terug en het lettertype was voornamelijk Arial. Er werd vooral gekeken naar de functionaliteit. Gebruikersgemak is belangrijk, maar het visuele aspect van een merkbeleving mag niet achterblijven. Dit heeft mijn interesse voor dit onderzoek getrokken.


Onderzoeksvragen Hoofdvraag

‘Hoe blijft het visuele aspect van een merkbeleving overeind in een responsive (web)design?’ Deelvragen • Waarom kiest men voor responsive design en niet voor alternatieve mogelijkheden? • Hoe ontwikkel je een responsive design en op welke manier verwerk je het in een stijlgids? • Wat zijn de kenmerken van een responsive identity? • Is een responsive identity de toekomst van elk bedrijf/merk, of is het enkel voor grote bedrijven/merken op de markt?


Bevindingen: 1. Waarom kiest men voor responsive design en niet voor alternatieve mogelijkheden? Responsive webdesign Simpel gezegd: responsive websites passen zich aan naar de schermafmeting die een bezoeker van de website gebruikt. Bijvoorbeeld: een monitor, tablet of een smartphone. Er is slechts één website die veranderd qua layout afhankelijk welk schermafmeting er gebruikt wordt (Tangelder, 2014). De term, responsive webdesign is door Ethan Marcotte bedacht en kwam als eerst voor in een weblogpost op A list apart (Ethan Marcotte, 2010). Hij zag dat bedrijven graag willen investeren in een mobiele website, maar door de groeiende markt van mobiele apparaten is één mobiele website niet genoeg. In plaats van het ontwerpen in vaste afmetingen moest er nu gedacht worden in relatieve eenheden als percentages. De eenvoud van een responsive webdesign zit hem in het feit dat er geen moeilijke javascript toepassingen nodig zijn. Een simpele regel in de code maakt een website al responsive. Enkele nadelen van responsive design is dat afbeeldingen vaak erg groot worden ingeladen. Daarnaast is de functionaliteit van responsive webdesign alleen mogelijk in modernere browsers (Tangelder, 2014). Een sterke (online) identiteit speelt een belangrijke rol in de communicatie naar de doelgroep en zorgt ervoor dat een merk zich kan onderscheiden van de concurrenten. Dit blijft echter voor mobile websites een lastige opgave te zijn. Er is beperkt ruimte op het scherm van een smartphone. Zodoende moet er goed nadacht worden over welke content het meest relevant is voor de gebruiker. Responsive websites krijgen al snel een functioneel karakter en een eigen identiteit is ver te zoeken (de Leeuw, 2013).


De techniek Responsive websites zijn gebouwd op een fluid/liquid grid. Ze gebruiken mediaqueries (adaptive) zodat het ontwerp en de content, waarneer het venster groter of kleiner wordt, meeschalen. Ethan Marcotte spreekt in zijn boek Responsive Webdesign (2011) over drie hoofdingrediënten: 1. Een flexibel, grid-based layout 2. Flexibele afbeeldingen en media 3. En mediaqueries (verwerkt in de CSS3-code) Door deze ingrediënten kan een webpagina reageren op verschillende schermgroottes en de beste weergave geven. Op de website van Nicholas Davison (Digitaria, 2014) zijn de voordelen van een responsive weergave ten opzichte van andere vormen goed zichtbaar. Je kan responsive webdesign zien als een serie layouts waarin bij elke variant het schalen vloeiend (fluid) verloopt. Adaptive heeft ook een serie layouts, maar kan er binnen niet meer geschaald worden (static).

Intermezzo Layout-types

Fluid/liquid: fluid websites zijn gebouwd met behulp van percentages. Kolommen (grid) zijn relatief met elkaar en de browser. Dit zorgt ervoor dat het vergroten of verkleinen van een venster vloeiend verloopt. Adaptive: aan de hand van mediaqueries (verwerkt in de HTML code) wordt beschreven hoe een website moet functioneren bij verschillende schermgroottes. Bijvoorbeeld voor kleinere monitoren, tablets en mobiele telefoons. Binnen het scherm heeft het vergroten of verkleinen van effect op de layout. Fixed/static: fixed website hebben een vaste breedte. Als je een venster verkleint of vergroot, veranderd er niks aan hoe de website eruit ziet. Hierdoor zal men op een kleiner scherm erg veel moeten scrollen en de laadtijd duurt erg lang (Grayce, 2012). Dit was de standaard voordat kleinere schermen de opmars maakten.


WebApp: Naast een schaalbare website kan er ook een losstaande website speciaal voor mobiele apparaten worden ontwikkeld. Deze zogenaamde WebApps hebben dezelfde look and feel als echte (native) apps maar zijn, zonder dat ze geïnstalleerd worden, bruikbaar in de webbrowser van een smartphone of tablet. Sinds HTML 5 is deze techniek erg populair geworden, mede door het feit dat de WebApp, zonder tussenkomst van een Appstore, geüpdate kan worden (De Toekomst. nl, 2014). Daar tegenover staat wel dat de laadtijd en de functionaliteit van een WebApp veel slechter zijn ten opzichte van een geïnstalleerde (native) app (Viswanathan, 2014).

| De (native) app en WebApp van Facebook verschillende (visueel) nauwelijks van elkaar. Conclusie: Responsive webdesign gebruikt een serie layouts waarin, bij elke variant, het schalen vloeiend (fluid) verloopt. Hierdoor dekt responsive de meeste schermgroottes zonder dat het een negatief effect heeft op de gebruikerservaring. Het nadeel is wel dat voor elke grootte een aparte afbeelding beschikbaar moet zijn. Op mobiele apparaten kan het laden van een afbeelding bijvoorbeeld erg lang duren als deze in volle resolutie wordt afgebeeld. Sinds HTML 5 zijn intrede deed kan men voor mobiele aparaten, los van de ‘normale’ website, een web app ontwikkelen die dezelfde look en feel heeft als een (native) app. Een web app is een goede toevoeging, of vervanging, voor het responsive reageren van een website, maar is vaak duurder omdat er voor elk apparaat weer een aparte website moet worden ontwikkeld. Reponsive is goedkoop en daaroom erg geliefd bij designers.


2. Hoe ontwikkel je een responsive design en op welke manier verwerk je het in een stijlgids? Als het gaat om identiteit en merkbeleving wordt er snel naar een huisstijlgids gegrepen. Een goede huisstijlgids betekent echter nog niet dat je er een geschikte mobiele website mee kunt maken. Door de beperkte ruimte voor branding blijft het bij het toepassen van het logo en de huisstijlkleur. Men kan er ook voor kiezen om nieuwe elementen te ontwerpen, die niet in de huisstijl passen, maar wel goed bij de identiteit passen. ` Bij het ontwikkelen van een responsive design is het belangrijk dat er designelementen worden ontworpen in plaats van statische pagina’s. Voor dat er met de schermen begonnen kan worden kan men via moodboards de basis leggen voor het designsysteem. Moodboards hebben als doel een gevoel over te brengen door middel van beeld (en tekst). Bij het ontwikkelen van een moodboard hoeft men niet vast te houden aan een vaste formule. Als het uiteindelijk maar duidelijk is wat je wilt vertellen. Er zijn verschillende manieren om moodboards te gebruiken tijdens het ontwerpproces (Hinfelaar, 2012). • Conceptboard, voor het verkennen van uitstraling en gevoel; Het conceptboard inspireert en verkent het algemene gevoel dat een website moet uitstralen. Wat betekenen die woorden die zo makkelijk in een briefing worden gezet? Wat hebben ze voor consequenties en effect op het ontwerp? • Designboard, vertaling van uitstraling naar design; Hierin vindt de eerste vertaling van ideeën naar concrete toepassingen plaats (denk aan typografie en kleur). • Styleboard, uitwerking van design naar interface-elementen. Een verdere uitwerking van het designboard. Door designen interface-elementen (iconen, headers, etc) bij elkaar te zetten, wordt een beeld getoond van hoe men het ontwerp voor ogen heeft. Voor merken/bedrijven die al een eigen stijl ontwikkeld hebben, is het niet noodzakelijk om te beginnen met een conceptboard. Vaak liggen typografie, kleur en fotografie al vast in het huisstijlhandboek. In dat geval kan er direct begonnen worden met het ontwerpen van een styleboard. Styleboards gaan heel concreet over de stijl van de site, zonder dat het vaag blijft of juist te gedetailleerd wordt. Samanta Warren geeft een goed voorbeeld van styleboards: style tiles. Style tiles Style tiles zijn uitwerkingen van lettertypes, kleur en interface elementen die het merk visueel weergeven voor web. Soms zijn aanwijzingen in een handboek te vaag, en een mockups juist te gedetailleerd. Style tiles zijn precies goed en werken ook voor bestaande merken die de stijl moeten vertalen naar web.


| In plaats van een vaag moodboard of een gedetailleerde mock-up: style tiles (Hinfelaar, 2012) Style tiles zeggen niks over de afmetingen noch het apparaat, enkel dat het ontwerp digitaal zal zijn. Hierdoor zijn ze uitermate geschikt voor het creëren van een responsive design. Ontwikkel een ontwerpsysteem in plaats van gefixeerde pagina’s (Waren, S, 2014). Van styleboard naar stijlgids De vormentaal van de verschillende elementen uit het styleboard kan je meenemen in de stijlgids. Zoals hierboven al genoemd is, is het belangrijk dat de componenten en designelementen worden omschreven, niet volledig uitwerkte schermen. Op deze manier zijn de designelementen op elke device, en elke schermgrootte bruikbaar zonder dat de gebruiker het gevoel heeft dat hij op een andere website is beland. Conclusie: Voor het ontwikkelen van een responsive design is het belangrijk om geen voorbeelden te geven van vaste ontwerpen. Belangrijk is om designen interface-elementen (iconen, headers, etc) bij elkaar te zetten op een styleboard. Zo wordt een beeld getoond van hoe men het ontwerp voor ogen heeft, zonder hierbij te gedetailleerde voorbeelden te geven. De volgende stap is het verwerken van deze designen interface-elementen in de stijlgids.

3. Wat zijn de kenmerken van een responsive identity? Van responsive webdesign naar responsive identity Er wordt veel gesproken over responsive design en content-first als ontwerpprincipes voor het ontwerpen van mobiele schermen. Ze bieden veel inzicht in het ontwerpen van gebruiksvriendelijke interfaces en hoe content op kleine en grote schermen moet worden geplaatst. Merkbeleving blijft echter nog een ondergeschoven kindje. Steeds meer bedrijven en organisaties ontfermen zich over de mobiele markt. Het wordt dus erg belangrijk om een sterk onderscheidende merkidenteit te hebben. Naast schaalbare content moet er nagedacht worden over een schaalbare identiteit. De Leeuw geeft op Frankwatching 5 tips die kunnen helpen bij het ontwikkelen van een dynamische en schaalbare identiteit (de Leeuw, 2013):


1. Kleinere schermen vragen om een uitgesproken stijl Veel ontwerpers hebben de neiging om bij het ontwerpen van een mobiele website het ontwerp zo minimalistisch mogelijk te maken. Door de rustige uitstraling is het ontwerp beter schaalbaar en is de content ook op kleinere schermen goed leesbaar. Een minimalistische stijl is fijn, echter kan het wel ten koste gaan van het karakter en eigenheid. Juist op kleinere schermen kan een uitgesproken visuele stijl een betere merkbeleving creëren. Afbeelding: Dit is een goed voorbeeld van het toepassen van een uitgesproken stijl op een mobiele website van Dr. Pepper.

2. Effectief gebruik van logo’s en iconen Voor een bedrijf is het logo één van de meest belangrijke elementen van een identiteit. Bij websites is het logo vaak, tot bijna altijd, te zien bovenaan een pagina. Voor grote schermen werkt dit prima. Maar op mobiele schermen zorgt dit voor problemen. Na een klein stukje scrollen valt het logo al snel buiten beeld. Hierdoor loopt men het risico om merkbeleving te verliezen. Voor een schaalbare identiteit is het noodzakelijk om op een andere manier met logo’s om te gaan. Een eenvoudige oplossing is om, naast het standaard logo, gebruik te maken van herkenbare iconen of zelfs het logo speciaal te re-designen voor mobiele toepassingen. Het is dus handig om een herkenbaar element te hebben die zelfstandig ingezet kan worden. Afbeelding: Op de verkiezingswebsite van Obama was een verkleinde versie van het logo (een paraaf) te zien. Voor drukwerk was dit wenselijk, voor digitale toepassingen is dit noodzakelijk. Bijvoorbeeld voor een favicon of app-icoon (Frankwatching, 2013). Favicons zijn kleine iconen voor de url van een website en zijn slecht 16 bij 16 pixels groot. Het is dus lastig om een volledig logo naar dit formaat te schalen. Naast het logo moet men dus ook een symbool hebben dat los van het woordmerk kan functioneren als herkenbaar beeldmerk.

| Enkele voorbeelden van favicons in een browserbalk.


Online gelden andere regels dan bij print. Zo optimaliseer je een logo voor online toepassingen (Bruggemann, 2013): 1. Vermijd het gebruik van dunne lijnen Een logo waarin dunnen lijnen zijn verwerkt, kan problemen geven in een digitale weergave. Vooral wanneer de lijnen cursief of rond zijn. 2. Gebruik stevige typografie Zorg ervoor dat de typografie niet te dun is. Dit kan lastig worden weergegeven. 3. Vereenvoudig kleurgebruik en zorg voor voldoende contrast Introduceer een symbool. Bijvoorbeel een favicon of appsymbool. 4. Maak een .svg-bestand van je logo (vector) Een handige manier om er voor te zorgen dat je logo scherp wordt weergegeven ongeacht het schermformaat of schermresolutie. Door Iconic is een Kickstarter Campaigne gestart voor het ontwikkelen van een revolutionaire web iconografie. Een iconografie waarbij de grote van het scherm bepaald welke grote/type icoon getoond wordt (voor dit project vroegen ze $15.000, ze ontvingen $92.624). Er is in de toekomst nog veel meer mogelijk op dit gebied (Barowska, 2013). 3. Herkenbare typografie Het internet bestaat voor 95% uit tekst. Een duidelijk herkenbare typografische stijl is dus belangrijk voor de juiste identiteit. Sinds HTML5 zijn er veel meer mogelijkheden voor customized typografie. Met webfonts kan je bijna elk denkbaar lettertype online gebruiken. Het voordeel is dat een herkenbare typografie perfect samengaat met het content-first principe, zonder in te hoeven leveren op herkenbaarheid en identiteit. Afbeelding: De mobiele website van de VVD is een goed voorbeeld van correcte typografie.

Intermezzo: Content first

Websites worden niet via één apparaat bekeken. Een gebruiker bekijkt een website via zijn mobiel, tablet of zijn pc. De gebruiker wil altijd een seamless experience: de ervaring over alle kanalen moet zo aantrekkelijk mogelijk zijn en in elkaars verlengde liggen. Men spreekt niet meer over een mobiele visie, maar een online visie. Het is één site op verschillende apparaten. Laat de apparaten los en focus op de content: content-first. (Hassing, 2012) Daarnaast is het belangrijk dat de typografie bijdraagt aan een goede stemming. De gekozen fonts passen bijvoorbeeld bij het verhaal dat verteld wordt. Lettertypes hebben invloed op hoe we een verhaal ervaren (Bringhurst, 2004). Met een modulaire schaal van lettergroottes bepaal je het evenwicht van tekst op een website. Deze schaal bepaalt welke fonts, groottes, regelafstanden maar ook welke tekensets (bijv. kleinkapitalen) er gebruikt moet worden in een tekst en legt hun onderlinge verhouding vast (Verschoor, 2013). Dit draagt bij aan een goede flow van de (mobiele) website en de merkbeleving.


4. Kleur bekennen Bekende merken als Coca Cola en ING worden als eerst herkend aan het logo en de kleur. Toch kiezen veel (grote) merken ervoor om op mobiele apparaten weinig te doen met kleur. Als er kleur wordt gebruikt is dit hooguit voor een link of knop duidelijker zichtbaar te maken. Kleurgebruik voor de juiste branding of merkbeleving wordt maar weinig toegepast. Kleur kan er voor zorgen dat verschillende soorten content onderscheiden worden. Daarnaast is kleur goed om ergens een focus op te leggen. Afbeelding: De ontwerper van de mobiele website van muziekfestival Rock Werchter gebruiker een groot palet aan bijpassende kleuren. Hierdoor krijgt de website een eigen karakter.

5. Fotografie en visuele content op mobiel Door het gebruik van fotografie en visuele content maak je een (mobiele) webpagina een stuk aantrekkelijker. In huisstijlhandboeken staat voor de meeste merken beschreven welke stijl er moet worden aangehouden voor het online gebruik van beeld. Omgaan met beeld is een erg lastige opgave bij het ontwerpen van mobiele schermen. Foto’s vullen al snel het volledige beeld en geven weinig ruimte aan tekstuele, belangrijke content. Hierdoor worden foto’s vaak niet volledig getoond met als risico dat de mobiele pagina’s als saai worden ervaren. Visuele content en tekst moeten goed op elkaar afgestemd worden. Mobiele content moet ‘gedesigned’ worden. De tijd van het plaatsen van een bijpassende foto bij een tekst is voorbij. Afbeelding:Een goed voorbeeld is van Snickers. Beeld en tekst zijn samengevoegd tot een perfecte cohesie. De boodschap van fotografie moet in één blik zichtbaar zijn. Denk aan: emotie, het verhaal, het doel en de voordelen. Door goede tekst wordt het beeld versterkt. Voor de gebruiker moet het in 7 seconden duidelijk zijn wat een website te bieden heeft. Er zijn een aantal principes die helpen bij de juiste fotografie voor online doeleinden (Hickmann, 2013): 1. Focus door scherptediepte 2. Focus door bewegingsonscherpte 3. Focus met behulp van perspectief 4. Laat mensen of producten binnen de website ‘kijken’ (naar het midden of de content) 5. Gebruik (complementaire) kleuren uit de huisstijl 6. Context matters (toon het product of de dienst in zijn gebruiksomgeving) 7. Details matter 8. Wees consistent (gebruik dezelfde composities) 9. Laat de menselijke maat zien 10. Creëer eenheid met fotografie Responsive design & Merkbeleving | 14

Conclusie: Een responsive identity kenmerkt zich door een uitgesproken stijl i.p.v. een minimalistische stijl. Logo’s zijn aangepast zodat ze minimale ruimte in beslag nemen. Ook typografie moet herkenbaar zijn. Door HTML5 is het mogelijk om te kiezen uit een brede lettertypecatalogus (Webfonts). Daarnaast moet de huisstijlkleur duidelijk zichtbaar zijn. Door typografie, kleur en fotografie samen te voegen tot één compositie blijft de identiteit van een bedrijf of organisatie gewaarborgd. Zowel bij grote als kleine schermen ervaart de bezoeker dezelfde merkbeleving.

Intermezzo: Toepassen 5 tips

In de bijlage (blz 20) zijn de 5 tips voor een schaalbare dynamische identiteit toegepast op een aantal grote merken die nog geen responsive website/identeit bezitten. 3. Is een responsive identity de toekomst van elk bedrijf/merk, of is het enkel voor grote bedrijven/merken op de markt? Responsive webdesign en bedrijven/merken Verwacht wordt dat in 2014 mobiel internetgebruik gelijk op zal gaan met desktop internetgebruik. Toch zijn veel websites van bedrijven nog niet mobiel vriendelijk. Naast dat dit kopzorgen veroorzaakt bij de gebruikers, is het ook nog een verlies voor het bedrijf. Enkele onmiskenbare redenen waarom een website responsive moet zijn (Summerfield, 2013): 1. Mobiel gebruik stijgt in grote mate Veel bedrijven geloven nog steeds dat een responsive website/identiteit bijzaak is. Er zijn een aantal harde feiten die dit tegenspreken. In 2013 is het volgende onderzocht/vastgelegd: • Meer dan 20% van alle Google zoekopdrachten worden via een mobiel apparaat gedaan. • In 2012 werd meer dan de helft van de locale zoekopdrachten via een mobiel apparaat gedaan. • In de Verenigde Staten bezoeken 25% van internetgebruikers het internet enkel via een mobiel apparaat. • 61% van de mensen hebben een betere ervaring met een merk wanneer zij een goede mobiele ervaring bieden. 2. Positieve gebruikerservaring is essentieel Volgens Google Thing Insights is er op het gebied van mobiel 61% kans dat een gebruiker een website direct verlaat als zij niet vinden waar zij naar zoeken. Met als gevolg dat ze direct door geen naar de concurrent. Daarnaast: als een gebruiker een positieve ervaring heeft met een website is de kans 67% groter dat zij een product of dienst kopen. 3. Sociale activiteiten zorgen voor meer mobiele gebruikers Volgens een studie van ComScore vindt 55% van alle social media consumptie op mobiele apparaten plaats. Of te wel: als je content links verstuurd via social media en geen mobiel vriendelijke website hebt, zullen veel gebruikers gefrustreerd raken en de website verlaten. Met alle gevolgen van dien. 4. Responsive: minder kans op fouten bij Google Pierre Farr (Google) verklaarde dat Google liever een responsive webdesign ziet, dan een mobile template. Mobile templates zijn specifiek gebouwd voor een smarthphone of tablet en vereisen een eigen url. Doordat er voor responsive webdesign maar één url nodig is, is er minder kans op een error bij Google’s search-engine. Responsive design & Merkbeleving | 15

5. En snelle website is belangrijk Google PageSpeed Developers adviseert dat het laden van een volledige pagina niet langer moet duren dan 2 seconden. Iets wat niet mogelijk is wanneer je een desktop website probeert te laden op een mobiel apparaat. Als een gebruiker extreem lang moet wachten is de kans groot dat ze de website direct verlaten. 6. Toekomstige mobiele apparaten zijn nu al ondersteund Een van de grootste voordelen van responsive design is dat de website is vormgegeven voor een schermformaat, niet voor een specifiek apparaat. Dus als er nieuwe apparaten worden ontwikkeld, zoals een smartwatch of glasses, ziet een responsive website er nog steeds goed uit. De keerzijde van overstappen naar responsive design Veel grote merken zijn inmiddels overgestapt naar een responsive design. Ze laten echter steken vallen als het gaat om de laadtijd van afbeeldingen. Ondanks dat de gebruikerservaring van een website verbetert, blijft het gewicht (aantal MB’s) bijna hetzelfde, wat leidt tot het weergeven van te grote afbeeldingen op een mobiel apparaat. Trilibis (2014) evalueerde 155 prominente responsive design websites (bijv. Starbucks, Engadget.com en BoldandNoble) en kwam tot de conclusie dat 69% meer dan vier seconden nodig had om te laden op een smartphone. Nog specifieker: 21% had een laadtijd onder de vier seconden, daartegenover staat een 32% met een laadtijd van 8 tot 48 seconden. Hoe gebruiksvriendelijk de website ook is, bij een lange laadtijd vertrekken gebruikers al snel.

21% 32% Goede laadtijd (<4 sec.) Slechte laadtijd (4-8 sec.) Zeer slechte laadtijd ( 8> sec.)

37% Terwijl er veel factoren meespelen als het gaat om het gewicht van een pagina, zijn de afbeeldingen de bottelneck. Trilibis (2014) wist het klaar te spelen om de zwaarste responsive websites, met een gemiddelde van 115MB, na toepassing van afbeeldingoptimalisatie te reduceren naar 50MB voor desktops, 30 MB voor tablets en 27 MB voor smartphones. Dit resulteerde in een vermindering van een aantal seconden in laadtijd. Advies voor website ontwerpers: • Ga zorgvuldig om met de grootte van afbeeldingen zodat de responsive website sneller laadt en het de mobiele gebruiksvriendelijkheid ten goede komt. • Ondanks dat het de website responsive is, moet deze zware webelementen (in het speciaal afbeeldingen) kunnen aanpassen naar het soort apparaat waar deze op wordt afgebeeld. Gebruik hiervoor bijvoorbeeld software die een website device-aware maakt. Responsive webdesign is met zijn mooie vormgeving en gebruiksvriendelijkheid enorm populair. Om fouten te voorkomen moeten bedrijven echter niet vergeten het ontwerp te testen op zoveel mogelijk verschillende schermformaten. Responsive design & Merkbeleving | 16

Responsive identity en bedrijven/merken Het is meer dan logisch dat Schildersbedrijf van Kooten nog geen noodzaak ziet in een responsive identity. Verder dan een responsive website zullen veel MKB-bedrijven niet gaan (ook zij willen geen klanten verliezen). Een huisstijl responsive maken is erg kostbaar en is iets waar alleen grote bedrijven voor in aanmerking komen (i.v.m. de hoge investeringskosten die dit met zich meebrengt). Het custom maken van een website of huisstijl is iets waar zij grote kansen zien en zich mee kunnen profileren. Ondanks dat zijn, zoals besproken bij de deelvraag: Wat zijn de kenmerken van een responsive identity?, de eerste stappen naar een responsive (identity) tijdperk wel zichtbaar. Het gebruik van schaalbare vector logo’s, favicons, responsive iconen en stevige typografie worden al breed ingezet bij zowel grote als kleine ondernemingen. Conclusie: Responsive webdesign is hot and happening en niet geheel onterecht. Enkele belangrijke redenen om te kiezen voor een responsive webdesign zijn: het stijgend gebruik van mobiel internet ten opzichte van desktop internet, de positieve gebruikerservaring en de kijk op de toekomst. Veel bedrijven laten echter nog steken vallen door zware content (afbeeldingen) niet responsive te maken. Hierdoor is de laadtijd op een mobiele apparaten velen malen langer dan op een desktop wat niet ten goede gaat van de gebruikerservaring. Het is voor elk bedrijf/merk belangrijk om een goede mobiele ervaring te leveren. Responsive identity staat nog in zijn kinderschoenen. Toch zie je dat zowel grote als kleine bedrijven gebruik maken van schaalbare vectorlogo’s, favicons, responsive iconen of stevige typografie. De eerste stappen naar een responsive ‘tijdperk’ zijn hiermee gezet.

Eindconclusie De ontwikkelingen op het world wide web gaan razendsnel. Omdat er verschillende apparaten zijn waarop het web bekeken wordt, zijn websites responsive gemaakt. Responsive webdesign gebruikt een serie layouts waarin, bij elke variant, het schalen vloeiend (fluid) verloopt. Er zijn vele goede redenen om te kiezen voor een responsive webdesign: het stijgende gebruik van mobiel internet ten opzichte van desktop internet, de positieve gebruikerservaring en de kijk op de toekomst. Nog veel bedrijven slaan de plank mis door voor elk schermformaat dezelfde afbeeldingen te gebruiken met als gevolg een lange laadtijd op mobiele apparaten. Als het gaat om kleine schermen kiezen veel webdesigners voor een minimalistische vormgeving. Er is immers weinig ruimte voor content. De gebruiker ervaart hierdoor echter een slechtere merkbeleving. Toch kan je een minimalistische stijl handhaven zonder dat het visuele aspect onderuit gehaald wordt. Dit kan door: logo’s aan te passen zodat deze minimale ruimte in beslag nemen, typografie en huisstijl kleur herkenbaar te maken en consequent om te gaan met beeld en fotografie. Door dit samen te voegen blijft de identiteit van een bedrijf, merk of organisatie gewaarborgd.


Literatuurlijst 1.

Borowska, P. (2012, 8 november). Van mobile-first naar content-first [Web log post]. Geraadpleegd op 8 mei 2014 via http://designmodo.com/responsive-icons/

2.

Bringhurst, R. (2004). The Elements of Typographic Style

3.

Bruggemann, I. (2013, 31 december). Zo optimaliseer je je logo voor het responsive tijdperk [Web log post]. Geraadpleegd op 8 mei 2014 via http://www.frankwatching.com/archive/2013/12/31/zo-optimaliseer-je-je-logo-voor-het-responsive-tijdperk/

4.

de Leeuw, S. (2013, 22 januari). Merkbeleving op kleine schermen: 5 tips voor een responsive identity [Web log post]. Geraadpleegd 8 mei 2014 via http://www.frankwatching.com/archive/2013/01/22/merkbeleving-op-kleine-schermen-5-tips-voor-een-responsive-identity/

5.

De Toekomst (2014, 12 mei). Een web app laten maken. Geraadpleegd op 8 mei 2014 via http://www.appmaken.nl/ web-app-laten-maken/

6.

Grayce, A. (2012, 14 december). What’s the difference between fixes, fluid, adaptive, and responsive web design? [Web log post] Geraadpleegd op 24 april 2014 via http://blog.teamtreehouse.com/whats-the-difference-between-fixed-fluid-adaptive-and-responsive-web-design-treehouse

7.

Hassing, A. (2012, 9 oktober). Van mobile-first naar content-first [Web log post]. Geraadpleegd op 8 mei 2014 via http://www.frankwatching.com/archive/2012/10/09/van-mobile-first-naar-content-first/

8.

Hickmann, F. (2013, 8 januari). 18 fotografieprincipes voor een visueel overtuigende website [Web logo post]. Geraadpleegd op 12 mei 2014 via http://www.frankwatching.com/archive/2013/01/08/18-fotografieprincipes-voor-een-visueel-overtuigende-website/

9.

Hinfelaar, M. (2012, 20 november). Moodboards: een oude techniek voor het responsive tijdperk [Web log post]. Geraadpleegd op 15 mei 2014 via http://www.frankwatching.com/archive/2012/11/20/moodboards-een-oude-techniek-voor-het-responsive-tijdperk/

10. Marcotte, E. (2010, 25 maart). Responsive Web Design [Web log post]. Geraadpleegd op 27 mei 2014 via http://

alistapart.com/article/responsive-web-design 11.

Marcotte, E. (2011). Responsive web design, blz 9

12.

Nicholas Davison (2014). Liquidapsive (Liqui-dap-sive). Geraadpleegd op 12 mei 2014 via www.liquidapsive.com

13. Summerfield, L. (2013, 25 november) 6 Undeniable reasons why the future of web design is responsive [Web log

post]. Geraadpleegd op 15 mei 2014 via http://blog.hubspot.com/insiders/why-responsive-web-design 14. Tangelder, M. (2014, 1 mei). Wat is responsive webdesign [Web log post]. Geraadpleegd op 24 april 2014 via http://

www.integritydesign.nl/wat-is-responsive-webdesign/ 15. Trilibis Blogging Team (2014, 21 april) Tilibis web performance survey finds 69 percent of responsive design

websites fail to deliver accectable load times on mobile devices [Web log post]. Geraadpleegd op 15 mei 2014 via http://blog.trilibis.com/trilibis-web-performance-survey-finds-69-percent-of-responsive-design-websites-fail-to-deliver-acceptable-load-times-on-mobile-devices-02759 16. Verschoor, A. (2013, 13 maart). Terug in de tijd met typografie en responsive design bij SXSW [Web log post].

Geraadpleegd op 8 mei 2014 via http://www.marketingfacts.nl/berichten/terug-in-de-tijd-met-typografie-en-responsive-design-bij-sxsw 17.

Viswanathan, P. (Geraadpleegd op 2014, 12 mei). Native Apps vs. Web Apps – Wath is the Better Choice [web log post]. Geraadpleegd op 8 mei 2014 via http://mobiledevices.about.com/od/additionalresources/a/Native-Apps-VsWeb-Apps-Which-Is-The-Better-Choice.htm

18. Warren, S. (2014) Style Tiles. Geraadpleegd op 15 mei 2014 via http://styletil.es/


Huidige website

Bijlage: Toepassing: 5 tips

Responsive (identity)

vodafone NL

11:00

94%

vodafone NL

11:00

94%

vodafone NL

11:00

94%


responsive design & merkbeleving

Recommend Documents