Website omzetten naar een Windows 8 app: De structuur

Een goed uitgangspunt om te beginnen met het maken van een app, is een website. Je hebt dan immers content welke je wilt gaan gebruiken, waarschijnlijk heb je ook al nagedacht des tijds over de structuur waarin je die content aanbiedt. Hoogstwaarschijnlijk heeft de website ook een bepaalde huisstijl of wel look and feel. Met deze elementen is het mogelijk de website om te zetten in een Windows 8 app. Waarom zou je dit willen doen? Omdat het kan! Met HTML5 en Javascript is het mogelijk om je Windows 8 app te ontwikkelen, dus de basis heb je. Een goed uitgangspunt om te beginnen met het maken van een app, is een website. Je hebt dan immers content welke je wilt gaan gebruiken, waarschijnlijk heb je ook al nagedacht des tijds over de structuur waarin je die content aanbiedt. Hoogstwaarschijnlijk heeft de website ook een bepaalde huisstijl of wel look and feel. Met deze elementen is het mogelijk de website om te zetten in een Windows 8 app. Waarom zou je dit willen doen? Omdat het kan! Met HTML5 en Javascript is het mogelijk om je Windows 8 app te ontwikkelen, dus de basis heb je. Een app is fundamenteel anders dan een website en al helemaal een Windows 8 app zoals je kunt lezen in Windows 8 apps 101. Content first Slechts een derde van een website is interessant om in je Windows 8 app te tonen. Het enige wat je in de app wilt tonen is het logo en de main-content -het liefste content met grafische elementen-. Navigatie gebeurt door te klikken op de titels of afbeeldingen. Andere interactie dient naar de app.bar te worden verplaats. Het gaat immers niet om waar je allemaal naar toe kunt, maar om de content en niets anders. Zorg ervoor dat de gebruikers van je app wel meteen duidelijk hebben waar ze zich bevinden, zonder dat je kruimelpaden of navigatie menu’s gebruikt. Hiervoor dien je je pagina titels anders op te zetten je moet er dus voor zorgen dat de titels die je per sectie gebruikt verklarend zijn. Dus in plaats van “Overzicht”, “Nieuws overzicht” als titel voor een sectie gebruiken.

Hiërarchie aanbrengen

Een website is een grote bak met data, en alle data is vaak op meerde manieren te benaderen. Windows 8 apps hebben een zeer specifieke navigatie, waarschijnlijk zal je kiezen voor een hiërarchische navigatie gezien het feit dat je je app baseert op een website. Verdeel daarom de inhoud van je website in content soorten. Eigenlijk begin je onderaan, je kijkt eerst naar welke detail pagina’s/content soorten je zoals hebt. Zo kun je bijvoorbeeld de content soorten: Producten, diensten, nieuwsberichten, evenementen hebben. Nu hebben we de detail pagina’s gedefinieerd. Aan de hand van deze detail pagina’s kun je sectie pagina’s gaan samenstellen. Meestal zal één content soort ook één sectie pagina hebben. Een sectie pagina wordt dynamisch opgebouwd door de betreffende content soort. Dit wil niet zeggen dat je niet meerdere content soorten kunt samenvoegen tot één sectie pagina. De sectie pagina’s zullen dan ook sterk van elkaar verschillen qua look and feel omdat iedere content soort op een andere manier het beste tot zijn recht komt. Wanneer de sectie pagina’s zijn gedefinieerd kun je aan je HUB pagina gaan denken. Belangrijk is dat de gebruikers op de hub pagina snel een goede indruk krijgt wat de sectie inhoud en wat hij of zij kan verwachten. De hub bestaat uit afzonderlijke blokken afkomstig uit de sectie pagina’s. Ook deze hub pagina wordt dynamisch opgebouwd en bestaat voornamelijk uit koppelingen naar de detailpagina’s en de titels zijn gelinkt aan de sectie pagina’s.

Voordelen van het omzetten

Website zijn volledig vrij in de navigatie daarom moeten bezoekers telkens weer even wennen aan de navigatie. Door gebruik te maken van de Windows 8 navigatie methode wordt de gebruikservaring uniform en voelt een bezoeker/gebruiker zich meteen thuis.

Tiles

Tiles zijn de snel koppelingen in het start scherm naar je app. Dit is iets wat je niet kunt met je website, maar is wel erg handig. Deze tiles zijn multifunctioneel omdat je bijvoorbeeld de nieuwste content alvast kunt tonen. De tiles kun je zelf vormgeven en zijn een belangrijke trigger voor de terug keer van de gebruiker. Wanneer je de tiles goed inzet kun je de stickyness verhogen.

Toast notificaties

Nog een functionaliteit die niet heb met een website, is het sturen van push notificaties. Deze notificatie zijn een begrip bij Android en iOS apps en zijn nu ook beschikbaar voor de desktop. Met deze notificaties kun je je gebruikers op de hoogte brengen van nieuws en andere belangrijke info zonder dat de app is geopend. Bijvoorbeeld een notificatie wanneer er een nieuw mailtje binnenkomt.