Responsive webdesign, design voor mobiele platformen


3 mei 2017


Contacteer ons

Responsive webdesign

Responsive websites zijn meer dan een tijdelijk fenomeen. Steeds meer mensen gebruiken een mobiel apparaat om toegang tot het internet te verkrijgen.

Responsiviteit is nu een essentieel onderdeel van een goede website.

Maar responsive design is geëvolueerd in de zeven (ja zeven!) jaar geleden voor het eerst door Ethan Marcotte werd ontwikkeld.
Nu is het ontwerpen, voor een verscheidenheid van schermformaten, heel wat meer dan het identificeren van een aantal breekpunten voor populaire apparaten. Je moet als het ware niet rekening houden met de afmetingen van het scherm, ook het operating system (IOS, Android, Windows…) speelt een rol.

Het gaat over het maken van een ontwerp voor elke grootte van het scherm.

Het gaat over de prestaties en het waarborgen van snelheid op apparaten die internetverbinding maken via 3G, 4G….

De website moet snel laden op alle apparaten en alle verbindingen. En, belangrijker nog, het gaat uiteraard ook om de inhoud – het ontwikkelen van content die werkt op elk apparaat, en het ontwerpen rond die inhoud.

De gebruikerservaring moet zo goed mogelijk zijn bij het bezoek van de website op een smartphone of tablet.

Onze favoriete methode voor het aanpakken van deze uitdagingen is om het mobiele aspect eerst te benaderen tijdens de vormgeving. Dit is een totale andere benadering dan enkele jaren geleden.

In plaats van het ontwerpen van de inhoud en lay-out voor het groot scherm (desktop en laptop pc’s) en vervolgens aan te passen voor de kleinere schermen, doen we dit meer en meer in de omgekeerde volgorde.

Dit geeft een aantal voordelen als het gaat om de inhoudelijke planning, ontwerp en prestaties, evenals het optimaliseren van de code. Het is  efficiënter.
In dit artikel zullen we een aantal van de voordelen van de ‘mobile first’ benadering schetsen. De belangrijkste design en lay-out elementen in het ontwerp moet je als eerste identificeren, deze passen we toe op het algemene ontwerp.
Dus laten we beginnen met een overzicht van wat de ‘mobile first’ benadering is.

Wat is Mobile First?

Mobile first is een benadering van webdesign en een ontwikkeling door Luke Wroblewski.

Het gaat om twee belangrijke dingen:

Het is een heroverweging van de manier waarop je webdesign en ontwikkeling naar mobiele apparaten gaat benaderen.
Het schrijven van code die werkt vanuit een klein scherm naar boven toe, niet van grote schermen naar beneden als in eenvoudig responsive design.

Wat betekent dit in termen van de manier waarop we werken? We ‘herdenken’ uw webdesign, m.a.w. is het een mobile first benadering.
Focussen op de inhoud en de interacties, niet op de details zoals foto’s en elementen die deel uitmaken van de website. Uiteraard spelen deze wel een belangrijke rol, maar eerst ‘Mobile First’!

Ontwerpen voor gebruikerservaring – zodat het ontwerp het makkelijker maakt voor gebruikers om de inhoud te consumeren. Dus niet enkel er ‘goed uitzien’.

Gezien de behoeften op het vlak van inhoud – nu dat je een klein scherm om op te werken – wat hebben we nodig om dit te zetten?

Structureren van de inhoud zodat het gemakkelijk is om te communiceren op een kleiner scherm.

Efficiënte ontwikkeling en design – zowel de site en de code.

We zeggen zeker niet dat dit betekent dat uw website er niet goed moet uitzien – met een aantrekkelijk en modern design en een UX (gebruikerservaring) die zeer belangrijk is.

Uiteindelijk is een goed design de allereerste indruk die de bezoeker zal opnemen. Nog voor de eerste letter te lezen.
We zeggen gewoon dat het  mobile first ontwerp  niet alleen over looks gaat – het gaat over de interacties, gebruikersinteractie en efficiënt gebruik van de beschikbare ruimte.

Het ‘stylen’ van de lay-out voor kleine schermen, ervan uitgaande dat de inhoudelijke ‘blokken’ op volle breedte standaard zijn, en dan het toevoegen van de juiste code die zich richt op grotere schermen…zodat de lay-out zich aanpast als het scherm groter wordt.
Kleinere afbeeldingen verzenden naar een mobiel apparaat en deze te vervangen met grotere afbeeldingen voor grotere schermen in plaats van andersom.

De ontwikkeling en het testen op een klein scherm eerst,  dan werken naar de grotere schermen.
Het is  voor kwalitatieve webdesign bureau’s een een sprong, de manier waarop een ontwikkelaar denkt, een designer ontwerpt is als het ware volledig omgekeerd dan voor de tijden van de mobiele apparaten.

De manier van denken en de manier waarop de programmeurs moeten omgaan om de code te wijzigen is van onmisbaar belang om tot een goed resultaat te komen.

Eens we de fase van het ‘wennen’ voorbij waren, meer kennis hebben vergaard hebben we gemerkt dat het proces op zich helemaal integreert binnen de omgeving van onze onderneming.

Fatmama staan dus garant voor responsive webdesign, het is een standaard geworden.
Vermits we ook al eens graag out-of-the-box gaan brengt het met zich mee dat mobile first verhaal niet altijd evident is, maar die uitdaging gaan we graag aan!

Contacteer ons
terug naar alle berichten

Deel dit bericht!