Responsive Design with Twitter Bootstrap

Last week we looked at how Twitter Bootstrap is the perfect compliment to Kendo UI in that it helps you easily lay out your application while taking care of all the tricky CSS that may be happening under the covers. I created a sample 2 column application with a fixed header that allows a user to search the Rotten Tomatoes for movies.

The application looks great, but it has a serious limitation. It only really looks great at 940px. Yes, it technically works on tablets and phones, but it doesn't look very good and it's not usable with all the buttons and links being so small. We know that we can increase the reach of our application significantly if we do some things to help it function more like a mobile application at smaller sizes. To do that, we are going to be doing a little responsive design today.

Responsive Design

The term was originally coined by Ethan Marcotte in his article at A List Apart and later in a book on the same subject. Responsive design is fundamentally the concept of changing the way your application looks and behaves as the screen size gets smaller. This is done using CSS3 media queries.

Media Queries

Media query is a really fancy term for "conditional CSS rule". It simply apples some CSS based on certain conditions set forth. If those conditions are met, the style is applied.

Media queries are supported in IE9+ and pretty much every other browser, including mobile where they are particularly applicable. If you want to get simple Media Query support for IE7 and 8, you can use the popular Respond.js pollyfill.

Let's look at a simple media query to get started:

<style>
@media all and (max-width="1024") {
  h2 {
    color: green;
  }
}
</style>
<h2>My color changes when the width gets below 1024px</h2>

Media queries have two parts, a device specification and then a size rule. In the above, we are setting the following rule...

For all devices no matter what kind, if the width of the screen gets smaller than 1024px, make the h2 text color green.

Go ahead and check it out here for yourself if you are on a desktop where you can resize the screen. Just start resizing the browser window. Once you get below 1204px, the text will change colors. Notice that when you go back past 1024px in width, the style is no longer applied - and so effectively removed.

Making our application responsive

Twitter Bootstrap includes a response.css file which will take care of Bootstrap's stake in our little application's success. Go ahead and add that file to your application's header underneath the bootstrap link.

<meta charset="UTF-8">
<title>Fixster Search</title>
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-min.css" rel="stylesheet">
<link href="css/bootstrap-responsive-min.css" rel="stylesheet">

It will collapse the columns and then stack them on top of each other when the screen size gets small enough. But we are going to have to implement a few other items from the Bootstrap arsenal, as well as a few of our own media queries to get things looking just right.

The navbar

The navbar is currently not a problem for us because it doesn't contain very many items. For the sake of showing you how to deal with a small screen and a large header, I have added a few items to the navbar.

With the bootstrap-responsive CSS file, the navbar starts stacking the menu items on top of each other. When the screen gets real small, it's just a vertical list of items. This works, but it's far from ideal. We can handle this better using Bootstrap's Navbar toggle buttons.

The first thing that we need to do is wrap our unordered list of links in a div that has the nav-collapse class. This class will hide the list of links when the display gets too small to display them all horizontally.

...
<!-- wrap the list of header links in a nav-collapse class.
     this will hide the links when the browser width gets too small. -->
<div class="nav-collapse">
  <ul class="nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="http://www.rottentomatoes.com">Rotten Tomatoes</a>
    </li>
  </ul>
</div>
...

We now need a way to display those links for smaller screens. Bootstrap provides a drop down menu where the links will magically appear if we just add a another element that will serve as the button to open said menu.

<!-- this creates a button with 3 lines indicating that a menu is there
     if the button is pressed -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</a>
<!-- wrap the list of header links in a nav-collapse class.
     this will hide the links when the browser width gets too small. -->
<div class="nav-collapse">
  <ul class="nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="http://www.rottentomatoes.com">Rotten Tomatoes</a>
    </li>
  </ul>
</div>

You can see this in action here. As you resize the width of the window, the links will disappear and the button will appear. Clicking on the button will expand the content showing the links that were displayed horizontally when there was room enough to do so.

Now our navigation looks good, and the first column gets stack on top of the second when the window gets too small. That's an example of using some of Bootstrap's responsive capabilities.

The ListView

Our next order of business is to handle the Kendo UI ListView. As a starting point, let's see what it looks like full sized:

The first thing that I notice as I start to collapse the page is that at around 980px, things start to look rather bad...

If you keep resizing, eventually the columns get stacked and the issue goes away. But as you resize down to phone width, it comes back again.

Note: I use a Chrome Plugin called Window Resizer which not only resizes your windows at set intervals, but also tells you what the current width of the browser window as as you resize it. I highly recommend this plugin.

In order to get rid of this problem, we need to do two things if there isn't enough room:

1. Don't display the numbers between the pager buttons
2. Hide the synopsis

Hiding the pager page list

We need to find out exactly what it is we need to hide to get the page numbers in the pager to go away. To do that, I'm going to be using the Chrome Developer Tools. I did a screencast on these recently. I can't urge you enough to become confident and comfortable with your browser's dev tools. If you don't like the dev tools that your browser has, find a browser that has some that you do like. You can always go back and test on your deployment target.

If I right-click the pager buttons, I can see that they are just an unordered list of items. That unordered list has a class of k-pager-numbers.

We can hide the numbers by setting a style for the k-pager-numbers class that gives it display: none. We want to do the same thing on the synopsis. The synopsis will only be shown on larger screens. That makes media query look this this:

@media all and (max-width: 980px) {
  .k-pager-numbers, .synopsis {
    display: none;
  }
}

Now when we resize the window, the page numbers and synopsis go away when we are at smaller resolutions. Now the application fits perfectly to the window at any size.

But wait! We aren't done yet...

We still have a problem though. When I test the site on my iPhone, the application shows up and it's tiny. I have to pinch zoom to even be able to use and then scroll around. That's no good. What's happening here?

By default, mobile devices zoom way out on content to display the whole page. This is so you see everything, and not just a portion of the page. This is how mobile devices ensure that all pages will at least be viewable. We just need to tell mobile devices that they don't need to make this auto-correction for us. To do that, we need to add the meta viewport tag.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Flixster Search</title>

All this does is tell our device to scale the content to 100% of it's actual size. And with that change, the application is now looking a whole lot better on phones!

The finished product

Here is the finished application. I had to host it outside of JSFiddle as JSFiddle puts everything in an iFrame, thusly rendering my meta* tag useless.

Responsive design is not a silver bullet

Responsive design is such an attractive option. It allows you to build one application that reaches all users no matter what device they are on. However, responsive design can be very tricky. Media queries are incredibly powerful, but effectively implementing a solution is going to require some solid planning and execution. RD is a strategy, not a silver bullet.

For more examples of responsive design, head over to Six Revisions and checkout their 25 examples.

Kendo UI provides you with choices when it comes to mobile. You can use responsive design with Kendo UI Web, or you can specifically target mobile with Kendo UI Mobile. Both of these strategies are valid and effective, but each has its place depending on your requirements.

Make sure that you think "mobile first" when building your application. The days of delivering content on a desktop only are a thing of the past. Kendo UI gives you the tools to build first class web and mobile applications, no matter how you decide to do it.