How to Develop WordPress Themes Using Responsive Frameworks

WordPress websites are increasingly viewed on mobile devices, and that has prompted a large number of website administrators to pursue a strategy for making content easily usable and readable on smaller screens. In recent years, this has resulted in a large number of websites creating "mobile-only" versions of their content that are specifically targeted to mobile browser versions, screens smaller than five inches, and those using a mobile data connection.

That policy isn't necessarily bad, but it's certainly not the most efficient way to cater for mobile users. In place of these websites, grid-based responsive design has been able to create a highly efficient, unified design that works across all devices without special rules or mobile versions.

How to Develop WordPress Themes Using Responsive Frameworks

How to Develop WordPress Themes Using Responsive Frameworks

What is a Responsive Design?

Every responsive design currently online requires a significant amount of code on the backend that helps it display properly across a large number of devices and screen sizes. These designs are powered by a series of tools known as a responsive framework.

For a fast understanding, take a look at the nice presentation by John Polacek about "What The Heck Is Responsive Web Design?"

What The Heck Is Responsive Web Design?

These frameworks come in a number of varieties, and typically employ things like jQuery, CSS3, and HTML5, to judge a browser's capabilities and adjust accordingly. These frameworks are responsible for expanding or compacting a website's content and design based on the screen size that a visitor is using. For desktop and laptop computer, the site will display with its traditional sidebars and added features.

On tablets, that content will be narrowed down a bit to provide a robust, but smaller, experience. And on mobile devices, the website's design and content will again be narrowed down. For smartphones and the like, responsive designs typically shrink down to a single, content-focused column like traditional mobile website versions produced by non-responsive means.

Which Frameworks are Available for Use with WordPress and Other Systems?

There are actually scores of responsive frameworks available for use online, but only a few of those frameworks has achieved a large measure of popularity and implementation. In terms of actually designing for WordPress, the content management system's large pool of developers typically design for one of four major frameworks.

YAML
This framework, which stands for "Yet Another Multi-column Layout," is one of the most popular options for WordPress and responsive design developers everywhere.

YAML

It includes features that enable jQuery-based tab navigation and other user interface enhancements, making it a natural selection for time-crunched developers. It can be tough to learn, however, and newer designers might want to look for another option.

Bootstrap
Twitter might be most often associated with social networking, but the developers behind this popular website have actually developed and released their own responsive framework.

Bootstrap

Like many of its competitors, Bootstrap implements a 12-column design for maximum responsiveness, and bundled in a few unique user interface features.

Less Framework
As its name implies, this framework uses a minimal approach to responsive design that relies more on a standard layout, and some innovative stylesheets, to get the job done.

Less Framework

It's a perfect option for novice web designers who need a simple, no-frills solution to their responsive design needs. Its basic features are good, but they won't work for every developer's advanced needs.

Foundation
Easily the most popular framework among WordPress' developers, Foundation uses jQuery, CSS3, and HTML5 to produce rich, responsive designs.

Foundation

It even comes with its own built-in styles for things like forms and buttons, making it a natural choice for developers who enjoy rich design and easy shortcuts.

Golden Grid System
While most frameworks use a 12-column system, the Golden Grid system employs 18 columns of equal width for maximum flexibility and adaptability to a umber of different screen sizes, up to more than 2,500 pixels.

Golden Grid System

It's a great option, but might be a bit too extensive for many users who need a narrow design anyway.

Fluid Baseline Grid
This framework is designed specifically to enable rich typography, and its stylesheet contains rich typographical elements that are virtually unheard of in competing options.

Fluid Baseline Grid

That being said, it's a "mobile first" framework, and isn't great for all desktop design styles.

Columnal
Based on 12 columns, this fluid grid system expands and contracts with the size of the screen or the browser window.

Columnal

It's exceedingly easy to use, though it doesn't contain special CSS elements and design styles by default, and that might throw off some amateur WordPress site administrators.

Implementing the Responsive Framework with WordPress' Functions File

For the purposes of this tutorial, the Foundation responsive framework will be used to illustrate how responsive design can be enabled through simple file edits, custom themes, and pre-designed templates for the WordPress content management system.

This is because Foundations enjoys wide support and development, and has the most robust set of features among the four major frameworks available online.

To get the process started, visit the Foundation website and download the framework. Decompress the file and upload it to the activated theme's root directory. This will create a js directory, as well as a css directory, where the theme's essential files will be stored.

In order to bring the frameworks' JavaScript and stylesheet files into the WordPress header, two new functions will be added to the theme-specific "functions.php" file. That file can typically be found at the following location:

/home/public_html/wp-content/themes/YOUR-THEME/functions.php

