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 ook interessant voor u?

Geen resultaten gevonden.

  • E.O.C. Onderlinge Schepenverzekering

    Bekijk project
  • 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
  • De Spil

    Bekijk project
  • 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
  • Verito

    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
  • Corporatie Cursussen

    Bekijk project
  • Mayonna BV

    Mayonna is gespecialiseerd in het produceren en verkopen van kwalitatief hoogwaardige vis producten. Doel van de website is om deze producten op een aantrekkelijke manier tentoon te stellen.

    Bekijk project
  • Noordwest Ziekenhuisgroep

    Bekijk project
  • 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
  • LOS Stadomland

    Bekijk project
  • Samenwerken Tussen Organisaties

    Bekijk project
  • Actief Utrechts Science Park

    Bekijk project
  • VMBO 't Venster

    Bekijk project
  • Van der Reest Advies

    Bekijk project
  • Arnoud van Opijnen

    Bekijk project
  • BBS Food

    Bekijk project
  • Metaalunie

    Bekijk project
  • Heyboer BV

    Bekijk project
  • Vlamings BV

    Bekijk project
  • annalisa

    Bekijk project
  • Het Beekdal Lyceum

    Bekijk project
  • 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 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
  • Maakplein

    Bekijk project
  • Vivere Bene

    Bekijk project
  • 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
  • Bald Logistics

    Bekijk project