Responsive website

Dat het tegenwoordig noodzaak is dat je website goed zichtbaar is op zowel desktop als op mobiele apparaten, staat buiten kijf. Volgens StatCounter is het mobiele internetverkeer in Nederland van 0% in 2010 gestegen naar ongeveer 49% in 2017. Het grootste deel van deze mobiele gebruikers is tussen de 12 en 45 jaar.


Maar hoe gaan we om met deze grote diversiteit aan apparaten en schermformaten? Wat toon je een gebruiker die thuis met een 27inch monitor werkt? En wat toon je een gebruiker die in de trein op een smartphone je website bekijkt? Misschien heeft deze mobiele gebruiker wel een onstabiele verbinding? Gebruiksvriendelijkheid is nog nooit zo belangrijk geweest.


De diversiteit aan apparaten (desktop, tablet, mobiel en niet te vergeten, alles er tussenin) kan je eigenlijk niet meer negeren. Wil je dat je website voor alle gebruikers goed zichtbaar is, is het wellicht de moeite waard om onderstaande opties te overwegen.


Responsive Design, Adaptive Design, Adaptive Layout of een Mobiele website?

Wil je je website geschikt maken voor alle apparaten? Er zijn 4 mogelijkheden:


1. Adaptive Layout:

Een Adaptive Layout is de meest simpele en meest statische manier van een ‘flexibele layout’. Op basis van vaste waarden wordt de layout bepaald: is het scherm van de gebruiker tussen de 350 en 450 pixels, heeft de site een vaste breedte van 350 pixels. Als het scherm tussen de 450 en 600 pixels is, wordt de breedte van de site 450 pixels. In tegenstelling tot Responsive Design, schalen afbeeldingen niet mee. De website schaalt in sprongen, in plaats van vloeiend (zoals een Responsive Design).
Bekijk voorbeeld.


Voordelen:

  • Ontwikkeling is relatief goedkoop;
  • Content hoeft maar op 1 plek bijgehouden te worden;
  • Gebruikers krijgen op elk apparaat nagenoeg hetzelfde te zien;
  • Gebruikers krijgen altijd dezelfde URL te zien: dit is veel beter voor het delen van bijvoorbeeld links.

 

2. Responsive Design:

Responsive DesignEen Responsive Design schaalt vloeiend mee op basis van de afmetingen van het scherm door middel van percentages en media queries. Op een smartphone worden bijvoorbeeld blokken content onder elkaar, in plaats van naast elkaar getoond. Naast de layout, past ook de inhoud van de website zich aan: knoppen worden bijvoorbeeld groter, zodat ze makkelijker aan te tikken zijn en afbeeldingen schalen mee (percentage van de beschikbare ruimte ipv een vaste breedte).
Bekijk voorbeeld 1.
Bekijk voorbeeld 2.


Voordelen:

  • Gebruikerservaring staat meer centraal dan bij Adaptive Layout;
  • Content hoeft maar op 1 plek bijgehouden te worden;
  • Gebruikers krijgen op elk apparaat nagenoeg hetzelfde te zien;
  • Gebruikers krijgen altijd dezelfde URL te zien: dit is veel beter voor het delen van bijvoorbeeld links.

 

3. Adaptive Design:

Adaptive Design ligt in het verlengde van Responsive Design. Naast een vloeiend schalende layout en inhoud, is het uitgangspunt van Adaptive Design dat we afhankelijk van het apparaat de best haalbare beleving voor de gebruiker willen creëren, zowel in vorm als in functie (‘Progressive Enhancement’). In de praktijk betekent dit dat een smartphone gebruiker bijvoorbeeld direct een grote button ‘bel direct’ in beeld krijgt en een desktop gebruiker een uitgebreid invulformulier. In plaats van het schalen van inhoud, wordt er vooral gekeken naar welke inhoud (en in welke vorm) deze relevant is op basis van het apparaat.
Bekijk voorbeeld 1.
Bekijk voorbeeld 2.


Voordelen:

  • Gebruikerservaring staat volledig centraal;
  • Gebruikers krijgen op elk apparaat een geoptimaliseerde UI voorgeschoteld;
  • Gebruikers krijgen altijd dezelfde URL te zien: dit is veel beter voor het delen van bijvoorbeeld links.

 

4. Mobiele website:

Een mobiele website is een op zichzelf staande website, speciaal gemaakt voor een smartphone en is daarom simpel en helder. Vaak bestaat een mobiele website maar uit 5 a 10 pagina’s met content die relevant is voor het gebruik op een mobiele telefoon. Uit onderzoek is gebleken dat contactgegevens en openingstijden de meest opgezochte informatie op een smartphone is. Nadeel is dat er (in tegenstelling tot ‘Adaptive Layout’ en ‘Responsive Design’) op 2 plekken content bijgehouden moet worden.
Bekijk voorbeeld.


Voordelen:

  • Gebruikerservaring staat centraal;
  • Gebruikers krijgen op een smartphone een geoptimaliseerde UI voorgeschoteld;
  • Ontwikkeling is relatief goedkoop;
  • Snelle laadtijd en alleen benodigde data verkeer.

 

Welke optie is de ‘beste’?

