To Bootstrap or not to Bootstrap...

Geplaatst op 01 juli, 2018 / 5 min leestijd

Voor social selling is het belangrijk om een website te hebben, die hoog scoort op Google´s zoeklijsten. Mobile first is een van de belangrijkste ranking factors van Google. Bootstrap 4 is een responsive mobile first framework, maar voldoet het ook voor social selling? In mijn allereerste blog wil ik het hebben over mijn website, die ik gemaakt heb in Bootstrap 4, een mobile first responsive framework. Ik ben aan deze website begonnen, omdat ik social selling wil gaan promoten en het wil hebben over wat dat dan voor MKB kan betekenen. Dus het onderwerp website en de keuze voor Bootstrap 4, in relatie tot social selling, leek mij een leuke topic om mee te beginnen. Als je iets meer wilt weten over social selling.

Tijdens mijn stage bij het Chemisch Weekblad, is mij altijd geleerd dat als je een artikel schrijft, je het dan eerst over het wie, wat, waarom, wanneer, waarmee of hoe moet hebben. Ik persoonlijk denk dat je over elk van deze w´s en of h apart wel een blog kunt schrijven. Ik wil het dan ook niet hebben over het waarom of over het wanneer van een website, maar specifiek over waarmee ik de website gebouwd heb. Ik denk dat, dat voor nu al wel voldoende stof is voor een blog. Voor het bouwen van deze website heb ik voor Bootstrap 4, een open source frontend framework gekozen. Open source dus gratis te gebruiken. Frontend dus het gaat alleen over het deel van een website of app 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 het vormen van een algemene structuur van code zodat een programmeur niet alles vanaf nul hoeft op te bouwen.

Bootstrap bevat sjablonen gebaseerd op HTML en CSS voor typografie, formulieren, knoppen, navigatie en andere interfaceonderdelen. Het bevat ook JavaScript-extensies. Het werd oorspronkelijk door 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 een 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 dat gewoon niet wist.

Op het moment dat Bootstrap voor mij actueel werd, hadden we bij ons bedrijf een website, die door mijn vader met behulp van W3schools, gebouwd was. Dat is een webontwikkelaarssite, met tutorials en referenties over webontwikkelingstalen zoals HTML, CSS, JavaScript, PHP, SQL, W3.CSS, en Bootstrap. Bijna alles wat met het ontwikkelen van een website te maken heeft komt aan bod. Het resultaat was een mooie strakke responsive website maar niet "mobile first".

Met andere woorden je kon de website uitstekend zien op je mobiel maar je zag continue de navigatiebalk boven de vouw waardoor het leek alsof er niets gebeurde. Maar 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.

Bootstrap versus Foundation; Bootstrap meer populair en snel te leren

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.

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. Foundation heeft rems, Bootsrap pixels.

Tenslotte bestaat er voor Bootstrap een heel grote online comunity en zijn er heel veel themes. 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 moet laden. Een minpuntje als je 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, een grote online community en gemakkelijk te leren is, gaf toch wel de doorslag voor mijn keuze. Daarbij kon 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 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 is het 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 Javascript, sommige HTML tags worden vervangen door een AMP variant. Respectievelijk AMP-js, en AMP HTML. 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.

Bootstrap wordt geheel bepaald door Bootstrap-js en Bootsrap-CSS. Dat mag dus niet in AMP. Alleen AMP-js is toegestaan en externe stylesheets mogen niet. Bootstrap CSS is 2 keer zo groot als de toegestane 50k. Daarnaast heeft de Bootstrap Framework styling code enige !important declaraties, die blijkbaar ook niet mogen bij AMP. 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 gezegt ook niet voorstellen dat Bootstrap niet met een goed alternatief of 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 Wordpress, behalve dat wat met platte teksten als nieuws bulletins, te maken heeft is nog niet geschikt voor AMP.

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: 17 maart, 2020 | Geplaatst door: !Bewust sociaal op web;