When responsive design is not enough, wp_is_mobile() to the rescue.

While using responsive design for mobile presentation (and a mobile first approach) is the default philosophy for any web developer who cares about the web, it doesn’t solve some of the other problems that come with loading web pages on smaller screen with limited (or slow) bandwidth.

There is a long standing ‘law’ that your desktop website should serve up the same content for mobile devices, because why discriminate? That’s admirable, but the interpretation of “the same content” can subjective depending on who you ask.

For some developers, “the same content” just doesn’t mean the same content and features, but also the same order in which they appear on the desktop counterpart. I think this latter ideology is outdated, especially these days when you’ve only got milliseconds to capture the attention of a user visiting your website on a small screen. You need to offer the best experience possible on devices that are arguably being used to view your site more often than on a desktop.

With this in mind, it’s better to present your mobile page with the most crucial information and features that will make it easier for small screen users to accomplish the tasks they need, be it contacting you, using a custom feature or whatever. Likewise, if possible you should also create lo-fi versions of any specific features that might be bandwidth heavy.

Case in Point

I’ve recently been working on a website with a feature that allows users to find store locations. It’s quite a rich experience on the desktop, with custom images for markers and store locations, info popups, advanced filtering and more. This rich experience comes at the cost of also being a little ‘script heavy’. While it’s not a problem on a desktop that has access to generous bandwidth and speed, it’s a clunky experience on a mobile device loading assets over a data connection.

This is where the wp_is_mobile() function comes in. It’s a simple boolean function sans any parameters:

It’s easy to see what’s going on there. In my case, I created a stripped back low-fi version of the store location feature which loads about 5 times faster than on desktop. Fast enough that users don’t get discouraged (and potentially leave) when attempting to use the tool on a slow loading data connection, while still offering all the information they require.

Additionally, this feature on desktop was lower priority than on mobile, and so again using the wp_is_mobile() function I was able to change the order in which elements appear, prioritising the store locator to be near the top of mobile pages.

Cool, right? It’s easy to see how you might want to apply this function to your own use cases, with the goal of improving the user experience on small screens.

Caveat

There is one caveat to consider though. Some users on desktop like to resize the browser to make it smaller. The wp_is_mobile() function is a server side function, meaning it is executed even before the page loads and so your responsive rules don’t apply.