Welke optie het beste is voor je website is afhankelijk van de gebruikers. De grote vraag waar je je op de eerste plaats op zou moeten concentreren is: welke content schotel ik mijn gebruikers voor, afhankelijk van schermformaat, orientatie en resolutie. Wat zouden gebruikers met dat apparaat in een bepaalde situatie willen bekijken? Gebruikers die de website bekijken met een mobiel zijn bijvoorbeeld vaak onderweg. Uit ervaring en onderzoek blijkt dat dit grotendeels adresgegevens, telefoonnummers en openingstijden zijn. Je kan je afvragen of een Responsive Design in dat geval geen overkill is. Anderzijds kan het bijvoorbeeld bij een informatieve website juist wenselijk zijn dat alle informatie toegankelijk is op elk apparaat.


Uiteindelijk is Resposive Design dus gewoon een techniek die je kan inzetten om je doel te behalen, namelijk elke gebruiker op maat bedienen.


Benieuwd naar de mogelijkheden? Neem geheel vrijblijvend contact met ons op, wij denken graag met je mee!

Wellicht interessant voor u?

Q-Potato Holland BV
Q-Potato Holland BV

Q-Potato Holland BV

Q-Potato is in- en verkoper van pootaardappelen en consumptieaardappelen. Idas heeft deze responsive website gerealiseerd in meerdere talen met als doel: een professionele uitstraling neerzetten, gericht op de (inter)nationale markt.

Bekijk project
Meer over Concept & Vormgeving
GVG Oliehandel
Lees meer over: Websites
GVG Oliehandel

GVG Oliehandel

GVG Oliehandel: internationaal actief in alles wat met benzine, olie en reiniging te maken heeft. Idas heeft deze responsive website gerealiseerd in meerdere talen. Doel is het etaleren van de 6 merken die GVG vertegenwoordigt.

Bekijk project
Meer over Websites
Solutions Center
Lees meer over: Websites
Solutions Center

Solutions Center

SolutionS is een private verslavingszorginstelling en biedt een integrale behandeling voor doserings- en verslavingsproblemen. De behandeling is gebaseerd op het 12 Stappen Minnesota Model in combinatie met zowel inzichtgevende en lichaamsgerichte therapie als cognitieve groepstherapie.

Bekijk project
Meer over Websites

Webdesign portfolio

FishMasters
Websites

FishMasters

Speciaal voor de internationale markt biedt Fishmasters een deelassortiment aan met het Pure Fish Label. Producten met dit label bevatten geen e-nummers, geen kleurstoffen, geen conserveringsmiddelen, noch smaakstoffen. De website is opgeleverd in 6 talen.

Bekijk project
Hovenschool
Websites

OBS de Hovenschool

De Hovenschool is een openbare basisschool, die deel uitmaakt van de stichting Openbaar Onderwijs Deventer. Dit betekent dat zij open staan voor alle kinderen uit de wijk, ongeacht hun achtergrond of levensovertuiging.

Bekijk project
KMU
Websites

Koninklijke Metaalunie

Koninklijke Metaalunie is met meer dan 13.000 leden de grootste ondernemersorganisatie voor het midden- en kleinbedrijf (mkb) in de metaal. Idas heeft de nieuwe site ontworpen en gebouwd.

Bekijk project
Discovered
Websites

Discovered

Discovered staat voor een breed assortiment van exotische groenten en fruit. Op deze website worden recepten en producten door middel van een catalogus getoond. Gebruikers kunnen o.a. filteren op thema, ingrediënt, aantal personen en moeilijkheidsgraad. Tevens worden er gerelateerde recepten getoond.

Bekijk project
NJO
Websites

Noordwijkse Jeugd Open

Op de website van de Noordwijkse Jeugd Open kunnen jongeren zich inschrijven voor dit golftoernooi. Hierdoor kan de organisatie van NJO de inschrijvingen in veel kortere tijd verwerken. Deze website is volledig responsive en daardoor geoptimaliseerd voor mobiel gebruik.

Bekijk project
agealube
Websites

Agealube

Met deze (volledig responsive) cataloguswebsite van Agealube, kunnen gebruikers producten opzoeken. De catalogus is een door Idas gebouwde maatwerkmodule op basis van Azure Search.

Bekijk project
GVG
Websites

GVG Oliehandel

GVG Oliehandel: internationaal actief in alles wat met benzine, olie en reiniging te maken heeft. Idas heeft deze responsive website gerealiseerd in meerdere talen. Doel is het etaleren van de 6 merken die GVG vertegenwoordigt.

Bekijk project
Verito
Responsive Sites

Verito Informatisering

Verito Informatisering biedt een unieke softwareoplossing voor een aantal specifieke doelgroepen. De oplossingen zijn gebaseerd en volledig geïntegreerd met Microsoft Dynamics NAV. 

Bekijk project
Aspen
Websites

Aspen Benelux

Het bedrijf Aspen werd in 1988 opgericht aan de kust van het Aspen meer ten noorden van Göteborg in Zweden. Aspen is in veel Europese landen en Canada vertegenwoordigd en is hiermee wereldmarktleider in alkylaatbenzine. Idas heeft deze meertalige website voor Aspen ontwikkeld.

Bekijk project
Sallandsche
Websites

Sallandsche Golfclub 'De Hoek'

In opdracht van Sallandsche Golfclub 'De Hoek' heeft Idas deze website ontworpen en gebouwd. De baanconditie op de homepage is tevens gekoppeld aan de (tevens door Idas geproduceerde) iPhone App.

Bekijk project