Staat jouw website bij Antagonist, dan ben je natuurlijk verzekerd van de snelste servers met de nieuwste PHP-versie. Maar wist je dat ook je website zelf sneller en beter onderhoudbaar kan maken? Bijvoorbeeld met het framework Bootstrap. Het ideale moment om je website met Bootstrap te (her)bouwen is nu. Check hoe je dit aanpakt!
Bootstrap is een gratis pakketje vol met scripts dat je website sneller en gebruiksvriendelijker maakt. Als je zelf websites ontwikkelt, dan heb je vast al wel van Bootstrap gehoord. Maar heb je al naar versie 4 gekeken? Lees verderop de verbeteringen en implementatietips.
Waarom Bootstrap?
Om deze vraag te beantwoorden, ga ik er vanuit dat je zelf niet zo diep in de websites zit. Je website is het digitale visitekaartje voor wat jij doet, maakt of de diensten die je aanbiedt. Dat visitekaartje moet er natuurlijk perfect uitzien, maar de techniek is een vak apart. Je komt ongetwijfeld wat uitdagingen tegen. Bijvoorbeeld, het ontwerp op het scherm blijkt net niet wat je op papier bepaald had.
Zo zijn er meer vraagstukken. Gaandeweg ontdek je leuke extra’s voor op je website, maar waar laat je die? Hoe moet dat ene knopje eruit springen, maar niet uit de toon vallen? Je komt erachter dat je hippe ontwerp bepaald niet op het scherm van een mobieltje past. Je bezoekers melden dat je site niet goed werkt in hun browser. Of je trouwe ontwikkelaar gaat plotseling op wereldreis en jij blijft met een map vol bestanden achter waar je geen chocola van kunt maken.
Rust en regelmaat
Het kan allemaal een stuk eenvoudiger. De scripts van Bootstrap geven structuur aan de functionaliteit en vormgeving van je website. Ze zetten een standaard waar iedere ontwikkelaar mee verder kan werken. Je vormgeving wordt automatisch ‘responsive’, oftewel: geschikt voor grote en kleine schermen. Het geeft je een richtlijn voor maten en menu’s en standaardkleuren voor knoppen.
Zo is je vormgeving snel duidelijk en kun je meer nadenken over de functionaliteit. Er is rekening gehouden met bruikbaarheid in een groot aantal browsers. Je kunt het ‘from scratch’ in je site verwerken, maar het zit ook al in heel veel (gratis) templates. Kijk wel uit voor het cliché ‘dat alle Bootstrap websites op elkaar lijken’. Je wilt natuurlijk wel dat jouw site jouw stijl uitstraalt!
Met Bootstrap aan de basis kan een website door meer dan één persoon onderhouden worden. De code is gemakkelijk te begrijpen door iedereen die wat over Bootstrap geleerd heeft. De Bootstrap-documentatie staat online en is voor iedereen toegankelijk. En met hulpvragen kun je op diverse fora terecht, dag en nacht.
Je mag best even enthousiast zijn over de mogelijkheden. Dat zijn wij ook, we gebruiken het niet voor niets binnen Mijn Antagonist. Maar de scripts van Bootstrap bestaan al zeven jaar, dus waarom is nú het moment om ermee aan de slag te gaan? Dat leg ik hieronder uit aan de hand van een stukje geschiedenis.
Het begin van Bootstrap
Medio 2010 gingen bij Twitter (toen nog niet zo groot als nu) een ontwerper en een ontwikkelaar met elkaar om tafel. Ze wilden een richtlijn opstellen om efficiënter met elkaar aan de Twitter-website te werken. Het documentje was een blauwdruk voor functionaliteit en vormgeving. Ze noemden het dan ook ‘Twitter Blueprint’.
In de eerste interne Hack Week die Twitter dat jaar organiseerde, werd Twitter Blueprint veelvuldig toegepast. De richtlijn bleek zelfs zo universeel toepasbaar, dat versie 1 op 19 augustus 2011 met enthousiasme openbaar gepubliceerd werd op GitHub. De naam werd Bootstrap: een term die in de informatica vaker voorkomt.
Het werd gebruikt, bekritiseerd en uitgebreid getest door talloze ontwerpers en ontwikkelaars. Na twee jaar werd Bootstrap gebruikt op zo’n 1,6% tot 2,8% van alle sites op internet; in 2015 was dat 8,1% tot 9,4%. Je kunt zelf herkennen of een website Bootstrap gebruikt door in de broncode te zoeken naar de specifieke Bootstrap scripts en tags.
Van alpha naar bèta
Inmiddels is Bootstrap zes jaar oud en aanbeland bij versie 3. Versie 4 was lange tijd ‘alpha’, wat zoveel betekent als: er kan nog van alles aan veranderen. Wij hebben met smart zitten wachten op de overgang naar ‘bèta’. De webstandaarden vliegen je tegenwoordig harder om de oren dan raven in Game of Thrones, dus dat was niet gemakkelijk. Bootstrap 4 is nu in ‘bèta’. Dat geeft ons genoeg zekerheid dat Bootstrap niets meer aanpast dat wij in Mijn Antagonist gaan gebruiken.
De ontwikkelaars gaven aan dat de overgang niet bepaald eenvoudig was. Er moest consensus komen over de elementen: doorgaan met ‘panels’ in ‘wells’ of nieuwe termen aanboren? Het schaalbare grid moest uitbreiden met een kleinere resolutie, maar waren de bestaande namen voor resoluties dan houdbaar? Kon ondersteunende functionaliteit zoals Less vervangen worden door het snellere Sass?
Wat is er nieuw in Bootstrap 4?
Op 10 augustus 2017 was het ontwikkelteam er eindelijk uit. De belofte: we passen niets meer aan, we breiden alleen nog uit. Ontwikkelaars kunnen met vertrouwen aan de slag. Graag beschrijf ik een aantal belangrijke verschillen tussen Bootstrap 3 en 4.
Het grid-systeem is uitgebreid met een nieuwe, kleine resolutie. De nieuweling sloot vooraan in de rij, dus alle bestaande resoluties zijn één stapje opgeschoven. Bij de klasse ‘md’ hoort in versie 4 een andere breedte in pixels dan in versie 3. Let daar goed op als je overstapt. De ‘panels’ die je voorheen groepeerde in ‘wells’ heten nu ‘cards’ die je bij elkaar houdt in een Flex grid.
AIs Bootstrap al in je site is verwerkt, dan moet je voorzichtig alles gaan vervangen. Gebruik je een thema, dan heb je het geluk dat de maker dat allemaal voor je doet! Standaardtekst is overal een slag groter geworden. Dat kan impact hebben op je layout. Heb je een titel die net op één regel past? Met Bootstrap 4 loopt die misschien net over naar de volgende regel.
Enkele oudere browsers worden niet meer ondersteund. Ze zijn niet gemaakt voor de technologieën die Bootstrap toepast. Met statistieken van je website kun je zien welke browsers je bezoekers het meest gebruiken. Bepaal of je bezoekers hinder zullen ondervinden van het nieuwe platform. Werken er alleen paar kleine componenten niet, kijk dan of je die kunt vervangen met nieuwe.
TIP!
Wil je graag alle veranderingen in Bootstrap 4 overzichtelijk en gecategoriseerd bij elkaar zien? Check deze documentatie!
Is Bootstrap geschikt voor mijn site?
Altijd. Je kunt met Bootstrap vanaf nul beginnen. En maakt je website gebruik van een Content Management System (CMS), dan kun je een thema gebruiken met Bootstrap als basis. Het thema pas je dan aan naar je eigen smaak of huisstijl.
Zo heeft WordPress meer dan 300 thema’s gebaseerd op het framework. Joomla pakt het zelfs wat grondiger aan: de basis is gebouwd op Bootstrap, dus bij het inrichten van je site werk je er al mee. Je hebt keus uit negen thema’s om je website op Bootstrap te baseren. Ook Drupal, Magento en PrestaShop beschikken over Bootstrap thema’s.
Bedenk je dat in deze thema’s de structuur van de elementen al voor je is gekozen. Wil je daar vrije hand in hebben, bouw dan zelf een thema. Als je jouw thema deelt met anderen, dan kun je ook nuttige feedback krijgen om hem verder te optimaliseren.
Bootstrap in je site verwerken
Wil je zelf met Bootstrap aan de slag? Lees je eerst goed in op hun website. Maak een lijst van functionaliteiten en een grafisch ontwerp. Best een klus en dit enkele regeltje doet het niet bepaald eer aan. Maar sla deze stap vooral niet over, want dan heb je geen duidelijk doel.
Leg de elementen van Bootstrap als een blauwdruk over je ontwerp. Vertaal je ontwerp zo naar Bootstrap-elementen dat je de richtlijnen zo goed mogelijk toepast. Definieer menu’s, vlakken en knoppen. Bedenk hoe je site ‘responsive’ hoort te reageren: wat moeten bezoekers zien op een piepklein scherm? Schrijf dan de HTML.
TIP!
Responsiveness betekent niet dat je je hele website kleiner laat schalen. Met knoppen te klein voor je vingers kun je hem namelijk moeilijk bedienen op een mobiel apparaat. Maak het responsive door klikbare elementen groter te maken en laat onbelangrijke zaken weg. Dat kan allemaal met de cascading style sheets!
Bootstrap kun je gebruiken door te linken naar de CDN of door het te downloaden en in je site op te nemen. De eerste manier is het gemakkelijkst, de tweede manier laat je zelf kiezen wat je gebruikt. Als je net begint, kies dan voor de eerste manier.
Bootstrap bezorgt je een net pakketje JavaScript scripts en enkele Cascading Style Sheets (CSS). Zie je het woord ‘min’ in de bestandsnaam staan? Het staat voor ‘minified’ en betekent dat Bootstrap alle code in dat bestand op één regel gezet heeft. Dan laadt het sneller.
Wel of geen Bootstrap?
Wel! Met twee uitzonderingen, maar die gelden voor frameworks in het algemeen. Persoonlijk zou ik het niet doen als je een bestaand project van iemand overneemt. Er zijn dan andere dingen belangrijker. Werkt bijvoorbeeld de hele website niet en heeft de eigenaar te lijden onder lage bezoekersaantallen? Stel dan niet als eerste een redesign met Bootstrap voor. Het is geen wondermiddel. Los eerst de acute problemen op en ga dan met je opdrachtgever praten over deze verbeterslag.
Een ander moment waarop je het framework beter links kunt laten liggen, is wanneer je zelf net het avontuur aangaat met HTML en CSS. In de broncode van Bootstrap ga je kopje onder in definities die je je allemaal nog eigen moet gaan maken. Het zou zonde zijn als daardoor je eerste website helemaal nooit van de grond komt. Begin dus eerst met het leren van de eerstgenoemde talen en voeg dan pas het framework toe.
Tot slot
Bootstrap heeft nét versie 4 heeft verwelkomd. De meeste bestaande documentatie en thema’s zijn nu nog gericht op Bootstrap 3. Let dus goed op over welke versie je zit te lezen en houd bij thema’s goed de ‘release notes’ in de gaten. Ontwikkelaars zullen niet onder stoelen of banken steken dat hun creatie de nieuwste versie van het framework gebruikt.
Alle verbeteringen zijn gemaakt opdat het framework klaar is voor de toekomst. Voor je bezoekers betekent dat een gebruiksvriendelijke website op alle apparaten, van smartwatch tot groot scherm. En voor ontwikkelaars levert het een optimale ontwikkelomgeving op. Wil je beginnen met een Bootstrap op je eigen website? Ga vandaag nog aan de slag!
Webhosting + domein + gratis SSL →
P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.