Web design is an evolving profession. While a keen eye for color, typography, and layout will always be important, these skills are being trumped by a need to understand user motivations. It isn't enough to build a site and wait for traffic to roll in — sites must help users achieve their goals, with a minimum of cognitive friction. Bootstrap can help web professionals define these goals, and create a killer experience, too.
we're not making pages, we're making movies
I like to say we're not making pages, we're making movies. Users expect sites to load quickly, provide engaging content, and smart interactivity. Just as movies depend on quick cuts, lighting, and mood to draw users in, websites rely on transitions, interactivity, and timing. These details often get lost during the design phase—or worse, are never accounted for. While a transition that takes 0.5 seconds when it should take 0.25 seconds usually won’t sink an application, it is this level of detail separating good from great.
I will show you how Bootstrap can replace static wireframes and bring these details to the forefront earlier and with less effort.
Step 1: Setup Project
The first step is to download the latest stable Bootstrap and jQuery builds.
Though jQuery is hosted by a number of CDNs, I prefer to include all files locally so I can work with or without web access. Go ahead and set up a directory structure like the one below, and copy the unminified Bootstrap CSS, Bootstrap Responsive CSS, and Javascript files. Tweak names and locations as needed, but using this structure means you can also leverage my HTML template in the next step.
Now would be a good time to create a third stylesheet, which I will call user.css. This file will be used to override Bootstrap styles as needed.
Step 2: Create index.html and Verify Paths
This is the only other setup required to start building an interactive wireframe. Create a file in your project directory root, and name it index.html. After you have created the file, copy this code and save.
1 |
<!DOCTYPE> |
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
6 |
<title>Interactive Bootstrap Wireframes</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
9 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
10 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div class="container"> |
15 |
Your layout will go here. |
16 |
</div>
|
17 |
|
18 |
<script src="js/vendor/jquery-1.8.2.min.js" type="text/javascript"></script> |
19 |
<script src="js/bootstrap/bootstrap.js" type="text/javascript"></script> |
20 |
</body>
|
21 |
</html>
|
Open a web browser and drag the saved index.html file into it. If all of the includes are properly loaded, you should see something similar to the screenshot below. If you don't see the alert box, open the Console or Web Inspector and see if a file has failed to load. After troubleshooting, remove or comment out the alert line in the $(document).ready function at the bottom of the page and get ready to build Bootstrap wireframes.
Step 3: Rough in Your Content Blocks
With all the necessary files in place, we can start roughing in the main content blocks. Most sites (apps) will contain a header, primary navigation, main content well, sidebar, and footer. I am deliberately keeping the layout simple, to quickly illustrate the power of Bootstrap’s grid system.
The only structural markup on the page so far is our div with class “container”.
Note: This div is a required containing block for Bootstrap; we will build our entire wireframe application inside it.
Bootstrap also requires the new HTML doctype, and generates its style rules with classes, instead of tag names. These decisions mean we can use some new HTML5 elements: header, navigation, section, article, aside, and footer. It is worth mentioning if you plan to test your layout in Internet Explorer, you will need to download and include either Modernizr, or the HTML5 Shim. Modern versions of Firefox, Chrome, and Safari natively support the HTML5 standard.
Bootstrap is built on a 12 column grid. It uses two classes, row and span to create block-level containers. By applying the row class to a container like a div or header, it automatically stretches across the entire 940px width. By adding containers with class spanN (N being a placeholder for the number of columns), you can easily create content wells, sidebars, and other layout blocks without having to manage floats or other quirks.
To get up and running quickly, I am going to build a basic header, navigation bar, main well, aside, and footer. Replace the "Your layout will go here" with the following code.
1 |
<header class="row"> |
2 |
<h1 id="banner">My Awesome App</h1> |
3 |
</header>
|
4 |
|
5 |
<nav id="primary-navigation" class="row"> |
6 |
<div class="span12"> |
7 |
<ul>
|
8 |
<li class="selected"><a href="#">Home</a></li> |
9 |
<li><a href="#">Features</a></li> |
10 |
<li><a href="#">About</a></li> |
11 |
<li><a href="#">Contact Us</a></li> |
12 |
</ul>
|
13 |
</div>
|
14 |
</nav>
|
15 |
|
16 |
<section class="row"> |
17 |
<article class="span9"> |
18 |
<h2>This is the main content well</h2> |
19 |
<p>This is a short paragraph to highlight where the general content will go.</p> |
20 |
</article>
|
21 |
|
22 |
<aside class="span3"> |
23 |
<h3>This is the sidebar</h3> |
24 |
<p>Good content items include blogrolls, featured news, Twitter updates, etc.</p> |
25 |
</aside>
|
26 |
</section>
|
27 |
|
28 |
<footer class="row"> |
29 |
<div class="span12"> |
30 |
<h4>This is the footer</h4> |
31 |
</div>
|
32 |
</footer>
|
I also added a few basic rules to user.css, to make the content blocks easier to identify. If all has gone well, you should see a number of gray blocks with black descriptive text inside.
1 |
/* Basic style rule to outline and space block-level elements */
|
2 |
[class*="span"] { |
3 |
background: #eee; |
4 |
margin-bottom: 10px; |
5 |
}
|
Step 4: Fixed, Fluid, Responsive!
Fixed and fluid layouts have been around for a long time. Responsive layouts are relatively new, and combine the best parts of both. It gives designers tools to optimize their designs for multiple device sizes (smartphones, tablets, narrow and widescreen displays) without having to maintain a separate codebase for each. Resize your browser window to see Bootstrap’s responsive stylesheet in action, and get a feel for the awesome ability to write once and test wireframes in a number of environments.
Browsers make use of CSS break points to decide how to render a page, based on minimum and maximum width measurements. Break points in relation to browser width always begin with @media (width argument) and are very easy to read. They can also contain a second argument in another set of parenthesis, which allows a great deal of flexibility for multiple devices.
In the code sample below, I have created several rules that define background colors for four common Bootstrap responsive break points, modified slightly to show a smooth transition from one color to the next.
1 |
/* Basic background colors for responsive break points */
|
2 |
/* Max-width 480px landscape phone and down */
|
3 |
@media (max-width: 480px) { |
4 |
.container { |
5 |
background: #f1ea81; |
6 |
}
|
7 |
|
8 |
.container:after { |
9 |
content: "Max-width 480px landscape phone and down"; |
10 |
}
|
11 |
}
|
12 |
|
13 |
/* Min-width 481px and max-width 767px landscape phone to portrait tablet */
|
14 |
@media (min-width: 481px) and (max-width: 767px) { |
15 |
.container { |
16 |
background: #a7f7e5; |
17 |
}
|
18 |
|
19 |
.container:after { |
20 |
content: "Min-width 481px and max-width 767px landscape phone to portrait tablet"; |
21 |
}
|
22 |
}
|
23 |
|
24 |
/* Min-width 768px and max-width 979px portrait tablet to landscape */
|
25 |
@media (min-width: 768px) and (max-width: 979px) { |
26 |
.container { |
27 |
background: #c4deff; |
28 |
}
|
29 |
|
30 |
.container:after { |
31 |
content: "Min-width 768px and max-width 979px, portrait tablet to landscape"; |
32 |
}
|
33 |
}
|
34 |
|
35 |
/* Min-width 980px widescreen display */
|
36 |
@media (min-width: 980px) and (max-width: 1199px) { |
37 |
.container { |
38 |
background: #fde3ff; |
39 |
}
|
40 |
|
41 |
.container:after { |
42 |
content: "Min-width 980px, max-width 1199px, desktop format"; |
43 |
}
|
44 |
}
|
45 |
|
46 |
/* Min-width 1200px widescreen display */
|
47 |
@media (min-width: 1200px) { |
48 |
.container { |
49 |
background: #ffc4c4; |
50 |
}
|
51 |
|
52 |
.container:after { |
53 |
content: "Min-width 1200px, widescreen format"; |
54 |
}
|
55 |
}
|
We’ve built a fully responsive layout, but we're still missing the good stuff. The rest of this tutorial will show you how to add visual interest through content and interactivity.
Step 5: Sound Off!
Now that the scaffolding is in place, we can start adding content. I am deliberately keeping these views generic—gray boxes with minimal styles encourage beta users to focus squarely on the interaction, and not get too hung up on the visual style.
The Hero Unit is designed to create a front–and–center call to action. Code downloads, new applications, or breaking news items are good candidates. For our purposes, I will use it to announce a major software upgrade. Replace the existing h2 and p tags in the main content well with the code below and refresh your browser to see the hero in action.
1 |
<div class="hero-unit"> |
2 |
<hgroup>
|
3 |
<h1>Version 2.0 Is Here!</h1> |
4 |
<h2>All new features, lots of improvements</h2> |
5 |
</hgroup>
|
6 |
|
7 |
<h4>A more perfect package you’re not likely to find</h4> |
8 |
<p>Our team has been busy this past year, completely revamping the inner workings of our
|
9 |
application. Faster page loads, better search, and mobile integration.</p>
|
10 |
<p><a href="#" class="btn btn-primary btn-large">Download Now</a></p> |
11 |
</div>
|
The hero unit is a good start, but people want to see where their time and money will be going. An image gallery is a strong follow up, and is a snap to implement. Images are laid out using the same spanN grid that defines layout blocks, and can easily be extended to include headlines, tags, captions, or microdata. For now, we will use Placehold.it to generate three gray boxes underneath our hero unit.
I am a big believer in semantic markup, so we will be using the HTML5 figure and figcaption tags for increased context. Even if none of your users are browsing with a screenreader or other assistive device, descriptive markup is a best practice for UX and front–end development.
Add an unordered list and a few images inside the main content well, below your hero element like so:
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 1 title</h5> |
7 |
<p>This is a short caption.</p> |
8 |
</figcaption>
|
9 |
</figure>
|
10 |
</li>
|
11 |
|
12 |
<li class="span3"> |
13 |
<figure>
|
14 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
15 |
<figcaption>
|
16 |
<h5>Image 2 title</h5> |
17 |
<p>This is a short caption.</p> |
18 |
</figcaption>
|
19 |
</figure>
|
20 |
</li>
|
21 |
|
22 |
<li class="span3"> |
23 |
<figure>
|
24 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
25 |
<figcaption>
|
26 |
<h5>Image 3 title</h5> |
27 |
<p>This is a short caption.</p> |
28 |
</figcaption>
|
29 |
</figure>
|
30 |
</li>
|
31 |
</ul>
|
Another browser refresh should yield a layout similar to this, when viewed widescreen.
Step 6: Tabbed Navigation
The hero unit and images add a lot of visual interest, but highlight our next challenge: the bullet point links standing in for a proper navigation element.
Bootstrap has several built-in navigation styles, so experimentation is encouraged. I am going to highlight the tabbed navigation here. Our first order of business is to replace the basic navigation list:
1 |
<nav id="primary-navigation" class="row"> |
2 |
<div class="span12 tabbable"> |
3 |
<ul class="nav nav-tabs"> |
4 |
<li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> |
5 |
<li><a href="#tab2" data-toggle="tab">Features</a></li> |
6 |
<li><a href="#tab3" data-toggle="tab">About</a></li> |
7 |
<li><a href="#tab4" data-toggle="tab">Contact Us</a></li> |
8 |
</ul>
|
9 |
</div>
|
10 |
</nav>
|
Next, let’s remove the gray background from our header and nav elements. Add the following four lines to the end of your user.css file.
1 |
header [class*="span"], |
2 |
nav [class*="span"] { |
3 |
background: #fff; |
4 |
}
|
We also need to update the main content well. I have added a class of tab-content to the section element, and wrapped the hero and images in a div with class="tab-pane active" and id="tab1". I added three additional div elements below, with ID’s matching the navigation link tags. These three blocks are stubs to be filled in later, but will be useful for testing. Update the section markup and refresh the browser. If everything goes right, you should be able to toggle through the tabs and view the stubbed in content.
Step 7: Tooltips and Popovers
Tabs are cool, but they’re also just a start. Though the Internet is fast becoming segmented and application–like, it is still driven by links from one resource to another. Links are used to hook pages together, provide additional context, and sometimes, to house secondary functions. Tooltips and popovers are good examples of secondary function; they are easily implemented with custom data-attributes.
What are data-attributes? Per John Resig, who wrote about these devices clear back in 2008:
Simply, the specification for custom data attributes states that any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation).
This means we can add custom data to our link tags, and Bootstrap will handle it accordingly.
Suppose our image gallery is made up of technical information. The descriptions might include terminology that is unclear to the average user. Activate tooltips by replacing the image gallery HTML, starting with the unordered list, and adding a jQuery $(document).ready function and Bootstrap’s tooltip function to the bottom of the page.
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 3 title</h5> |
7 |
<p>This is a short caption. It contains some technical language like
|
8 |
domain-specific terms like <a href="#" |
9 |
class="tooltips" |
10 |
data-placement="top" |
11 |
data-trigger="hover" |
12 |
data-title="HTML: Hyper Text Markup Language" |
13 |
>HTML</a></p> |
14 |
</figcaption>
|
15 |
</figure>
|
16 |
</li>
|
17 |
|
18 |
<li class="span3"> |
19 |
<figure>
|
20 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
21 |
<figcaption>
|
22 |
<h5>Image 3 title</h5> |
23 |
<p>This is a short caption. It contains some technical language like
|
24 |
domain-specific terms like <a href="#" |
25 |
class="tooltips" |
26 |
data-placement="top" |
27 |
data-trigger="hover" |
28 |
data-title="CSS: Cascading Style Sheets" |
29 |
>CSS</a></p> |
30 |
</figcaption>
|
31 |
</figure>
|
32 |
</li>
|
33 |
|
34 |
<li class="span3"> |
35 |
<figure>
|
36 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
37 |
<figcaption>
|
38 |
<h5>Image 3 title</h5> |
39 |
<p>This is a short caption. It contains some technical language like
|
40 |
domain-specific terms like <a href="#" |
41 |
class="tooltips" |
42 |
data-placement="top" |
43 |
data-trigger="hover" |
44 |
data-title="JS: Javascript—The fresh language" |
45 |
>JS</a></p> |
46 |
</figcaption>
|
47 |
</figure>
|
48 |
</li>
|
49 |
</ul>
|
1 |
// Add just above the closing body tag
|
2 |
// Activate the tooltips
|
3 |
<script type="text/javascript" charset="utf-8"> |
4 |
var tooltips = $('a.tooltips'); |
5 |
|
6 |
$(tooltips).tooltip(); |
7 |
</script> |
With the HTML and Javascript in place, refresh the browser and roll over the gallery links to reveal your tooltips.
We are now going to add sharing to our image gallery (at least in a wireframe-y way) with popovers. Popovers are activated by including data-attributes in your markup, and another snippet of JavaScript.
First, let’s add a share button to each of our image captions. Add the code block just below the closing paragraph tag in each figcaption.
1 |
<p>
|
2 |
<a href="#" |
3 |
id="test" |
4 |
class="btn btn-primary popover-link" |
5 |
data-placement="right" |
6 |
data-html="true" |
7 |
data-content=" |
8 |
<a href='#'>Facebook</a><br/>
|
9 |
<a href='#'>Twitter</a><br/>
|
10 |
<a href='#'>Tumblr</a><br/>
|
11 |
<a href='#'>Flickr</a><br/>
|
12 |
"
|
13 |
data-title="Share this image" |
14 |
>Share</a> |
15 |
</p>
|
It might seem strange to put each item on its own line, but I have found Bootstrap is fairly picky about well-formed markup, and it is easier to spot errors one line at a time. We need to write a few lines of JavaScript and the popovers will be ready.
1 |
// Prevent default links actions and page jumping
|
2 |
var links = $('a'); |
3 |
links.on('click', function (e){ |
4 |
e.preventDefault(); |
5 |
});
|
6 |
|
7 |
// Activate the popovers
|
8 |
var popovers = $('a.popover-link'); |
9 |
|
10 |
popovers.popover(); |
This time we have added a general links function to prevent our screen from jumping when users click on the Share button. Without delving too far into specifics, each action on a web page registers an event, which we are capturing here as the function argument 'e'. By intercepting this event, and replacing it with our custom JavaScript, the page stays where it should and our popover appears as expected.
Step 8: Creating Modal Windows
Whew. After all of that, modal windows are going to be a cakewalk. Bootstrap makes modal windows available by adding a block of HTML to the top of your container, and a button or link with an href that matches the modal window ID. First, the modal HTML.
1 |
<!-- Add this directly below div class="container"> -->
|
2 |
<!-- Modal -->
|
3 |
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" |
4 |
aria-labelledby="myModalLabel" aria-hidden="true"> |
5 |
<div class="modal-header"> |
6 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
7 |
<h3 id="myModalLabel">Catchy modal header here</h3> |
8 |
</div>
|
9 |
<div class="modal-body"> |
10 |
<p><label for="username">Username</label><input type="text" name="username" value="" |
11 |
placeholder="Enter username" id="username"> |
12 |
</p>
|
13 |
<p><label for="password">Password</label><input type="password" name="password" |
14 |
value="" placeholder="Enter password" id="password"> |
15 |
</p>
|
16 |
</div>
|
17 |
<div class="modal-footer"> |
18 |
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> |
19 |
<button class="btn btn-primary">Save changes</button> |
20 |
</div>
|
21 |
</div>
|
The only other thing to do is add our trigger. Since this is an application, we would be right to assume there will be a login sequence. I have modified the header to shorten the banner area, and add our Login button next to the search box. Change the following HTML, and add the CSS to the end of your user.css file.
1 |
<header class="row"> |
2 |
<div class="span7"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span5"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
<a href="#myModal" role="button" class="btn" data-toggle="modal">Login</a> |
10 |
</div>
|
11 |
</header>
|
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 70%; |
5 |
float: left; |
6 |
}
|
7 |
|
8 |
/* Login button */
|
9 |
header a { |
10 |
float: right; |
11 |
margin: 20px 0 0 20px; |
12 |
}
|
Refresh and click the Login button. You should be rewarded with a quick animation, and the modal window presenting front and center.
Step 9: How Will I Find Anything?
This interactive wireframe is coming along nicely. We have navigation that works, lots of blocks for adding content, interactivity, and a responsive layout. What we don’t have is a way to search for things, even in a user testing sense. Once again, Bootstrap has us covered.
Users are accustomed to the search box being prominently displayed in the top right corner of desktop displays, and just below the headline on narrower displays. We will begin by breaking the header element into two blocks, and adding a single input to the smaller:
1 |
<header class="row"> |
2 |
<div class="span9"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span3"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
</div>
|
10 |
</header>
|
We will also add a few lines of CSS to the user.css file, to push the search box off the top of the page.
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 90%; |
5 |
}
|
We will also be writing a slightly larger amount of JavaScript to make the typeahead work properly. I will keep it to a minimum, and explain what each script is doing.
I imagine some of you are thinking “I am a web designer, not a developer. Fair point, but we have to at least test the JavaScript waters to unlock Bootstrap’s full power. And besides: clients are wowed when an input box starts returning results from the first letter they type.
Add the JavaScript snippet below to your existing script tag, and hit Refresh. If it works correctly, you should see a dropdown menu with suggested results after you have typed one or more letters in the search box.
1 |
var search = $('input#search'); |
2 |
|
3 |
$(search).typeahead({ |
4 |
source: [ |
5 |
'Dave Mustaine', |
6 |
'Tom Morello', |
7 |
'Jim Root', |
8 |
'Kirk Hammett', |
9 |
'Joe Perry', |
10 |
'Jimi Hendrix', |
11 |
'Eric Clapton', |
12 |
'Billy Duffy', |
13 |
'Johnny Hickman', |
14 |
'Eddie Van Halen', |
15 |
'Dimebag Darrell', |
16 |
'Noel Gallagher' |
17 |
],
|
18 |
items: 5 |
19 |
});
|
Okay, here's what the code is doing. The var search = $('input#search') tells jQuery to store a reference to the search box in the named variable search. Then we call, or invoke, the jQuery function on our search variable, and also call the Bootstrap typeahead method. Inside the typeahead parenthesis, you will notice an opening and closing squiggly bracket { }. These brackets are used to create a JavaScript object, and store some information about our search box.
The first piece of information is the source array. At its simplest, an array is an ordered list of things. Here it is a list of guitar players. Every guitar player added to the array will be available as a result in our search input. The second part of the object, items: 5 tells the search box the maximum number of results to show.
These are just two of several options available. I encourage you to look at the Bootstrap typeahead documentation and experiment with different configurations. The final screen for this step should look similar to this:
Conclusion
Bootstrap has become a staple in my front–end workflow. It allows me to test when iterations are relatively painless, and try several different approaches concurrently. These discoveries help guide final design decisions, and help avoid time-consuming changes during the full development cycle. By treating wireframes as a critical part of the user experience, I am able to build tools that feel more natural and are more gratifying.
I have just scratched the surface of Bootstrap, and what is possible using its kit of parts. Wireframes are a great place to start learning the ins and outs—they are meant to be lo-fi, early test models of full applications to come. Clients and colleagues can test our assumptions, and help us refine quickly, with minimal time lost.
I hope you liked this tutorial, thanks for reading!
