Bootstrap 3 – the definitive guide for web designers

Twitter’s Bootstrap revolutionized web design when it was first released in 2011. As Bootstrap has become synonymous with fast, tidy design and development, a lot of folks are now asking us specifically for Bootstrap-based websites and apps. Following the recent release of Bootstrap version 3, we thought it would be good to provide a guide for web designers who are being tasked with designing for the latest iteration of this popular framework.

Making the shift to Bootstrap means getting familiar with the responsive grid, understanding the constraints of the framework and taking a mobile-first approach. Designing for Bootstrap does not suggest that your creativity will be compromised in any way, or that you’ll need to design something that looks unoriginal, bland or generic.

The new design features in Bootstrap 3

From a front-end developer’s perspective, Bootstrap 3 looks really good at a glance. The UI has been stripped back to a flat design, flat design is a better starting point as it is always easier to add to an element than to remove properties from it. In fact all the common styles seem to have been stripped back (even further than Bootstrap 2). Bootstrap 3 is far more of a blank canvas, containing many of the great features similar to those of Zurb’s pioneering Foundation framework.

Migrating over from Bootstrap 2

If you’ve been designing for version 2.3.2 in the past, the transition to version 3 will be relative smooth. The major differences to note are:

The new grid and container sizes

The new media query viewport ranges

Extra-small devices < 768px (Mobile)

Small devices >= 768px (Tablet)

Medium devices > 992px (Laptop, small desktop screens)

Large devices > 1200px (Wide screen desktop, TV screen)

Glyphicons are now included

New components available

Panels

List groups

Components removed

Submenus

Typeahead

Accordians – which have been replaced by collapsible panels

Templates for Bootstrap

You can find Bootstrap templates at bent web design which include all the components from version 2.

The best set of grids I’ve seen for designing for Bootstrap 2 are the Bootstrap Grid Templates from PSD Wrangler. For the price of one tweet, you get a very helpful PSD with a grid for all of the viewport widths targeted in version 2.

Designing in-browser

Becoming increasingly popular with web designers is in-browser wire-framing and mocking-up. There are many benefits of designing in-browser:

No more discrepancies between Photoshop/Fireworks font and colour rendering

Very easy to transfer templates over to developers (they’re already HTML & CSS!)

Surprisingly enough, ‘web design’ in the bad old days actually started out in the browser, back then of course it was all terrible. It’s only fairly recently that powerful web apps have started being developed with all the bells and whistles of a native graphics editing program.
A couple of the best tools I’ve seen so far are Easel and Webflow. Easel uses Bootstrap components, which makes designing for Bootstrap a crap-load easier. There’s also Jetstrap, which allows users to design a website or app with Bootstrap 3. These tools are not without their limitations of course, and it would be dangerous to rely on them too heavily.

The mobile-first approach

A phrase which is bandied about a lot these days, the idea of mobile-first follows the design philosophy of progressive enhancement. The idea is that you begin designing at the smallest device viewport you wish to support, then add more to the design as you progress up through the viewport widths. Following this method means:

The content remains the same across all devices, there is no repeated or hidden content (which is much better for SEO)

You’re only ever adding on as the viewport width increases (ie. no hacks to remove/hide content on smaller devices)

The HTML DOM does not need to be manipulated to accommodate new elements on mobile devices (which is processor intensive and battery draining)

The user gets a more consistent experience across platforms, as there are no major style changes needed to fit mobile constraints.

One of the really positive improvements in Bootstrap 3 is that it encourages the mobile-first approach by providing the flexible grid (and doing away with the non-responsive stylesheet). By using the grid, responsive design is even easier.
All devices under 768px wide render the single column layout, where content naturally spans the entire screen. For devices wider than 768px, the content is structured in the grid, in a container which expands at each of Bootstrap’s chosen media query break points (992px, 1200px). The columns are no longer fixed widths, they are relative widths calculated by Bootstrap in percentages.

Mobile-first design does take longer, but saves a lot of development time later on in the process.

Designing for developers

Designing with front-end and back-end development in mind is essential to the success of any web project. It doesn’t mean you have to pull any punches creatively, it simply means taking a few extra steps to make life easier for the developers who have to work with your Bootstrap-inspired design down the track.

Provide the mobile version of the design first, this will make mobile-first development an enormous amount easier. Design a 480px wide version with content spanning 450px and 15px gutters down both sides.

The tablet mock-up should be 768px wide and designed using the Bootstrap grid template.

Provide the optimised images for each viewport size as well as high-density/retina displays

Familiarise yourself with the CSS and JavaScript components of Bootstrap, base your design around these components.

Bootstrap is full of great features, but completely overhauling styles or adding on extra interactivity will slow down the development process.

Bootstrap 3 sizes

Extra-small devices

Small devices

Medium devices

Large devices

Devices affected

Mobile phones

Tablet, mini-tablet

Laptop, small desktop monitors

Wide-screen desktop monitors, TV screens

1 Column width

Fluid

63px

81px

97px

2 Column width

125px

161px

195px

3 Column width

185px

240px

292px

4 Column width

243px

323px

390px

5 Column width

312px

400px

488px

6 Column width

367px

478px

585px

7 Column width

424px

566px

683px

8 Column width

499px

647px

780px

9 Column width

548px

728px

878px

10 Column width

615px

808px

975px

11 Column width

684px

875px

1073px

12 Column width

726px

964px

1174px

Design canvas width

480px wide

768px wide

1000px wide

1200px wide

Extra full-width image versions to create

290px wide*

750px wide*

450px wide*

690px wide*

2x Retina version of each image

* If the image is wider than this

Know any other handy tools for web designers?

We are always looking for innovative tools to help us with our workflow, let us know your handy tools in the comment field below.

We hope you've enjoyed reading this article. Why not sign up to our newsletter to receive regular updates on our latest projects, research, and other news in the world of web design and development.

Comments

Great article and overview of BS3. Can you elaborate on the Bootstrap 3 size charts. What exactly are the pixel sizes representing next to the 1-12 column areas? I understand the breakpoints, etc. but the recommended sizing is a tad elusive as to what you’re trying to convey?

ie. 6 Column width 367px 478px 585px – please use this one as an example.

The pixel value represents the smallest width that each column will be at the given break-point.

As Bootstrap’s grid columns are relative width, the widths will expand as the device width increases.

The chart is to help designers to provide images/content to fit these columns when designing with the grid, this way, the front-end developer can switch out images at the given break points for greater efficiency. (i.e. don’t load assets which are larger than they need to be)