Making the RVM web site responsive with CSS3 media queries

published on June 22, 2011

I've just finished Ethan Marcotte's book called “Responsive Web Design“ and I wanted to get my hands dirty with this awesome CSS3 media query thing and flexible images. Let me show you how we can make the Ruby Version Manager site responsive to the users screen size.


About the Author

Tim Brandes studies Business Education and Computer Science at the University of Göttingen. He is a partner at Zinkler & Brandes – a software company specialized in web applications based in Hannover, Germany.


So, you might have heard of this shiny new book by Ethan Marcotte called Responsive Web Design. The basic idea is to make one web site and let it respond differently to the screen size of the user. We use three ingredients to do so

  • A Flexible Grid
  • Flexible Images
  • CSS3 Media Queries

                tibra: if you have more than 1200 pixel width
                tibra: make it smaller than 768
                tibra: and watch the header boxes
                wayneeseguin: ok
                wayneeseguin: holy shit how did you do that !
                wayneeseguin: totally fucking awesome
                

A Flexible Grid

The idea behind a flexible grid is to consequently use percentages and em's in favor of fixed pixels. The RVM web site already had the main content area as a percentage sized width. However, the header area still uses fixed width boxes of 220px.

Mixing pixels and percentages leads to some ugliness when resizing the browser window and making it shorter. But is this really a problem for coders? How often do we use a documentary site on a small screen or with a very small browser window? I think the problem lies on the other side of the universe: high resolution screens.

As you can see, there is the documentation index on the bottom of the site. The content area takes up all the space and stretches its text far too wide. When I did this design about a year ago, I didn't consider this usability/readability issue. Now let's go and see how a flexible grid can help us with the header and those boxes on top.

Except for the wider sponsors box, all boxes inherit the same basic style from a compass mixin:


                @mixin default-box 
                  float: left
                  width: 18%
                  margin-right: 0.7%
                

And then we simply use it on a selector, here the recommend and irc boxes:


                #recommend, #irc
                  @include default-box
                

So, that's just floating divs with a width and a margin that is a percentage value. Pretty easy and works as expected.

Flexible Images

We have four images in the head area and our “w00t! RVM! TENNNGH! RUBYYYYYYYYYY! CRUNCH“ image that's greeting us welcome. Our best friend with flexible images is max-width: 100%. This attribute makes sure images adapt to their parents container size even if they are bigger. We let the browser resize the images dynamically and hope for some smooth rendering (good browsers will give you that). Here is how the logo is styled:


                #logo
                  text-align: center
                  img
                    max-width: 100%
                    max-height: 170px
              
                

And the haml view looks like this


                #logo
                  %a{ :href => "/" }
                    %img{ :src => "/images/logo.png", :alt => "RVM Logo"}
                

I have added the max-height: 170px after some testing with resizing the browser window. If you don't specify any max-height the logo will become bigger and bigger until it hits the original file size. I left the logo.png untouched and gave it some height constraints instead. The “w00t! RVM!...“-image looks just as simple as this:


                #content
                  img
                    max-width: 100%
                

And here is the result on big and small browser windows:

CSS3 Media Queries

While this is all well and good so far, the real power becomes visible when we introduce CSS3 Media Queries. The last screenshot already has some media queries in use (see the long text from before in those boxes on top? No? Me neither :)).

But don't you find that there is still too much whitespace in the content area? Wouldn't it be great if we could simply move the big Documentation Index from the bottom of the page to the right and float it next to the content area? This way, widescreen users could really benefit from their screen size and scrolling down would only be necessary if we were on a smaller screen. You might have guessed it already: Media Queries - that's what they're here for.

How do we include Media Queries?

Media Queries allow us to change the style depending on the users screen size. We simply include them into our normal stylesheet like this:


                @media screen and (max-width: 768px)
                  // changes for everything smaller than 768px
              
                @media screen and (min-width: 1200px)
                  // changes for wide-screen users
                

Let it float, baby

Now, this code is all it takes to make it happen:


                @media screen and (min-width: 1200px)
                  #content
                    width: 50%
                    float: left
                    margin-bottom: 1%
                  #docindex
                    width: 44%
                    float: right
                  a.docindex
                    display: none
                

And as a little bonus, we hide the link to the Documentation Index at the top of the content area.

See it live

Wayne has already deployed the new version, be sure to check it out! I hope you find this useful and you are encouraged to make some responsive designs yourself. I believe it's the future. If you can imagine a way to make this better, find the RVM website on Github and start hacking!