Een mobiele website maken

Een mobiele website is een website die speciaal ontworpen is om bekeken te worden via een webbrowser van een mobiel apparaat.

Het mobiele internet groeit explosief. Het aandeel van mobiele internetgebruikers blijft stijgen, met name dankzij betaalbare datapakketten en de introductie van smartphones (bijv. Blackberry, Apple’s iPhone en Google’s Android-telefoons). In Nederland werd in een onderzoek gevonden dat maar liefst 10% van de bevolking regelmatig gebruik maakt van het internet op hun mobiele telefoon (februari 2009).

Mobiele uitdagingen

Wilt u uw website toegankelijk maken voor mobiele internetgebruikers? Wees er dan op bedacht dat ontwikkelen voor het mobiele web zeer uitdagend is, nog veel uitdagender dan het maken van een gewone website. Enkele uitdagingen zijn:

  • kleine en variabele schermgrootte
  • onbekende ondersteuning voor cookies
  • onbekende ondersteuning voor JavaScript / AJAX
  • beperkte ondersteuning voor CSS stijlen
  • trage verbindingssnelheden

Aanbevelingen en richtlijnen voor mobiele sites

Jamo Web Creations is gespecialiseerd in het maken van mobiele websites die met deze factoren rekening houden. Gebaseerd op persoonlijke ervaring, geven wij de volgende algemene richtlijnen voor het maken van een mobiele website:

Probeer niet alle functionaliteit van uw reguliere website over te zetten naar uw mobiele website. Denk zorgvuldig na over de volgende vraag bij het organiseren van uw nieuwe mobiele website: Hoe verschilt de mobiele gebruiker van de gewone gebruiker? Probeer de mobiele gebruiker zo goed mogelijk tot dienst te zijn, en laat alle opties weg die waarschijnlijk niet worden gebruikt. Een juiste uitvoering van deze oefening resulteert in een mobiele site die overzichtelijk is, eenvoudig te gebruiken is, en de gebruiker helpt hun doelen zo snel mogelijk te bereiken.

Gebruik een “liquid layout” die er goed uitziet op alle mobiele apparaten, onafhankelijk van hun schermbreedte en -hoogte.

Als gebruikers moeten inloggen om gebruik te maken van (delen van) uw site of dienst, houd er dan rekening mee dat er mobiele telefoons zijn die geen cookies ondersteunen. De beste manier om hiermee om te gaan is om te controleren of de browser van de bezoeker cookies ondersteunt. Zo niet, dan moeten alle links binnen uw website dynamisch worden aangepast om een sessie-ID in de URL mee te geven.

Het gebruik van JavaScript en / of AJAX op uw mobiele website is een uitstekende manier om interactiviteit te bieden zonder dat de gebruiker een nieuwe pagina hoeft in te laden. Dit maakt uw website sneller en bruikbaarder. Echter, niet alle mobiele telefoons ondersteunen JavaScript. Daarom is “graceful degradation” essentieel voor mobiele sites als JavaScript niet wordt ondersteund. Bijvoorbeeld, met betrekking tot AJAX, maak gebruik van zowel standaardacties voor links en formulieren, evenals zogenaamde onclick / onsubmit event listeners.

Niet alle mobiele browsers ondersteunen CSS stijlen even goed als normale desktop internet browsers. Ook hier komt “graceful degradation” weer om de hoek kijken als bepaalde stijlattributen niet volledig worden ondersteund. Daarom moet de HTML op uw pagina’s in een logische volgorde staan en gebruik maken van semantisch correcte HTML-elementen. Een eenvoudige methode om dit te controleren is door alle CSS op uw mobiele site uit te schakelen en vervolgens te kijken of de pagina’s nog steeds begrijpelijk zijn.

Houd de totale paginagrootte zo klein als mogelijk. Verbindingssnelheden van mobiele apparaten zijn over het algemeen traag. Voor een goede gebruikerservaring dient u genoeg aandacht te besteden aan de paginagrootte, inclusief alle elementen die het bevat. Hier zijn enkele tips om u te helpen dit te bewerkstelligen:

  • Gebruik slechts één extern CSS-bestand.
  • Bij gebruik van JavaScript, gebruik slechts één JavaScript-bestand.
  • Verklein en gzip de inhoud van uw pagina’s, stijlbladen en JavaScript.
  • Plaats geen onnodige afbeeldingen.
  • Herschaal afbeeldingen naar een mobielvriendelijk formaat (als richtlijn: maximaal 200 pixels breed of hoog).
  • Vermijd het gebruik van JavaScript-libraries, zoals jQuery of Prototype. Hoewel ze de bouw van JavaScript-functionaliteit zeker eenvoudiger maken, zijn dit soort libraries meestal te groot voor het mobiele web.
  • Zorg ervoor dat browsers de inhoud van uw website kunnen cachen, tenzij de inhoud van uw pagina’s zeer dynamisch is.

Test uw mobiele website uitgebreid. Zorg ervoor dat de opmaak geldig is. Bekijk uw mobiele website op verschillende mobiele telefoons om ervoor te zorgen dat de meest populaire mobiele telefoons en browsers uw website correct weergeven, en om ervoor te zorgen dat alles naar behoren werkt. Er zijn ook verschillende mobiele browser emulators beschikbaar op het internet: gebruik ze. En tenslotte, zoek een aantal mobiele internetgebruikers en laat ze uw website testen op gebruikersvriendelijkheid.

Hulp nodig?

Neem contact op met Jamo Web Creations om uw mobiele site te laten ontwikkelen of verbeteren.

Meer bronnen over mobiele websites ontwikkelen