CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
HTML, CSS Layout & Responsive Design Using WordPress & Microthemer
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
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.