Responsive case: Exotic Biking

In m'n vorige post had ik het over responsive webdesign. Ik heb al heel wat opgevangen over deze aanpak bij het onderzoeken van het responsive theme voor Fork CMS. Maar een volledig project opbouwen, bleek toch een ander paar mouwen te zijn. Met wat volharding kon ik m'n eerste responsive website uiteindelijk afwerken, en dat deel ik graag met jullie.

First steps

Exotic Biking is een website met een niet al te ingewikkelde structuur. Samengevat is het een reisblog waarbij de prachtige foto's het woord voeren. Het aantal pagina's is beperkt en de klant gaf mij alle vrijheid om het ontwerp te maken. Daarom had ik vanaf de start het idee deze website responsive te maken. Maar hoe begin je daar nu precies aan?

Ik heb het ontwerp voor 3 toestellen opgemaakt: Desktop pc/mac, iPad en iPhone. Ik hoop daarmee automatisch ook andere Android based toestellen mee te bekoren. Maar omdat ik enkel de 3 eerder vernoemde mediums bezit, kan ik daar geen uitsluitsel over geven.

Er wordt wel eens gezegd dat je bij het responsive ontwerpen moet starten vanaf mobiele platformen en zo uitwerken naar andere (grotere) toestellen. Ik heb deze raad niet volledig gevolgd. Ik werkte tegelijkertijd aan alle 3 de ontwerpen. Wat ga ik doen met die content block als ik slechts de breedte heb van een iPhone? Hoe zal zich dat positioneren op een iPad? Wat als de iPad in portrait mode gebruikt wordt? Ik moet je er niet bij zeggen dat ik continu zaken moest schrappen en opnieuw beginnen. Ontwerpen blijkt bij het webproject altijd het moeilijkste voor mij, en deze nieuwe aanpak maakt het daar niet makkelijker op. Maar eens je iets vast hebt, is de voldoening groot. En dan kon de uitwerking beginnen...

Responsive css

Zoals eerder vermeld gebruiken we media queries om aangepaste opmaak toe te passen op de verschillende platformen. Ik ben gestart vanaf het pc/mac ontwerp, wat het breedste is. Eens dit klaar is, oveschrijf je met media queries de waarden die moeten veranderen wanneer de breedte vermindert. Een klein voorbeeld:

Op de homepage zie je onderaan drie blokken: Mountainbike, koersfiets en wagen. Deze blokken staan standaard naast elkaar, omdat daar voldoende plaats voor is op een gemiddeld pc-scherm. Maar zoiets is niet mogelijk op een iPhone, daarom schuiven in de iPhone weergave deze blokken onder elkaar.

Responsive images

Omdat de klant in de toekomst ook foto's wil toevoegen, moest ik een slideshow module schrijven voor Fork CMS. Daarbij heb ik voor de homepage gebruik gemaakt van Flexslider, een responsive jQuery slider plugin. Deze slideshow schaalt automatisch afbeeldingen bij en zorgt ervoor dat de navigatie netjes op z'n plaats blijft. Bovendien kun je met je vinger doorheen de foto's bladeren op iPad en iPhone, echt knap.

Results

En dit is het resultaat. De screens zijn afkomstig van iPad (staand en liggend) en iPhone. Je kunt de 'responsiveness' ook testen op jouw pc door te surfen naar Exotic Biking en het venster van je browser langzaamaan kleiner te maken.