Niet vaak staat de klant open voor Responsive webdesign, wellicht komt het doordat het nieuw en daarmee tijdrovend klinkt. Bij Wiechers Wonen lag dit anders, en terecht!
Responsive webdesign toegelicht
Responsive webdesign is niets anders dan de styling/design van de website toespitsen op de resolutie van de scherm waarmee de bezoeker een website bezoekt. Zo heb je op een smartphone (iPod, HTC) minder pixels tot je beschikking dan een tablet, zoals een iPad, welke weer minder pixels tot zijn beschikking heeft dan een laptop of PC. Tegelijkertijd wil je echter dezelfde informatie aan blijven bieden.
Hiervoor zijn verschillende opties:
- Een browsersniffer, die controleert met wat voor toestel ofwel device je de website bezoekt; Zo een lijst van toestellen, moet je echter up to date houden aangezien ook deze toestellen blijven vernieuwen, of doordat er nieuwe modellen bijkomen. Dit betreft om die reden geen waterdichte oplossing;
- De mobiele versie van de website hosten op een subdomein als mobiel.website.nl. Je geeft de bezoeker vervolgens de optie om te schakelen naar deze versie. Afhankelijk van het systeem dat achter de website draait, kan dit vlekkeloos. In het ergste geval heb je een tweede systeem nodig om dit mogelijk te maken, inclusief bijkomende programmeerwerk;
- Responsive webdesign, welke naar de pixels luistert en op basis daarvan een alternatieve styling toepast, al dan niet een geheel nieuw minimalistisch layout.
Zaak is vervolgens om dit vanuit de gebruiker aan te pakken. Bij een website als WiechersWonen.nl, een meubelzaak in omgeving Groningen/Drenthe welke voornamelijk hun aanbod online presenteert is het praktisch inleven vanuit de gebruiker. Waar zal een potentiele bezoeker zich bevinden en met welk doel bezoekt hij de website, als hij de website vanuit een smartphone benadert.
Bezoekers via smartphones
Je wilt vooral bereiken dat een gebruiker snel de informatie vindt die hij zoekt, zonder te veel hoeven te scrollen of in te zoomen (te tikken op het scherm). Waarschijnlijk is iemand die de website middels een mobiele telefoon of smartphone bezoekt, reeds onderweg en wil hij op basis van het aanbod, nagaan of de winkel een bezoek waard is (volgens de reviews wel) of kijken tot hoe laat de winkels geopend zijn om na te gaan of het nog in zijn agenda past.
Dit heeft mij er toe bewogen een balk prominent in beeld te brengen, met daarin de belangrijkste elementen voor bezoekers met een smartphone:
- De contactgegevens die normaliter rechts in beeld staan, is omgedoopt tot een contact-snelkoppeling welke in de balk is gepositioneerd;
- De navigatie komt pas tevoorschijn zodra je deze via een knop oproept;
- Het was tevens praktisch de zoekfunctie prominent in beeld te houden/brengen, waardoor deze in de overige ruimte van de balk is gepositioneerd.
De social media knoppen zijn van linksonderin, naar rechtsboven verhuisd. Is iemand op zoek naar reclameboodschappen, video-uitleg of mededelingen van Wiechers Wonen, dan zijn deze ook voor smartphone gebruikers snel te bereiken vanuit de website.
Tablet of iPad bezoekers
In theorie beschikt een gemiddelde tablet of voldoende pixels, om de oorspronkelijke website goed te kunnen bezoeken en te gebruiken. Toch is er bewust voor gekozen, om ook tablet gebruikers de mogelijkheid te geven de website via de zogenaamde smartphone versie te raadplegen.
Een tablet heeft een brede en smalle kant, waardoor je hem als het ware in de breedte, of in de hoogte kunt hanteren. Dit wordt respectievelijk landscape en portrait mode genoemd. Omdat men tegenwoordig ook met tablets op pad gaan, is de responsive stylesheet voor smartphones beschikbaar gesteld voor breedtes tot en met 800px, waaronder ook tablets in portrait mode vallen. Deze komen veelal niet verder dan een breedte van 768px, in landscape mode komt een tablet tot ongeveer 1024px. Door het scherm dus te kantelen, kan een bezoeker de website via de minimalistische versie bekijken en wellicht, vanaf touche-devices, sneller navigeren.