Category: Mobile

Of what use is wp_is_mobile() in times of responsive web design?

Today, I want to discuss a function in WordPress which some might believe is outdated: wp_is_mobile() (to be found in wp-includes/vars.php). This function detects whether a mobile device is used or not by using the user agent of the browser. What? In times of responsive web design? Five years after Ethan Marcottes legendary article about responsive web design?

Usage in the WordPress Core

And still, aren’t there uses where we need to know on the PHP level if a user visits the site is using a mobile device? Let’s have a look into the WordPress Core first and see, how the function is used there.

The admin bar

When WordPress renders the admin bar, it checks by using wp_is_mobile() if a mobile device is used. In this case, the class .mobile will be attached to the bar (see wp-includes/class-wp-admin-bar.php), although, if I am not mistaken, there are no additional styles attached to this class. Also the body-Tag in the admin gets extended by the .mobile class, which changes the behavior of the menu for example.

The editor

The WordPress editor in mobile view
The WordPress editor in mobile view

Most people will write their blog posts usually in the WYSIWYG mode. At least, they have the possibility. But not, if they use mobile devices. In this case the function user_can_richedit() (wp-includes/general-template.php) will return false and what remains is the text mode. The “Visual”-Tab, which you usually find on the top right disappears as well as the full screen button.

More uses

Furthermore, you will find this function is used by _device_can_upload(). But here it plays a minor role. WordPress uses this boolean also to pass it to Javascript, for example in the Customizer.

How works wp_is_mobile()?

The basic is very simple. It checks whether the user agent of the browser contains one of the following text strings: “Mobile”, “Android”, “Silk/”, “Kindle”, “BlackBerry”, “Opera Mini” or “Opera Mobi”. In this case, the function will return true otherwiese false. With these seven strings all major mobile browsers are detected, which lets this function work pretty accurate. Of course it can always happen, a user changes his user agent individually and is not detected correctly. But, these cases aside, wp_is_mobile() works quite well in detecting mobile devices.

More interesting use cases

Since the last mobile update by Google the topic is back again. Mobile devices take more time to render pages and in most cases the internet connection is slower than for desktop devices. All this is bad for the user experience. If you develop your site mainly for desktop, using heavy sliders and much more, for mobile users this results in a catastrophe. Not only many sliders are not as mobile as one wishes them to be, especially the loading times are horrible. This results in high bounce rates. So, why don’t you stop the output of sliders and other heavy features on mobile devices by using wp_is_mobile()?

Another nice feature, you could easily realize with wp_is_mobile()? You could add an additional feature for mobile devices. In many cases the top of the page has a bar with the contact details. Why not checking if the device is mobile and add a SMS button to this bar?

Conclusion

Even the WordPress Core is still using a function which looks a bit outdated right now. And I tried to present two small examples, where I think checking the device on the PHP level would be more efficient than using CSS. If you have other use cases for this function or you have another opinion about the function, I am always happy about comments. 🙂

Mobile users want to call you

I won’t start now and telling you again: Yes, the web is moving to mobile, layouts have to be responsive and so on. You know it already. What you might don’t know: Mobile users want to call you!

Still, a smartphone is a phone. One of its main purposes is to gather information by calling people. So, even if they go to your website, they might want to have a personal contact, or as webdesignledger points it out:

Many visitors head to your website just to find your phone number, so make it prominent on your homepage. The top right corner is usually best – or, I’ve also seen it down in the footer. Regardless, put it up there!

Call me

But, these days, we are mobile. So, there should be a better way than copy&paste to call you. And there it is! Usually you write something like

+123 123 123 someone@example.com

With one click, you can write an Email, you just click the mailto:-Link. Isn’t there something similar for phone numbers? There is:

0123 123 123 someone@example.com

So, how to use it? You see the difference between the number which is shown and the number in the “tel:”part of the URI. The URI scheme for “tel:” is well defined in RFC5341, RFC3966 and RFC280.

Don’t forget: The internet is a global institution. You’re visitors might want to call you from Malaysia, Japan or Russia. In order to do so, the number format needs to be represented in a global format. As RFC3699 states it:

All phone numbers MUST use the global form unless they cannot be represented as such.

Well, there are some exceptions, and you can also use local numbers, but I think, since the internet is a global one, we should stick to global numbers or again, as the RFC3699 says:

Local numbers SHOULD NOT be used for several reasons. Local numbers require that the originator and recipient are configured appropriately so that they can insert and recognize the correct context descriptors. Since there is no algorithm to pick the same descriptor independently, labelling numbers with their context increases the chances of misconfiguration so that valid identifiers are rejected by mistake. The algorithm to select descriptors was chosen so that accidental collisions would be rare, but they cannot be ruled out.

A global phone numer has to start with a ‘+’, as it shows in the Request for Comments.

Okay, but enought of the RFCs. Its pretty easy:

tel:+49123123123

will call the phone numer 0123123123 in Germany.

Write me

photo credit: Curtis Gregory Perry cc
photo credit: Curtis Gregory Perry cc

But, mobile devices are so much more. You can also write SMS. And maybe, you want to provide such an link too. And yes, you can:

Write me a SMS

Again, its a very simple and clear way, how to do it. While “tel:” opens your phone, “sms:” will open your SMS editor. And also for this URI Scheme, we have a well defined documentation: RFC5724.

You remember “body” you may have used in the “mailto:”-scheme? It also exists for “sms:”! So, you might want to create a Complain Message Service, where you’re client can instantly complain. You could use something like

Complain instantly!

When the editor opens, half of the message is already written and maybe your customer looses some of his anger even before getting in touch!

Conclusion

There are quite some possibilites, to integrate your website into the mobile device of your visitors and it would be a waste not to use them. Especially the “sms:” URI scheme can be used for a lot of purposes. With its “body”-field, you can easily create interactions with mobile payment platforms and other SMS services! I wonder, why you rarely see this opportunity spread, but I guess, since mobile grows, these functions will become more and more inevitable.


photo credit: