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 different 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 that 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, you should also if possible 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 having to wait for scripts to load.
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 mobile device, 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.
September 2021 in review
A lot has happened this month. Here’s a summary of updates, features and tweaks across several products.Keep reading
What to expect in wProject 1.4.0
wProject 1.4.0 is not far away and should be safe to push out next week.Keep reading
wProject has launched and you can get it right now
As of today wProject is available for purchase, and there are implications for Task Rocket.Keep reading
wProject feature demonstration
Subtasks are arguably the biggest deal. As is often with any task, there can be a number of smaller tasks that need to be accomplished within it.Keep reading
Introducing wProject and what it means for Task Rocket
It’s been is a long time coming. Specifically, wProject is intended to be the successor to Task Rocket.Keep reading
Why I eat my own dog food
For the uninitiated, I, nor any other developer, actually eats dog food (not that I know of anyway).Keep reading