Better Responsive Design with `wp_is_mobile`, Why Responsive Design is Not Enough

What is wp_is_mobile ?

wp_is_mobile is a WordPress function to detect user/visitor browser using user agent string. Some might think that this method is like prehistoric era. An era before we have responsive design. Web developer use user agent string to serve different website content to mobile user or redirect to mobile site, something like m.website.com.

So why WordPress, a CMS of the future have this function? Why WordPress still need this and use this function all across admin pages?

What Responsive Design Cannot Do

Responsive design is awesome, we can style based on browser width so the design can be useful and better for user using any device.

But there’s one problem…

Mobile device such as smart phone and tablet is getting bigger in resolution.

The latest iPhone, iPhone 5 has 640 x 1136 pixels resolution in 4 inch screen. That’s higher resolution than my primary computer (it’s a 10 inch netbook).

The latest tablet from Samsung, Samsung Galaxy Note 3, has 1080 x 1920 pixels screen.

That means, with only responsive design, the site will show the exact same design. IMO, no improvement.

Mobile First Argument

A proper responsive design is designed with mobile first attitude. That means it should be design for mobile device. And it should be accessible for mobile, and because Desktop / PC is more advance, it should be accessible for non-mobile device too. A click of a mouse can access any element that require touch in mobile device.

The argument is valid. However in using touch device and mobile device vs. using mouse and keyboard there’s a difference in user usability, user experience, and user behaviour.

Is mouse hover still usable in design? Can mouse hover improve the design? the answer is yes. In some cases, it’s crucial. It’s not so useful in mobile device but very useful in non-mobile device. For example in menu navigation. When using desktop ( read:mouse ) it’s a lot easier to hover to the menu item to view the sub-menu rather than clicking the menu to show sub-menu item. It’s a lot faster and easier. And that’s the expected behavior of menu navigation when we browse using desktop/mouse.

But it’s so damn hard to use in mobile device. When trying to view sub-menu navigation by touch, the link for parent menu is triggered, and the page reload, sub-menu is hidden again.

It’s better for mobile site design to have a toggle icon/button for navigation menu. So user can click the button to reveal sub-menu item.

In this site, if browsing using mobile device, sub-menu indicator act as a toggle to show/hide sub-menu item.

But how to do this in responsive design while the resolution of the screen for mobile user and desktop user is the same? I don’t think it’s possible yet.

There is other solution using javascript. But I prefer PHP. Because some user prefer to disable javascript in their browser. Less people do this, because more site relies on javascript to work, but i still do this sometimes in my mobile browser.

Is wp_is_mobile reliable enough ?

Well, it is as good as we can get. `wp_is_mobile` search the string commonly used by mobile browser such as `Mobile`, `Android`, `Silk\`, `Kindle`, `BlackBerry`, `Opera Mini`, `Opera Mobi`. And that’s covers all major mobile browser available. iPhone, iPad, and iPod use `Mobile` as part of the user agent.

Is there more reliable way to check mobile device? I want to support All mobile browser.

Come on… be real, when designing for desktop site, how much browser did you test with your design? Mostly only major browser. Chrome, Firefox, Internet Explorer, Opera, Safari.

My Android Phone User Agent

In Google Play store there’s tons of browser, like a thousand of them. So i check some of the most popular using my phone. Here’s the list:

Chrome:

Mozilla/5.0 (Linux; Android 4.1.2; New Andromax-i Build/JZO54K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.90 Mobile Safari/537.36

Opera mini:

Opera/9.80 (Android; Opera Mini/7.5.33361/30.3389; U; en) Presto/2.8.119 Version/11.10

Android browser:

Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; New Andromax-i Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Opera mobile classic:

Opera/9.80 (Android 4.1.2; Linux; Opera Mobi/ADR-1306261156) Presto/2.11.355 Version/12.10

Firefox:

Mozilla/5.0 (Android; Mobile; rv:22.0) Gecko/22.0 Firefox/22.0

Opera:

Mozilla/5.0 (Linux; Android 4.1.2; New Andromax-i Build/JZO54K) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.58 Mobile Safari/537.31 OPR/14.0.1074.58201

On my test, all have `Android` string and most of the browser have `Mobile` too. So all should be detected as mobile by `wp_is_mobile` function.

User can change their browser user agent.

Some of the most popular mobile browser such as Chrome for Android has the feature to request for desktop site, and some other browser allow you to edit user agent string. So wp_is_mobile will return false, it’s expected because user action, but by default it should works as expected.

There’s also add-on to change user agent for desktop browser. I use User Agent Switcher add-on for Firefox. It’s useful to develop and test the site on my computer using XAMPP.

How to use wp_is_mobile ?

It’s very simple. here’s an example:

if ( wp_is_mobile() ){
    /* do stuff for mobile user */
}
else{
    /* do stuff for non mobile user */
}

Here is useful snippet i use in my theme by adding body class `wp-is-mobile` and `wp-is-not-mobile` so I can style it differently:

/* Filter body class */
add_filter('body_class','shellcreeper_theme_body_class');

/**
 * Add Mobile Body Class "wp-is-mobile" for mobile
 * and "wp-is-not-mobile" for non-mobile device
 * 
 * @since 0.1.1
 * @link http://codex.wordpress.org/Function_Reference/wp_is_mobile
 */
function shellcreeper_theme_body_class( $classes ){

    /* using mobile browser */
    if ( wp_is_mobile() ){
        $classes[] = 'wp-is-mobile';
    }
    else{
        $classes[] = 'wp-is-not-mobile';
    }
    return $classes;
}

Not only using css, we can also use the class in javascript/jQuery:

jQuery( document ).ready( function($) {

    if ( $( "body" ).hasClass("wp-is-mobile"){
        /* Do javascript for mobile */
    }
    else{
        /* Do javascript for non-mobile */
    }

});

Resources:

1. wp_is_mobile WordPress Codex.
2. whatsmyuseragent.com: to check browser user agent.
3. User Agent Switcher for Firefox.

Better Responsive Design with `wp_is_mobile`, Why Responsive Design is Not Enough http://t.co/5ZjPQdNMut

— david chandra (@turtlepod) October 30, 2013