In hoeverre kan ik mijn eigen look & feel in een WEM-applicatie verwerken?

Design volgens bootstrap
Laten we beginnen bij de basis van hedendaags webdesign: bootstrap. Bootstrap is een CSS framework dat wordt gebruikt bij het maken van responsieve mobile-first websites. Dit houdt in dat gebruikers dezelfde gebruikerservaring van een website krijgen op een mobiele telefoon als op een tablet of een desktop. En met websites natuurlijk ook webapplicaties, want volledig schaalbare web apps zijn voor gebruikers tegenwoordig eerder de standaard in plaats van een vereiste.

Naast schaalbaarheid, biedt bootstrap HTML/CSS gebaseerde templates voor onder andere typografie, formulieren, knoppen, tabellen en navigatie. WEM heeft bootstrap al dusdanig geïntegreerd dat deze elementen direct op de user interactie nodes gebruikt worden. Zo hoeven we niet alle formulieren, invoervelden, labels en knoppen los te ontwerpen.

WEM UX
Maar, ben ik dan gebonden aan de look & feel die WEM heeft bepaald voor mijn knoppen, lettertypes en formulieren? Nee, maar hoe verder je wilt afwijken van de standaard, hoe meer maatwerk erbij kmot kijken en hoe meer tijd dit gaat kosten. Dit is de aloude afweging tussen UX design (user experience design) en functionaliteit, en die is voor elke applicatie anders. Gelukkig biedt WEM hierin drie mogelijkheden, van standaard templates tot volledig maatwerk.

Mogelijkheid 1: een standaard template
De eerste optie is verreweg het gemakkelijkste: een standaard template. Bij het aanmaken van een project geeft WEM je de keuze uit een tiental master templates. Deze templates verschillen qua lay-out, bijvoorbeeld met een uitvouwbaar menu aan de zijkant of een top-floating menu, en kleurinstellingen.

Het gebruik van kleuren gebeurt overigens ook via bootstrap, namelijk met context colors. Dit is een set aan kleuren die worden gekoppeld aan contexten, genaamd default, primary, info, success, warning, danger. Deze worden aan knoppen, panels en bijvoorbeeld waarschuwingen gehangen, die aan de hand van de gegeven context een kleur krijgen. Denk bijvoorbeeld aan ‘groen’ voor doorgaan, ‘blauw’ voor info, ‘rood’ voor verwijderen, en ‘grijs’ voor annuleren.

Verder zijn aan deze templates een aantal input variabelen gehangen, zodat je bijvoorbeeld een logo kunt toevoegen of ervoor kunt kiezen om elementen zoals de footer wel of niet weer te geven.

Mogelijkheid 2: een customizable template
Voldoen de standaard WEM templates niet helemaal aan de eisen? Dan kun je de templates aanpassen met zelf ontwikkelde CSS*. Het platform beschikt namelijk niet over een template editor. Hierin is tegemoet gekomen met een customizable template. Dit is een template dat net als de standaard templates te kiezen is, maar aanzienlijk meer input variabelen heeft. Zo zijn hier de verschillende menu stijlen uit de standaard templates te kiezen en heb je volledige controle over de bootstrap context colors. Op deze manier heb je vrijheid in de keuze voor de layout en kun je contexten elke gewenste kleur geven.

Mogelijkheid 3: een custom template
Wil je écht helemaal losgaan? Dan kan er door middel van HTML en CSS zelf een master template gemaakt worden. Dit betekent wel dat er nagedacht moet worden over álles: lettertypes, groottes, rondingen, schaduwen, knoppen, mouse-overs, en ga zo maar even door.

Dit wordt verwerkt in een HTML/CSS type template dat bij WEM wordt aangeleverd en gecontroleerd. Dit om er zeker van te zijn dat er geen fouten in de code zitten en het template zonder problemen binnen WEM gebruikt kan worden.

Wat deze optie interessant maakt, is dat je de door jou gewenste look & feel helemaal zelf kunt creëren en toepassen. Dit kan enorm helpen in de acceptatie van een applicatie door de eindgebruikers. Toch heeft deze optie vaak niet de voorkeur. Bij het maken van een eigen master template ben je immers weer aan het coderen, toch? Daarnaast rekent WEM logischerwijs een standaard prijs voor het controleren en doorvoeren van custom templates, wat deze optie voor kleine projecten minder interessant maakt gezien de rendabiliteit.

*Eigen CSS toevoegen
Dan zijn er nog de situaties waarin het wenselijk is om op één uniek scherm of gedeelte van het systeem gebruik te maken van een layout die afwijkt van het master template. WEM biedt als uitweg hiervoor de mogelijkheid om custom CSS toe te voegen, direct op de user interactie nodes. Belangrijk is om hier vooraf goed over na te denken, met name wanneer je dit zelf wil gaan ontwikkelen. Zelf CSS toevoegen is namelijk foutgevoelig, tijdrovend, en weegt vaak niet op tegen de gewenste functionaliteit.

Samengevat zijn er dus meerdere mogelijkheden om de door jou gewenste look & feel te verwerken in jouw WEM-applicatie!