In deze blog deel ik mijn eerste ervaring met CSS in OutSystems-applicaties. Ik ben erg enthousiast over het toevoegen van deze snelle, subtiele en effectieve manier van communiceren met de gebruikers.
Een goed vormgegeven applicatie, met effectief gebruik van kleuren, typografie, lay-out, en andere visuele en interactieve elementen, heeft een grote invloed op de gebruikerservaring.
OutSystems genereert automatisch CSS voor je componenten in je applicatie. Toch kunnen er redenen zijn om je OutSystems-applicatie extra te stylen met CSS, bijvoorbeeld:
- Om de applicatie beter te laten aansluiten op de identiteit en uitstraling van het bedrijf.
- Omdat de UI/UX designer een specifieke styling heeft bedacht.
- Om de applicatie zelf gebruiksvriendelijker te maken.
- Voor zelfgemaakte widget waarbij de gewenste styling ontbreekt of niet toereikend is.
Styling vanuit de gebruikerservaring
Wat ik belangrijk vind, is dat je in je achterhoofd houdt wat het doel is achter het stylen van je applicatie. Goed gebruik van styling kan de gebruikerservaring sterk beïnvloeden. Het is een soort van non-verbale communicatie.
Dingen waar ik aan denk zijn:
- Schaduwstyling: Dit kan verschillende lagen suggereren, dat je een scherm/popup/menu over iets heen hebt geopend en helpt de navigatiestructuur weer te geven.
- Hover-styling: Dit kan aangeven dat er een actie mogelijk is op het element of toegang geeft tot een ander scherm, bijvoorbeeld of deze klikbaar is of je extra informatie in een tooltip krijgt.
- Kleurenstyling: Door verschillende kleuren of tinten kun je informatie of aandacht geven. Bijvoorbeeld of iets actief of inactief is. De kleur rood kan urgentie aangeven, groen kan bevestiging of blauw kan betrouwbaarheid uitstralen.
- Consistentie: Naast styling is het ook belangrijk om de applicatie en zijn elementen consistent te houden, dezelfde positie, dezelfde kleuren, dezelfde grootte, dezelfde afstand tussen elementen. Dit zorgt voor rust, herkenbaarheid en vertrouwen, waardoor gebruikers snel door hebben hoe de “hele” applicatie werkt.
Styling vanuit het oogpunt van de ontwikkelaar
Vanuit het oogpunt van de ontwikkelaar is het handig om bij het gebruik van CSS in je applicatie te letten op aspecten zoals leesbaarheid, herbruikbaarheid en onderhoudbaarheid.
Algemene informatie over het toepassen van CSS in OutSystems
- CSS kun je op verschillende niveaus gebruiken.
- Op globaal niveau, met behulp van ‘Themes’.
- Op het niveau van schermen.
- Op widgetniveau, wanneer je met blokken werkt.
- Op individuele componenten via ‘Inline’ styling.
- Hoe specifieker de CSS, hoe hoger de prioriteit. De mate van het specifiek maken van de CSS heeft gewenst en soms ongewenste invloed op de herbruikbaarheid van de styling.
- De gebruikelijke best practices: let op de hiërarchie, gebruik de theme editor, vermijd inline styling, en houd je code clean en onderhoudbaar
Stylingtips vanuit mijn ervaring
Een aantal nuttige tips uit mijn ervaring:
- Gebruik zoveel mogelijk de bestaande classes van OutSystems.
- Maak een eigen theme:
- Overschrijf de bestaande classes van OutSystems waar nodig
- Houd de naamgeving van nieuwe classes in lijn met de stijl van OutSystems
- Maak bovenaan een index in de structuur van OutSystems en orden vervolgens alle styling overzichtelijk onder de verschillende koppen.
- Maak gebruik van herbruikbare templates, lay-outs en zelfgemaakte widgets, wat zorgt voor extra consistentie.
- Beperk het aantal verschillende kleuren, lettertypes, groottes. Maak gebruik van variabelen, zoals OutSystems dat ook doet. Dit maakt het gemakkelijk om de hele applicatie in één keer aan te passen.
- Overweeg goed hoe specifiek je de CSS maakt en waar je de styling wilt hergebruiken en waar niet.
- Gebruik de browsertools (F12) voor het debuggen. Hiermee kun je onder andere zoeken naar de juiste specificering, oplossingen uitproberen en CSS optimaliseren. Ook kun je van daaruit een volledige rij met classes kopiëren voor gebruik in je theme, waar je de styling kunt aanpassen.
- Gebruik JavaScript alleen als het niet anders kan. Bijvoorbeeld om dynamisch classes toe te voegen of te verwijderen, met behulp van add or remove. Het gebruik van Javascript kan impact hebben op de onderhoudbaarheid of performance.
Stylingtoepassingen vanuit mijn ervaring
Enkele specifieke ervaringen waar ik tegenaan ben gelopen:
- OutSystemsUI biedt veel classes hergebruikbare classes. Kijk daarom altijd eerst of er al iets bestaat. Voor kleinere buttons kun je class “btn-small” gebruiken en voor gecentreerde tekst kun je “text-align-center” toepassen.
Een situatie waar je minder snel aan denkt, is wanneer je een asterisk achter een label wilt plaatsen die niet gekoppeld is aan een widget, in dat geval kun je de class “Mandatory” gebruiken. Dit zijn slechts enkele voorbeelden, er is veel meer herbruikbaar materiaal beschikbaar dat het maken van styling kan versnellen en bijdraagt aan de consistentie van je applicatie. - Widgets waarvan de styling niet kan worden aangepast, zoals wanneer gebruik wordt gemaakt van standaardbrowsercomponenten. Bijvoorbeeld bij een dropdown list, dropdown time of een kalender. Deze componenten worden door de browser zelf beheerd.
- De switch is lastig te re-stylen vanwege de vele lagen waarin hij is opgebouwd.
- Sommige styling kan pas aangepast worden na het renderen. Een voorbeeld hiervan is, autocomplete, een functie die automatisch suggesties geeft op basis van wat je in een input veld typt. Door toch een klein stukje JavaScript te gebruiken, kun je bijvoorbeeld autocomplete=”off” in de HTML zetten.
- Outsystems kan zelf het beste de breedte van de kolommen bepalen, pas als je echt een specifieke breedte nodig hebt kun je die aanpassen in Server Studio.
- Om te voorkomen dat er een horizontale scrollbar op het hele scherm verschijnt en om rekening te houden met verschillende schermgroottes van gebruikers, kun je scrollbars toepassen op specifieke onderdelen van het scherm. Gebruik hiervoor de view height (vh). Bepaal de gewenste hoogte (van bijvoorbeeld een tabel), door de view height te verminderen met de hoogte van de andere vaste elementen op het scherm. Dit wordt ook toegepast in de widget Adaptive/MasterDetail uit OutSystemsUI.
Tot slot
Deze blog is een moment opname van mijn ervaringen in de omgevingen waarin ik heb gewerkt. In de loop der tijd zullen OutSystems-widgets veranderen, net als mijn inzichten. Maar mijn fascinatie voor de kracht van styling blijft.
Heb jij nog tips? Ik hoor ze graag!
Make your own UI
Gunilla de Wit
OutSystems Consutlant bij Conspect
