Web development is not my favorite thing. In my experience, it is finicky and requires far more time on layout than coding. Nevertheless, sometimes it must be done. Game pages are one of those times.
This is my minimalist design. The focus is on the game with a call to action for players to get more information or share with their friends. I like this design as it’s easy to set-up, re-usable, and doesn’t distract from the game. That said, a more pleasing background could be a good starting point.
I encourage artists, web designers, or visual creatives to make some changes. If you want to share them back here, that’d be awesome. For now, let’s get to it.
To see exactly how I set-up all these features, you can view the source page on one of my games. You won’t be able to tell from the source, but it’s actually built from a php template that I’ll share if there’s interest.
Share and Email
This is a big one and super easy to do. Emails are a great way to to keep your audience engaged if your game isn’t available yet. Personally, as a player and a game creator, I would rather have a steam page ready to add the game to a wishlist. That said, email does have its own advantages. It’s a more direct connection to your audience and you can get feedback before the game is released.
Sharing options are important as well. Self-promotion can be hard to do without coming of disingenuous. The best way around it? Get other people to share for you! You may not get many shares, but you should be ready for them!
I get it already. How do I set it up?
I use a script from Sumo.me. They’ll give you a script to add to the end of your web page. After doing that, you just need to select the features you want to use.
The free plan is sufficient to access all the features shown on my game pages. Once you’re set-up with an account, go to Forms -> List Builder to set up a subscription bar (the last option in Form Type) or choose another option like pop up if that’s your style. For social, go to Social -> Share -> Settings drag and drop the services you want to display.
By default, Unity WebGL absorbs all keyboard input, so your email sign up won’t work. Check out this quick fix to get it all working together properly.
Look Good in Shares
Now that players can share your game, make sure it looks good in those shares. Set up the og: (Facebook) and twitter: tags with a title, description, image url, and any other data you want to add (like fb app id or twitter profile). You can check the Truce game page for an example. Once you’ve added them, test them using Facebook Share Debugger and Twitter Card Validator.
Make it Easy for the Player to Play
Now, you’ve got a few extra bells and whistles, but don’t forget your core goal. Make sure the you don’t distract from your game and everything still works
Handle All Audience Types
So you’ve handled your gamers. They can play your game, subscribe for updates, and share it with their friends. All set? Not quite.
All set! Not bad at all. If this article helped, you’d like to share improvements, or you want to show off your own game page, leave a comment and I’ll check it out.