So, you've created an incredible app or amazing mobile game and love it. You've worked day and night, implemented awesome features, totally nailed the user experience, polished the graphics to the last pixel and (hopefully) ended up fixing all those nasty bugs. You are ready for prime time and cannot wait to release your apps, sit back and enjoy. This is your big day, and all the hard work will now finally pay off.

But wait a second, are you really ready to put your feet up? As you may know there are around 1,300,000 apps in the App Store (as of WWDC on September 9, 2014). So how can your game stand out and be found? Many developers don't think too much about this and wonder why nobody is downloading their game. Marketing your game is not rocket science, and can be done without a huge budget. It is no secret, however, that marketing requires an awful lot of work. And even if you put in all the extra work: There's no guarantee for success. If you don't try, though, you can't win. That's why we decided to spend a considerable amount of our time on marketing and got our hands dirty.

As a first step we decided to create a Landing Page. Why? With a background in web development it felt natural to us. You can link to it from social network profiles, business cards, QR-Codes, Pay-Per-Click Ads, refer to it when pitching journalists or simply showcase your game to friends and friends of friends. A landing page adds to your credibility and helps building a brand. Bloggers and the press will see that you are serious about game development, and can get a first glimpse to decide whether your game is worthy of their attention. A landing page is your pitch-deck, to journalists, bloggers and interested customers. The barrier to visit a webpage is still much lower than to actually download an app on your mobile device.

Your landing page is tailored for ONE purpose: Present your mobile game and drive conversions. The average visitor most likely does not care too much about who you are, where you come from or what you do for a living, but usually just wants to decide quickly if your game is worth a try. If you pass the initial screening, the visitor wants to play! Make sure to catch her attention immediately and channel her to your download button. A full fledged website with 10 sub-pages will be counterproductive and distract your visitor. As with a first date, the first few seconds will most likely decide about your future relationship. So make sure that the odds are in your favour!

The outline for this article will be as follows:

1. What's a Landing Page and what's the purpose (Short Definition)

2. Must-Haves for a Landing Page (Ideas on content)

3. Why we did what we did (Our interpretation of all this Mumbo-Jumbo)

4. Use Analytics (See the performance of your Landing Page)

5. Additional Notes

This is the first part in a series of posts on how to market your indie game on a budget. You can read the intro here. All advice is based on our own personal experience marketing our iOS learning game, Blackboard Madness: Math, and should be seen as a rule of thumb. This article focuses on how to create a simple, but effective landing page for your mobile game/app. In general, you can apply these rules to create a landing page for other purposes, as well. If your goal is to get subscriptions for your newsletter, for example, you drive the attention to the subscription form rather than the download button.

1. What's a Landing Page and what's the purpose

If we break down Wikipedias' definition of a landing page we can say that it is a single web page, which is linked from search engine results, social media and online advertisements (i.e. Google Ads, Facebook Ads, E-Mail Campaigns and so on). Seth Godin (If I would have to choose my single hero marketer, it would probably be him) lists five possible actions that may results from a Landing Page visit:

So let's say that a landing page has the sole purpose to generate conversions. "Generate Conversions" is the key here: The main purpose of your landing page design is to get the visitor to push that download button or sign up for your newsletter ("Sign up to get notified when my Super-Duper-App is released").

2. Let's start cooking or "Must-Haves for a Landing Page

In the context of promoting your game, we suggest you make sure you include the following info on your landing page:

The KISS Principle

KISS: Keep It Simple Stupid (and short!).

