10 voorbeelden van fantastische responsive websites

In dit vierde artikel in mijn serie over responsive webdesign is het tijd om te laten zien hoe het moet. Tijd om achterover te leunen en even te genieten. Om te genieten van 10 hyperfantastimega responsive websites, de kersen op de taart der responsiveness, de…goed, je snapt ‘m. Daar gaan we!

1. Contentsmagazine.com

Ik open mijn lijstje met de website van Ethan Marcotte, de ‘godfather’ van responsive webdesign. Die eer heeft hij verdiend: zijn website kun je met recht een state-of-the-art-parel van een responsive website noemen. Met zijn website slaagt hij er in zijn herkenbare huisstijl – de gekleurde boeken in retrostijl – op elk schermformaat terug te laten komen. Hij speelt zelfs met de manier waarop de grafische elementen bij verschillende schermgroottes in de achtergrond worden verwerkt.

De verhouding tussen huisstijl en focus op het belangrijkste doel van de website – het lezen van content – heeft hij perfect afgestemd: de huisstijl is duidelijk aanwezig, maar de ogen van de bezoeker worden direct naar de artikelen getrokken.

Hoofdnavigatie achter één knop

Let ook op de manier waarop het overzicht met artikelen en quotes meeschaalt met je schermgrootte, slim! Verder voegt hij de hoofdnavigatie op kleine schermen samen tot één knop: ‘EXPLORE’. Werkt prettig, leest prettig, oogt prettig. Well done, Ethan! Bekijk de responsiveness van Contentsmagazine.com.

2. Skinnyties.com

Skinny Ties produceert en verkoopt al meer dan 30 jaar stropdassen en is een perfect voorbeeld van een zeer succesvolle responsive ecommerce-website. Omdat alle interactieve elementen zijn gebouwd voor ‘click’ én ‘touch’, oogt en werkt de website op elk apparaat hetzelfde. De website beweegt perfect met je schermformaat mee. Op mijn smartphone is het net zo prettig shoppen als op mijn laptop: ook op een klein schermpje ben ik in staat om in een handomdraai mijn ideale stropdas uit te zoeken. En het afrekenen werkt geweldig. Zoomen is niet nodig en alle velden zijn eenvoudig in te vullen. Iets dat je niet van veel ecommerce-websites kan zeggen.

Bewijs?

De navigatie werkt perfect op een smartphone of tablet. Ook slim: het telefoonnummer in het blok ‘We’re here for you’ is klikbaar op een smartphone, waardoor je het nummer direct kunt bellen. Het bewijs is inmiddels geleverd: volgens Creativebloq.com steeg de totale omzet na de lancering met 43,4% en de omzet vanaf iPhones met maar liefst 377,6%. Niet slecht at all. Bekijk de responsiveness van Skinnyties.com.

3. 8faces.com

Responsive webdesign is geen straatvoetbal. Het is geen wedstrijd met het showen van indrukwekkende trucjes. 8faces.com heeft dat goed begrepen en is wat mij betreft een perfect voorbeeld van eenvoudig en doeltreffend RWD. Alle elementen schalen mooi met de schermgrootte mee en op een smartphone wordt de navigatie samengevoegd tot één dropdown-menu.

Nekpijn?

Heel gaaf is de maximale breedte van de website. Sommige mensen klagen over nekpijn bij dit soort joekels, maar ik ben er wel van gecharmeerd. Overigens hebben ze de maximale breedte van een artikel in het blog wél smaller gehouden. Een begrijpelijke keuze, want bij het lezen van een lang artikel in de volle breedte zou ook ik last van mijn nek krijgen. Bovendien is het met breed opgezette teksten vaak lastig de volgende regel te vinden. Bekijk de responsiveness van 8faces.com.

4. TheNextWeb.com

TheNextWeb.com is één van de meest invloedrijke blogs ter wereld op het gebied van technologie. Als autoriteit binnen de technologiebranche hebben ze een naam hoog te houden. En dat is ze gelukt.

