Since we started IMGrind a little of a year and a half ago Ruck and I have had the opportunity to meet hundreds of Internet Marketers from all of the world. One common problem we’ve noticed with many is they simply don’t know how to create a simple landing page. Things have came along way since the nineties when you had to use Microsoft Publisher or simply notepad to produce a HTML page. I want to explain how quick and easy it is to create a simple mobile landing page in Adobe Dreamweaver.
If you plan on having a “real business” online having a HTML editor is a necessary tool. I’ve used Dreamweaver over the last five years and have been highly impressed with it. While some may find it a bit expensive, they now offer a monthly subscription plan, but overall it’s an investment for your business (and it’s a tax deductible expense). They also offer a trial download so you can try it before you buy.
The cool thing about Dreamweaver is they provide “starter templates” which will save you a lot of time. To begin your mobile landing page select File > New > Page From Sample > Mobile Starters > jQuery Mobile (CDN):
This is going to provide us with a template for a jQuery mobile landing page and is going to host the framework on their CDN (content delivery network). For those of you just getting started, this should be just fine. Now remember jQuery landing pages are best for smartphones because not all feature phones will load the code correctly. Make sure you keep this in mind when developing your campaigns and be prepared to create simple HTML landing pages for those devices (I’ll explain in another tutorial).
Once we click create we’re then displayed the code that is going to make our landing page. If you don’t feel comfortable with HTML you can toggle to the design view and begin making your edits:
You’ll notice with jQuery that all of your “pages” are on one page. This makes it super easy to start making edits and adding/removing as many pages as you need for your landing page. If you’re targeting an audience with smartphones I like to break it down into a couple different pages as it’s easier to navigate and monitor the results. To begin customizing my own landing page I start with the title (in the code view) and assign it a unique name. For this example I’m going to name the page “Top App Downloads.” My main page is going to be the landing page I send all my traffic too and the sub pages are going to be information about the individual applications I’m promoting. Here’s what my initial edits look like using the “split” and “live” view:
There is no need to panic, the edits I made to the existing code were very simple:
To make things a little easier on the eye I’m going to open up Adobe Photoshop and make a quick 300×75 logo with a transparent background. If you know nothing about logo design you can easily outsource this using services such as fiverr. To add this to my page I’m going to use some very basic HTML on line 17. You can also click on Insert > Image at the top of your Dreamweaver menu:
My “live code” view now looks like this:
Now we’re talking! A very simple, clean landing page, with an image and links to present the user with three different applications. We can now scroll down to each page and customize them for each application that we’re going to promote. For my example I’m going to edit “page2” which starts on line 29. I’m going to create a basic header image, add some text, and then include a custom made call to action button. My call to action button is going to include an external link to the offer I’m going to be promoting. Sometimes jQuery is known to “get stuck” so to avoid this I’m going to add rel=”external” to the link:
We can now go back to the “live code” view and see how nice and clean our page looks:
Now we go back through and rinse and repeat until we have all of our pages developed. Remember we didn’t do anything crazy to the existing code we just made some simple edits and inserted some custom made images. Some applications you promote include the standard banner creatives that can easily be inserted. Our last step here is to upload the page/images to our web server. You can do this through Dreamweaver or using the free FTP client, FileZilla:
We can then visit the landing page on our device or use an emulator to view on our desktop:
You can view my sample page at this URL: http://www.imgrind.com/samplemobilelp/
If you’re looking how you can track your incoming clicks, conversions, and other important metrics I wrote a brief tutorial on the iMobiTrax blog explaining how this can be accomplished. Using a landing page with the cheap mobile traffic out there is an excellent way to capture higher ROIs and leverage your campaign volume. While direct linking can be beneficial, having control over your landing page allows you to make more optimizations to better fit your audience and turn unprofitable sources of traffic into profit. The more you practice creating these pages, the better you will become. Time to get to work!