Bootstrap 3 for web designers | Zing Design

11/4/2014

Boot s t rap3f or w ebdes i gners | Zi ngD es i gn

Bootstrap 3 the definitive guide for web designers

October 7th, 2013 Tags: Bootstrap 3, Frameworks, Twitter Bootstrap, Web design & Web development
Twitters 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 youll need to
design something that looks unoriginal, bland or generic.
In this article well 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 its 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 developers 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 Zurbs pioneering Foundation framework.

Migrating over from Bootstrap 2

If youve 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
http://www.zingdesign.com/bootstrap-3-for-web-designers/

1/4

Bootstrap 3 for web designers | Zing Design

11/4/2014

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 Ive 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 inbrowser:
No more discrepancies between Photoshop/Fireworks font and colour rendering
Very easy to transfer templates over to developers (theyre already HTML & CSS!)
Shadows, gradients, font-sizes, dimensions, etc. dont 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. Its 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 Ive seen so far are Easel and Webflow. Easel uses Bootstrap components, which makes designing for Bootstrap a
crap-load easier. Theres 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)
Youre 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 Bootstraps chosen media query break points (992px, 1200px).
http://www.zingdesign.com/bootstrap-3-for-web-designers/

2/4

Bootstrap 3 for web designers | Zing Design

11/4/2014

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 doesnt 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 Bootstrapinspired 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, minitablet

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

1000px wide

1200px wide

Design canvas width

480px wide

768px wide

Extra full-width image versions to

create

290px wide*

750px wide*

450px wide*
690px wide*
2x Retina version of each image
http://www.zingdesign.com/bootstrap-3-for-web-designers/

3/4

Bootstrap 3 for web designers | Zing Design

11/4/2014

* If the image is wider than this

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

4/4