Six Foot Coder: A Crash Course in Responsive Design

Preface

I am presenting this material, not as an expert of responsive design or even in CSS, but simply as a person that has gone through it once. The main goal is to have a simple tutorial that will be useful to you. Although I have worked with all layers from the User Interface to the Database Layer; I have always considered myself a back end developer. This thinking primarily stems from my poor graphical ability. If I drew you a stick figure, you might have a problem distinguishing what it is. My handwriting has the readability of Egyptian hieroglyphics. :) Despite my shortcomings, this year I have tried my hardest to step into front end design. Normally I have been on large enterprise application teams with super complex back ends. That is where I usually thrive. The user interface didn’t need to be anything but battleship gray because it was used internally with one browser type. Additionally, we would have a person that would be half graphic designer and half front end CSS designer. The front end designer would create the graphics, the colors, the CSS sheets, and the rest of the developers would simply use the styles and images that were created. Things have changed drastically for the web in recent years. Businesses and users are demanding rich responsive web designs. If you don’t know responsive design, now is the time to learn it. All my dress socks are black for a reason. If I can do this, certainly any developer can do it. I take that back, I do have one pair of green socks. The color combinations are always exciting if I accidentally put those on in the dark of the morning.

What is responsive design?

Responsive design is a technique for dynamically changing the layout of a web site for different browser widths giving priority to the most important content. Ethan Marcotte coined the term. He has a short book on the subject which is a must read.

Responsive Design is not about creating a mobile specific site. You have probably seen that done before; a website that has a desktop version and a mobile version. There are so many devices being released every year that one cannot hope to have a site that will look good if you target a specific device or group of devices. We don’t detect devices, we care about widths. Furthermore, responsive design is less expensive to implement than creating a separate mobile site.

Browser Compatibility

Responsive Design (specifically CSS Media Queries) work with these browsers:

Internet Explorer 9 and higher
Firefox 3.5 and higher
Safari 3 and higher
Chrome (any version)

Implementing Responsive Design Step by Step

1. Create a base style sheet with the styles needed for desktop, laptops and older browsers.

2. In the base style sheet, perform a CSS reset so that all modern browsers will render the same.

http://meyerweb.com/eric/tools/css/reset/

3. In the base style sheet, tell images, embed, object, and video to resize to their maximum width.

By specifying just the max-width, images and videos will keep their aspect ratio when resizing. When the user shrinks their browser the images will automatically resize when their parent container becomes smaller.

/* Media Resizing */
img, embed, object, video
{
max-width: 100%;
}

4. In the base style sheet, make the minimum width for the body 320px.

This is to prevent the user from resizing their browser smaller than the minimum width. Set the font-size to 100%. We will need this later.

body {
min-width: 320px;
font-size: 100%;
}

5. Add a meta tag

In your HTML page (or master page), add a meta tag to make the width of the browser port default to the device width with no zoom (scaling):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

6. Create a media query style sheet:

7. Create media query stubs

In the media query style sheet, create media queries based on common ports. You will have ports in between these to tweak your site to look good in whatever size the user resizes the browser.

/* Tablet Landscape */
@media screen and (max-width: 1024px) {
}

/* Tablet Portrait */
@media screen and (max-width: 768px) {
}

/* Big Smart Phones */
@media screen and (max-width: 640px) {
}

/* Mobile Landscape */
@media screen and (max-width: 480px) {
}

/* Mobile Portrait */
@media screen and (max-width: 320px) {
}

8. Decide what content is important.

Design for mobile first. Ask, "How does this content or feature benefit our mobile users?" http://www.lukew.com/ff/entry.asp?1117

9. Define percentages for all your divs.

Below is the most important formula of your life (well concerning responsive design anyway). Responsive design is about grid based percentages instead of the traditional fixed widths that you are used to. You will need to convert fixed widths into percentages.

Result = Target / Context

Let’s say we have a navigation div and a main content div.

