Boot s t rap 3 f or w eb des i gners | Zi ng D es i gn

Bootstrap 3 – the definitive guide for web designersOctober 7th, 2013 Tags: Bootstrap 3, Frameworks, Twitter Bootstrap, Web design & Web development

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

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

In this article we’ll have a look at:

The new design features in Bootstrap 3

Migrating over from Bootstrap 2

The grid templates available

Designing in-browser

The mobile-first approach, why it’s so important and how Bootstrap makes it easier

Designing for developers – streamlining the development process with Bootstrap-ready design

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 designis 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 tohave been stripped back (even further than Bootstrap 2). Bootstrap 3 is far more of a blank canvas, containing many of the great featuressimilar 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

Bootstrap 3 for web designers | Zing Design 11/4/2014

http://www.zingdesign.com/bootstrap-3-for-web-designers/ 1 / 4

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!)

Shadows, gradients, font-sizes, dimensions, etc. don’t need to be recalculated

Easily switching between mobile, tablet and desktop view makes responsive design so much easier

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 fairlyrecently 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 acrap-load easier. There’s also Jetstrap, which allows users to design a website or app with Bootstrap 3. These tools are not without theirlimitations 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 ideais that you begin designing at the smallest device viewport you wish to support, then add more to the design as you progress up through theviewport 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 andbattery 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 doingaway 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).

Bootstrap 3 for web designers | Zing Design 11/4/2014

http://www.zingdesign.com/bootstrap-3-for-web-designers/ 2 / 4

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 pullany 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 wideversion 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 developmentprocess.

Bootstrap 3 sizes

Extra-smalldevices

Small devices Medium devices Large devices

Devices affected Mobile phones Tablet, mini-tablet

Laptop, small desktopmonitors

Wide-screen desktop monitors, TVscreens

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 tocreate

290px wide* 750px wide*

450px wide*

690px wide*

2x Retina version of each image

Bootstrap 3 for web designers | Zing Design 11/4/2014

http://www.zingdesign.com/bootstrap-3-for-web-designers/ 3 / 4

* If the image is wider than this

Bootstrap 3 for web designers | Zing Design 11/4/2014

http://www.zingdesign.com/bootstrap-3-for-web-designers/ 4 / 4