WPtuts Draft – Mobie-Friendly WordPress Tutorial

Converting WordPress to be Mobile-Friendly

As mobile devices becomes less of a luxury and more of a necessity, the bottom line is becoming obvious: your fixed-width WordPress theme needs to be Responsive. Now’s the time to seriously consider converting your WordPress theme to be Mobile-Friendly. This tutorial will show you the basic steps to make your site fluid.


Tutorial Detail

  • Program: WordPress
  • Version (if applicable): 3.3.1
  • Difficulty: Moderate
  • Estimated Completion Time: 2-3 hrs.

Step 1 Create A Backup

First thing to do before beginning any significant coding changes is to backup your files. In this case you should simply copy your theme’s folder via ftp. Or, if you have ssh access to your Web server a simple

cp -R twentyten ./twentyten~

in WordPress folder

/home/yourwordpressroot/wp-content/themes

should do the trick.


Step 2 Deconstructing Your WordPress Theme

To better understand the way in which things work, it’s sometimes best to take it apart (visually). Let’s figuratively deconstruct your Web site by breaking down the basic components of the default (Twenty Ten) WordPress page structure. See “WordPress Page Structure Diagram”.

WordPress Page Structure

WordPress Page Structure Diagram


Step 3 Make Your Container Elements Fluid Via CSS and Media Queries

Prepare for the smaller screens by using media queries replacing CSS rules with new percentage properties. If you look at your your theme’s style.css you’ll need to replace the basic sections (DIV containers, i.e. #header, #main, #container, #primary, #secondary, #sidebar and #footer) fixed widths with percentage values. For example in the Twenty Ten theme you will add the following to your bottom of your style sheet:

@media screen and max-width 1024px {
  #wrapper
  {
    WIDTH:94%;
    MARGIN:20px auto;
  }

  #access,#access .menu-header,div.menu,#colophon,#branding,#main,#footer
  {
    WIDTH:100%;
    MARGIN:0 auto;
  }

  #branding
  {
    OVERFLOW:hidden;
  }

  #container
  {
    FLOAT:left;
    WIDTH:99%;
    MARGIN:0 -25.5319149% 0 0;
  }

  #content
  {
    WIDTH:68.5957447%;
    MARGIN:0 29.787234% 0 20px;
  }

  #primary,#secondary
  {
    OVERFLOW:hidden;
    WIDTH:23.40425535%;
  }

  #site-title,#site-info
  {
    WIDTH:74.4680851%;
  }

  #footer-widget-area .widget-area,#site-generator,#site-description
  {
    WIDTH:23.40425535%;
  }
}

@media screen and max-width 660px {
  #wrapper
  {
    WIDTH:90%;
    MARGIN:5px auto;
    PADDING:0 3%;
  }

  #access,#access .menu-header,div.menu,#colophon,#branding,#main,#footer
  {
    WIDTH:100%;
    MARGIN:0 auto;
  }

  #branding
  {
    OVERFLOW:hidden;
  }

  #site-title
  {
    WIDTH:100%;
  }

  #container
  {
    FLOAT:left;
    WIDTH:100%;
    OVERFLOW:auto;
  }

  #content
  {
    WIDTH:99%;
    MARGIN:0;
  }

  #primary,#secondary
  {
    FLOAT:left;
    OVERFLOW:hidden;
    WIDTH:99%;
  }

  #secondary
  {
    CLEAR:left;
  }

  #site-generator,#site-description,#site-info,#site-title
  {
    CLEAR:left;
    FLOAT:left;
    WIDTH:95%;
    MARGIN:0;
    PADDING:0;
  }
}

CSS3 Media Queries

Older versions of Internet Explorer don’t recognize the newer elements of HTML5 markup and/or media quueries. It’s necessary to link to two JavaScript files that fixes the IE8 (and lower) deficiencies. Place these links into the head of your page’s code:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Step 4 Make Your Images Fluid

In the Fluid method the same large image is used for all screen sizes, which adversely affects load times. For example; imagine a 1000 pixel image having to load on a Mobile phone, only to end up being scaled back down to 100 pixels. That’s a waste of time and bandwidth, as well as very taxing on a mobile device’s resources. The best [overall] solution is referred to as Progressive Enhancement. In this case we’ll load smaller versions of an image for smaller screen sizes. Via JavaScript, an approximation of the closest size is determined, loaded and made fluid via CSS.

WordPress automatically adds the height and width attributes to all images that are dynamically served to the page’s code. So, in order to achieve the fluidity we need to remove them, by placing the code below between the head tags of your header.php file:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    $('img').each(function(){
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });
});
</script>
Also, add the CSS rule below to your styles.css:
img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }

