Create a Mobile Optimized Landing Page

Over the past year or so the focus of a lot of affiliate marketers has been drawn towards mobile marketing. It seems that OfferVault is having a new webinar every other week on different aspects of mobile marketing, but what a lot of people do not understand is that it is not as easy as simply signing up at AdMob or InMobi and pushing 10,000 clicks to your favorite e-mail submit. That simply does not convert. Instead, a better option is to create your own mobile optimized landing page and pushing traffic to the offer through that. This gives you more options and control over what your visitor is seeing. I have found that the best and easiest way to do this is to create a page using jQuery Mobile.

jQuery Mobile

With jQuery Mobile it is easy for anyone to create a mobile optimized page.  The framework for this is built on top of jQuery, which is a very popular javascript library and gets a ton of support from large companies (Google, Dell, Bank of America, MLB.com, etc). So, how can you implement this into your affiliate marketing efforts?

I have tested two different methods. With the first, I simply created a jQuery Mobile page that featured a title (ex: Win an iPad!), a banner in the main content area explaining to the user how they could win an iPad, and then a call to action button.

The other method I used was to simply create a form and captured the user’s e-mail. Forms are pretty easy to put together with jQuery Mobile and they look great. Check out their demo for more information.

Basic jQuery Mobile Template

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

This is the basic template HTML code for each page you create. It will look like this on an iPhone and similar mobile devices.

jQueryMobile Template screenshot

Be Creative!

We have had thousands of publishers sign up at PeerFly who are pushing traffic through mobile ad networks. We have found our e-mail and zip submit offers seem to do best with this type of traffic, but it’s important that you be creative when promoting them. Simply direct linking does not profit, so you will need to test different mobile optimized landing pages to see what does.

Please let me know if you have any questions.

Discussion

    • Luke
    • Luke

Leave a Reply

Did you know I launched an affiliate marketing forum?Check out affLIFT!
+