mobble

Introducing mobble — A WordPress plugin that provides conditional functions for detecting a variety of mobile devices and tablets.

Me leaning against a wall with a smartphone in my hand

Mobile requirements are popping up in most of our projects this year and over the last few months we have been preaching the benefits of responsive web design to our clients. The idea is that one site (with the help of CSS media queries) can serve a whole range of devices from handheld to desktop. It’s great. It saves time, future proofs your website and it’s a great approach to modern web design.

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
Ethan Marcotte

All is Good?

We have hit a problem with relying on CSS media queries alone. There are times when not all of the content, JavaScript or CSS on a page is relevant for a particular device and simply hiding the unwanted content with CSS is not ideal. Lets say you’re in the countryside with a limited data connection and your trying to find an address for you’re next meeting. We should not force you to download unnecessary content and load heavy JavaScript libraries that waste your time and your data allowance. mobble helps address this.

mobble

Those of you familiar with WordPress will be familiar with conditional functions. mobble is a collection of similar functions that allow you to test for a specific type of mobile or handheld device. We have wrapped these functions into a neat WordPress plugin but you will also be able to use these in other projects too.

The Functions

The most useful four functions:

is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, etc)
is_tablet(); // any tablet device (currently iPad, Galaxy Tab)
is_ios(); // any Apple device (iPhone, iPad, iPod)

The full list (hopefully self explanatory):

is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_palm();
is_symbian();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();

Some Examples

In this first example we are loading a specific stylesheet for Apple devices:

<?php
if (is_ios()) {
    wp_enqueue_style('ios', get_template_directory_uri() . '/ios.css');
}
?>

In this second example we hide the sidebar from all mobile/phone devices:

<?php
if (!is_mobile()) {
    get_sidebar();
}
?>

An Added Bonus

For those of you that run this as a WordPress plugin we have added a nice little feature that adds browser information to the body class of your theme. This allows you to use CSS to tweak your design for certain devices. Look for the mobble settings within the WordPress admin interface, from here you can turn this feature on and off.

We will do our best to keep the plugin up to date with the latest devices that hit the market and if you have any ideas to make it better please get in touch. A demo is available at: wp.scott.ee. The plugin is open source and released under the GNU GPLv2.

Download mobble from WordPress.org