Digital Customer Experience Blog

Digital Customer Experience Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

De responsive blokkendoos genaamd Bootstrap

In mijn jonge jaren was het spelen met een blokkendoos de hoofdoorzaak van een lach op mijn gezicht, tegenwoordig is dat vertrouwde gevoel weer helemaal terug. Het realiseren van een responsive design zorgde in het verleden bij veel front-enders voor een waar duel. Gewapend met de blokken van het responsive framework Bootstrap is dit tegenwoordig een stuk simpeler geworden. Het spelen met deze bouwblokken zorgt namelijk voor een snelle visuele ‘cross platform experience’, iets wat mij als front-ender weer zo blij als een kind weet te maken.

De opkomst van responsive design gaat hand in hand met die van het mobile web, deze manier van ontwikkelen zorgt er namelijk voor dat de gebruikerservaring van websites voor alle apparaten is geoptimaliseerd. Dit gebeurt door de gebruikers van een website bij verschillende schermafmetingen een variant van de site te presenteren die voor hun specifieke schermafmeting de beste ervaring levert. Met in het achterhoofd de verwachting dat in 2014 het internet door meer mobiele devices dan door desktops wordt bezocht1 is dit een groot punt op de agenda van veel klanten. Mocht dit nog niet het geval zijn dan zou het zeker overwogen moeten worden. Zo moet de boodschap namelijk altijd en overal duidelijk overgebracht worden, of de bezoeker nou via mobiel, tablet of een desktop de site bekijkt. Via elk medium is de ideale manier voor het overbrengen van deze boodschap namelijk anders, iets waar responsive design op in springt. Zoals met bijna elke web-trend het geval is zijn er natuurlijk ook producten die dit faciliteren, Bootstrap is hier een voorbeeld van.

Bootstrap is opgezet door developers van Twitter en bestaat grotendeels uit HTML en CSS, met een ondersteunende rol voor JavaScript. Oorspronkelijk was de gedachte achter het framework dat er meer front-end consistentie binnen interne tools van Twitter moest komen. Zo hingen er namelijk grote kosten en veel werk aan het up-to-date houden van al de verschillende libraries die op dat moment gebruikt werden. Tijdens de ontwikkeling van Bootstrap bleek het product al gauw meer potentie te hebben dan alleen de organisatie van dezelfde design patronen voorzien. Zo werd vanaf versie 2.0 responsive design de standaard binnen het framework en was het compatibel met de meest gebruikte browsers van dat moment. Eind 2011 besloten de mensen achter Bootstrap het project te plaatsen op Github, een opensource code repository site2. Hier werd het binnen een half jaar het meest populaire project binnen de Github community. Ook werd de code hierdoor in een klap toegankelijk voor ontwikkelaars van over de hele wereld3.

Bootstrap banner

Momenteel is de volgende versie van Bootstrap al verkrijgbaar voor het grote publiek, namelijk 3.04. In deze versie is het grid systeem van Bootstrap geperfectioneerd waardoor je met het aanroepen van diverse class prefixes via CSS specifiek kan richten op een bepaalde schermafmeting. De standaard opbouw hierbij bedraagt 12 kolommen. Per schermafmeting kan aangegeven worden hoeveel van deze kolommen een bepaald deel van de content in beslag mag nemen. Hierdoor is er meteen een eenvoudige manier beschikbaar voor het ordenen van je content over de diverse schermafmetingen. Buiten dat de afmeting van content bepaald kan worden is het ook mogelijk om content alleen zichtbaar te maken voor een bepaalde schermafmeting. Hiermee kan een schifting gemaakt worden waardoor mobiele gebruikers andere content krijgen voorgeschoteld dan mensen die de site via hun desktop bezoeken. Zo kan op mobiel bijvoorbeeld een kortere tekst getoond worden, een andere rendering van een afbeelding worden ingeladen of zelfs een directe link naar de platform specifieke app store worden getoond.

Buiten het responsive grid van Bootstrap biedt het framework ook standaard een ruim assortiment componenten aan die op een groot scala apparaten en browsers perfect functioneren. Denk hierbij aan een carrousel voor het weergeven van afbeeldingen, tot aan een menu balk die op mobiel inklapt zodat hij ruimte bespaart op het scherm. Ook simpele elementen als knoppen, voortgangsbalken en iconen zijn al ingebakken. Wel moet hierbij opgemerkt worden dat het uiterlijk en de ordening van het framework erg kenmerkend is. Om dit te voorkomen is aan te raden om je eigen visueel design te implementeren, dit zodat het niet helemaal ’Bootstrappy’ aanvoelt.

Al met al biedt het framework een efficiënte manier om je website responsive op te bouwen. Omdat je snel aan de gang kan gaan met de diverse componenten die Bootstrap biedt is het mogelijk binnen korte tijd al een structuur opzetten die over de verschillende platformen een optimale ervaring biedt. Door de bouwstenen van Bootstrap kunnen wij als front-enders tegenwoordig de strijd met responsive design met vertrouwen en een lach op ons gezicht aangaan.

Zelf ben ik hierdoor erg enthousiast over een framework als Bootstrap en responsive design in het algemeen. Daarom mijn vraag, doet jullie organisatie al iets met responsive design? Zo ja, wordt hier een ander framework voor gebruikt of is Bootstrap al een bekend gezicht?

 


1 http://visual.ly/mobile-internet-taking-over-desktop-usage
2 https://github.com
3 https://github.com/twbs
4 http://getbootstrap.com

Over de auteur

Gabriël Moawad
Gabriël Moawad
Gabriël is een creatieve front-end developer met kennis van user experience design. Hij weet niet alleen de koppeling tussen design en back-end soepel te leggen, maar heeft ook oog voor de gebruiksvriendelijkheid van applicaties. Sinds de opkomst van het ‘mobile web’ kijkt Gabriël tegenwoordig verder dan alleen het ontwikkelen voor de traditionele desktop. Hij stort zich nu dan ook enthousiast in de uitdagingen die het mobiele platform met zich mee brengen.

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.