How to Develop a WordPress Theme with a Responsive Framework

By on Web Design, WordPress

One of the biggest emerging web design trends of the present decade is “responsive design.” This type of web design is virtually a direct response to the proliferation of mobile devices around the world, whether in the form of smartphones or tablet computers. Both devices feature dramatically smaller screens than their desktop or laptop counterparts often measuring between three and eight inches diagonally. Since widespread adoption of these devices began a half-decade ago, developers have struggled to produce designs that fit within the confines of their small screens. They first tried to cater to smartphone and tablet users with “mobile-specific” designs that used a single-column, touch-friendly layout. These designs were specifically constructed to be noticeably different from the desktop or laptop version of a website.

That approach has largely fallen out of favor over the past two years. Developers have abandoned segmented designs for the new, responsive design approach to mobile customization and adaptability. Using responsive design, web designers and developers are able to create a single design that automatically scales down its columns and overall width based on screen size. That means it can reduce its size to a single column for smartphone users, while enabling a limited secondary column on tablets that offer a bit more screen size. This approach to design promotes a maximally usable website on every device, and each device presents the best website for its overall size and dimensions. For this reason, it’s likely that responsive design will quickly transition from a trend to a global standard in development.

Given these realities, it’s a good idea for WordPress web designers and administrators to learn how to properly develop and deploy a responsive WordPress template design to their users. There are a few considerations to make, and a few key things to avoid, when transitioning from a traditional design to one that automatically scales with the size of a visitor’s screen.

The First Thing to Avoid: “All Frameworks are Basically The Same”

One of the things that really sets a responsive design apart from more traditional designs is that it virtually requires a “framework” in order to function properly. This framework is what allows the design to scale itself to the size of the screen on whatever device a reader happens to be using. The framework employs either XHTML or HTML5 code, combined with JavaScript and jQuery, to make this a reality. While this approach to scaling designs is pretty widely used, its actual implementation varies between different frameworks that each accomplishes the same goal. This wide variety of frameworks can be confusing for a large number of developers — even those with years of experience in web design and WordPress development.

The first step toward developing a responsive WordPress theme is to properly pick the best framework for the job. This means reading the extensive descriptions and best practices associated with each framework that is currently available. Some of these frameworks work only for fluid layouts. For the amateur developer, a fluid layout is one that scales with the size of any screen, using percentage values for column widths rather than exact pixel sizes. Other frameworks are good only at managing fixed width designs that rely more on pixel widths than percentage values. And a whole host of other responsive design frameworks are considered “hybrids,” featuring enough options and a significant amount of code that they can be used in either fixed or fluid implementations.

Before choosing a framework, understand both the needs of the website and the limitations of any chosen framework library used to construct that website’s newest theme. Understand the difference between fluid and fixed-width layouts, and determine which one best suits the website in question. This will make it easier to choose between a much-narrowed field of responsive frameworks, and it will ensure that a design isn’t limited by a framework that simply does not have the right parameters to get the job done in the best way.

The Second Thing to Avoid: Going into the Process Without Knowing the Best Frameworks

While it’s important to know the difference between fluid layouts and those with fixed widths, it’s also important to know the major players in the responsive design framework marketplace. There are several competing options, partially because there are so many different design needs and partially because this type of design is so new. Generally speaking, there are four major competitors for marketshare when it comes to choosing a responsive design framework for a WordPress theme. Each has its perks and unique features. They are:

YAML: An acronym for “Yet Another Multicolumn Layout,” this framework is based on fluid column widths and heavily relies on jQuery. It features several of its own jQuery-based plugins and unique features, and it can supplement installed WordPress plugins with a number of rich content features. This is probably the most popular responsive framework among WordPress blogs currently.

Bootstrap: Developed by Twitter, this responsive framework can support both fixed-width designs and those that use fluid values. It features a 12-column layout for ultimate scalability, and it comes with a number of option JavaScript plugins that can manage image display and other rich content features on a wide variety of devices.

Foundation: Entirely based on fluid design, the Foundation framework is another 12-column responsive framework that meshes well with the requirements of WordPress. In lieu of extensive JavaScript or jQuery plugins, the Foundation framework comes with pre-designed forms, buttons, templates, and alerts, which make designing relatively easy.

Less Framework: The name might make it obvious, but just in case, it’s worth noting that this is an exceedingly light framework that leaves behind almost all jQuery or JavaScript. In place of this, it uses one of four standard designs, and then employs CSS3 tricks to determine screen resolution and present an alternate version of the website based on screen resolution. It’s not an ideal solution for many developers, but it will probably work for novice administrators of WordPress websites. It’s easier to learn and implement, and quicker to load, making it a great choice for some developers.

These four frameworks are the most popular ones currently available to developers, and they’re among the best-supported responsive design frameworks within the WordPress community itself. That community includes 60 million website operators and more than 15,000 independent developers, and it’s a good idea to choose a framework that’s well-known and robustly supported within this large community. Most users will likely be drawn to the ever-popular YAML, but it’s important to evaluate each option before making a decision.

