Webapp: functioneel en krachtig

Rutger Hokke
Geplaatst op 4 maart 2014

Het internetgebruik is in de afgelopen jaren sterk veranderd, mobiele devices spelen in deze verandering een belangrijke rol. Dit resulteert er onder andere in dat er bij het ontwikkelen van websites wordt ingespeeld op de formaten van deze devices.
Met een web app is het mogelijk om een website op een mobiel apparaat goed weer te geven.

Veelvoorkomend is dat er tijdens de ontwikkeling van websites een responsive variant wordt gemaakt. Dit is de normale website weergave die door middel van de schermbreedte onderdelen schaalt, onder elkaar plaatst of verbergt. Op het gebied van performance en user interactie heeft dit uiteindelijk beperkingen, zoals veel scrollen of en langere laadtijd. Het ontwikkelen van een “web app” is dan het perfecte alternatief.

Wat is een web app?

Een website die specifiek gericht is op mobiele- en tablet formaten, en daarop een afzonderlijke werking en weergave heeft, wordt een webapp genoemd. Technisch gezien zijn er op het eerste gezicht niet veel verschillen met een normale website. Standaardtools als HTML5, CSS3 en javascript worden in beide varianten gebruikt. Bij web apps heb je het voordeel dat je minder rekening hoeft te houden met browser compatibiliteit, vrijwel alle browsers op mobiele devices ondersteunen de nieuwste technieken.

Het grote verschil tussen een desktop en webapp zie je terug in de vormgeving. In veel gevallen is de app gericht op het tonen van specifieke data, bijvoorbeeld het laatste nieuws van de website. Het is dus belangrijk dat er eerst functioneel over nagedacht wordt voordat de ontwerper aan de slag gaat. De interactiepaden zijn helder en simpel, de user experience staat hierin centraal.

De look, maar hoe zit het met de “feel”?

Vormgeving doet de web app al veel lijken op een native app uit de store. De “look” is er, maar de “feel” van de web app ontbreekt in dit geval nog. Wil je dicht bij de “look & feel” van een native app in de buurt komen? Dan kan je gebruik maken van mobiele frameworks zoals PhoneGap, Sencha Touch, jQuery Mobile etc. Een framework kan je toegang geven tot onder andere native functionaliteiten voor de web app zoals touch events, effecten en je GPS locatie. Dit maakt de gebruikers ervaring van een web app compleet.

jQuery Mobile en Sencha Touch frameworks zijn voornamelijk gericht op de touch events en effecten die ervoor zorgen dat een app het gevoel doet geven van een native app.
PhoneGap gaat nog een stap verder, hierbij wordt er uiteindelijk wel een native app gecompileerd voor diverse platformen. Vanuit deze app wordt je web app aangeroepen zonder dat je het idee hebt in een browser te werken. Dit wordt een hybride app genoemd.

PvdA Q&A web app, wat is hier toegepast?

Max.nl heeft voor Partij van de Arbeid (PvdA) een Q&A web app ontwikkeld voor intern gebruik. De gebruiker dient in te loggen en heeft daarna toegang tot de standpunten en actualiteiten van de partij. Naast HTML5, CCS3 en jQuery is hierbij gebruik gemaakt van het framework van jQuery Mobile. Uiteraard is dit geheel op een WordPress omgeving gebouwd zodat de PvdA zelf het beheer van berichten op een gebruiksvriendelijke en herkenbare wijze kan doorvoeren.

Op de homepage wordt een selectie van berichten getoond, door middel van het zoekfilter kan er in alle berichten worden gezocht. In jQuery Mobile is hiervoor een filteroptie beschikbaar.

PvdA Webapp

Blijf op de hoogte!

Rutger Hokke

Rutger staat altijd klaar om mee te denken voor een oplossing voor al je technische issues. Voor een interactieve kaart of een koppeling met een extern systeem ben je bij hem aan het juiste adres. Hij schrijft dan ook over internettechnieken die het leven mooier maken.

Meer over Rutger