HTML, CSS Layout & Responsive Design Using WordPress & Microthemer

Fluid CSS layout and responsive design

For those of you who haven’t used Microthemer yet, it’s a WordPress plugin for applying regular and responsive styles to your site via a visual interface. With Microthemer, you can completely change the appearance of your theme. You can design for mobile, large desktop screens, and everything in between.

About This CSS Layout & Responsive Design Tutorial

This tutorial provides instructions for converting a free non-responsive WordPress theme (Twenty Ten) into a responsive theme. It is also a general tutorial on HTML and CSS layout, because responsive web design requires a basic understanding of HTML and CSS layout. I make no assumption of prior HTML or CSS knowledge and will explain technical terms when they arise.

I will follow a desktop-first approach to responsive web design (RWD) as opposed to mobile-first. Desktop first is useful when a site looks fine on large screens and you don’t want to start from scratch using the mobile first approach. From a technical standpoint, the difference between desktop-first and mobile-first is trivial. Please see the endnote on mobile first responsive design for a definition and brief comparison.

At every step of the process I present 2 methods:

Follow the GUI method if you prefer not to code by hand. Follow the code method if you want to learn how to write CSS code.

I will illustrate the code method using the code editor in the free version of Microthemer. Another option would be to insert some code at the bottom of Twenty Ten’s style.css file using your favourite code editor.

Main Objective

Responsive web design is a big area. This tutorial could take many forms. I’m going to stay focussed on taking novices from a point of zero CSS knowledge to understanding the basics of how to design responsively. I will highlight and explain common CSS hurdles beginners face. You will learn by doing. I will introduce theory (educational notes) only when it’s relevant to something you have just done. You should follow each step in this tutorial in order for the teaching to sink in.

If you haven’t used a browser inspector yet (a tool that reveal a website’s underlying HTML and CSS code), this tutorial provides a very hands on introduction for beginners.

Is This Pitched At My Level?

I recommend having a quick look at the end of tutorial quiz before proceeding. The quiz reveals a lot about the content of this tutorial and will help you decide if it can teach you things you don’t already know. If you get over 90% on the quiz without reading the tutorial, please let us know what kind of tutorials would benefit you. Thanks!