Responsive website

Het succes van vele bedrijven is tegenwoordig afhankelijk van hun online aanwezigheid. Er wordt bij de meeste bedrijven dan ook flink aan de digitale weg getimmerd om met nieuwe klanten in contact te komen, en met bestaande klanten in contact te blijven. Ondertussen blijft ook de technologie zich steeds vernieuwen, en de komst van de smartphone en het mobiele internet biedt bedrijven nieuwe kansen om relaties nog verder te versterken.

Op dezelfde manier waarop het een aantal jaar geleden een vereiste was om een website op te zetten, is het tegenwoordig ‘verplicht’ om deze website beschikbaar te maken voor mobiele gebruikers. Wist je dat in 2017 51% (http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet) van de website bezoekers gebruik maakt van een smartphone tijdens het surfen? Meer dan de helft!
website bekeken op mobile hoeveel


Ouderwetse – statische - websites schalen niet goed mee met de kleine schermen van bijvoorbeeld een iPhone of andere smartphones. 67% van de bezoekers van niet goed schalende websites haken al binnen 8 seconden af en vervolgen hun zoektocht elders. Ook Google is hiervan op de hoogte, en haar algoritmes zijn inmiddels zo aangepast dat voorrang gegeven word aan mobiel-vriendelijke websites.


Ondertussen maakt de andere helft van de bezoekers nog wél gebruik van een groot scherm, hoe gaan we om met deze grote diversiteit aan apparaten en schermformaten?

  

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

Er zijn 4 gangbare methoden om uw website desktop én smartphone vriendelijk te maken, iedere methode heeft zijn voor en nadelen, wij zetten ze voor u op een rijtje: :


1. Adaptive Layout:

Een Adaptive Layout is de meest simpele en 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; dan 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. De website schaalt in sprongen, in plaats van vloeiend (zoals bijvoorbeeld bij Responsive Design). Afbeeldingen schalen ook niet mee met het formaat van de website, het kan dus zijn dat deze niet altijd optimaal worden weergeven.
Bekijk voorbeeld.


Voordelen:

  • Goedkoopste ontwikkelmethode;
  • 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 Design Een 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’?

Er is niet direct een ‘beste’ optie aan te wijzen, dit is namelijk voor een groot deel afhankelijk van de gebruikers van de site. Stel jezelf dus de volgende vragen: 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, een adaptive design zou al volstaan. Anderzijds kan het bijvoorbeeld bij een informatieve website juist wenselijk zijn dat alle informatie toegankelijk is op elk apparaat.

Al met al is het optimaliseren van de website voor mobiel gebruik echt een must! Niet alleen zullen de bezoekers zich meer verbonden voelen met jouw bedrijf, ze zullen je ook eerder vinden via Google! In iedere situatie kan een andere oplossing de beste zijn, en wij kijken er naar uit om de mogelijkheden die passen bij de situatie van jouw bedrijf of organisatie te bespreken. Ons telefoonnummer vind je hier. Je kan hieronder ook op de “grote gele banaan” klikken en dan bellen we zo snel mogelijk terug!


Offerte aanvragen voor responsive website

Wellicht interessant voor u?

Aspen Benelux
Lees meer over: Websites
Aspen Benelux

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
Meer over Websites
Vindjeruimte.nl
Lees meer over:
Vindjeruimte.nl

Vindjeruimte.nl

Vindjeruimte is een online platform dat vraag en aanbod van het maatschappelijk vastgoed bij elkaar brengt. Op de website kun je eenvoudig een ruimte of accommodatie vinden en boeken. Het complete platform wordt door diverse gemeenten en organisaties gebruikt als reserveringssysteem.

Bekijk project
Discovered
Lees meer over: Websites
Discovered

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
Meer over Websites

Webdesign portfolio

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
Firelux
Websites

Firelux

Firelux is een zeer schone brandstof voor verplaatsbare petroleumkachels. Deze brandstof is opgebouwd uit extreem zuivere, doorgeraffineerde aardoliedestillaten.

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
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
Vindjeruimte
Responsive Sites

Vindjeruimte.nl

Vindjeruimte is een online platform dat vraag en aanbod van het maatschappelijk vastgoed bij elkaar brengt. Op de website kun je eenvoudig een ruimte of accommodatie vinden en boeken. Het complete platform wordt door diverse gemeenten en organisaties gebruikt als reserveringssysteem.

Bekijk project
Solutions
Websites

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
Gently
Websites

Gently

Gently produceert reinigings- en onderhoudsproducten voor caravans, campers en boten. De website is in 2 talen beschikbaar en is een showcase van de verschillende lijnen die dit merk vertegenwoordigt.

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
Olympos
Websites

Sportcentrum Olympos

Sportcentrum Olympos is een ruime en veelzijdige sportaccommodatie. Met de meertalige webshop die Idas voor Olympos heeft gerealiseerd, kunnen gebruikers online lessen boeken en betalen. Gevolg van de webshop is een forse besparing, gezien de boekingen niet meer handmatig hoeven te worden aangenomen en verwerkt.

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