User Experience at Hello Erik

Rise of (Small) Machines – A Responsive Example

December 29, 2012

Important Note: This article is way out of date and only applies to Bootstrap v2. For updated information, go to these articles instead which explain things in much greater detail for Bootstrap 3. Bootstrap 3 Series


Listen, and understand. The mobile users are out there. They can’t be bargained with. They can’t be reasoned with. They don’t feel pity, or remorse, or fear when they disregard and leave your unresponsive website. And they absolutely will not stop, ever, until your mobile experiences are good.

Whoops! I meant take a look at this picture: mobile usage At the end of 2011 Horace Dediu compiled some data on the marketshare of various computing platforms. Desktop computing is at around 50% market share, the other 50% consists of:

  • Android
  • iOS

As we enter 2013, I would love to see if the distribution for 2012 has moved even more towards the favor of mobile devices. The odds of someone visiting your site on a mobile device is growing as casual internet usage move farther and farther away from the desktop. The potential for visitors to be on a mobile device is getting stronger every day. The point is: the mobile users are coming.

Responding with Responsive

As I venture through the social banter about UX and web design, I hear a lot of discourse about responsive design. I am a firm believer in having the viewed presentation layer be separate from the content and business logic behind it (similar to MVC). For me, this translates into having a site be responsive to the viewport size of the device. This is not a specific mobile version of the site on a subdomain, or something that reads a user agent and serves up a different site like m.helloerik.com. Alternate mobile sites are a whole different topic.

As Simple as it gets

Responsive sites rely basically on a certain aspect of CSS: @media queries to detect the viewport width and serve up different styles accordingly. If you’re not a HTML/CSS pro, or haven’t done this before, it can be very difficult to know what to do. It would be almost impossible if you didn’t have some sort of CSS framework to build it on. And THAT is what this blog post is about.

Responsivize with Bootstrap

Let’s get this out of the way – I am a bootstrap fan. It’s changed my workflow as a (former) web designer and (current) UX engineer. I’ve spent 17 years designing sites from Photoshop to HTML and then helping wire it up to the functional code. But not all UX people came up through web dev, and don’t implicitly know HTML on a in-depth level. Fear not. Bootstrap is here to save you.

They weren’t the first to create HTML/CSS bases like this, but it’s the one I choose and it has grown incredibly popular all over the Internet. If you want to get in to HTML prototyping, there’s never been a better time to learn. Bootstrap is a collection of CSS classes and attributes that sort of sets the stage for you. It’s not actually a “design” template by itself. It just gives you the HTML and CSS tools that you normally would have to build over and over and over again.

There is a lot of documentation at the Bootstrap site on all the intricacies and capabilities, so I won’t rehash those here. What I want to do today is a little “learning by doing.” I hope to help you get started with this little sample page so you can view the HTML and see the code here in the post where I’ll detail exactly what I did to create this. It’s not a complex example, but I hope you can take it, copy it, or start from scratch.

Let’s Get Started

First, get this installed: RWD bookmarketlet. It’s a little browser extension that will allow you to change the viewport size right in your browser without having to send the URL to a 3rd party site, or having to squeeze your browser down manually. Here is the page that I’m going to be explaining: Responsive Example Page. Open up that link in a new tab and view it with the RWD bookmarklet.

It’s a very simple design. I’ve added a little colored status bar at the top that indicates which version of the responsive styles are currently active. If you use the RWD bookmarlet to view it, you can easily see what happens when the viewport changes size. That’s the key to a responsive design as opposed to a dedicated mobile design.

What Is Actually Happening

Inside the CSS, there are special things called “media queries.” For our purpose, it’s a very simple concept, they just say “Hey, when the browser is smaller than whatever number you want, say 940 pixels, I’m gonna detect that and serve up the styles that are inside of me.” It only applies the styles that are within the @media container braces {}.

Here’s a dead simple example; You have a site where the text is 20 pixels tall on your regular desktop version, but you want it smaller when viewed on a mobile device. You want it 10 pixels tall and you want the red background to stay the same in either case. Here are the 2 CSS classes to do that. One is a container that has a red background, and the other is a class that sets the font size to 20 pixels tall:

Here is how it looks:

This is your text

When you want to make that text size adjust when it is viewed in a narrow mobile viewport, you have to add a @media query now to let it know when to change:

And with this @media query in action, here is how it would look:

This is your text

So when the width of your viewport is below 767 pixels, that @media query is going to go “okay, now I overwrite the .your-text style and apply my version of the style instead!” That’s the very basic way of how the Bootstrap version of responsive design works. You don’t need to use Bootstrap to do this, but they have set up their grid and CSS to make this very quick and easy. Let’s take a look at that now.

The Bootstrap Grid

Now that we saw the basic function of @media, we need to go a little deeper. This is where Bootstrap does the heavy lifting for you. Doing this manually with HTML and CSS if you’re not super familiar with it would be a very frustrating experience. I don’t recommend it unless you really want to learn to reinvent the responsive HTML container wheel.

The Bootstrap grid is the core of how it does HTML layout. It’s a dream when building a traditional width page, but it’s also set up specifically with responsive designs in mind. The grid would take more time to explain that I think people want to spend here, so I’ll try to give it the most basic summary to get you through the example.

The Container: Bootstrap wants you to set a container as the outermost holder of all the sections within. If you were to envision your HTML as containers, it would look like this:

container1 The HTML:

You have to use a container around your structure. There are technical reasons for this, but don’t worry about it now.

