Twitter Bootstrap–An Increasingly Essential Development Framework

The debates, in the past year, over the relevance of developing websites in Responsive Web Design (RWD) formats have been highly interesting, challenging, even. The desire to optimize a website’s performance, especially in terms of user experience and speed of component downloads, is a healthy concern for any developer. Today we can conclude that in certain cases the decision to use RWD to develop a website represents a highly appropriate choice.

Statistics concerning the use of tablets confirm the relevance of such a decision– in fact they practically make it a no-brainer: a recent Ipsos study reveals that about one out of ten Canadian tablet owners now considers this device as their primary computer (source).

Developing RWD: Initial Questions to Ask

Will a CMS be used to manage the website? If yes, how does one plan to develop the page content management templates? There still is very little information about the impact of responsive sites on the development of Content Management Systems, and we intend to discuss this subject in another post shortly.

Should we modify our design and development process? According to developers, the answer is yes… This implies that graphic designers will need to follow development frameworks chosen by developers… Obviously, this has a significant impact on the process of designing the user experience.

Should we develop websites – and particularly their CSS classes – from scratch or should we use an existing development framework instead? If yes, which one?

Needless to say, the scale of the project is a decisive factor. In the case of a one page microsite, it is feasible to develop the appropriate media queries from scratch. For larger websites, the use of responsive development frameworks quickly becomes critical to the profitability of a project. Will your client –internal or external – understand that developing CSS classes for all the resolutions out there will literally multiply the hours of design and development invested in a website? Probably not!

Consequently, developers like us need to be familiar with an appropriate reactive website development framework. At multiplemedia, we’ve chosen Twitter Bootstrap for several reasons.

An essential reference

Today, Bootstrap is emerging as the responsive development framework of choice, just as WordPress did when blogging became popular in 2003 and 2004. Although such a claim may seem exaggerated, one has to admit that thousands of developers around the world presently use Bootstrap to build responsive websites, and that as far as development frameworks go this one is way ahead of the competition. And what about the other ones like Zurb Foundation, you might say? Have a look at what Google Trends says about Zurb:

graph-barom2

A vast library of styles and graphical design elements

Bootstrap comes with a large library of relevant and contemporary CSS styles and graphical design elements, which makes the development and graphical design of a website much easier. A developer who is familiar with the Bootstrap library can develop wireframes much faster. The long list of graphical design options includes dropdown menus, several types of tabs, buttons of various colors and sizes, navigation bars, forms, various positioning options, breadcrumbs, pagination systems, content thumbnails, progress bars, icons, etc.

Of course, these graphical design elements are the same from one project to another. No need to have built many websites with Twitter Bootstrap to remember the “navbar” class!

Also, a large community of developers of templates and other “customizing” tools for Twitter Bootstrap CSS styles has grown around these basic elements. This makes it a very flexible, extremely comprehensive and well documented framework. There are even PSD templates containing a wealth of Twitter Bootstrap graphical components (such as this one, for example). These libraries will delight both developers and graphical designers, enabling them to speak a common language.

The dilemma of screen resolutions

Imagine trying to explain to your boss or client that screen resolutions of 1024 pixels now represent only 15% of visits on their website and that there are in fact hundreds of different screen resolutions today. Now imagine having to explain exactly what the user will see in resolutions of 768, 320, 1280, 1920 pixels, etc. The reaction might be something like: “What will our website look like on a mobile phone?”!

However, new development standards have emerged in this jungle of screen resolutions. In order to facilitate the work of developers and designers, Twitter Bootstrap precisely offers a pre-integrated list of screen resolutions:

Label

Layout width

Column width

Gutter width

Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

Straightforward, right? Such a standard facilitates decisions about the behavior of content elements. You can then specify that “Under 980 pixels, the menu button for mobile devices appears.”

In addition, Bootstrap provides you with the assurance that older browsers like IE 8, which some people still use, will simply display the default resolution. In fact, Twitter Bootstrap already incorporates the necessary CSS sheets. For a better understanding of this, we invite you to visit this page with IE8, and then with Firefox, with a resolution of 1440 pixels (or more). You will see how the page immediately adjusts itself.

All these reasons lead us to conclude that Twitter Bootstrap has really become an essential development framework.