Is uw mobiele website okee?
U heeft een mobiele website gemaakt? Prachtig! Hoe staat het echter met de snelheid en is uw code eigenlijk wel geschikt? Met de W3C mobileOK Checker kunt u uw mobiele website testen en verbeteren.
In ons e-zine van mei 2011 heeft u kunnen lezen over het belang van een mobiele website en hoe u deze kunt maken. Belangrijk echter is ook dat de website een zo kort mogelijke laadtijd heeft en dat de programmering daadwerkelijk geschikt is voor mobiele user-agents.
W3C mobileOK Checker
W3C mobileOK Checker is een handige online tool van het World Wide Web Consortium. Hiermee krijgt u inzage in de optimalisatie-status van uw mobile website. Bij de rapportage geeft de tool ook tips hoe u de aandachtspunten kunt verbeteren. De eindscore wordt weergegeven als percentage van 0% (het rode gebied) tot 100% (het groene gebied).
Snelheid verbeteren
Op een mobiel netwerk kan het maar liefst 1 minuut duren om een pagina van 100KB op te vragen. Daarmee jaagt u de bezoekers op kosten en vergt u bovendien veel van hun geduld. De richtlijn beveelt een grootte van maximaal 20KB aan. Dat is inderdaad niet veel. U kunt uw website 'kleiner' maken door gebruik te maken van onder andere:
- Zo min mogelijk externe bestanden die de pagina aanroept (zoals scripts, plaatjes en css)
- Zo min mogelijk plaatjes (bijvoorbeeld door het gebruik van css-sprites)
- Optimale compressie van plaatjes
- Optimale compressie van CSS (minify)
- Een langer houdbare cache-instelling zodat bestanden niet steeds opnieuw worden gedownload
Code verbeteren
Hier wordt het iets complexer omdat de tool vrij kritisch is in wat wel en niet mag zoals:
- Gebruik van javascript wordt afgeraden
- Relatieve waarden (in procenten of 'em') hebben de voorkeur boven absolute waarden (in pixels) vanwege wisselende schermresoluties
- Gebruik een geschikte Doctype voor mobiele user-agents (zoals 'application/xhtml+xml')
- Combineer de Doctype met een geschikte Charset (zoals 'utf-8')
- Neem Geoptimaliseerde CSS (minified) op in de <head> van de pagina (om het aantal externe aanroepen te verminderen)
- Voorzie plaatjes altijd van een width-, height- en alt-attribuut
Het aanpassen van bovenstaande zaken zal u een eind in de richting van de 100% brengen.
De praktijk
Een korte blik op de praktijk doet onze wenkbrouwen fronsen. Helemaal als we een vergelijking trekken tussen Nederlandse en Amerikaanse spelers:
|
Verenigde Staten:
|
Nederland:
|
Hmmm... Dat zou toch beter moeten kunnen?
Links:
16-06-2011
Studio Plankton | Webdesignbureau Rotterdam
Internetspecialist in ontwerp, ontwikkeling en e-marketing voor al uw webprojecten. Telefoon: 010-226 54 12 / E-mail: info@studioplankton.nl
Weblog
Wilt u op de hoogte blijven van de laatste tips & trucs? Meld u dan gratis aan voor ons maandelijkse e-zine. (voorbeeld)
© 2002–2012 Studio Plankton Webdesignbureau | Algemene Voorwaarden | Zoekmachine Optimalisatie | Social Media