This is my third installment of learning Responsive Web Design. If you’re not sure what Responsive Web Design is, be sure to see the first two posts: Responsive Web Design & Responsive Web Design 2.

For my third project of Responsive Web Design, I decided to tackle my portfolio site, jalopyhead.com. This project took a bit longer to complete for a couple of reasons: 1.) It’s a “full-fledged” website with several different templates and 2.) I didn’t write the theme, so half of my time was spent figuring out how each element of the site functioned and what the corresponding CSS did.

For the sake of simplicity, I only set one media query. I set it at 400px. Most mobile phones fall under 400px in the portrait view.

Almost all my edits were in the css file. However, there was one change that I needed to make in the template files. In the template files, the sidebar, which contains the menu, was underneath the “content” element. For the full-size view, this was fine. However, since the mobile view stacks the elements on top of each other, I had to move the sidebar above the “content”. The full size view was unaffected by the change, but the mobile view places the sidebar above the content, which solved the problem.

All in all it is pretty simple as long as you can identify the elements and find the corresponding css.

Check it out. Resize your window and see the magic! If you view it on a mobile device, you’ll obviously see the optimized view.

Tools: Firebug (in firefox), BBEdit, Filezilla
Tested on: Droid Razr, iPod Touch

(FYI, this doesn’t work in IE. This isn’t really a concern, though, since mobile devices do not use IE.)