DevelopmentNieuw jaar, nieuwe Bootstrap versie

Nieuw jaar, nieuwe Bootstrap versieBootstrap is ‘s werelds populairste en meest gebruikte open-source framework voor ontwikkeling met HTML, CSS en JS. De verwachting is, dat dit ook in de nabije toekomst nog even zo zal blijven. De kracht van het framework is dat het blijft vernieuwen. Het gaat mee met de veranderingen die in browsers, standaarden en UI beleving worden doorgevoerd. Als je als ontwikkelaar eenmaal bekend bent met de (juiste) manier waarop Bootstrap kan worden ingezet, dan kun je heel snel een aantrekkelijk ogende webapplicatie neerzetten. Bovendien wordt het vaak meegeleverd, bijvoorbeeld in Visual Studio templates.

Het dringende advies is wel om Bootstrap direct aan de start van een project toe te voegen en niet achteraf. Bovendien moet je zoveel mogelijk Bootstrap eigen snippets gebruiken, als je veel gaat freestylen dan kun je in de problemen komen met marges en uitlijning van elementen.

 

Bootstrap V5

Het Bootstrap-ontwikkelteam heeft het goede voornemen om begin 2020 een nieuwe versie van het framework te releasen, namelijk versie 5. Met de lancering van v5 zullen in de nieuwste versie veel belangrijke wijzigingen worden aangebracht.

 

Aanvankelijk, na de lancering van Bootstrap, introduceerde het team de 2e versie van bootstrap pas na 2 jaar. En een jaar later introduceerde het Bootstrap-team opnieuw een nieuwe versie: V3.

Bootstrap rijen en kolommen (flexbox)
Figuur 1: Bootstrap rijen en kolommen (flexbox)

Het duurde 5 lange jaren om V4 te introduceren om Bootstrap efficiënter en productiever te maken. Met grote wijzigingen in CSS, bijvoorbeeld in het grid-systeem met de overstap naar flexbox.

 

Van de significante veranderingen die worden verwacht in bootstrap V5 ligt het gewicht dit keer meer op het javascript component; de afhankelijkheid van jQuery wordt verwijderd. Het javascript component in Bootstrap wordt volledig vervangen door Vanilla Javascript. Desondanks kunnen ontwikkelaars bootstrap 5 met of zonder jquery gebruiken.

Bootstrap 5 gaat niet door met de ondersteuning voor Internet Explorer 10 en heeft IE10-browserondersteuning in de nieuwste versie zelfs verwijderd.

 

Bootstrap SVG iconen
Figuur 2: Bootstrap SVG iconen

In versie 3 werd een beperkte set aan Glyphicons aangeboden. In versie 4 werden geen icons meer aangeboden. Maar nu voor versie 5 wordt een eigen bibliotheek van Scalable Vector Graphics (SVG) iconen aangelegd. Nieuwe iconen worden continu vrijgegeven. Tot nu toe zijn ze doeltreffend maar fantasieloos.

https://getbootstrap.com/

https://icons.getbootstrap.com/

Een onderscheidend ontwerp maken

Het grootste nadeel van het gebruik van Bootstrap -of een ander populair framework- is het ontstaan van eenheidsworst. Het gebruik van de frameworks is, bij minimale eigen styling, makkelijk te herkennen. Het is voor de functie van de applicatie niet belangrijk, maar het is toch een soortement teleurstelling. Bovendien is in de componenten veel ruimte opgenomen waarmee het met name geschikt is voor webapplicaties met een kleine functiedichtheid.

Bij Delta-N ontwikkelen we voornamelijk applicaties die bedrijfsprocessen ondersteunen. Dit type applicaties is vaak gebonden aan een corporate styleguide (of style system). Nadat de kleuren uit de styleguide zijn toegepast op de Bootstrap componenten (m.b.v. een thema, een set aan variabelen) en de maatvoering van de witruimten is aangepast naar de functiedichtheid van de webapplicatie, blijft er voldoende speelruimte over om de webapplicatie uniek en doeltreffend te maken.

Trends in software design

Bij het benutten van die speelruimte zou je gebruik kunnen maken van de trends die door trendwatchers worden aangewezen voor het komende jaar. Een kleine selectie:

Meer ondersteunend gebruik van beweging; Aandacht voor detail met “micro interactions”. Subtiele bewegingen in de applicatie maken de applicatie aantrekkelijker en het ondersteunt de gebruiker bij het uitvoeren van taken. Gebruik van SVG zal toenemen omdat dit het toevoegen van animatie toegankelijker maakt.

 

Mobile use first; De periode van het schaalbaar maken voor mobile devices is voorbij. Mobile first is nu de standaard strategie. Vanaf nu wordt er meer aandacht gegeven aan de toegevoegde mogelijkheden bij het gebruik van een mobile device. Gebruikers zijn in verwarring wanneer ze niet kunnen swipen.

Bootstrap: Kleurverloop
Figuur 3: Kleurverloop “Eenhoorn stijl”

Kleurverloop is terug; Ditmaal in subtiele vorm met lichte contrastverschillen en monochroom of in pasteltinten. Kleurverlopen (of kleurovergangen, een geleidelijke overvloeiing van de ene kleur naar de andere kleur) zijn een manier om platte ontwerpen te verbeteren. Ze maken een ontwerp interessant en voegen textuur toe.

Verandering in taalgebruik; Taalgebruik verandert in de loop der jaren. Ook in applicaties verschuift de stijl met de komst van nieuwe generaties gebruikers. Opgemerkt is dat het van het weergeven van feiten naar aansprekende teksten (“human writing”) veranderd. “Vind uw vraag bij onze veelgestelde vragen.” Versus “Wist je dat we de meest gestelde vragen verzameld hebben?” En “Er is een fout opgetreden” versus “Dat ging helaas niet helemaal goed.”