Bootstrap 3 – the definitive guide for web designers

Tags: , , , &

Bootstrap 3 for Web Designers by Zing Design

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

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

People who have viewed this post also viewed

Comments

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text