Responsive designs on devices
brandbox

Responsive design

Size does(n't) matter!

Elke dag verschijnen er nieuwe devices op de markt met een eigen unieke beeldformaat of resolutie. Tot voor kort waren organisaties daardoor gebonden aan het bouwen van aparte pagina's, stylesheets of mobiele websites.

Dankzij responsive design is het niet meer nodig om voor elk formaat beeldscherm een nieuwe website te ontwikkelen. Een responsive website werkt op elk formaat goed en past de lay-out aan om de ultieme user experience te geven.

Flexibele Grid

Flexibele grid

De basis van een responsive website bestaat uit een flexibele grid, flexibele inhoud en media queries. De flexibele layout (grid) bestaat voor het grootste gedeelte uit percentages in plaats van pixels en werkt in de meeste gevallen goed in elke browser.

Flexibele Media

Flexibele inhoud

Naast het grid is het handig als de afbeeldingen en video van de website ook kan schalen met het formaat waarin de website bekeken wordt. Flexibele inhoud is daarom een belangrijk tweede punt in een responsive website.

Media Queries

Media queries

Met behulp van media queries wordt er aangeven op welk punt de layout zich zou moeten aanpassen om de website optimaal weer te geven vanaf, of tot een bepaalde resolutie.

Responsive design example

Responsive design case Jumbo

Een responsive website kan voor iedere organisatie een uitkomst bieden, zo ook voor jumbo supermarkten. De Jumbo website vereiste veelzijdigheid en flexibiliteit om op verschillende devices optimaal te kunnen communiceren met de klant.


Mobile - Jumbo responsive case

Mobile / Smartphones zijn onmisbaar

De mobiele telefoon is niet meer weg te denken uit het straatbeeld. Sinds de komst van de smartphone is het internetgebruik alleen maar gestegen en dat heeft ook invloed op het gebruik van websites..

Voor de Jumbo website werd er gestart met het kleinste formaat om de responsive site op te bouwen. De website bied de klant dezelfde functionaliteit als dat het zou doen op groot formaat zonder tussenkomst van een mobiele pagina. Hierdoor kun je tijdens dat je bij de Jumbo boodschappen aan het doen bent, gemakkelijk en snel de aanbiedingen op de site bekijken


Tablet - Jumbo responsive case

Tablet / Meest gebruikte manier van browsen

De tablet wordt net als de smartphone vaak thuis gebruikt. In veel gevallen wordt de tablet erbij gepakt om de mail te bekijken, te browsen of een spelletje te spelen.

Ook hier is het belangrijk dat bij het browsen op de Jumbo site dat de website optimaal word weergegeven in het gebruikte formaat, zeker omdat de tablet een populaire manier is om op het internet te surfen.

Vanwege het grotere beeldformaat krijgen elementen de ruimte om informatie naast elkaar te zetten. Zowel in landschap als in portret verhouding wordt de website goed weergegeven.


Laptop - Jumbo responsive case

Laptop / Nog steeds een populair platform

Ondanks dat smartphones en tablets heersen op de mobiele markt blijft de laptop een aantrekkelijk middel om het web te bezoeken. De website bied nog steeds dezelfde functionaliteiten als op mobiel formaat, maar kan meer inhoud tegelijk laten zien.

Er komt meer ruimte vrij voor de navigatie en andere elementen die voorheen onder elkaar stonden. De pagina schaalt netjes mee naar het formaat beeldscherm waar naar word gekeken.


Desktop - Jumbo responsive case

Desktop / Schermen worden steeds groter

Ook op groot formaat scherm blijft de website er goed uitzien. Het is vaak onduidelijk met welk formaat precies wordt gekeken maar zowel met kleine als grotere beeldschermen word rekening gehouden.

Bij de website van Jumbo betekende dit dat de website niet verder meeschaalt dan een vastgestelde breedte. Dit om niet uit proporties te schalen en alsnog dezelfde gebruikerservaring te bieden. Als de website blijft meeschalen zonder maximale breedte dan zou het op een bepaald punt te moeilijk zijn om de content op de pagina overzichtelijk en goed weer te geven.


rocket

Een toekomstbestendige oplossing

Een responsive website is toekomstbestendig. Welk apparaat of resolutie er ook op de markt verschijnt, de website zal zich aanpassen aan het nieuwe formaat en werkt in de meeste moderne browsers. Niemand kan nog zien hoe het web er over 5 jaar uitziet maar met een responsive website is Jumbo klaar voor wat komen gaat.

Ervaringen met responsive design

Medewerkers vertellen wat responsive design voor hen betekend.
John Somers

Franklin Heijnen

Creative Director bij Mirabeau
"Bij responsive design werk je met echte content en denk je eerst na over hiƫrarchie en doelen van de gebruikers. Hierdoor ontwerp je sites die beter aansluiten bij wat gebruikers willen en maak je goed gebruik van de het scherm/device waarop de content wordt bekeken."
Michiel Ooms

Vasilis van Gemert

Principal frontend developer bij Mirabeau
"Je kan een website op zo'n manier opbouwen dat hij het gewoon overal, op elk apparaat goed doet. Bezoekers krijgen altijd dezelfde content, dezelfde functionaliteit te zien. Alles wat ze willen doen kunnen ze altijd doen in een vormgeving die is geoptimaliseerd voor hun specifieke device: grote knoppen voor dikke vingers, eenvoudige layout voor smalle schermen."
Edwin van Maanen

Edwin van Maanen

Visual designer bij Mirabeau
"Elke dag komen er nieuwe devices op de markt. Je weet niet meer hoe een gebruiker jouw website bezoekt. Iedere gebruiker verdient een optimale weergave en ervaring van je website. Dit brengt een enorme, maar ook te gekke, design-uitdaging met zich mee! "
Menno Rigterink

Menno Rigterink

Account Manager bij Mirabeau
"Wanneer ik een website nodig heb, dan wil ik dat ik het op mijn mobiel en iPad ook goed kan bekijken. Zeker wanneer ik iets nodig heb en snel wil handelen. Als dit niet zo is, haak ik af."

Meer responsive cases