If you are up to date on the latest techniques in WordPress theme development, you are surely aware of the need for more and more mobile friendly themes. In this tutorial for WordPress theme developers, I will describe some basic techniques to get you on your way to developing your own responsive WordPress theme that will look great in any device.
Plan The Layout
The first step to creating a responsive theme for WordPress is to sketch out your design in at least three different screen sizes. Typically these would be for a desktop computer, an iPod or tablet and an iPhone, other phone or handheld device. You can do this the old fashioned way using just a pen and paper or use a graphics program or sketching tool such as paper for the iPod. Use whatever you feel most comfortable with.
Sketch Your Design
Here are some simple examples that show how you might sketch out a design for all three screen sizes. I used Gimp, a freely available graphics design software package available on the internet at no charge.
Notice in the above image, the footer is always at the bottom, but the sidebar is on the side for the larger of the three screens and just above the footer in line with the content for the smaller two screens. This can be done a couple of different ways which I will explain below.
Allowing the Sidebar to Move to Bottom for Smaller Screens
As promised, I will explain how to allow the sidebar to float to the left for large screens and go under the content and often above the footer for smaller screens. The technique most commonly used for this is adding media queries to the bottom of your theme’s style.css file. Here is a quick example of a media query you could add to the bottom of style.css to make the sidebar not float to the left at certain screen sizes:
Now at what size you wish to do this will depend on the layout of course. The basic principal is that above the media query just shown, you would have something like this for the .sidebar class:
So what the media query does is effectively cancel the float and make it go in line with the content on the left in the image example above. This is just a crude example by the way. You can take it further with more styles in the media query and the .sidebar class of course. You can go even further with the concept by adding another media query further down on the style sheet for even smaller screens such as for the iPhone and other phones. Here is an example media for phones:
The above code would take out padding for smaller mobile devices only. That is just one example. You could do things such as make fonts different sizes to improve readability or change colors or backgrounds according to where on the page the styles show up on that particular device size. There are all sorts of possibilities. These are things you should take into consideration when developing your theme layout as early as sketching it out.
Think of Mobile Devices from the Start
When planning a mobile theme, think about mobile devices from the start. Keep the two key sizes in mind of 960px for iPods and 320px for phones. You can provide larger screen size exceptions for larger desktop screens as well. I have found this necessary in the past when making websites for Artists and Photographers who like to view their work on very large scale screens.
This is a starting level tutorial for theme developers and explains some basic concepts for mobile theme development and responsive theme techniques. Just remember to think of the mobile devices being used today when you start your theme’s layout. Sketch your theme out on paper or with a tool for such designs. Don’t forget to keep it clean and allow for the resizing of images and other containers on the website you are developing. The more flexible your layout is, the better it will look across all devices.