Responsive webdesign: Onze 5 bewezen basisbeginselen.

In mijn vorige twee artikelen heb ik uitgelegd waarom responsive webdesign gebaseerd zou moeten zijn op een 6-layout-benadering en niet op één ontwerp voor desktop en één voor mobiel.

In dit artikel wil ik graag uitleggen hoe wij als designteam bij Level Level responsiviteit benaderen.  Om ervoor te zorgen dat iedere keuze die we maken bij het ontwerpen van een website ook een stap dichterbij een optimale gebruikersbeleving is, hebben we vijf bewezen basisbeginselen beschreven.

1. Focus op schermen, niet op apparaten

Er zijn tegenwoordig veel te veel verschillende apparaten om een ontwerp nog per apparaat te kunnen aanpassen. Maar ook aanpassingen per categorie apparaat werkt ook al niet meer. Sommige apparaten die “officieel” in een categorie vallen, doen dat in de praktijk ook niet meer. Sommige grote telefoons zijn groter dan een kleine tablet en sommige desktop schermen zijn groter dan een televisiescherm. We hebben er daarom voor gekozen om te ontwerpen voor kleine, middelgrote, grote en extra grote schermen.

2. Besteed net zoveel aandacht aan het ontwerpen voor kleinere en grotere schermen

Iedere gebruiker verdient een prettige gebruikerservaring. Wat voor scherm ze ook gebruiken. We nemen dus ruim de tijd om een ontwerp te maken voor kleine, middelgrote, grote en extra grote schermen.

We maken optimaal gebruik van alle ruimte die een groot scherm biedt, maar we zorgen er ook voor dat je content comfortabel op een minischerm past. We zorgen voor een heldere hiërarchie in je content, fotos van goede kwaliteit in diverse formaten, optimale regelhoogte, grootte van icons, layouts van tabellen en nog veel meer.

Je zult het verschil in je engagement en conversie ratios merken.

3.Gebruik breakpoints die gebaseerd zijn op content en niet op apparaten

Lange teksten, korte teksten, video, foto’s, grafieken, het is best een uitdaging om alle content in alle schermen goed weer te geven. Gelukkig zijn hier vol passie over die uitdaging… Omdat we geloven dat design content moet ondersteunen, en niet andersom, hebben we uit ervaring geleerd dat  het kiezen van breakpoints op basis van content tot betere resultaten leidt dan het kiezen van breakpoints op basis van een apparaat.

Om al je gebruikers, van een 200px minischerm tot een 2000px desktop of televisiescherm, een optimale beleving te bieden, is het belangrijk om rekening te houden met gemiddeld 6 verschillende breakpoints in je design.

Wanneer we beslissen waar we de breakpoints plaatsen, beginnen we met het ontwerpen voor het kleinste scherm. Hoe groter het  scherm wordt, hoe ruimer we de opzet laten worden. Op die manier bepaalt de content waar de breakpoints komen, en houden we het aantal breakpoints minimaal.

4.Verberg geen content

Nog helemaal niet zo lang geleden was het heel normaal om te veronderstellen dat de gebruikers van mobiele apparaten haast hadden, en andere informatie zochten dan wanneer ze achter hun desktop scherm zaten. Die veronderstelling is veranderd. Gelukkig maar. Want tegenwoordig gebruiken mensen hun mobiele apparaten overal: op weg naar hun werk, op hun werk, wanneer ze met vrienden zijn of gewoonweg om even op de bank te relaxen. En een toenemend aantal gebruikers benadert dezelfde content vanaf verschillende apparaten. Tegelijkertijd is er een groep mensen die alleen een mobiele telefoon heeft waarmee ze het internet op gaan. Veel mensen in ontwikkelingslanden, maar ook mensen met lagere inkomens in, bijvoorbeeld, de VS hebben thuis geen vaste internetverbinding. Wel hebben ze vaak een smartphone met ofwel een 3g ofwel een 4g verbinding. Zie het potentieel van deze groep niet over het hoofd.

Tegenwoordig weten we dat gebruikers ook op hun mobiele apparaten toegang tot alle content en alle diensten willen. We kunnen tenslotte niet bepalen welke content iemand wil zien op basis van het apparaat wat ze gebruiken. Maar we kunnen wel zorgen dat de content wordt weergegeven op een manier die ze helpt om zo snel en zo makkelijk mogelijk te vinden wat ze zoeken. Dus daar focussen we ons op.

5. Test, test & test nog meer

Niet alles wat er in een ontwerp prachtig uitziet, werkt in de praktijk ook net zo mooi. Wanneer je test met echte gebruikers, komen er soms onverwachte problemen bovendrijven. We raden je dan ook sterk aan om, voor je een website de wereld in stuurt,  tenminste een aantal elementaire gebruikerstesten uit te voeren. Een nieuwe website kan je reputatie maken of breken, toch? Bij Level Level vinden we het inmiddels zo belangrijk in het succes van de online aanwezigheid van onze cliënten, dat we op dit moment een in-house testkamer aan het bouwen zijn.

En nu?

Zou je 1 van de eerste gebruikers van onze testkamer willen zijn? Zou je willen dat één van onze designers eens een user experience quick scan op je website uitvoert? Of zou je eens willen willen brainstormen over de ideeën die je voor een project hebt? Top! Geef ons een belletje, plan een afspraak in en dan kletsen we verder met een koffietje erbij. Wil je een vriend of collega meenemen? Gezellig!