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.
<link rel="stylesheet" href="base.css">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:
<link rel="stylesheet" href="mq.css">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?11179. 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.comh1
{
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/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/static/css/ie7.css">
<![endif]--> - 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
