Responsive website voorbeelden

In ons eerder geplaatste artikel 'Responsive design, wat is het?' lieten we jullie al kennis maken met responsive websites. In dit artikel een aantal voorbeelden van responsive websites waarin de uitleg van ons vorig artikel wat meer tot leven komt.

Campaign Monitor

De website van Campaign Monitor ziet er, ook op smartphones, goed uit. De website laat hierop bijna alles zien, en verbergt slechts kleine elementen op mobiele apparaten.

Zo worden de logo's van klanten op smartphones verborgen, en zijn er op tablets slechts drie zichtbaar, in plaats van de zes logo's die op laptops en desktops zichtbaar zijn. Zo ontstaat er de nodige ruimte op smartphones, terwijl de gebruiker niet het gevoel krijgt dat er iets belangrijks mist.

Hetzelfde gebeurt met de testimonials. Op kleine schermen wordt er slechts één getoond, waar op grote schermen alle drie worden laten zien.

Kortom, Campaign Monitor heeft een prachtige responsive website, die, ook op smartphones, prettig werkt.

Fastned

De responsive website van Fastned maakt gebruik van balken in contrasterende kleuren die de hele breedte van het scherm innemen. Dit werkt ook goed op smartphones. De website lijkt zelfs de mobile first filosofie te volgen: hij werkt heel erg fijn op mobiele telefoons en tablets. Je hebt als gebruiker niet eens door dat je naar een responsive website kijkt.

In tegenstelling tot de website van Campaign Monitor worden er op de responsive website van Fastned geen elementen verborgen op smartphones. De bezoeker krijgt zo altijd dezelfde inhoud te zien.

Bellroy

De website van Bellroy ziet er strak uit, ook op smartphones. Er wordt veel gebruik gemaakt van witruimte.

Ook hier komt de navigatie vanuit links over de inhoud geschoven. Verder maakt Bellroy gebruik van subitems in het menu. Deze zijn ook op smartphones uitklapbaar.

TOMS

Ook TOMS is een website waar producten worden verkocht. De homepage bestaat uit een grote carousel welke een groot deel van het scherm inneemt. In deze carousel worden enkel afbeeldingen gebruikt met daarin tekst verwerkt. Hierdoor is op kleine smartphones de tekst niet altijd goed te lezen. Voor de rest werkt de responsive website aardig goed.

Het menu is goed vertaald naar een menu waar in sub items kunnen uitklappen. Hierdoor kan de gebruiker eenvoudig door de website navigeren.
Wat vooral erg makkelijk en goed werkt is het filter in de webshop. Er kan makkelijk gefilterd worden op kleur, maat, prijs en andere kenmerken. Ook deze filters kunnen in- en uitgeklapt worden. Dit filter werkt hetzelfde op smartphones en op grotere beeldschermen. In het laatste geval zijn de filters alvast uitgeklapt. Van dit makkelijk te gebruiker filter kan menig webshop nog leren!

CJP

De website van het CJP (Cultureel Jongeren Paspoort) is eigenlijk niet responsive maar adaptive. Op smartphones wordt een andere website getoond dan op desktops en laptops.

De website is hierdoor nóg gebruiksvriendelijker. Net als bij de websites van Bellroy en TOMS schuift het menu vanuit links over de content. Helaas is het menu niet gelijk te zien, er staat namelijk een grote banner boven welke het grootste deel van het scherm inneemt.

Het menu zelf is wel overzichtelijk ingedeeld, de menu items zijn gegroepeerd en bestaan soms uit sub items welke standaard zijn ingeklapt. Dit submenu verschijnt ook nog eens onder het logo, zodat er gemakkelijk naar een andere subpagina genavigeerd kan worden.