The Third Thing to Avoid: Errors and Rendering Problems Found in Internet Explorer Releases

Seasoned website developers have learned to loathe the words “Internet Explorer,” and it’s no secret why. For the better part of the past two decades, Internet Explorer has presented websites in a way that simply does not adhere to web standards. Despite the increasing prominence of the World Wide Web Consortium’s standards definitions over the past two decades, Internet Explorer has consistently relied on its own in-house system to render and display websites. This has often meant that Internet Explorer’s rendering engine has been behind the times. It only recently started supporting HTML5 and CSS3, and its implementations of those two programming languages is still quirky and highly unreliable.

That’s pretty important, especially because virtually every responsive framework is dependent upon both technologies when displaying a website’s content and scaling it down to various screen sizes. Without proper preparation, virtually every WordPress website administrator who chooses a responsive design will find that their columns display in quirky and unacceptable ways; serious usability headaches can arise as a result of these quirks, and they can send users to other websites that look better across all browsers. Luckily, this worst-case scenario within Internet Explorer can be avoided by adding some conditional tags to the < HEAD > tag of a responsive design template within WordPress.

In header.php, the lines below should be added. These lines are conditional, and they apply only to certain versions of Internet Explorer:

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

<!--[if lt IE 9]>
<script src=""></script>

The first line should point to a stylesheet specific to Internet Explorer, where any quirks within the design elements themselves can be ironed out. The second line of code actually points to a well-known JavaScript library hosted by Google. This JavaScript library is actually a way of tricking earlier versions of Internet Explorer into properly rendering and displaying HTML5 code. It changes the way the rendering engine does its job, thereby eliminating incompatibility issues faced by users of Internet Explorer versions 6.0, 7.0, and 8.0.

The Fourth Thing to Avoid: Causing Design Problems by Forgetting to Include Framework Scripts

Frameworks for responsive design are pretty complex pieces of programming, and they require a large series of scripts and stylesheets in order to work properly. Those WordPress developers who are thinking of crafting their own responsive design need to remember to enqueue the proper JavaScript and stylesheet files to get the job done right. This is done by placing new functions into the responsive theme’s “functions.php” file, which should be located within the theme’s root directory. If that file doesn’t exist in the theme’s directory, it should be created by the developer so that it can perform the queuing of scripts properly.

Once the functions.php file has been created or opened, the following function should be added near the top of the document:

function responsive_javascript() {
wp_register_script('SCRIPT-FILE-NAME', get_template_directory_uri() . '/js/SCRIPT-FILE-NAME.js', array( 'jquery' ), true );
wp_enqueue_script( 'SCRIPT-FILE-NAME' ); }

Obviously, the lines above should be customized to include the appropriate script file name and label. This can vary widely between frameworks and, in many cases, there are multiple JavaScript files to be registered and queued with a theme. In that case, all of the “register_script” functions would come first, and the “enqueue_script” functions would come next, in the same order. This syntax is an important way to ensure that the process goes as planned, and the scripts are called in the appropriate order.

Stylesheets are called into the theme in a nearly identical way, with a slight modification to reflect the fact that these files have a slightly different name and function than their jQuery counterparts. These files are called with the following function:

function responsive_stylesheets() {
wp_register_style( 'STYLESHEET-FILE-NAME', get_template_directory_uri() . '/css/STYLESHEET-FILE-NAME.css', array(), 'all' );
wp_enqueue_style( 'STYLESHEET-FILE-NAME' ); }

The same order and syntax is applied to the stylesheet function as is applied in the jQuery function. If multiple stylesheets are included with the theme, it’s important to list all of them in order when they’re registered, and then list them in the same order when they’re enqueued with the theme. When both the jQuery and stylesheet files are fully enqueued, the functions.php file should be saved and uploaded to the server.

When the upload is complete, navigate to the website where the responsive theme is active. View the page’s source and look through the tag until the responsive script files and stylesheets appear. This is an indication that the “functions.php” code is working perfectly. If these lines of code do not appear, then the file must be checked for accuracy. Ensure that all items are listed, and that the same order is followed in both parts of each function.

Responsive Design: A Challenging and Rewarding Way to Bring New Readers into the Fold

There’s no denying that responsive designs are some of the most complex website looks to execute. Their vast frameworks can be tough to learn and hard to manage, and browser incompatibilities can ruin even the best-executed responsive designs. That being said, however, avoiding the common pitfalls listed in this tutorial will maximize the chances that a design is well-received, well-executed, and does its job with a good amount of aesthetic flair.

Similarly, a well-executed responsive design will bring in all-new users and enhanced traffic as it encourages mobile device users to read a website that would otherwise be either inaccessible or too demanding for more limited mobile device processors and capabilities. As these devices become even more common, a responsive design’s tough development is increasingly rewarding for website operators.