Your visitor has a veeeeery, veeeeery short attention span (think first date here). So don't babble too much and focus on the important stuff. Concentrate on conveying your unique selling proposition. Include the main headline, a few punch-line paragraphs with compact and precise info about your mobile games' core features and what makes it so incredibly special (benefits). Use short, strong Headings and Sub-Headings. DO NOT put too many external links on your landing page (or don't position them too prominently). The last thing you want is a visitor leaving to another page. And most importantly, prominently position your CTA, the download button!

In a nutshell, that's basically it. No more, no less. Think: "Would the visitor click on that download button, if he sees this page for a short amount of time?"

3. Why - we did what - we did (Our interpretation of this Mumbo-Jumbo)

There is not a single "THIS IS THE ONLY WAY" approach to create a successful landing page. For some people success means generating 1000 downloads, for others 1 million. What works on one page, may not work on the next. The key to success is defining your goals, measuring your results and iterating!

In the beginning, we did not follow some of the points mentioned earlier too strictly (we were full of ideas and wanted to describe our game in every detail). What we always did, however, is iterating. And hell, we iterated A LOT (I think we had about 5 main drafts and a lot of smaller adjustments along the way). We distilled the do's and dont's into our landing page, incorporated feedback, and hopefully created a visually appealing page that fits the overall design of our game (recognition value).

We tried to keep the most important content above the fold (The Fold = Area you see when you visit a website without scrolling. The first impression if you will). 1366x768 is the most popular resolution (From August 2013 until now) according toStatCounter. Well, as you can see the download button is a little bit cut off on this resolution. Not so good you say? Yeh, maybe. But we think it's not a problem. Why? Well, the button is still recognizable even on 1366x768 (Recognition Value), clickable and visitors instantly know that there is more content further below. In addition, there is a clear trend towards higher resolutions, so our fold is probably a good compromise between current and future screen sizes. If the visitor scrolls down, he sees our three paragraphs with text, then reviews, contact details and so on.

Before I discuss the different areas of the following screenshot (and the rest of the landing page) I want to mention that the most important element is the gameplay trailer. Read on to learn why.

As you see, our Layout looks like this (You can see it in action here)

The Navigation. Most users will read from left to right, top to bottom. We put our app icon and title first, to add recognition value. On the right hand side are some links to social networks, our press kit and dev blog (which is the place where we can write as much as we want ;). We did not want to hide the press kit and dev blog at the bottom of the page to make sure bloggers/reviewers/press find quickly what they are looking for (Yes we want to be friends with them. If you can't guess why, you will read about this in a later post). The usual gamer/user probably won't pay too much attention to the presskit and dev blog in the top bar, because it is of no real value to him (as J.W. Goethe once said "You only see what you know"). His attention will most likely be drawn directly to the iPad bezel with the trailer.

The Trailer. A picture is worth a thousand words. Well this should be self explanatory. A game play trailer explains the game much better than text or static screenshots. A trailer conveys the mood, demonstrates the gameplay experience, and arouses curiosity. Nowadays it's all about the user experience, this is also true for your landing page. Make it stand out. In one of our early drafts we started out with a carousel image slider - but the motionless pictures did not convey the feeling of our fast-paced game play (which is one of the key differentiators of our math game).

Better yet: If you have a Flash Version - USE THAT INSTEAD! I really love Canabalts' Landing Page, it contains the flash version of the game. You don't have to read anything, you don't have to watch images or a video - you just play the game and experience it right there on the website.

Some technical stuff: We host the video on our page. It's a HTML5 Video element with 3 versions (.mp4, .webm, .ogg). It works in all web-browsers. There is a good reason we didn't embed our YouTube video. If the embedded YouTube video ends, you get suggestions for other videos. This may carry away your users (worst case leading to an exit) and draw their attention away from our CTA.

Headline. We put a short, but strong headline right underneath the trailer ("Become a Math Champion now!"). The headline is a central part of your landing page. It should get your target visitors excited enough to stay on your page, watch the trailer, read on and hopefully download your game. Our headline is written in the active tense and an invitation/call to action.

Call To Action. "Download on the App Store"-Button. Position the CTA very prominently. The main purpose of our landing page is to generate app downloads, so ensure that your visitor can immediately get to the App Store if he is hooked. You can play around with the size (color, etc.) of your CTA, but don't make it too intrusive.

Main features. We decided to concentrate on three features to call out below the CTA. We picked the three things that are most compelling to our target audience. We organized them in three content boxes. Every paragraph has a strong headline, which also works as a call to action (have fun, get smart, be challenged). The info is short, and to the point, so no "OMG tl;dr" here  [;)]  We tried to keep every paragraph under 50 words. You won't believe how many iterations we made here. We asked a lot of friends to see which headlines and text blocks were most compelling.

The Reviews. Some quotes from blogs that wrote about our game and some of our 5-Star reviews from the App Store. We would encourage you to include testimonials, prizes, ratings and quotes (if you don't have any, yet, add them as soon as you get some coverage). You could also think about placing the reviews into a content slider to make the page even shorter.

The Rest. Well, a short contact section (some text plus email address) followed by the footer. If you prefer you can insert a contact form, but from our experience nobody will really care to fill out a form  to contact you.

Oh and by the way, we used Twitter Bootstrap. It's a great framework, with nice templates that should help you to easily design and layout your landing page - responsive of course :)

4. Use Analytics (See how your Landing Page performs)

We use Google Analytics for collecting data on website usage. In addition to usage stats, you can also track every click on any link (it's obvious that you should track your download button so measure the success of your landing page and CTA :)

Enabling event tracking is as easy as adding the following attribute to the link (a href="") of your download button:

onClick="ga('send', 'event', 'download', 'click', 'iTunesBtn');"

If the button is clicked now, a click-event of the category "download" with the name "iTunesBtn" is send to Google. That's it, you can see the stats on this button in your Google Analytics account now.

In general, you should track every single link and action on your landing page. Set conversion goals and check the data regularly to get an idea of how your visitors behave and how successful your efforts are. Are you able to convert 10% of your visitors, or maybe just 0.1%? Do your visitors even care about watching your trailer or do they exit just seconds after they have opened your landing page? Tracking and analyzing your landing page is extremely important and gives you valuable insights. These insights should help you to make the rights adjustments to your site (maybe your download button is outside of the fold) to improve your conversion rate.

A/B Testing

Let's say your download button is all the way at the bottom of your page and quite small. You notice that basically nobody clicks on the download button and decide to reposition and redesign the button. You could simply go ahead, move the button to the fold and make it bigger. This will very likely lead to a higher conversion, but you have no objective measure of the success of your changes. So ideally you will conduct an A/B test on a subset of your visitors to see how successful your changes are before rolling out the changes to all users (image Facebook introducing a new feature without prior testing on a small subset of their userbase).

In a classic A/B setup, you'll have two separate versions of your landing page. One page will be the original landing page and the other will include your changes. The visitor gets to see one of the pages (randomly). By tracking both versions of your page you can see what works best, i.e. on which version the download button gets more hits, or on which version the visitors stays for a longer time, and so on. It would go far beyond this article to get into more detail on A/B testing (maybe we'll write something about A/B Testing in the future). Here's a good introductory article on A/B testing from Optimizely: What is A/B Testing?

You need visitors in order to track and analyse so nevermind about this right now. I just wanted to mention it as another practice to optimize your landing page.

5. Additional Notes

MAKE IT RESPONSIVE

You make a mobile game right? It's supposed to be played on tablets and/or smartphones. So make the page accessible for those devices. There are many templates and frameworks to use as a foundation. So make your landing page responsive! As mentioned earlier, we used Twitter Bootstrap, but there are many other templates and frameworks you can start working with.

Captivating Screenshots

Instead of (or additionally to) a trailer you can place screenshots of your game on your landing page. We had a carousel slider in an earlier draft above the fold, but changed it to the trailer. We thought that a whole image cycle took too long in the slider, but more importantly, screenshots do not convey the feel and look of your game as well as a video.

Wrapping it up

By now you should know that the most important info should be placed above the fold, the landing page should be responsive and it should definitely have a strong call to action to drive conversions. In other words: create a page that makes it as easy as possible to download your game.

You know that you must present your game from its' sweetest side - draw attention to your game with strong headlines and short text blocks outlining your features - most of your visitors will have the attention span of sheep on a wide, green and juicy grass field (NO OFFENCE!). You know that the interwebs is full of junk and noise. Therefore you have to create relevance to get attention - the user is always a click or tap away from leaving you and your app. Don't be afraid to experiment and iterate! There is no single correct way to design a landing page. The worst thing you can do, is not have a landing page at all!

If you have any feedback on this post or if I forgot to mention something, feel free to comment! Please also feel free to comment on our landing page, we'd love to hear your thoughts!

Stay tuned for the next post of the Indie Game Marketing Series which will be about social networking.