<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">

Where Marketers Go to Grow

Please select one of the blog options to subscribe.

March 19, 2014

How to Display Site Content Only Your Mobile Viewers Can See

Written by | @

mobile-devicesHow 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.Download our free guide here to learn how to design your own mobile-friendly  website. 

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:

    Mobile Landing Page Code
  • 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.

migrate to the HubSpot COS

  free mobile-friendly website guide

Topics: Mobile Marketing Landing Pages

Subscribe to HubSpot's Marketing Blog

Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

2 Comments

Sorry we missed you! We close comments for older posts, but we still want to hear from you. Tweet us @HubSpot to continue the discussion.

2 Comments