How many times have you heard, “this will be the year of mobile”?
We may never know when the official “year of mobile” will be, but I can tell you mobile traffic to your site will only continue to increase in the next few years. We need to start adjusting some of our marketing efforts to cater to these new mobile visitors.
After digging into our own analytics, I found that over 19% of the traffic to our landing pages was coming from mobile. That’s not a number we can ignore.
We know that using smart content to deliver the appropriate message to the right audience at the right time is important. This concept also applies to mobile visitors to our landing pages. There are small steps that you can take to increase mobile conversions that could end up making a big difference over time. For instance, changing the content that these viewers see when visiting landing pages from a mobile device may, in fact, increase your lead gen.
Here are some simple steps you can take on your own landing pages to insert and hide certain text or images exclusively for mobile viewers.
Choose your test and pick your landing pages.
Decide on what you would like to test out with this functionality. What might your mobile viewers want to see on your landing pages that would be different than your desktop viewers? Some test ideas to consider include:
-
Using mobile code on pages that promote content that is not compatible to download on mobile (e.g., Excel templates, workbooks, etc). This can also apply to thank-you pages to reduce frustration amongst leads who cannot download your content on their mobile devices (even after they have already filled out your form). Currently, we are running this test on two of our landing pages:
-
Showing different text for mobile viewers that acknowledges that they are viewing the page on a mobile device. This would further personalize the user experience and promote mobile conversions.
-
Experimenting with different size copy, headers, and images that only mobile viewers will see. This can help you gain insight in the behavior of your mobile viewers and what they prefer to see on a mobile version of your landing pages.
Once you’ve established what you’d like to test, pick one (or a few) of your landing pages to insert your mobile-only text or image on. The landing page should be aligned with your goals for the test and should be a page that you anticipate will get -- or that still gets -- a high volume of traffic. Mobile traffic will not be as high as your desktop traffic, so it may take longer to gather results with a smaller sample size.
Decide what to show/hide for mobile viewers.
You can simply add text that only shows up for mobile viewers, or you can go as far as to add different images or CTAs. Think about what visitors on mobile devices will want to see versus a regular desktop visitor.
Depending on the test, you may also want to suppress certain content for desktop users, such as longer paragraphs or images that may not work as well for mobile devices.
Show content on mobile devices.
This is where things get technical. To insert text or images specifically for mobile on your landing page, simple add the following code in the HTML <body>:
<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:
<style type="text/css">
.mobileShow {display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
</style>
Hide content on mobile devices.
To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:
<div class="mobileHide"> TEXT OR IMAGE NOT FOR MOBILE HERE </div>
Then, you will want to add the following code to your HTML <head> section:
<style type="text/css">
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
If you want this styling to apply to your entire website, add the following to your CSS stylesheet:
.mobileHide{ display: none;}
Test your mobile codes.
Once you have your tests set up, including the text/images you will hide and unhide for mobile viewers only, it’s important that you test out the page on a mobile device yourself. Because I’m not an advanced coder myself, sometimes I forget a bracket or misspell a word that ends up causing weird things to happen to the page. Don’t forget this step to ensure that everything is working the way it is supposed to on your desktop versus your mobile device.
![10 Best Mobile Friendliness Tests [+ What Does it Mean to be Mobile Friendly?]](https://www.hubspot.com/hubfs/mobile-friendliness-test.jpg)
![The Marketer's Guide to Mobile [Free Kit]](http://53.fs1.hubspotusercontent-na1.net/hubfs/53/Mobile%20Marketing%20Guide.jpg)
![How & When People Use Their Favorite Devices [Infographic]](http://53.fs1.hubspotusercontent-na1.net/hubfs/53/multiple-screens.jpeg)
![How Internet Behavior is Changing Around the World [Infographic]](http://53.fs1.hubspotusercontent-na1.net/hubfs/53/internet-behavior-shifts.jpeg)
![The State of the Mobile Experience: How People Use Their Phones Today [Infographic]](http://53.fs1.hubspotusercontent-na1.net/hubfs/53/00-Blog_Thinkstock_Images/Mobile_Experience.jpeg)