How to Adapt Your WordPress Theme Layout For Different Devices

When you are designing for hundreds of different devices that your site could be displayed on, you can accept the responsive design “one size fits all” approach that leads to unnecessary compromise, or you can use “one design fits most and I’ll fix the rest” approach of adaptive strategies.

In this post, we’ll look at strategies for making specific layout and functionality changes based on device type. I’ll also give you some specific examples, but what I hope you take away from this is the ability to deal with the unavoidable – and predictable – situation where some part of your site that you spent time making awesome fails on a certain device. Instead of losing all of that awesome for every other device, you should use the strategies in this article to create a solution for that type of device without compromising your original design on all over devices.

This is part two of a two-part series on adaptive design strategies for responsive WordPress themes. Check out yesterday’s post on mobile image optimization.

Chameleon

Device and Browser Detection

Device and browser detection refers to any type of functionality that detects what type of device or browser is currently being used to show the current site.

WordPress has some basic browser detection built-in, which determines which browser is being used using the php global $_SERVER[‘HTTP_USER_AGENT’]. This information is used to set several boolean variables, like $is_chrome or $is_firefox, which can be accessed from the WordPress global variable $pagenow.

Browsers
As well as adapting your site for different devices, there’s also different browsers to consider.

These variables, along with some other neat detective work, which you can see in wp-includes/vars.php, power the ever so useful function wp_is_mobile(). This handy function detects mobile devices and returns true if one is being used to view the site.

Of course, mobile devices is too broad of a category as it includes tablets and phones. And what about iOS versus Android? If you were trying to adjust your layout to work on a four-inch screen, wp_is_mobile() would help, but would also change the layout on a ten-inch tablet, where the change isn’t needed.

For that reason it’s best to use a plugin that gives you more options to work with, but use wp_is_mobile() as a fallback, just in case the plugin is not installed.

There are two great plugins that give you more specific functions based on device detection: WP Mobile Detect and Mobble.

These plugins give you functions like is_phone() and is_tablet(), as well as ones like is_android(), which allows you to really take control of what changes you are making to your site.

Controlling jQuery Functionality With Device Detection

Responsive frameworks have various ways of dealing with multi-level menus. I generally use Foundation as my responsive framework, partially because of much I like how its topbar component works. However, I’m not a fan of how it deals with multiple levels menus on small screens. For that reason, I like to limit my menu depth to one level on mobile devices with a function like this:

1
2
3
4
5
6
7
8
9
10
11
if ( wp_is_mobile() ) {
$depth = 1;
}
else {
$depth = -1;
}
$args = array(
'theme_location' => 'primary',
'depth' => $depth,
);
wp_nav_menu( $args );

As you can see, this will affect both tablets and smartphones. If you want to change the depth only on smartphones you could use Mobble’s is_phone() function to make the change only on smartphones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (function_exists('is_phone')) {
if ( is_phone() ) {
$depth = 1;
}
else {
$depth = -1;
}
}
else {
if ( wp_is_mobile() ) {
$depth = 1;
}
else {
$depth = -1;
}
}
$args = array(
'theme_location' => 'primary',
'depth' => $depth,
);
wp_nav_menu( $args );

Notice how I am first checking to see if the function is_phone() exists, which will be true if Mobble is activated. If it is not, we fall back to the less specific wp_is_mobile(), which doesn’t give us the exact results we want, but it will prevent a fatal error.

Disabling A jQuery Function

Pony Express ad taking over an iPhone screen
“Help!! I’m caught in a fullscreen takeover ad and there is no way out!”

Popovers and full-page screen take overs, courtesy of a jQuery plugin, work really well for getting email list opt-ins or forcing users to see certain ads.

Unfortunately, they don’t always work so well on certain mobile operating systems, while they have no problems on others. Some work better on one OS than another.

If you find the perfect plugin but find it doesn’t work correctly on Android, should you settle for second best on all devices? Nope.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function slug_plugin_one() {
wp_enqueue_script( 'best-solution', get_template_directory_uri().'/path/to/plugin.js', array( 'jquery' ) );
}
function slug_plugin_two() {
wp_enqueue_script( 'alternative-solution', get_template_directory_uri().'/path/to/plugin2.js', array( 'jquery' ) );
}
if (function_exists('is_andorid') {
if ( is_android() ) {
$callback = 'alternative-solution';
}
else {
$callback = 'best-solution';
}
}
else {
if (! wp_is_mobile() ) {
$callback = 'alternative-solution';
}
else {
$callback = 'best-solution';
}
}
add_action( 'wp_enqueue_scripts', $callback );

Hide Sidebar On Phones

The standard behavior for most responsive WordPress themes is to move the sidebar under the main content on small screens, which is something I’ve always found awkward.

It can also cause some people to navigate off  your page without ever seeing the footer, which can be an issue if you have important information in the footer.

Of course, you can easily skip the sidebar by wrapping get_sidebar() in a conditional device detection tag. You could go through your theme and wrap all of your theme’s uses of get_sidebar() in a device detection conditional, but once you start incorporating all the different conditions, it’s going to get out of hand fast. Instead, why not replace all of the uses of get_sidebar() in your theme with a custom function and set it all up in your functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
function slug_my_get_sidebar( $name = null ) {
if (function_exists( 'is_phone' ) ) {
if (! is_phone() ) {
get_sidebar( $name );
}
}
else {
if (! wp_is_mobile() ) {
get_sidebar( $name );
}
}
}

This pattern should be looking very familiar to you by now. We put our best case behavior inside the section, which happens if is_phone() exists.

Why Not Use Visibility Classes?

Most responsive frameworks have classes that can hide a container based on device type. For example Foundations .show-for-small-only and .show-for-medium-up can produce the same results visually.

Adding visibility classes to your sidebar works by setting the CSS visibility property to hidden, but making a container invisible doesn’t prevent your browser from loading it.

Adaptive design isn’t just about making things look better – it’s also about improving mobile load times. Loading your sidebar, and doing all of the queries necessary to build your widgets, takes time and resources, which translates to additional load time.

Still, You Can’t Win Them All

You can't win them all, so learn to pick your battles.
You can’t win them all, so learn to pick your battles.

As with most things, it’s important to keep things in perspective. You can’t let this go too far or you’ll be making changes for a hundred different devices before too long.

So pick your battles. There is a reasonable expectation that your site work perfectly and have a great UX in a modern browser on any current device. If your end user is running IE6, or an ancient BlackBerry, if they have the same expectation it is just not reasonable.

As I said at the start of this article, my goal was to prepare you for that situation where the design you worked so hard to make perfect turns out not to work so well on a particular mobile operating system, or in a particular browser.

With these adaptive design strategies in your toolkit you should be able to address these issues, an unescapable fact of modern web design without sacrificing your perfect design on all other browsers, operating systems or device types.

Image credits:  harinaivotezapingdom. iPhone/iPaq by William Hook, CC Attribution Share Alike.

Comments (1)

  1. The down side to using an approach like this is if you are using a caching plugin or something of the like, it won’t pick up the changes.

    I had an experience where we were doing user agent sniffing through PHP to deliver the correct version of a video; however because of caching it always delivered the same version of the video no matter which browser (or in this case OS) you were using.

    What we ended up having to do was to do the sniffing via JS and then add or remove classes based off of the results.

Participate