To Bootstrap or not to Bootstrap...

Geplaatst op 01 juli, 2018 / 5 min leestijd

In mijn allereerste blog wil ik het hebben over mijn website, die ik gemaakt heb met Bootstrap 4. De aanleiding hiervoor was dat die van mijn vader´s bedrijf vernieuwd moest worden. De ervaring die ik daarmee opgedaan heb, kon ik mooi gebruiken bij het opzetten van mijn eigen website. Met mijn bedrijf wil ik social selling promoten en wat dat voor mkb betekent. Ik had dus een website nodig, die daarbij past. Met dat in mijn achterhoofd en het feit dat op dat moment Bootstrap bekend stond als het meest geschikt voor smartphone, leek me Bootstrap de voor de hand liggende keuze. In dit blog wil ik kijken of dit achteraf juist bleek te zijn.

Het onderwerp website in relatie tot social selling lijkt me bovendien een leuke topic om een blog over te schrijven. Voor social selling is het belangrijk om een website te hebben, die gemakkelijk te vinden is, waarmee je goed online zichtbaar bent zodat de klant met een specifieke vraag jou ook daadwerkelijk vindt. Daar draait social selling immers om. In termen van Google betekent dat een website, die hoog scoort in Google´s zoeklijsten. Ranking factoren zijn onder andere mobile first en responsive. Bootstrap 4 is een responsive mobil first framework. Dus dat voldoet in ieder geval al. 

Voor het bouwen van mijn website en die van mijn vaders bedrijf heb ik dus voor Bootstrap 4, een open source frontend framework gekozen. Open source dus in principe gratis te gebruiken. Frontend, dus het gaat alleen over het deel van de website dat zichtbaar is voor de gebruiker. Dat in tegenstelling tot de backend. En een framework kun je het beste omschrijven als een set van mappen en bestanden met gestandaardiseerde code. Het doel hiervan is dat een programmeur niet alles van nul hoeft op te bouwen. Tot nu toe interessant toch? Bootstrap bevat sjablonen voor allerlei webonderdelen en werd oorspronkelijk voor Twitter ontwikkeld.

"Bootstrap, foundation, wordpress of AMP ???" Afbeelding 1: Bootstrap, Foundation, Wordpress of AMP ???

Waarom eigenlijk Bootstrap

Laatst had ik het met een vriend over het bouwen van de website. Hij was toevallig met een offerte bezig voor de ontwikkeling van een nieuwe website geheel met huisstijl en onderhoudscontract. Geheel out of the blue vroeg hij toen: "hoe kom je eigenlijk bij Bootstrap, waarom eigenlijk niet Wordpress waar de gehele rest van de wereld mee werkt." Eerlijk gezegd moest ik op dat moment bekennen dat ik daar gewoon geen antwoord op had. Hier parkeer ik deze vraag dus.

Op het moment dat de keuze voor Bootstrap voor mij actueel werd, hadden we bij ons bedrijf een website, die door mijn vader gebouwd was. Het was een mooie strakke responsive website maar niet "mobile first". Met andere woorden je kon de website uitstekend op je mobiel zien, maar je zag continue de navigatiebalk boven de vouw waardoor het leek alsof er niets gebeurde. In feite gebeurde er wel wat bij doorklikken, alleen moest je daarvoor continue naar beneden scrollen om het resultaat te zien.

Daar moest dus iets aan gedaan worden. Vooral ook omdat Google mobielgebruiksvriendelijke websites voorgang geeft in de zoekmachine. Voor social selling is een snelle website die goed door Google gevonden wordt toch een must. Dus ik ging op zoek naar gereedschap waarmee je je website responsive en "mobiel first" kon krijgen. Als snel kwam ik bij de twee eigenlijk echt mobile first responsive frameworks. Namelijk Foundation van het ontwerpbureau ZURB en Bootstrap. Beide zijn natuurlijk heel goed en populair. En beide zijn open source.

Bootstrap versus Foundation; Bootstrap meer populair en snel te leren

Omdat Bootstrap heel veel templates en beschikbare codes aanbiedt, is het makkelijk te leren en je kunt er heel snel mee aan de slag. Nadeel is dat Bootstrap sites daardoor het gevaar lopen erg op elkaar te lijken. Foundation heeft een veel steilere leercurve, codes zijn pittiger om aan te passen voor beginners, maar beloofd een meer op maat gemaakte aanpak.

Bovendien bestaat er voor Bootstrap een heel grote online comunity en zijn er heel veel themes beschikbaar. Voor Foundation is dit er allemaal veel minder. Maar als je de echte Foundation followers mag geloven is Foundation echt veel beter dan Bootstrap. Laatstgenoemde heeft blijkbaar als echt nadeel een heel grote bibliotheek, waarvan je slechts een klein deel gebruikt maar die je toch in zijn geheel moet laden. Een minpuntje als het doel een toch best wel snelle website op mobile en desktop is.

