Sinds de introductie van de smartphones en tablets zien we een forse stijging in mobiel webverkeer. Veel mensen pakken immers toch nog even hun iPad in de trein erbij om bijvoorbeeld het laatste nieuws te lezen of om toch nog even hun mail door te werken.
In 2012 op 2013 zien we al bijna een verdubbeling van het mobiele webverkeer, verwachtingen zijn dat dit in de toekomst alleen nog maar meer zal stijgen. De vraag is dan ook, wat moet u doen om uw website beschikbaar te maken voor het mobiele verkeer?
Mobile delivery methodes
Er zijn verschillende methodieken die gebruikt kunnen worden om uw website klaar te maken voor het mobiele platform. Wij focussen ons hier op de vier meest voorkomende oplossen.
- Responsive website
- Mobile specific website
- Native app
- Hybrid app
Responsive website Dezelfde website, andere weergave
Responsive websites zijn er de laatste tijd steeds meer. Deze websites zijn niet gericht aan een specifiek apparaat ( mobiel, ipad, desktop ) maar aan het formaat van de browser.
Op deze manier hoeft er maar één website ontwikkeld te worden die ingezet kan worden voor alle platformen. ( voorbeeld: http://www.hunkemoller.nl/nl_nl/blog/ – door het formaat van de browser te veranderen is de functionaliteit zichtbaar. )
Op basis van de beschikbaare ruimte kan er zo gekozen worden om sommige elementen wel of niet te vertonen. Bij een kleinere browser kan je er bijvoorbeeld voor kiezen om auteursinformatie en publicatie data te verbergen om zo meer relevante informatie in beeld te krijgen, namelijk de titels van je blogberichten.
Omdat de weergave afhankelijk is van de grootte van de browser kan er pas bij de bezoeker worden bepaald hoe de uiteindelijke layout eruit komt te zien. Op het moment dat de webpagina gegenereerd wordt moet deze dan ook zo volledig mogelijk zijn, alle elementen moeten hierin voorkomen voor zowel browsers als mobiele devices. Dit uiteraard ten koste van de snelheid van de website.
Voordelen | Nadelen |
Enkele website voor meerdere devices | Laad dezelfde resources als de normale website |
Minder werk bij het updaten van de website | Enkel voor recente browsers |
| Afbeeldingen onnodig groot |
Mobile-specific website Compleet andere website, meer mogelijkheden
Mobile specific websites zijn er al een langere tijd. Dit zijn websites welke voor een groot deel opnieuw gebouwd zijn specifiek voor het mobiele verkeer. Deze zijn vaak te herkennen aan urls als “m.domain.nl”. Omdat dit een eigen website is kunnen hier alternatieve afbeeldingen getoond worden ( zodat de laadtijd op mobiel korter is ) en bestaat er de mogelijkheid om mobiele of ipad bezoekers alternatieve content te tonen.
Voordelen | Nadelen |
Kortere laadtijd | Aanzienlijk meer werk dan responsive |
Mogelijkheid tot tonen van andere content per device | Werkt niet a.d.v. browser formaat |
Werkt op alle browsers | |
Native app Platform specifieke app
Native app’s zijn programma’s specifiek geschreven voor Android, IOS, etc. Omdat dit een oplossing betreft die speciaal voor het mobiele device is ontwikkeld zijn de mogelijkheden hiervan aanzienlijk uitgebreider dan die voor een mobiele website.
Bij native apps heb je meer toegang tot de functies van een mobiel device. Denk hierbij bijvoorbeeld aan de camera, contactpersonen, caching en grafische prestaties. Nadeel van native apps is dat deze vaak goed moeten worden gekeurd voordat deze in de market of app store beschikbaar zijn.
Voordelen | Nadelen |
Sneller dan websites | Veel ontwikkeltijd. ( per besturingssysteem een andere app ) |
Meer caching mogelijkheden | Goedkeuring nodig ( van bv. App Store) |
Meer functies: Camera, contacten, locatie, etc. | |
Hybrid app Lijkt op een native app, maar is een HTML5 wrapper
Met hybrid apps is het mogelijk om d.m.v. html, js en css een soort “native” app te creëren. Hierdoor heb je toegang tot enkele mogelijkheden van een native app, maar is er geen ontwikkeling per platform nodig. Zo kan je direct voor zowel Android als IOS de app beschikbaar maken.
Een groot nadeel van een hybrid app is dat deze niet zo snel is als native apps. Ook worden hybrid apps niet snel geaccepteerd in bijvoorbeeld de AppStore van apple. Dit omdat de “wrapper” code bevat die niet nodig is voor het functioneren van de app.
Voordelen | Nadelen |
Mogelijkheden van een Native app | Moeilijk goedkeuring voor AppStore |
HTML / JS / CSS i.p.v. Java / C | Trager dan Native apps |
Meer bugs, loopt eerder vast dan Native | |
Minder ontwikkeltijd dan Native | |
Front-end implicaties
Bij het maken van een ontwerp voor apps of websites op mobiele platformen, moet er rekening gehouden worden met andere punten dan bij website’s voor desktops.
Zo moet de designer er rekening mee houden dat het een touchscreen interface is. Dit betekend dat je geen “hover” states meer hebt en dat de knoppen groot genoeg moeten zijn om op te kunnen drukken.
Ook moet er rekening gehouden worden met de locatie van knoppen en belangrijke call to actions.
Tijdens het ontwikkelen van een mobile website zijn er een aantal factoren van groot belang. Er moet rekening gehouden worden dat een mobiele bezoeker in Nederland vaak via 3G de website bezoekt. Als je een website hebt met veel grafische elementen heb je al snel een lange laadtijd voor mobiele telefoons. Dit omdat de afbeeldingen vaak op hetzelfde formaat worden ingeladen als op een desktop.