Responsive Web Design for Dreamwidth, Pt. II

[terra]

This is part two of a series on responsive layouts for dreamwidth. Be sure to read part one first, because the stuff I am going to be talking about here won't work very well by default. This is also going to be a little different than my other tutorals, because there's no magic code you can copy and paste to make your layout work better on mobile. Instead, this post is aimed at explaining the basic CSS tools that you need in order to customize your layout.

Once you've configured your viewport, mobile devices will display full-sized layouts instead of zooming out in order to shrink them into a smaller screen. This is good, because it can make text more legible. But it's also bad, because screens are so small, and if you have any large images or absolute positioning, things will break. Luckily, images have a pretty simple fix:

img {max-width: 100%; }

Just copy and paste that into your CSS and all of your images will scale automatically.

To get the rest of your layout to scale, provided it isn't a single column, you're probably going to need media queries. Media queries tell your browser to display a block of CSS only if certain conditions are met.

@media only screen and (min-width: 900px) {
body { background-color: blue; font: 13px Georgia; }
}

This code will turn the background blue and change the font, but only when the screen is wider than 900px!

Philosophically, you want to make your "mobile" layout the default, using progressive enhancement to deliver extra usability on bigger screens. This is mobile first design. Anyway, one of the most common ways I make layouts is a really basic two column set-up with a sidebar for navigation. On smaller screens though, this isn't very practical— so I design a single column layout that adds a sidebar if the screen is big enough. This journal is a pretty good idea of what I'm talking about. Notice that if you resize the window small enough, the sidebar navigation travels to the bottom of the screen. So, how did I do that?

Because I'm designing for mobile first, the basic setup is something like this:

#primary { width: 85%; margin: 1em auto; }
#secondary { width: 100%; position: fixed; bottom: 0;}

On Dreamwidth main content is in the #primary div and the sidebar/modules are in the #secondary div. So that's the bare bones of a single-column layout with a sticky footer module area. So how would we add a sidebar when the screen gets big enough? You do something like this:

#primary { width: 85%; margin: 1em auto; }
#secondary { width: 100%; position: fixed; bottom: 0;}

@media only screen and (min-width: 900px) {
#canvas {width: 85%; max-width: 960px;}
#primary { max-width: 640px; float: right;}
#secondary { width: 320px; float: left; bottom: inherit;}
}

The order is important— you want to put all media queries after the rules they're supposed to modify. Anyway, you might have noticed some of the decorative text disappears when the layout is in mobile mode. That too is easy to accomplish with media queries:

#primary { width: 85%; margin: 1em auto; }
#secondary { width: 100%; position: fixed; bottom: 0;}
.module-header {display: none; }

@media only screen and (min-width: 900px) {
#canvas {width: 85%; max-width: 960px;}
#primary { max-width: 640px; float: right;}
#secondary { width: 320px; float: left; bottom: inherit;}
.module-header { display: block;} }

The actual code I use in my designs tends to be more complicated than this. E.g. in the example, I also use media queries to unstick the sidebar if the screen isn't tall enough. But it all works on this same basic theory.