Ik kwam er niet goed achter hoeveel Foundation dan wel sneller is dan Bootstrap. Ik bedoel waar praten we dan over. Dit en het feit dat Bootstrap heel veel gebruikers heeft, er een grote online community bestaat en het gemakkelijk te leren is, gaf toch wel de doorslag voor mijn keuze. Daarbij kon ik niet ontkennen dat ik toch onwillekeurig aan Apple versus Microsoft moest denken. In de artikelen die ik de laatste tijd veel op internet vindt staat bovendien dat Foundation en Bootstrap heel erg naar elkaar toegroeien. Waarbij dan de ene en dan weer de andere beter is.

Bootstrap versus Wordpress; eigenlijk niet

Om terug te komen op die vraag, die de vriend over mijn voorkeur voor Bootstrap stelde, heb ik toch maar eens gegoogled. Bootstrap is een frontend framework, dat geleverd wordt met kant en klare componenten om je websiteontwikkeling te versnellen. Wordpress is een content-beheersysteem (Content Management Systeem), waarmee je websites maakt en onderhoudt. Dus als je een CMS website zoals een online webwinkel of een portal voor werkzoekende beheert, dan is Wordpress meer passend. Als je een statische website zoals een portfoliosite of een productpresentatie hebt, dan is Bootstrap geschikter. Beide systemen kunnen onafhankelijk en zelfs samen gebruikt worden. Met Bootstrap kun je responsive themes in Wordpress maken.

AMP

Geheel onafhankelijk van dit alles is er nog de ontwikkeling van AMP. AMP staat voor Accelerated Mobile Project van Google. Het wordt waarschijnlijk binnen afzienbare tijd de standaard voor mobiele websites. Met social selling wil je natuurlijk dat je website goed en snel zichtbaar is op je mobiel. Vandaar dat mijn interesse gewekt werd. Reden om me ook eens in deze nieuwe techniek te verdiepen. Zeg nou eerlijk. Stel je past deze nieuwe technologie toe en je krijgt daardoor zomaar een mooie prominente plek in Google. Daarom intressant om te kijken of mijn keuze voor Bootstrap de juiste blijkt te zijn.

Hier blijken AMP en Bootstrap elkaar te bijten

Voorwaarden voor AMP zijn als volgt. Alle script en sommige HTML tags worden vervangen door een AMP variant. Stylesheets mogen alleen inline worden toegepast en niet zwaarder zijn dan 50k. Optioneel wordt AMP cache aangeboden zodat content niet opnieuw hoeft te worden ingeladen.

De script en stylessheets in Bootstrap wordt geheel bepaald door de Bootstrap variant hiervan. Dat mag dus niet in AMP. Alleen AMP varianten zijn toegestaan en externe stylesheets mogen niet. Bij Bootstrap zijn deze al 2 keer zo groot als de toegestane 50k. Daarnaast heeft de Bootstrap Framework styling code enige zogenaamde !important declaraties. Wat dit is mag je snel vergeten. Belangrijk om te weten is dat die blijkbaar ook niet mogen bij AMP. Ik stel me dan ook de vraag of je jezelf met een website gemaakt met AMP goed kan onderscheiden van je concurrent. Toch wel een puntje van belang met social selling.

Dus hoe hier mee om te gaan. Ik zelf denk dat het nog te vroeg is om de keuze te bepalen. Ik kan me eerlijk gezegd ook niet voorstellen dat Bootstrap niet met een goed antwoord hierop komt. Ik heb inmiddels al gelezen over alternatieven waarbij de door de website ongebruikte code uit de Bootstrap stylesheets, de bibliotheek, worden geknipt en dat de website er dan nog precies zo uit kan zien. Ook websites gemaakt met Wordpress zijn nog niet geschikt voor AMP. Uitzondering vormen de varianten met platte teksten zoals nieuws bulletins.

Conclusie keuze Bootstrap voorlopig goed

We zullen wel zien of Bootstrap 4 ontwikkelaars uiteindelijk hebben lopen slapen of niet. Als ik op een dag wakker wordt en blijkt dat Bootstrap volledig door Google is ingehaald, dan weet ik dat ik een verkeerde keuze gemaakt heb. Anders blijf ik voorlopig Bootstrap gebruiken. Je zult ook zien dat mijn site vollop in beweging is. En dit blog is mijn eerste aanzet. Toch wel raar zo´n blog over het wel of niet van Bootstrap terwijl je nog tegelijk nadenkt over hoe je dat blog in Bootstrap vorm moet geven en werkend moet krijgen.

Whatsapp:

telefoon:

email:

Geplaatst op: 01 juli, 2018 / auteur: Iwan Koenderman;
Aangepast op: 14 januari, 2021 | Geplaatst door: !Bewust sociaal op web;