In this post I am going to show how I have built our landing page in Asteroid Challenge and why it is so important for our indie studio.
Why it is important?
If you want people to download your game, you need to let them know that it exists and this is one of the channels to let them know that your game is live! Having a landing page for your game will allow people that searches through internet to find you, and if so, it’s likely that this visitor potentially becomes a game install, a new player! wohooo!
A game landing page is also a way to pitch your game to other people. Let’s say, how you would convince someone to try your game if you are in a elevator and you have 5 seconds? A game landing page does this funcion on the net. Its goal is to convince someone to try your game in 5-10 seconds!
Finally, it also allows to share your game to other people very easily, with nice and detailed description.
How to design your game landing page?
From here on, nothing is written on stone. Take this an starting point to build your own game landing page, this should give you a great starting point. According to my favourite spot to learn, a game landing page should contain this structure:
The most important elements in the page are:
- Headline: the first thing your visitors will read. Try to say in 3-5 words what your game is about and make it very big 🙂 Probably this will be the main element to hook your visitors to continue going down the page.
- Video trailer: a video trailer about your game, with epic music and exciting gameplay scenes. In ads, videos that contain gameplay have higher conversion ratio that videos that don’t. At the end visitors want to see a game, right?
- CTA buttons: it is the call to action button. So make easy to your visitors to know where to go if they are interested about your game. In my case, I place 2 giant badges to download the game in google and apple stores. So I consider until here the most important what a game landing page should contain. The combo for a visitor that I expect is:
- A visitor reads “an amazing arcade space shooter” and hopefully thinks (humm interesting, let’s watch the video).
- A visitor plays the video and might happen (wohaaaa! this is very exciting how do I play this).
- A visitor presses the badge of google/apple store and downloads the game!
- Language selector: in my page I have added a language selector. Since I want a lot of reach, I try to make it easy to visitors to understand my page.
- Social icons: they will help your users to spread the word. They can be used in 2 ways:
- To share your content directly.
- To find out the social networks of your studio, so people can follow you in more places if they like your productions.
- Screenshots: they give additional info about your game. Imagine your user is in the train and don’t want to spend internet connection on watching a video but still, is interested in the game. This will give him some aroma of the game visuals.
- Features: this will give extra info to visitors about the game. More deep and extended knowledge that can’t be appreciated in the images.
- Reviews and testimonials: your landing page will gain more authority if you have good reviews, specially if they are from influencers. Imagine that you have a quote there from someone or somewhere famous saying that your game is brilliant… Adding random player reviews might also help, it would make more human your page…
- Contact: let people easily contact you. Maybe they want to review your game! In here I suggest to add a link to your presskit as well, so people can move forward easily to republish your game in some online magazine or in a video review in youtube.
- Subscription: if your game is not launched yet, you can allow players to subscribe to your page. That will help that in your launch day you already have some granted downloads by emailing the subscribed people.
The most important tricks or considerations are:
- No navigation: its very easy people gets lost out of your page and they don’t know how to return. So let’s put this hard, don’t let them navigate out by not having external links.
- Speed: Not the drug (hehe). Make your landing page blazing fast. Most of your visitors will come using a mobile and most of cases with slow connection. If your page takes more than 2 seconds to load, you have a big potential lose of visitors that will close the browser…
- Good content: one thing is that you get cocky by using stuff like “awesome rpg game” and another is that people things you are bluffing by using unrealisting descriptions and wording. So yes, as we would say in spanish, try to sell the moto, but it should not like you are fake. Usually sentences like “best RPG in the history” don’t help much. Think that you are trying to convince someone to play your game in 5-10 seconds and statements like that doesn’t say much…
- Simple: your website should be simple that the people can locate very easily the elements mentioned above. If you do a very complex design people might get overwhelmed with too much elements and leave the site…
- Mobile first: is a must your page looks awesome in mobile, it’s from where most of your visitors will come. Your page needs to be responsive.
You can see some examples of other games with awesome landing pages, in some way or another:
How to build your landing page?
Now we enter in the dark zone… the techie part! In this part I will show you what tech I have decided and some technicall tricks.
So, let’s start. The main thing you want is to be fast, extremely fast and the second thing you want is to be very reachable. So the 2 goals are to achieve a good page speed score and a good seo score.
An amazing page speed score
In here your goal will be to achieve the highest rank possible in google page speed insights. Obviusly you should fight for a 100/100 score, but this is usually impossible. Being around 95 is awesome, and it’s fairly easy. Another tool that can help you is vary. This is the score for asteroid challenge landing page:
So here it is how our page is done:
- I package the website using gulp. For doing this I use the next plugins (I only list the ones that affect performance):
- gulp-clean-css: the same than above but for CSS.
- gulp-useref: it concats me all the files into one, so the visitor has to download only 1 file.
- gulp-htmlmin: minifies the html code.
- gulp-image: compresses and optimizes the images. This is one of the things that will give you best score and to me, it’s the most important plugin.
- gulp-uglify: makes your code very ugly and unreadable so it can’t be stolen!
- gulp-uncss: this is my favourite plugin. It removes all the unused css. If you are using a library like bootstrap, which is heavy, this will clean all that is unused leaving a tiny css fingerprint.
- gulp-jsonminify: this minifies the json. I use it because my translations are in json, and this optimize them.
- So your building pipeline would be something like this:
- Concat all the js in one file
- Concat all the css in one file
- Minify and uglify all the js, css, html and json
- Inline the js and the css in the html.
- Optimize your images
- Video time! If you add a video to your page, which in my opinion is a must, you don’t want to add a link to youtube directly. This adds a lot a lot of size and penalty. What you want to do is to add a preview and when the user clicks, actually load the video itself.
An amazing seo score
For this duty, this pages will be your friends:
As before, the perfect would be to have a 100% score, but usually over 80 points you get a grade A score. Arrive around 90 is fairly simple:
And the way we achieve an score of 97 is (basically following the points of the checkers I have setup):
- Having a header1. You can use it where your headline will go (remember to convince someone in 5 words?).
- If you place your contact email, use an encoder like this one.
- Avoid as many requests as you can. That’s the reason that we serve all the info in 1 unique file.
- Minimize and optimize images.
- Don’t have broken links.
- Setup your .htaccess file to serve compressed files (gzip) and that all redirects go to the same result (http and https for instance).
- Applying the advices to make your page blazing fast will make most of the points ;).
Drop me a comment if I have missed some considerations or if you found useful the article!
Thanks for reading! 🙂