Het aantal ‘states’ is indrukwekkend

De ultra-responsive website wordt door talloze experts en op vele blogs de hemel in geprezen. En terecht. Speel maar eens met de grootte van je scherm: het aantal zogeheten ‘states’ is indrukwekkend te noemen. Op werkelijk elk schermformaat is de content perfect ingericht. Met name over de navigatie is goed nagedacht. Op elke schermgrootte is een prioritering vastgesteld en verdwijnt het minst relevante deel om ruimte te maken voor de belangrijkste zaken. De maximale breedte is vastgezet op een punt dat voor iedereen prettig werkt. Wat mij betreft een goede keuze, vanwege de grote hoeveelheid content en de relevantie daarvan.

Bekijk de responsiveness van TheNextWeb.com.

5. Awwwards.com

Als award uitreikende organisatie die zich richt op het design van websites over de hele wereld, is een goede indruk maken niet genoeg. Je zal je publiek omver moeten blazen, monden doen laten openvallen en webdesigners een gevoel van pure intimidatie moeten bezorgen. Missie geslaagd. De website oogt strak en professioneel. Qua design het neusje van de zalm die de kersen van de winnende taart heeft gegeten. Maar wel rust. Geen vuurwerk. Gezien de informerende functie en hoeveelheid relevante content vind ik dat logisch en terecht.

Als een mok warme chocolademelk in een sneeuwstorm

De responsiveness is werkt als een mok warme chocolademelk in een sneeuwstorm, heerlijk! De content is voor elke state opnieuw bepaald en correct ingedeeld. Alles staat precies waar dat handig uitkomt en de grootte van alle afzonderlijke elementen schaalt precies fijn mee. De volgorde op een smartphone voelt logisch aan en de keuze om bepaalde functies weg te laten om andere meer ruimte te geven is ook overal prettig. Bekijk de responsiveness van Awwwards.com.

6. Starbucks.com

Eén van de eerste grote retailers met een responsive website. En niet zonder succes. De herkenbare huisstijl komt op elke schermgrootte goed tot z’n recht en de navigatie verspringt elke keer precies op het moment dat dit gewenst is. Extra respect voor het uitklapmenu op mijn smartphone: de button om het uitgeklapte menu weer in te klappen blijft op z’n plek zitten doordat het uitklap-icoon simpelweg verandert in een inklapicoon. Klinkt logisch, maar de meeste uitklapmenu’s die ik tegenkom schuiven ineens naar links of rechts. Onnodig en vooral onhandig. Go Starbucks!

‘Customer service’ verdwijnt bij switch naar tablet

Wat verder opvalt is dat het item ‘Customer Service’ in de courtesy navigatie (helemaal bovenaan) verdwijnt bij een breedte van 769 pixels (de switch van de meeste desktops of latops naar de meeste tablets), terwijl dat qua ruimte niet noodzakelijk is. Zien we hier een klantonvriendelijke strategie die op subtiele wijze is verwerkt in responsiveness? Bekijk de responsiveness van Starbucks.com.

7. StephenCaver.com

Stephen Caver is een bekende en begaafde developer die zijn skills heeft gebruikt om een ijzersterke responsive website te bouwen. Naast het feit dat het ontwerp erg strak en clean oogt, beweegt de website op sublieme wijze mee met elk schermformaat.

De look and feel van de navigatie verandert

De navigatie springt in het oog en wordt op elk apparaat optimaal weergegeven. Op een smartphone verspringt de navigatie zelfs naar een compleet andere look and feel, zodat deze ook in dat geval weer optimaal gebruiksvriendelijk overkomt en tegelijkertijd ruimte maakt om het strakke ontwerp te behouden. Bekijk de responsiveness van StephenCaver.com

8. ZURB.com

