Bootstrap 3 and responsive design

Bootstrap 3 and responsive design

Here at CI we have found "Responsive Design" to be the buzz-phrase of 2013 with new and existing clients demanding it!

Fortunately we've been using a front end development framework called Bootstrap for a few years now. Using this framework responsive designs can easily be created. Moreover using this framework gives us a consistent approach to building User Interfaces (UI) which has dramatically helped many aspects of the development lifecycle.

This post provides a little background on what Bootstrap is, why we adopted it and why responsive design is so important right now.

So first let's talk about Bootstrap in a little more detail, here are the main components:

Grid system and responsive design 

Bootstrap uses a standard 940 pixel width grid layout. At a high level the toolkit has four variations for each of the main target resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs. Each variation adjusts the width of the columns.

The CSS stylesheet 

Bootstrap also comes with a standard set of stylesheets covering the basic layouts for all the core HTML components/widgets. Through this standard stylesheet a uniform, modern appearance is created for all text formatting, tables, form elements, etc.

Re-usable components 

Bootstrap also contains other commonly used interface elements that you might need to use. For example a button with advanced features such as drop-downs, pagination, breadcrumbs, tabs etc. There are also labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar.

JavaScript components 

Bootstrap comes with several JavaScript components via a series of jQuery plugins. These provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields.

Ok so now we know what it is, why is it and responsive design so important?

Bootstrap itself gives us many benefits:

• speed of development
• reusability of components
• consistent good layout/design
• on-going simplified maintenance.

All these together create a very compelling reason to use the framework.

A responsive website or webapp, adapts the layout to suit the device viewing it. This means your website will work on desktop computers, tablets and smart phones and the interface will dynamically adjust. There is no need for separate applications to suit each device type or double the work updating content for specific devices. One site that does it all for every device, even devices that don't exist yet!

You may be thinking this is too good to be true and in some cases you'd be right. Native applications still have their place but like anything once the problem is fully understand, the correct tool can be selected to solve this problem.

Finally I'd like to comment on why "mobile first" is so important. Many people have been talking about the adoption and increase of smart-phone usage for web browsing over the years. There have been many predictions and some I have been extremely sceptical about.

At CI we are fortunate to have direct access to Google Analytics data for a hundreds of companies in many different vertical markets. If you weren't a believer in mobile usage increases before then you certainly need to be now as we have categoric proof showing in some cases mobile browsing constitutes more than 50% of overall usage. This isn't a prediction, this is a fact right now.

So if you're designing a new web based application please keep the design for "mobile first" mantra firmly ingrained on your mind and the first thing you talk about with your developers.