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.
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 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
- List groups
- Components removed
- Accordians – which have been replaced by collapsible panels
- 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
- 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.
- 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
- Bootstrap is full of great features, but completely overhauling styles or adding on extra interactivity will slow down the development process.
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.
Becoming increasingly popular with web designers is in-browser wire-framing and mocking-up. There are many benefits of designing in-browser:
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:
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.
|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*|
|2x Retina version of each image|
* If the image is wider than this