Responsive Web Design for Desktop, Mobile and Printers

You might have picked up from our new website that we are proponents of responsive web design. Specifically we use twitter bootstrap with its 12 column grid layout that rerenders its view based on a browser’s viewport size. With responsive web design our website looks good whether you are browsing in Firefox, Chrome, Safari or Internet Explorer from your desktop, on your iPad or iPhone, Android phone or tablet, or any other number of mobile devices. But we also went really old school with responsive web design to make our case study and blog posts printer-friendly.

Printer-Friendly?

Yes. People still use printers. It’s not always like Office Space, although surely you’ve experienced ‘PC Load Letter’. People still print articles out to share with people. Paper is tangible and tangible leads to emotional commitment. Apple exemplifies this in the design of their stores. They want you to touch their devices, learn how they work and connect with the devices emotionally. The more you play with that iPad or MacBook Retina, the stronger your emotional attachment and the more likely you are to plunk down your hard earned cash for it.

I personally hate reading documents on computers. I would much rather read something printed out so I can take notes directly with a red pen. Perhaps that is an old habit from my days as a credit analyst, but having something tangible in hand makes it more memorable and pertinent. Hence our decision to make our Makerbot Case Study and all of our blog posts available in all of its paper glory. We want our client’s to be able to print out our articles, write on them, and physically share them with their colleagues. We don’t want to just be another link on the vast interwebs, we would like to stand out as that article that you printed out that looks great and wrote notes on. Chances are that you want your clients or potential clients to do the same.

How to Make Your Website Screen Size Responsive and Printer-Friendly

Prior to our foray into super responsive web design, I had no idea that there was a @media css tag. This little tag can be added to identify different media types and determine the styling for each element given a certain media type. So in our default Octopress template we have a single line of css which we can throughout the site to define our printable elements.

1

@media print { .noprint { display:none; } }

The .noprint class basically says do not display this element if the media type being rendered is ‘print’.

Bootstrap plus noprint

Now with bootstrap, the basic concept is to wrap all of your content within a div ‘container’ element and add ‘row’s of elements with the row’s elements wrapped in spans. This leads to the following hierarchy.

1
2
3
4
5
6
7
8
9

  <div class="container">
      <div class="row">
          <span class="span4">Some Sidebar Content Here</span>
          <span class="span8">The main content that we want to print</span>
      </div>
      <div class="row">
          <span class="span8 offset2">Some centered comments here</span>
      </div>
  </div>

As you can see we have a 4 column sidebar which could have some article metadata and maybe some social components. We don’t really want this to show up in our articles though, nor do we want our comments section to show up. The solution is simple now that we have our media css set up. All we have to do is add noprint to the element’s class property. For example our sidebar span element will change from

1

 <span class="span4">Some Sidebar Content Here</span>

to this:

1

 <span class="span4 noprint">Some Sidebar Content Here</span>

Chances are though that your website has other elements like headers, navigation bars, footers and other elements. You can simply apply this noprint class to entire elements throughout your site. Hopefully, you make good use of templates and partials to keep your html/css code DRY. You will see in our code that we make liberal use of the noprint class.

A Full No Print Site

Let’s take our website as an example with some partials. First we will design our navigation/menu bar to use Bootstrap’s responsive drop down menu with some menu options.

navigation.html

1
2
3
4
5
6
7
8
9
10
11
12
13

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
  <ul class="nav pull-right">
      <li><a href="/">Home</a></li>
      <li><a href="/news">News</a></li>
      <li><a href="/customers/case-studies/makerbot">Case Study</a></li>
      <li><a href="tel:8008467980" title="call us now">Call 1-800-846-7980</a></li>
  </ul>
</div>

Next we will construct our footer. Note that the includes are specific to Octopress and tell Octopress to render some other partials.

footer.html

1
2
3
4
5
6

 <footer role="contentinfo" class="page-footer noprint">
     include newsletter_footer.html
    <div class="row" style="background-color:#8d9daa"></br></div>
     include footer_bar.html
     include copyright.html
  </footer>

Next we will put together the article.

article.html

1
2
3
4
5
6
7
8
9

  <div class="container">
      <div class="row">
          <span class="span4 noprint">Some Sidebar Content Here</span>
          <span class="span8">The main content that we want to print</span>
      </div>
      <div class="row">
          <span class="span8 offset2 noprint">Some centered comments here</span>
      </div>
  </div>

Finally let’s put it all togther in our index file.

index.html

1
2
3

include navigation.html
include article.html
include footer.html

That’s it. Your article will be responsive to any browser or printer that renders it. Have any questions, comments or suggestions? Let us know!