Go Ahead, Do it the Easy Way Why Don’t You…

There are several WordPress plugins that help in making images responsive. For the sake of expediency, using a few plugins will save us time. If you’re not ready to delve into code, find a SIMPLE well-written plugin. To make our images responsive, WP Fluid Images at http://wordpress.org/extend/plugins/wp-fluid-images/.


Step 5 Some more code Tidbits

There are a number of other iPhone considerations that need to be addressed.  Two that will undoubtedly arise are text-size adjust and scale. Here are two additional lines of code; the first you’ll need to add to your styles.css file and the second you’ll need to add between your page’s head tag:

html { -webkit-text-size-adjust: none; }
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Converting WordPress to be Mobile-Friendly

A Mobile Friendly WordPress website has never been more important.

Responsive, Progressive Enhancement or Mobile plugin?

As mobile devices becomes less of a luxury and more of a necessity, the bottom line is becoming obvious: your static WordPress theme needs to be Responsive. Now’s the time to seriously consider converting your WordPress theme to be Mobile-Friendly.

Not too long ago, the primary way to adapt to a mobile audience was to create an extra theme. Developing a mobile version of your website has drawbacks. Constantly evolving mobile gadgets have added to continually changing screen resolutions.

Keep this in mind; that you are converting your WordPress theme NOT for any one individual device, but for different screen sizes.

There are a number of WordPress plugins available that automatically generate a mobile-friendly theme for a variety of devices. However [ in my opinion] they come at an unacceptable cost to your Web site’s graphics and user-experience design (UXD). We’ll focus on Responsive design. Responsive is a general term that identifies a liquid layout that conforms to the viewer’s screen size regardless of how large or small.

WordPress Page Structure

WordPress Page Structure Diagram

If you’re not ready to delve into code, find a SIMPLE well-written plugin. There are several plugins that will accomplish aspects of our Responsive conversion. For the sake of expediency, there are a few responsive (aka fluid) plugins available that will get your site part of the way to our goal.

It’s always better to code customizations into your [child ] theme’s templates instead of installing plugins.

Fluid, Static, Rubber, Flexible and Elastic

There are various coding techniques which adapt your Web site layout to different screen sizes. Some rely solely of Cascading Style Sheets, while others rely on a combination of CSS and JavaScript.

Fluid containers, image sizing, and CSS3 Media Queries are the basic ingredients for responsive web design.

Deconstructing Your WordPress Theme

To better understand the way things work, it’s sometimes best to take it apart. Let’s visually deconstruct your Web site by breaking down the basic components of the default (Twenty Ten) WordPress page structure. I’ll reference the basic HTML structure Twenty Ten for this tutorial.

As of March 12, 2012 the default themes bundled with WordPress is Twenty Ten and Twenty Eleven. The latter is a Responsive theme.

Scaling Images Efficiently for Screen Size

In the Fluid method the same large image used for all screen sizes which can adversely affect load times. For example; imagine a 1000 pixel image having to load on a Mobile phone, only to end up being scaled back down to 100 pixels. That’s wasting time and bandwidth, as well as very taxing on your device’s resources.

The best [overall] solution is to load smaller versions of the larger image for smaller screen sizes. Then via JavaScript (approximate the closest size needed) load it, and make it fluid via CSS. Simple Responsive Images plugin does just that: dynamically replaces image src based on the browser width, starting with an appropriately sized mobile-friendly image.  There are other similar methods including Filament Group’s Responsive Images… Stay Tuned for the next in this exhaustive series!

Creative design from the North

Get in touch with us!