The Row: Inside the container, you have to put rows. No actual content actually goes inside a row. Multiple rows stack on top of each other to create horizontal divisions. As we continue to envision the page, adding a row would look like this: row1 The HTML

Spans: Spans are how we actually setup the layout of the page, They hold the actual content. They are the things that facilitate the responsive design.

The size of the span is determined by the class you give the div. Bootstrap uses a 12 column system, which simply means that it expects the spans to be any width from 1 to 12 “spans wide.” When you have a row, you fill it with spans that add up to twelve.

columns

If you wanted two halves, it would be a .span6 and a .span6. If you wanted a thin sidebar you would do a .span2 and a .span10. That is what makes up a row.

Let’s take a look visually. The following is the most basic example. We have a container, a row, and then a .span12. The span12 does just what it says, it spans 12 columns, which gives us the full width of the page for this content:

span1 the HTML:

That example has a .span12 class assigned to it, so it takes up all 12 columns. But if you wanted to divide it up into two sections, one 3/4 wide and the other 1/4 wide, you would have the first be a .span8 and the second a .span4 so they add up to twelve: span2 The HTML

Time to build a page: We’ve got the start of a page going with the examples above. Let’s flesh it out with a couple more rows of content, and then a footer. The way we add those are the same as above:

  • When you have a row, you get 12 span units to fill. In our first row, we used all 12 at once
  • Now, we want to add 3 more rows. One with 2 sections, another with 3 sections, and a final with 1 section.
  • We want our 2nd row to be split between 4 and 8 spans
  • We want our 3rd row to be split between 4, 4, and 4 spans (thirds!)
  • And the bottom row should be a full 12 span width to act as a footer

Don’t let this intimidate you – we’re just repeating the same thing over and over: container-row-span3 And the HTML:

At this point, you would have a responsive structure just like the one in the example link. I added some styles and colors in the example so it was easier to notice, but that was all cosmetic. The responsive nature is all accomplished with just the code above that uses Bootstrap’s responsive styles. Part of the beauty of Bootstrap is that you can get started with this instantly. Take a look at the example link again, and compare it to the graphic. You should see how it’s the same layout. You can even use the RWD Bookmarklet to shrink the view port and watch it collapse down to mobile sizing with nice animation.

How the Bootstrap Responsive Grid Makes it work

When you have the responsive option enabled in Bootstrap, it enables 4 different layouts by default:

  • A normal layout
  • A wider than normal layout
  • A smaller than normal tablet layout
  • A flexible layout meant for phones/narrow tablets

screens

 

If you make your browser really wide, you can see in our example that it does go a bit wider, back to normal, and then a bit smaller. Of course if you squeeze it down, it flips over into the mobile layout. Try this out on the example page and notice the colored status bar in the top.

How the Responsive Grid Changes: Here is how this works. Bootstrap first looks at your .containers and treats those as a unit. It moves in a level, and looks at the rows. Rows stack on top of each other already, so moving to the mobile layout doesn’t change them much. But here is where the magic happens. The spans are meant to go side by side, adding up to 12, remember? But once you hit that responsive dimension in the @media query, Bootstrap takes those spans and stacks them by making them all 100% the width of the much narrower row! Like this: mobile-spans That’s the responsive version of the same design we built above. The important thing to realize here is there is no new HTML. Bootstrap handles the CSS re-arrangement by default. And just like that your content and site are now oriented vertically and ready for mobile consumption.

Note: Bootstrap assumes that your content importance goes from top down, left to right (This can be changed, but that’s a bit more advanced).

The endless Nuance of Responsive Design

As you build a responsive site out, there are endless ways to customize it. When things start to get complex, you will find yourself adding all sorts of styles inside the various @media queries to change the layout to suit the mobile needs. At a certain level of complexity, JavaScript and other web languages play a big part in building a big responsive website or browser-based app. The example here is just a narrow view into how something could be prototyped or tested.

As a matter of note, this site uses Bootstrap for its HTML and CSS base and is fully responsive. The content manager is WordPress, but I gutted it all out and re-wrote the theme with Bootstrap, basing it on the Hybrid Core theme framework. The design and layout of the site is all mine, but Bootstrap controls the responsive elements and core CSS.

Give it a try

If you want to give it a try with the Bootstrap source itself, or if you just want to fiddle with my example, download them both with the links below. I have put HTML comments all throughout the sample file with the hope that it can be easily understood and edited or expanded. zip And please post any questions or comments you have. I love this stuff, and am excited to help people out and learn more things myself. I hope that there was value in this little example. Let me know in the comments if it helped!

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Pingback: Modern Enterprise Applications – A Mobile Web Strategy | Dave's Two Cents()

  • Ali R. Tariq

    You, sir, are awesome. I wish I had seen this earlier in the year. I’ve since learned Bootstrap (and now working with B3) the hard but admittedly fun way; reps reps and more reps!

  • http://www.helloerik.com/ Erik Flowers

    Oh man I forgot about this article, it’s all BS2.

    I should update it for BS3. If you go check the more recent posts, I have 2 more on BS3 Grids and how to use a Less workflow.

    But thanks for the compliment. Let me know if you have any other BS3 inquiries, I love to get involved and contribute to discussions.

  • JJ

    Great article… i’m starting now with Bootstrap and all those span, row, containers were making me mad XD…
    seriously, it is ended simple, all that is needed is a simple explanation like this one to get it right

  • http://www.helloerik.com/ Erik Flowers

    This is outdated and for Bootstrap 2, probably need to re-write it and point people to a new post…