Responsive design for mobile with Bootstrap

Do you remember when you only had to design for a 1024x768 screen in landscape orientation (because it would take a team of horses to move the giant vacuum tube)? Ah the good old days. Now screens are significantly more mobile and come in a variety of sizes, DPIs, and orientations.

In order to support these devices you need to either find a least common denominator approach or apply responsive design. Lucky for us, Twitter Bootstrap takes much of the pain out of responsive design, making it easy to support tablets, phones, and desktop displays in any orientation.

The primary mechanism I'm going to discuss is the 12-column layout and how you can use it to organize content on your page. The 12-column layout works extremely well for organizing content. If you were used to using tables for layouts, you'll find that you can easily transition into thinking of this layout as a table that's fixed at twelve columns. Where tables and bootstrap differ however is that a table row is incapable of responding to UI changes. With the table approach, you either end up with content squished on the page or horizontal scrolling. When using the twelve column layout, the style classes applied to the columns automatically will stack columns on top of each other when the screen real estate is limited.

As an example, I will start with a web page using a table layout. Try this layout in Chrome and use the emulator feature to view it in an iPhone 4 in portrait mode.

Some initial thoughts:
  1. The text represents some legalese you might be asked to display. This uses my favorite text generator. Bacon Ipsum
  2. You could argue that this is an incredibly contrived example with inline styles and a nested table-based layout - a strawman as it were. I would counter, that this is based on an actual page that I saw recently.

What's going on here? The table rows refuse to break when shown in the narrow view. This causes content to squish and it still doesn't fit neatly on the page causing horizontal scrolling.

We're going to fix this with a handful of things

By placing our content in a .container div, we automatically get centering. The 12-column layout is a row with 12 columns that takes up 100% of its parent by default. We can apply column classes for different screen sizes from extra small (xs) for phones to large (lg) for desktop displays and everything in between. See the Bootstrap Grid system for more information. Each class also specifies a number of columns. col-md-6 takes 6 of 12 columns on displays that are 970px wide and up.

Just by starting with the Bootstrap stylesheet, we got a decent browser clear without padding/margins. As the viewport shrinks, we can stack the labels on top of the form controls to avoid having to scroll. The tagline disappears when we're in a small view.

"Hey mister smarty pants: Aren't you just exchanging nested tables with 50% columns for nested rows with 6 columns each out of 12 total columns? That's 50%!"

There's a bit more to it than that. Actually that WAS the first step. But even with that change, the page becomes more responsive and the content is able to stack instead of forcing scrolling. By layering on different size columns for different viewports, we can control how the content flows. col-sm-12 tells the browser to render the content as it's own row in smaller views. We can even hide a right-aligned column and replace it with a left-aligned version of the same using the visible-*-block classes.

In conclusion, Bootstrap makes it extremely easy to adapt your design to fit different screen sizes for mobile devices.

Labels: , ,