Responsive Web Design

Tips for Making WordPress Themes Mobile-friendly

Responsive Web Design
Image credits belong to John Polacek

Making a WordPress theme mobile friendly is an easy task to achieve with “media queries” and what is called “responsive design.” Actually, you can achieve this with any CMS or website fairly easy, but first some beforehand knowledge needs to be addressed.

You must be familiar with CSS (Cascading Style Sheets) and HTML (Hyper Text Markup Language) code. We are going to use the most popular method called media queries. Media queries are a type of CSS document that dictates how the DOM (Document Object Model) is organized given the parameters of certain screen sizes.

Depending upon the amount of code in your media stylesheet, you could add it to the current CSS stylesheet file, but if it is a significant amount of code, it might be simpler to create a separate stylesheet. If so, add a new CSS file titled media.css or an appropriate title to keep file organization and navigation relevant. The file is to be stored in the WordPress Themes file directory for that Theme, alone or in a subdirectory titled css.

Attach the CSS media queries style sheet to our templates PHP file, usually posted in header.php of the WordPress Theme. Open the header.php files and add this HTML tag for linking to the stylesheet near the other linked stylesheets.

<link rel="stylesheet" 
type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" 
media="screen" />

Once this is completed, you should be set to begin coding for mobile. Since there are many mobile sizes, you will have to choose which ones you want to develop for. For this instruction, we will go with 480 pixels. This is a pretty standard size for a lot of Android phones in their vertical position.

In your new media query CSS file, add this:

@media only screen and (max-width : 480px) {

}

This line of code tells us that, when the screen gets down to 480px, it will execute some code in the middle. For instance, if you have in your normal CSS file a container div that was 960px wide, it could be changed to an appropriate size like 320px once the screen gets 480px or smaller. There is a CSS import method, but this instruction will be using a different technique.

Keep in mind you have to adjust each element as you need per the size of the desired browser width. Your navigation menu list may go from displaying inline to block.

@media only screen and (max-width : 480px) {
     .container {
      width: 320px;
     }
}

Replace container with the HTML container identifier in your WordPress Theme.

Note that in between my media query size identifier, the CSS is documented normally. There should be two closing brackets at the end of each size iteration. If you forget to do this or anywhere in your code or if something is missing, your media queries may not run right.

Some practices are to make a new file for each size. You can do this, and it will help located bugs in your code if it fails to work. Personally, it is not my preference to have the server call for multiple files. This is because of load speeds, but, if your site is small and not very image, multimedia, or script heavy, then it should not affect you.

Alternatively, if you do not want your web page to respond to web browser sizes, do not have this technical ability, or just do not feel like putting in the work, you could just add this in your page.php file.

<meta name="viewport" content="width=device-width>

This will tell the browser to condense your web page to fit its needs. Keep in mind this technique is useful but, depending on how you are holding your mobile device or its general size, it may end up really small. Also the HTML elements and assigned styling may or may not handle this technique. It is quite possible elements can do the following:

  • Bleed off your document
  • Cause awkward scrolling on condensed screens
  • Content can break div borders

With this said, you should always test your web pages. There are a variety of tools to help you do this at different screen sizes. Personally one of my favorites is The Responsinator. It is free and works pretty well considering it is browser based meaning it uses the rules of your current open browser.

Related Articles

The following articles and tutorials will help you take this process further.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s