‘We’re a nimble team doing mighty things’, staat er op de website van ZURB.com, een digitaal ontwerpbureau vlakbij Silicon Valley. Eén van die mighty things is hun eigen responsive website. Het is duidelijk te zien dat over elk element goed is nagedacht. Je krijgt zelfs een andere cover te zien wanneer je op een tablet van landscape naar portrait wisselt. En de taartdiagrammen onder ‘About/Culture’ verdwijnen op een scherm dat smaller is dan 1025 pixels.

Zo heurt het

Op grote schermen ziet met name de homepage er fantastisch uit. ZURB draait om design, dus de website schaalt helemaal ‘fluid’ met je mee. Zo heurt het. Enige puntje van kritiek: op een smartphone werkt de navigatie wat omslachtig. Als je navigeert naar ‘About’ en je wil naar de subpagina ‘Culture’, moet je helemaal naar beneden scrollen. De navigatie zit daar als het ware in de footer. Niet erg handig, vind ik. Bekijk de responsiveness van ZURB.com

9. Hicksdesign.co.uk

De emoticons van Skype, het logo van MailChimp en het logo van Shopify: het is allemaal bedacht en gemaakt door Hicksdesign. Een bureau met internationaal aanzien en een portfolio waar 99% van de designstudio’s alleen maar van kan dromen.

Het hoedje behoudt zijn grootte

User interface is één van de core diensten van Hicksdesign en dat is te zien. De website is ruim opgezet, komt rustig over en werkt op alle apparaten en schermformaten heerlijk intuïtief. Vergroot en verklein je browservenster en je ziet dat alles vloeiend met je meebeweegt en een hoop elementen verspringen om de prioritering van content steeds optimaal te houden. Let ook op het hoedje dat ondanks een kleiner scherm zijn grootte bijna volledig behoudt. Knap gedaan! Wat mij betreft: geen kritiek, niks aan veranderen. Bekijk de responsiveness van Hicksdesign.co.uk

10. GE.com

De lijst bevat natuurlijk vooral grote namen. En die grote namen beschikken over grote budgetten. Maar een torenhoog budget is geen garantie voor een fenomenale website. Om dat te laten zien, sluit ik de lijst af met een website waar ik iets minder lyrisch over ben. Omdat we zo weer iets kunnen leren over hoe het nog beter kan. Bovendien is het goed om te beseffen dat grote organisaties niet per se alles perfect doen en dus als voorbeeld genomen kunnen worden.

General Electric is een bedrijf met geschiedenis en gebouwd op een fundering van vakmanschap en trots. De website ademt het menselijke aspect en de innovatieve filosofie. Dat wel. Daarbij is het GE gelukt om de ervaring op de desktopversie ook te bieden op een tablet en smartphone. Het design blijft overeind en de content wordt steeds op de juiste manier geprioriteerd. Daarmee heeft GE de grootste uitdaging getackeld.

Maar een andere belangrijke uitdaging die bij RWD komt kijken, is het efficiënt omgaan met de beschikbare schermgrootte. Dat punt is niet helemaal in orde. Zoals je in onderstaand screenshot ziet, staat er maar liefst drie keer met koeienletters dat ik mij begeef in het gedeelte ‘For business’. Op een gegeven moment weet ik het wel. Zonde van de ruimte op een smartphone.

Minpuntjes

Ander minpuntje: de navigatie op een smartphone werkt niet helemaal lekker. Als ik naar beneden wil scrollen, dan moet ik zorgen dat ik geen uitklapbaar subitem aanraak. Bovendien kan ik een uitgeklapt subitem niet meer inklappen, waardoor het menu relatief lang blijft. Bekijk de responsiveness van GE.com.

Verliefd

Zo. Na het lezen van mijn vorige drie artikelen in deze reeks en het bekijken van deze tien voorbeelden, hoop ik dat je net zo verliefd bent op responsive of adaptive webdesign als ik. Ik vind het altijd leuk om met je te praten, discussieren en filosoferen over RWD, dus reageer vooral hieronder.