Serve Your Mobile Customers with Different Content

Mobile use is more prevalent now than it has ever been, and more people are using their smartphones or tablets to access websites. No matter how good it is, their mobile data connection is never going to be fast enough o cope with a full-size website.

Of course, some would say that your website should have a ‘responsive’ design, a word that implies mobile-readiness but is rarely what you get.

Generally, a responsive website design just means that your desktop content gets shifted around a bit, perhaps converting three columns of content into one that has three rows, but this won’t improve loading speed. In some cases, it can make it a good deal worse.

Why? Because you are still trying to give mobile and desktop visitors the same content but in a slightly different format.

Let’s say that you have an image carousel of 5MB. That’s great for someone on a computer that has a retina screen but for a mobile user in, say India, that’s going to take around 10 minutes to load up!

The ideal solution is to show your mobile visitors different content with a better design and faster loading. Sadly, this is not quite so easy as using a CSS media query and visibility:hidden or display:none to hide your content.

Your page will still load up that content it just won’t show it. So how do we do this?

Mobile Detect Shortcode

You can add shortcode to your site using a plugin called WP Mobile Detect. This will help you to hide or show specific content.

For example, let’s assume that you have a post with a big infographic; you need your desktop visitors to see this as it is crucial to the post.

By using the plugin, this infographic could be wrapped in a shortcode, so it will only be seen on a desktop. For the mobile visitors, you add a link to the post that they must click to see the full image.

The first example shows a sample of code for a desktop visitor, the second for mobile visitors:

Example 1

[notdevice]

‘<img class=”my-large-infographic-image” src=”http://mysite.com/large-image.jpg” />’

[/notdevice]

Example 2

[device]

‘<a href=”http://mysite.com/large-image.jpg”>Click here to download the infographic.</a>’

[/device]

Doing this can make mobile loading times much faster while still giving them the opportunity to see the large image.
wp_is_mobile()

This is a function that lets you detect devices using your plugin or theme. It is generally used for dequeuing styles or scripts that are not necessary for mobile loading or in page templates to stop large images being served. For example, this is how you remove a large image from the header for mobile:

‘<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>> <header class=”entry-header”>

  <?php if( !wp_is_mobile() ) : ?>

   <img class=”my-large-header-image” src=”http://mysite.com/large-image.jpg” />

  <?php endif; ?>

 </header>’

This will detect a device based on the user agent and, despite what some people think, it isn’t useless with caching. Good hosts can cache mobiles separately, so you should continue to use functions that are mobile-specific.

A Separate Site for Mobile

You could also use a separate website for serving content to a mobile device and you would do this using an m.subdoman, something like m.appresser.com. When a mobile user tries to go to your website they will be redirected to a mobile version.

This does, of course, mean you have two websites to manage and keep the parity between both of them simultaneously.

Typically, a mobile user will want the functionality that your desktop site has but on a smaller screen so, instead of removing features, keep them in but speed them up and make them more accessible.

And, because making your desktop site faster will make your mobile site faster, make sure you follow all our tips for a faster WordPress site.

Leave a Comment Below

>