According to research, almost 40% of all time spent online is now done via a mobile device. That’s pretty scary to think about, and it may make you think twice before you release a new website without testing how it responds on mobile devices. The internet is no longer a playground for desktop users only. For some people, especially the younger generations, a smartphone is the only way to access the internet. It simply boils down the simple fact : If your site does not perform on mobile devices, you are losing traffic! Yes, media queries give you a responsive layout, but sometimes that is not enough if you intend to provide a great experience to your mobile audience. One way to customize this experience is to do server-side browser detection. And here are some WordPress plugins to help:
WordPress Plugins
PHP Browser Detection – “It can be used to send conditional CSS files for Internet Explorer, display different content or custom messages anywhere on the page, or to swap out Flash for an image for iPhones.” What I like about this plugin is that it adds a bunch of template tags that you can use within your theme:
if (is_mobile()) { /* do mobile stuff */ };
if (is_ie(6)) { /* puke */ };
Mobile Client Detection Plugin – This one adds 2 query_vars to each request “platform” and “browser” which you can then use to show a different page template or a completely different theme if you want. It also adds some conditional statements like is_desktop(), is_tablet() etc.
Device Body Class - My own little plugin which simply adds device specific class names onto the body tag which you can then use in your theme’s CSS accordingly.
WP-Mobilizer - Allows you to switch to another theme for different mobile devices. You can select a different mobile theme for each mobile browser.
Browser Rejector - Notify your site visitors that they are using an outdated browser and show them a modal popup to download newer browser versions.
WordPress Core
Did you know that WordPress has simple browser detection built into core? The codex page on Global Variables has some information about some browser detection variables you can use in your themes or plugins. An silly example:
global $is_IE; if ($is_IE) show_message_of_doom();
Browser Detection and the body_class() Function by Nathan Rice is a great tutorial for using these variables to append certain CSS classes to the body tag.
WordPress also does some browser detection when you view the admin dashboard. The function wp check browser version is used.
/** * Response should be an array with: * 'name' - string - A user friendly browser name * 'version' - string - The most recent version of the browser * 'current_version' - string - The version of the browser the user is using * 'upgrade' - boolean - Whether the browser needs an upgrade * 'insecure' - boolean - Whether the browser is deemed insecure * 'upgrade_url' - string - The url to visit to upgrade * 'img_src' - string - An image representing the browser * 'img_src_ssl' - string - An image (over SSL) representing the browser */
You can actually post to this API and get back a decent response from any site, not just your WordPress site. I tested this using PostMan and it worked 100%.
Browser Detection VS Feature Detection
There is a trend these days to detect what a browser can do, rather than detect what the actual browser is. It makes sense, and was spoken about a while ago by John Resig in his post Future Proofing Javascript Libraries. There are now javascript libraries that can do this quite well, including the very popular Modernizr (which is bundled with most themes these days).
You can also download and install the Modernizr WordPress plugin, or alterntively, I found the Detector plugin, which uses PHP and Modernizr to record features based on the visitor’s user agent string.