What if you need to go about changing the actual content of a page to work rather than the layout for mobile visitors?
These days, most web developers clearly understand the need to optimize a website for use on mobile devices. Usually this includes the implementation of responsive CSS to create a great browsing experience for users of every screen size.
However, there are times when changing the layout is not enough. What if you need to go about changing the actual content of a page to work better for mobile visitors?
An Example Use
Recently, I was faced with this very issue. I’d built a WordPress site for a client using an events registration plugin. Its calendar layout was fantastic on larger screens, but completely unusable on smaller ones. While it seemed easy enough to change some CSS around to make it more mobile-friendly, this turned into quite an adventure.
After my attempts at reworking the CSS failed, I decided that it might be more efficient to simply list the upcoming events for mobile users rather than keeping the calendar format. But how?
Mobile Detect to the Rescue
A little research turned up Mobile Detect, a PHP class that helps detect mobile devices. It uses user-agent strings and looks for specific HTTP headers in order to determine if a user is visiting from a mobile device. Then, using a simple PHP conditional statement, Mobile Detect will allow you to serve up separate content for mobile users.
Every business should have a mobile detection script to detect mobile readers.
The Mobile Detect motto
It’s really a quite simple process. Just upload the Mobile Detect files to your server and place code similar to this in your template:
Mobile Content Goes Here…
Default Content Goes Here…
The result is that on both computers and tablets, the default content displays. On phones, the mobile-specific content is displayed instead. This allowed me to bypass the not-so-user-friendly calendar layout completely on small screens.
Concluding
If you decide to use Mobile Detect, be aware that you actually have to view your site on a mobile device in order to see that custom content. A web designer’s first instinct is often to resize their desktop browser to do a quick check of how their responsive code is working (plus, it’s fun). That won’t work with Mobile Detect since it needs to see that a visitor is using a mobile user-agent.
So, don’t be alarmed if you don’t see the content on your desktop or laptop. Pulling up the site on a phone will do the trick.
Overall, I found Mobile Detect very easy to implement and it provided much-needed functionality to my project. It will make a great addition to your toolbox.
I should also note that there are 3rd party plugins that use Mobile Detect for WordPress, Joomla!, Drupal and other platforms as well.
Check out these PHP and WordPress related blogs:
