Ja hoe schrijf je een pakkende titel die de lading dekt?
Als je dit leest heb je niet laten afschrikken of ben je benieuwd geraakt.
Waar gaat dit over? Wel in “webdesign land” worden interessante en belangrijke discussies gevoerd over het omgaan met websites voor smartphones en tablets, de mobile devices. Bezoekers kijken steeds vaker vanaf een Iphone, Ipad, de Samsung Galaxy’s etc. Veel keuze en steeds nieuwe vormen en tussenvormen zoals de netbooks. Daar wil ik het nu niet over hebben, maar over hoe je als ondernemer, zzp-er of bedrijf je website wilt presenteren terwijl je klant of bezoeker zoveel verschillende devices gebruikt. Je wilt natuurlijk wel dat een klant niet afhaakt op grond van een slechte moeilijk te bekijken website of eentje die slecht klikbaar is. Zeker als je bedenkt dat steeds meer mensen online aankopen doen.
De uitdaging/probleemstelling is duidelijk.
Hoe ga je hiermee om?
Ik bespreek in dit bericht twee opties.
- A: je bouwt een gewone én een mobiele website (voorbeeld de Volkskrant) in combinatie met een script dat “mobile devices detecteert”
- B: je gebruikt één website, maar zorgt ervoor dat alle elementen responsief zijn. Responsive betekent dat de flow van je pagina verandert afhankelijk van de breedte van het scherm (viewport device width) van de gebruiker. (voorbeeld deze website edugram.nl)
Optie A: Als voorbeeld neem ik de Volkskrant. Ze hebben ervoor gekozen om twee websites in te richten. www.volkskrant.nl en m.volkskrant.nl Deze laatste uiteraard voor mobiele devices. Onderstaande screenshots laten de verschillen zijn. De foto’s zijn binnen 1 minuut genomen. De screenshots zijn genomen met de Ipad.
Wat opvalt is bijvoorbeeld dat de rechter zijbalk met reclame volledig vervalt én dat er voor de blogberichten gekozen wordt om er drie per categorie te laten zien. Ik bespreek nu niet alles. Even technisch, hoe “weet” de website op welk device je “kijkt”? Hiervoor is er een scriptje geplaatst waarmee bijvoorbeeld met php wordt gekeken welke “user agent” je hebt. Wordt er een mobile device gedetecteerd dan kun je de bezoeker re-directen (doorsturen) naar een andere website zoals in het geval van de Volkskrant of een ander sjabloon tonen. Dit werkt goed. Het grote nadeel vind ik dat je dus twee websites “in de lucht” moet houden.
Optie B: responsive websites. In een vorig blog bericht ben ik hier al op in gegaan. De website die je nu bekijkt is responsive. Afhankelijk van je device ziet de flow van de pagina er anders uit. Dit betekent dat de elementen anders gerangschikt worden. In dit geval wordt de zijbalk onder de content geplaatst en de content kolom bijgeschaald. Voordeel hiervan is dat de leesbaarheid op peil blijft. Interessant is dat het “fixed menu” aan de bovenkant een ander uiterlijk krijgt. Het zou niet prettig zijn als dit geschaald wordt. Het neemt dan veel ruimte in. Zie onderstaand screenshot zoals het menu er op de Iphone uitziet met de kleinste viewport.
Info over de WordPress beginners workshops en gevorderden workshop.