Websites voor mobiel

Internetgebruik verschuift van computers naar mobiel; en dit gebeurt snel. In 2014 zal je website meer bekeken worden met een mobiele telefoon dan met een vaste computer.

Houd hier dus rekening mee als je een website koopt. Het zou zonde van het geld zijn als je over een paar jaar je website alweer moet vernieuwen, of een aparte nieuwe website moet aanschaffen.Wat zijn nu de verschillen in het ontwerp voor een mobiele telefoon en een vaste website?

1. Het scherm van de mobiele telefoon is smaller. Voor de hand liggend natuurlijk. Concreet betekent dit dat je scherm veel minder breed is: brede tabellen etc. gaan niet goed werken. Wat wel goed werkt is, is het scrollen. Door de swipe is dit erg makkelijk: een  bezoeker scrollt zo omlaag.
2. De grootte van je pagina’s, gemeten in kilobytes, wordt ineens erg belangrijk. Als je website te lang laadt, dan is het geduld van de bezoeker op en stopt hij met kijken. Ruimtevreters zijn vooral afbeeldingen, dus houd die klein; en doseer ook de hoeveelheid javascript. Hoe lichter hoe beter.
3. Over Flash is al veel gezegd, maar Flash-films halen het niet op de ipad en iphone. Als je persé je eigen films wilt beheren, zorg er dan voor dat je deze in verschillende formaten aanbiedt, namelijk: Flash, WebM,  MP4, Ogg. Om alle gangbare browsers te ondersteunen heb je helaas vier versies nodig! Veel fijner is dan ook om YouTube te gebruiken, dan heb je deze compabiliteitsproblemen niet want YouTube lost het voor je op.

Responsive design

Een hele elegante manier waarop web-ontwerpers rekening houden met schermen van zeer uiteenlopende grootte, heet responsive web design. Het ontwerp past zich aan aan de grootte van het beeldscherm. En html5 maakt dit makkelijker om te implementeren.Wat gebeurt er dan met het scherm? Een leuk praktijkvoorbeeld zie je op: http://hicksdesign.co.uk/  Als je je browserscherm smaller maakt, verspringt de inhoud. De website past zich als het ware aan aan de grootte van het scherm. Op volledige grootte bestaat de website uit drie kolommen. Als je de website smal maakt, dan zie je hem zoals die er ook op een mobiele telefoon uit zou zien. In een tussenstadium zie je hem in twee-kolomsopmaak. In het Engels heet dit ook wel een fluid grid: de website is gebaseerd op een vloeiend raster.Nog veel meer voorbeelden vind je op: http://mediaqueri.esHet voordeel van op deze manier werken is dat je website een uniforme uitstraling heeft over alle platforms en zich hier flexibel bij aanpast. Door bij het ontwerp van je website al rekening te houden met de verschillende formaten, houd je rekening met de toekomst.Wil je meer weten?Lees dan: Ethan Marcotte – A List ApartHeb je vragen of aanvullingen?Laat dan een reactie achter.