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
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?"
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.
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.
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.
Like many of its competitors, Bootstrap implements a 12-column design for maximum responsiveness, and bundled in a few unique user interface features.
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.
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.
Easily the most popular framework among WordPress' developers, Foundation uses jQuery, CSS3, and HTML5 to produce rich, responsive designs.
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.
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.
That being said, it's a "mobile first" framework, and isn't great for all desktop design styles.
Based on 12 columns, this fluid grid system expands and contracts with the size of the screen or the browser window.
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.
With these lines of code placed into the theme's
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:
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.
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.
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.
SHARE THIS POST
ABOUT THE AUTHOR
Onextrapixel is a leading online magazine and resource site for designers and web developers. The Singapore based portal aims to collect, explore, as well as share useful tips, news, tutorials, tools and resources; on design, development and other inspiration. We hope that everyone will find something here that is useful and interesting.