Once that file has been located and opened via a typical FTP client, the following block of code should be placed at the top of the document. This code will bring all of the necessary JavaScript files into the template so that the framework can function properly:

function foundation_javascript_inclusion() { 
    //first we must register the responsive framework's scripts
    wp_register_script('foundation-modernizr', get_template_directory_uri() . '/js/modernizr.foundation.js', array( 'jquery' ), true ); 
    wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true ); 
    wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true ); 

    //next, we enqueue the script so it gets placed into the theme's header
    wp_enqueue_script( 'foundation-modernizr' ); 
    wp_enqueue_script( 'foundation-main' ); 
    wp_enqueue_script( 'foundation-app' ); 
} 
    add_action( 'wp_enqueue_scripts', 'foundation_javascript_inclusion', 5 ); 

With these lines of code placed into the theme's functions.php file, three distinct JavaScript files will be called into the theme's header. Each of these scripts takes care of a different element of the design, and all three are necessary for the responsive design to function properly. Next, those design elements will be styled by including Framework's stylesheets in a similar manner:

function foundation_stylesheet_inclusion() { 
    //register styles for our theme 
    wp_register_style( 'foundation-stylesheet', get_template_directory_uri() . '/css/foundation.css', array(), 'all' ); 
    wp_register_style( 'foundation-app-stylesheet', get_template_directory_uri() . '/css/app.css', array(), 'all'); 
    wp_enqueue_style( 'foundation-stylesheet' ); 
    wp_enqueue_style( 'foundation-app-stylesheet' ); 
} 
    add_action( 'wp_enqueue_scripts', 'foundation_stylesheet_inclusion' ); 

With this addition to the functions.php file, WordPress will now add two more stylesheets to the header whenever one of the theme's templates is loaded. This completes the inclusion of the Foundations responsive framework into the existing theme's header.

Using Conditional Statements to Cater to Internet Explorer

Internet Explorer is well-known among web design professionals for not adhering to W3C design standards like most other browsers. The advanced functionality included as a part of Foundation, and other responsive frameworks, must be styled specifically for Microsoft's browser users.

That's done by using a conditional variable within the theme's "header.php" file that looks like the following example:

< !--[if lt IE 9] > 
< link rel="stylesheet" href="/css/ie.css" > 
< ![endif]-- > 

< !--HTML5 Tag Fix -- > 
< !--[if lt IE 9] > 
< script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" >< /script > 
< ![endif]-- > 

The conditional tag is written as "if lt IE 9." That translates to "if less than IE 9," meaning that the tags above will show to users who are currently using Internet Explorer version 8.0 or lower. Internet Explorer 9 is well-known as a more standards-compliant browser, and these conditional statements are not required for it to display a Foundation-based responsive website properly.

Working with the Responsive Framework: Pre-Designed Themes Available for Testing

One of the best ways to test the features and benefits of a responsive theme is to download an existing WordPress theme that has been designed to work with one of the most popular frameworks available.

This saves on development time, and the downloaded theme will serve as its own instruction manual about how to integrate responsive design elements and typical WordPress variables and content.

Among all of the existing responsive designs available to WordPress users, perhaps none is better than the free "Responsive Twenty Ten" theme. It was the first theme to be made responsive by WordPress' developers, and laid the ground for their Twenty Eleven theme, which is included by default with every WordPress installation; it's also responsive right out of the box.

A number of great premium themes exist as well, including the responsive Good Minimal theme.

Good Minimal Responsive Theme

This minimalistic theme lays the ground work for WordPress website owners to enact their own design preferences and principals, and it's a great way to learn how responsive design works. 

More Resources

Conclusion

The benefits of choosing a responsive design over a more traditional option are quite clear. The world's addiction to smartphones only continues to grow, and most mobile phone carriers are expecting them to become their dominant product over the next few years. That means that an increasing number of users will be expecting a robust, mobile-friendly, and content-loaded experience in the palm of their hands each day.

Responsive designs meet this demand, and they make it possible for a website to employ just one design for users of any device. This cuts down on the time needed to develop multiple versions of the website's template, and it actually enhances the website's usability.

A single, unified design across all devices, creates a predictable and enjoyable experience everywhere a user happens to visit the website. That user-friendliness will prompt repeat visits, and that benefits the site's revenues and search engine rankings as well.

Responsive design is easily the way of the future, as it combines today's leading web design technologies with a unified design and mobile-friendly content that is specifically designed to be future-proof.

With a number of great free and premium responsive templates, as well as easy design development, website developers have no excuse not to switch to this exciting new method of creating websites.

Did you used any frameworks for creating responsive WordPress themes? What is your favorite responsive framework? Please share with us in the comment below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.