Responsive webdesign en creatieve adaptatie

Responsive webdesign

We hebben hier reeds verteld over responsive webdesign en de uitdagingen die erbij komen kijken. Nu willen we je op de hoogte houden met de laatste ontwikkelingen. Want responsive webdesign is weliswaar ‘hip’ en ‘hot’ maar tegelijk slechts een algemene term, die aangeeft dat je dezelfde website vlot kan bekijken op zowel desktop als mobiele toestellen.

Maar het gaat verder dan dat. Naast de schermformaten spelen ook de beschikbare soft- en hardware en de bandbreedte (die je surfsnelheid bepaalt) een rol. Ze zorgen voor een significant verschil tussen de bezoekerservaring van je website op een mobiel netwerk1 en de internetverbinding op je werkplaats. Gelukkig kunnen de recentste mobiele browsers vlot overweg met css 3 en html 5. Maar het blijft een uitdaging om een website te maken die een consequente en relevante gebruikerservaring biedt. Vandaar dat een grondige denkoefening noodzakelijk is om tot een ‘surfbaar’ resultaat te komen. We bekijken mobiele toestellen dan ook niet enkel als een weergavemedium. Ze hebben namelijk een aantal eigenschappen die je op een creatieve manier kan gebruiken.

Flexibiliteit en relevantie

Een klein scherm leest nog moeilijker dan een laptopscherm en het beperkte schermoppervlak limiteert de hoeveelheid en diepgang van je informatie. Ook de gebruikscontext van de surfer beïnvloedt mee de inhoud. Het bedenken van je nieuwe website doe je best niet vanuit ‘graceful degradation’. Hierbij wordt een (bestaande) website inhoudelijk en functioneel gedegradeerd om uiteindelijk tot een mobiele versie te komen. We denken beter vanuit het ‘mobile first’-principe waarbij de eerste versie de mobiele website zal zijn. En deze bouwen we verder uit (progressive enhancement) met wat de relevante inhoud, structuur en functionaliteiten zullen zijn. Deze denkwijze is niet alleen sneller te realiseren maar ook grondiger omdat het je dwingt om na te denken over de essentiële inhoud van de website en welke doelen je ermee wil bereiken.

Hierbij kijk je ook door de ogen van een bezoeker naar je mobiele website. Een mobiele lezer wil zo snel mogelijk die essentiële informatie hebben die voor hem nuttig kan zijn. Als je ‘on the road’ met een smartphone surft, zijn bv. contactgegevens relevanter dan een flashy banner of uitgebreide productcatalogus. Je webpagina’s moeten uiteraard kort en bondig zijn, ook qua layout. Een pagina met bv. nieuwsartikels presenteer je beter als een lijst waarbij elk artikel apart kan uitklappen om meer te lezen. Een methode die je ook in mailings kan gebruiken. Zo heeft je bezoeker snel een overzicht en kan hij zich meteen toeleggen op wat hij wil weten. Een mooi voorbeeld is de mobiele variant van wikipedia.org

Analyseren, evalueren en dan pas doen, is hier het motto. Want je bezoeker blijft weliswaar dezelfde maar zijn behoeften wijzigen dynamisch. Een website die daar flexibel op inspeelt heeft een dubbele streep voor.

SEO

En waarom maken we geen aparte mobiele website? Duplicate content, daarom. SEO-gewijs is het moeilijk om een zoekrobot duidelijk te maken dat je twee versies hebt van je website met een verschillend doel maar met gelijkaardige/dezelfde inhoud. Je kan eventueel via een aangepaste url proberen het verschil duidelijk te maken maar dat wordt meestal niet erg gesmaakt. Ook technisch wordt het allemaal zo complex dat het risico op nutteloze url’s alleen maar vergroot. Vergeet niet dat een zoekrobot geen gebruik maakt van een scherm, hij heeft visueel geen boodschap aan je summiere ‘standalone’ mobiele versie.
We kunnen wel meten hoeveel bezoekers naar je website komen vanop een mobiel toestel en op basis daarvan een aantal aspecten optimaliseren voor onze mobiele doelgroep.
Integratie

Een ander belangrijk element zijn de social media die mobiel een veel belangrijkere rol spelen. Via een smartphone of tablet kan alles wat je ziet en beleeft snel gedeeld worden. Een mobiele webpagina die zich vlot laat delen haalt hier meer voordeel uit. Speel daar offline op in en maak gebruik van bv. qr-codes in je analoge communicatie. “Meer uitleg over dit product? Scan de qr-code.” En hopla, weer iemand die je (mobiele) website bezoekt! Laat je bezoekers toe om producten lokaal of van thuis uit een waardering mee te geven. Beloon ze ook als ze je merk/product/dienst op een positieve wijze delen met hun netwerk. Ze zullen het met plezier doen en je merk wint meteen aan naambekendheid.

Een wedstrijd organiseren kan perfect via Facebook waarbij ‘sharen’ en ‘liken’ met je vrienden centraal staan. Wil je deelnemers een bijdrage laten leveren door bv. een leuke foto in te sturen? Dan zullen ze met veel enthousiasme en hun camera/smartphone/tablet aan de slag gaan. De interactie die je creëert buiten het toestel om draagt ook bij aan het verspreiden van je merk. Weet je nog hoe nieuwsgierig iedereen was om het resultaat te zien van een instant polaroid? Lang geleden, niet? Dat was social media avant-la-lettre waarvan Instagram, Pinterest, Facebook, enz.. de digitale erfgenamen zijn. We zijn nu eenmaal graag interactief bezig met onze medemens en we delen graag onze ervaringen met elkaar.

Inspiratie

Een paar wilde ideeën als inspiratie:

Je kan kassatickets afleveren met een qr-code. Hiermee kan uw klant zijn aankopen – inclusief afbeeldingen – dan online delen met de digitale gemeenschap. Zijn vrienden/familie/kennissen kunnen dan, op hun beurt, een waardering geven over de producten en/of verder delen via hun social mediakanalen.

Verzend responsive mailings die à la carte worden samengesteld adhv wat een klantenkaart aan informatie over het koopgedrag verzamelt. Stel u een e-mail voor met volgende boodschap: “Cool, u heeft de nieuwste mp3-speler! Deze hoofdtelefoons maken je geluidservaring compleet!”. En voor je het weet is er weer iemand naar je (mobiele) winkel gesurft om zich te informeren over je producten.

Toon met augmented reality hoe je designlampen er ’s avonds of ‘s nachts uitziet, wat anders enkel mogelijk is als je je winkel ’s avonds laat opent.

Gaat dit al te ver, denkt u? Brengen we hier de grenzen van privacy op ‘t randje van het toelaatbare?

Eigenlijk niet, zolang we de nodige vrijheid laten in de beslissing om actief deel te nemen, persoonlijke gegevens aan te passen of uit te schrijven. En de klant benaderen met informatie die voor hem/haar een meerwaarde heeft.

Ikea heeft zo een mooie eyecatcher met een app die hun meubels kan weergeven in jouw eigen interieur.

Een beetje ‘out-of-the-box’-denken kan zo onverwachte maar originele ideeën opleveren.

Responsive webdesign = creatieve adaptatie

Responsive webdesign draait dus om meer dan ‘mijn website is overal te bekijken’. Het gaat om flexibiliteit, relevantie en integratie van wat je wil presenteren in onze mobiele wereld. Als merk kan je er alleen maar meer voordeel uit halen mits je verder durft te denken dan het mobiele schermpje van je klant.

* Edge (120 à 200 kbps), 3G (tot 384 kbps), Hsdpa (tot 1.3 Mbps), 4G (tot 5 Mbps)