BLOG

If you’re reading this, chances are you’re asking yourself the same questions I found my asking last year – what’s so great about Bootstrap and why should I consider adopting it as a framework?

I was first introduced to Bootstrap by a colleague almost two years ago and was intrigued by the idea of it. At the time, we were getting a few requests for responsive websites, so the idea of using classes to quickly define boundaries across screen sizes had its appeal.

Why I wasn’t a Bootstrap early adopter

So, why didn’t we jump right onto the Bootstrap bandwagon two years ago? There are a few things that held me back.

Do we really need it?

I’ll admit that two years ago I wasn’t totally convinced we even needed a front-end framework for our websites. At the time, only a handful of our clients wanted responsive websites and I was happy for our team to code them on a case-by-case basis. We’ve come a long way since then – now every website we design and build at Limelight Online is responsive. With this move, it became obvious that a framework like Bootstrap would save us heaps of time and help us produce consistently awesome responsive sites.

Bootstrap 3 was written to work from a mobile-first design approach, which is crucial to Responsive Web Design (RWD). The release of Bootstrap 3 came around the same time that an increasing number of clients were requesting responsive websites. We were looking for a way to make RWD part of our standard website offering and I began to wonder if Bootstrap could give us the edge we needed to continue to provide responsive websites at a competitive price.

Non-compliant attributes

Being the old school programmer that I am, who always writes his own code from notepad (or PhpStorm these days) and tries not to break browser standards, I just couldn’t bring myself to add in non-compliant attributes.

At the time, the example Bootstrap 2.x sites I was looking at must have been using a jQuery plugin that allowed developers to apply span* tags as follows: desktop=”span6”, tablet=”span4”, mobile=”span12”. Naturally, this didn’t sit well with me so I decided to wait until the next version came out in hopes that this would be addressed.

When Bootstrap 3 was released, I was delighted to see that this had been addressed with the new classes so that span* tags could be applied as col-xs-*, col-sm-*, col-md-*, col-lg-*.

Now I’m a believer

I had been paying attention to all the Bootstrap chatter for two years, but decided to take a closer look after Bootstrap 3 was released last August and decide whether it was time to make a change. My research convinced me that Bootstrap would help our designers create more consistent designs and allow our development team to code more quickly and with greater precision. In turn, this meant we could create better websites for our clients without raising our prices – a win-win situation for everyone.

Bootstrap encourages more consistent design

Bootstrap gives designers the tools they need to create a more consistent design framework that provides for an improved user experience and allows our development team to work from a set of standards. Bootstrap ensures that the final designs contain the appropriate types of headers, buttons, calls to action, and other site styles that will be needed for the build.

Bootstrap also makes it possible for our designers to create responsive designs that can be easily implemented by our developers. Before we began using Bootstrap, our designers would make slight adjustments from the desktop designs through to tablet and down to mobile. While it was easy to make these changes in Photoshop, it created a huge overhead for our developers when it came time to implement these differences. Having our designers work from the same framework as our developers has resulted in major efficiencies in the rate it takes us to build the HTML/CSS for our responsive websites.

Building on a solid foundation

During this research phase, a light bulb really turned on for me when I considered how our team was frequently challenged by various inconsistencies with constructing HTML from provided Photoshop files. To cope with these subtleties and inconsistencies, our developers had to custom code many elements to allow the site to match the design. Bootstrap provides a solid foundation that stops our team from reinventing the wheel on each new site build. This isn’t to say that our websites all look the same – our designers have complete freedom and are able to create unique concepts for each website while keeping within the Bootstrap framework.

Bootstrap also makes it easier for our developers to work on client websites that they did not originally build. Each developer builds websites in a slightly different way, which is fine during the initial build, but can cause dramas when another developer has to make adjustments further down the line. Using Bootstrap means that our developers are speaking the same language, making it easier for another team member to pick up project work later on if needed.

The right decision for us

We’ve been using Bootstrap for new websites for nearly a year now and I think I can speak for my team when we say it was one of the best decisions we’ve made. Being able to build the same awesome sites while cutting the time to build the site by many hours has made a huge difference to the company as well as the stress level of the developers. If you're still considering a move to Bootstrap, I’d encourage you to jump on board or investigate some of the other awesome frameworks out there.