Here’s a quick design template which is very flexible for mobile app / pin submit type offers.
You can view the page at: http://jamesbachini.com/misc/simplemobile.htm
And download it from: http://jamesbachini.com/misc/simplemobile.zip
Obviously be careful that your button is above the fold on old and new phones. Big image + long headers can push it below which wouldn’t be good. This is great for testing new angles fast because it takes two mins to edit and get ready for traffic.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<title>jamesbachini.com</title>
<meta name=”description” content=”A stupidly simple mobile landing page”>
<style>
html { font-size: 1rem; font-family: Arial,tahoma,sans-serif; background-color: #000; }
h1{ font-size: 1.4rem;}
h2{ font-size: 1.2rem;}
.image{width:90%; max-width: 90%; }
.container { background-color: #eee; width: 100%; text-align: center; }
.buttons { font-size: 2rem; cursor: pointer; text-shadow: 1px 1px #666; border: 1px solid rgba(100,100,100,0.5); color: #FFF; font-weight: bold; text-align: center; padding: 5px; margin: 15px; border-radius: 5px; background: linear-gradient(to bottom, rgba(255,90,0,1) 0%,rgba(255,175,75,1) 100%); box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.5); }
.buttons:hover { box-shadow: 3px 4px 3px 0px rgba(50, 50, 50, 0.5); text-shadow: 2px 2px #666; }
.bullets li { font-size: 0.8rem; text-align: left; margin-left: 20px; }
</style>
</head>
<body>
<div class=”container”>
<h1>1 Simple Trick For Making Great Mobile Landers</h1>
<h2>Profit today with a stupidly simple mobile landing page</h2>
<img src=”http://jamesbachini.com/misc/mobiles.png” class=”image”>
<div class=”buttons” onClick=”window.location = ‘http://jamesbachini.com’;”>
Download Now
</div>
<a href=”http://www.jamesbachini.com”>Click here to download App for FREE!</a>
<ul class=”bullets”>
<li>The number one benefit of this product</li>
<li>Will change your life because</li>
<li>You will miss the opportunity of a life time unless…</li>
</ul>
</div>
</body>
</html>