<div id="nav">
</div>

<div id="content">
</div>

Our wonderful designer, let's call him Doug, has said that the browser width is 1024 pixels and we have a 100 pixel navigation on the side and 924 pixels for the main content. We are intentionally ignoring any padding or margin to keep things simple for this example.

Navigation Percent = 100 / 1024

Main Content Percent = 924 / 1024

You would write something like the media query below, keeping all the decimal places you can from your calculator.

/* Tablet Landscape */@media screen and (max-width: 1024px) {

     div#nav
     {
          width: 9.765625%;
     }

     div#content
     {
          width: 90.234375%;
     }
}

For nested divs, the context changes. It would not be the width of the browser, but the width of the parent div. So if we had a left inner div of 200 pixels and a right inner div of 262 pixels, the parent context would be 924 pixels because the content div is 924 pixels. It might look like this:

<div id="nav">
</div>

<div id="content">
    <div id="left-content">
    </div>

    <div id="right-content">
    </div>
</div>

Here is the formula for the inner divs:

Inner Left Percent = 200 / 924

Inner Right Percent = 262 / 924

This is what we would have for the media query:

/* Tablet Landscape */@media screen and (max-width: 1024px) {

     div#nav
     {
          width: 9.765625%;
     }

     div#content
     {
          width: 90.234375%;
     }

    div#left-content {
        width: 21.64502164502165%;
    }

    div#right-content {
        width: 28.35497835497835%;
    }
}

10. The strategy.

My current strategy for remaining compatible with IE7 and IE8:
a. Create a base style sheet that is percentage based (it needs to be outside of media queries).
b. Create media queries from largest port to smallest port, overriding behavior as you get smaller.

11. Change your fonts to use em-based.

You are also used to creating fonts in points or pixels. To make your site truly responsive, use the em-based fonts. For example, to create a heading that is 3 times as large a normal font, it would be 3 em. More information on em-based media queries: www.cloudfour.com

h1
{
font-size: 3em;
}

If the normal font of your page is 16px and you want a 24px heading do this to convert to ems. You can leave the comments in there for reference.

h1 { font-size : 1.5em; /* 24px /16px */ }

Tips

Don't use device-width or device-height for media queries. We want the width of the browser port, not the width of the device.
Use the Chrome Developer tools. I have found that it is the easiest and fastest to use compared to Firebug and the IE Developer tools. It is easy to change CSS percentages on the fly to see how it will look. It updates in real time. Right click and do an inspect element to see the tools. Click on the width to change it. After you are finished with the changes, go to the sources tab, select all and copy it into your development environment (Visual Studio, Eclipse, etc.).
Use this piece of software to see if you converted the percentages correctly. http://download.cnet.com/Pixel-Ruler/3000-12565_4-75312528.html
Use this to make media queries work in IE5+ Firefox 1+ and Safari http://code.google.com/p/css3-mediaqueries-js/
If you don’t want the older internet explorer to be responsive but you still want your website to render, you might need a separate style sheet for tweaks. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
IE10 may still have problems with some rendering. Here is a workaround for that. http://css-tricks.com/ie-10-specific-styles/

Example Responsive Design Sites

This is from the alist apart book:
http://responsivewebdesign.com/robot/

This is my first site doing responsive design:
www.kellermansoftware.com

This is my second site doing responsive design:
http://team.eas.com

These sites are mega cool
www.msj.edu
www.bostonglobe.com

References

Retrofitting
http://github.com/bencallahan/rwd-retrofitting

Media Queries
http://www.w3.org/TR/css3-mediaqueries

Media Types
http://www.w3.org/TR/CSS21/media.html#media-types

This is the best course on Responsive Design:
http://pluralsight.com/training/Courses/TableOfContents/responsive-web-design

Example Media Queries
www.mediaqueri.es

Six Foot Coder

Wednesday, April 2, 2014

A Crash Course in Responsive Design