Beginners guide to responsive web design with WordPress

In the past, designers and developers only had to concern themselves with one medium: the computer screen. But in recent years we now are living with smart phones, tablets and with so many different things we need as a developer an easy tool when you create a new site for a client.

So what is adaptive and responsive web design?
The idea of Responsive Web Design, a term coined by Ethan Marcotte is that our websites should adapt their layout and design to fit any device that chooses to display it.

There are three parts that are important to are responsive site:

1. A fluid grid
2. Fluid images
3. Media queries

For step 1 (fluid grids) I’ve have been using Less Framework 4 by Joni Korpi and adapted it for my WordPress theme (www.fiddeandersson.se).

To get started with responsive web design follow these steps:

1. Download Less Framework 4
2. Use Media Queries in the header.php
3. WordPress CSS Files
4. How this works

Download Less Framework 4 and copy the css files into your wordpresss/themes/[theme_name]/css/. After that you can sort out the Media Queries in to different files that I’ll show below.

The header.php file:

<!-- Load Stylesheets -->
<link rel='stylesheet' href='<?php bloginfo("stylesheet_url"); ?>' type='text/css' media='screen'/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/10col.css" type="text/css" media=" only screen and (min-width: 992px)"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/5col.css" type="text/css"  media="only screen and (min-width: 480px) and (max-width: 767px)"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/3col.css" type="text/css"  media="only screen and (max-width: 479px)"/>

In this code above I’m telling WordPress that in your theme folder load your style.css (your standard css file). After that I’ll load many stylesheets into the [theme]/css/[your css files here..] using Media Queries [media="only screen and ( your selected width )"] to target the users into your optimized CSS layout.

3col.css (max-width= 479px) is optimal for the mobile phones.
5col.css (min-width= 480px and max-width= 767px) is optimal for tablets.
10.col.css (min-width: 992px) is optimal for desktop resolutions.

I show an example on the 5.col.css (for tablets).

/*        Wide Mobile Layout: 480px.
        Gutters: 24px.
        Outer margins: 22px.
        Inherits styles from: Default Layout, Mobile Layout.
————————————————————
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    body {         width: 436px;
        padding: 36px 22px 48px;
    }
 /* Your custom code here */ 
}

Now you can drag the browsers width smaller and you’ll see the effect because it loads different stylesheets depending on your browser width (it’s respond to your width and therefore many devices).

The reason I use Less Framework 4 is that it’s easy to customize for your needs and an easy tool to quickly take the advantages of CSS 3 Media Queries.

The positive effects with responsive web design is with CSS 3 you can use the Media Queries and with a basic knowledge of CSS you can make your web site look great on many devices without any cost.

The problems with responsive web design is that it takes a lot of time (create x number more css.files) but with a well structure core file it saves many hours of work. Another problem is that your device will load the regular images on the site and it would use more data on your phone and probably take a little longer to load your site.

The alternative that I’ve been testing is to create a Mobile Theme that switches the user to your mobile version and therefore it’s optimize for mobile phones. In the near feature I think the main problem for responsive web design is to make images optimized for the targeted device.

Fredrik Andersson