Responsive website

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.

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:

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