Building a Better Website for your Game

Transcript

1. A MAZE. Berlin 2016 Hello, I’m @andreaszecher from Spaces of Play 1
2. A MAZE. Berlin 2016 2
3. A MAZE. Berlin 2016 3
4. A MAZE. Berlin 2016 4
5. A MAZE. Berlin 2016 5
6. A MAZE. Berlin 2016 BUILDING A BETTER WEBSITE FOR YOUR GAME 6 APRIL 22, 2016 — AMBULATORIUM
7. A MAZE. Berlin 2016 You can find the slides for this presentation at: https://speakerdeck.com/pixelate 7
8. A MAZE. Berlin 2016 PART ONE: WHAT TO PUT ON YOUR WEBSITE? 8
9. A MAZE. Berlin 2016 Your website is the canonical resource for players, content creators and press to find information about your game. 9
10. A MAZE. Berlin 2016 What are players looking for? • How does the game look and feel? • What kind of game is it? • When is it coming out? • Is it coming out for my platform? • How much is the game worth? 10
11. A MAZE. Berlin 2016 What is the press looking for? • Does anyone else think this
 game is worth talking about? • Why is this game newsworthy? • Who made this game? • Where can I find assets, background information and text snippets? • Keep me updated, send review copy. 11
12. A MAZE. Berlin 2016 What are content creators looking for? • Does anyone else think this
 game is worth talking about? • Is this game interesting to watch?
 • Will my audience enjoy this game? • Send me a Steam key once it’s
 ready to stream. 12
13. A MAZE. Berlin 2016 Your website should answer these questions. 13
14. A MAZE. Berlin 2016 What are you looking for? • Get players excited about the game • Reach press and content creators • Convert interest to sales 14
15. A MAZE. Berlin 2016 Generate interest http://www.futureunfolding.com 15
16. A MAZE. Berlin 2016 Short gameplay videos (randomized) 16
17. A MAZE. Berlin 2016 17 YouTube trailer
18. A MAZE. Berlin 2016 18 Press quotes and awards/nominations
19. A MAZE. Berlin 2016 Capture interest http://www.futureunfolding.com 19
20. A MAZE. Berlin 2016 20 Monthly newsletter, used by players and press
21. A MAZE. Berlin 2016 21 Pre-register for review copy,
 used by content creators and press

22. A MAZE. Berlin 2016 22 Press kit, used by journalists
 for text snippets and assets

23. A MAZE. Berlin 2016 PART TWO: HOW TO BUILD YOUR WEBSITE? 23
24. A MAZE. Berlin 2016 Make your site load fast 24
25. A MAZE. Berlin 2016 Uninstall Wordpress. Make everything static. 25
26. A MAZE. Berlin 2016 If you really need Wordpress, use caching. https://codex.wordpress.org/WordPress_Optimization/ Caching 26
27. A MAZE. Berlin 2016 Static site generators: • Write your pages in HTML or Markdown • Reuse templates • Test and compile locally 27
28. A MAZE. Berlin 2016 28 https://jekyllrb.com
29. A MAZE. Berlin 2016 29 https://middlemanapp.com
30. A MAZE. Berlin 2016 30 https://hexo.io
31. A MAZE. Berlin 2016 Asset Compilation: Minify HTML, CSS and JavaScript 31
32. A MAZE. Berlin 2016 32 Lossless image optimization https://imageoptim.com
33. A MAZE. Berlin 2016 33 Photoshop Save For Web
34. A MAZE. Berlin 2016 Content-Delivery Network: Serve your website assets from multiple locations Amazon CloudFront Microsoft Azure CDN Fastly 34
35. A MAZE. Berlin 2016 Make it easy to share your game 35
36. A MAZE. Berlin 2016 Facebook Open Graph https://developers.facebook.com/docs/sharing/best-practices 36
37. A MAZE. Berlin 2016 37
38. A MAZE. Berlin 2016 Twitter Cards https://dev.twitter.com/cards/types/summary-large-image 38
39. A MAZE. Berlin 2016 39
40. A MAZE. Berlin 2016 Screenshots and image assets should be accessible via right-click using "Save Image As". 40
41. A MAZE. Berlin 2016 Don’t let old urls die. It’s called "permalink" for a reason. https://en.wikipedia.org/wiki/.htaccess 41
42. A MAZE. Berlin 2016 Hosting options 42
43. A MAZE. Berlin 2016 GitHub pages free (static pages only) https://pages.github.com Azure/Microsoft BizSpark free for 3 years https://www.microsoft.com/bizspark Heroku starting at 7 USD/month https://www.heroku.com Linode 10 USD/month https://www.linode.com Amazon S3/CloudFront pay-per-use https://aws.amazon.com 43
44. A MAZE. Berlin 2016 Deployment 44
45. A MAZE. Berlin 2016 Automatic FTP sync 45
46. A MAZE. Berlin 2016 Better: Deploy via Git push 46
47. A MAZE. Berlin 2016 Worry about Security 47
48. A MAZE. Berlin 2016 Use version control. But don’t store API keys and passwords. 48
49. A MAZE. Berlin 2016 Don’t reuse passwords. https://1password.com 49
50. A MAZE. Berlin 2016 Use two-factor auth where possible. https://twofactorauth.org 50
51. A MAZE. Berlin 2016 Don’t use FTP, use SFTP instead. 51
52. A MAZE. Berlin 2016 Install security patches on the same day they are released. https://en.wikipedia.org/wiki/Zero-day_(computing) 52
53. A MAZE. Berlin 2016 PART THREE: CODE EXAMPLES 53
54. A MAZE. Berlin 2016 # Gemfile # Middleman is used for static site generation gem "middleman", "3.4.1" # Middleman support for blog posts and authors gem "middleman-blog", "3.5.3" gem "middleman-blog-authors", "0.0.1" # Automatically reload site preview in browser when making local changes gem "middleman-livereload", "3.4.2" # Minify generated HTML (remove whitespace, etc) gem "middleman-minify-html", "3.4.0" # CSS frameworks gem "bourbon", "4.2.1" gem "neat", "1.7.2" # Used for building the RSS feed gem "builder", "~> 3.0" 54
55. A MAZE. Berlin 2016 55
56. A MAZE. Berlin 2016 # source/blog/posts/2016-02-23-Running-your-own-DIY-press-event.markdown --- title: Running your own DIY press event slug: running-your-own-diy-press-event date: '2016-02-23' tags: - events - future unfolding layout: post authors: Andreas Zecher description: Here's how I organized a local event where independent game developers presented their games to the press and media. image: blog/paws.jpg --- I recently co-organized an event called [Press Day Stockholm](https:// pressday.confetti.events) where independent game developers presented their games to members of the press. In this blog post, I’m writing down the steps that were necessary to make the event happen. 56
57. A MAZE. Berlin 2016 57
58. A MAZE. Berlin 2016 # source/stylesheets/site.scss @import "bourbon"; @import "neat"; .sop-logo { position: fixed; bottom: 24px; left: 24px; z-index: 1000; width: 74px; height: 29px; @include media(max-width 640px) { display: none; } } 58
59. A MAZE. Berlin 2016 59
60. A MAZE. Berlin 2016 # source/javascripts/all.js //= require_tree . //= require "vendor/_jquery.fitvids.js" $(document).ready(function() { $(".content").fitVids({ignore: '.noscale'}); }); 60
61. A MAZE. Berlin 2016 61
62. A MAZE. Berlin 2016 # locales/de.yml --- de: press: headlines: press_kit: "Pressemappe" facts: "Grundlegende Fakten" facts_developer: "Entwickler" facts_platforms: "Plattformen" # locales/en.yml --- en: press: headlines: press_kit: "Press Kit" facts: "Basic facts" facts_developer: "Developer" facts_platforms: "Platforms" 62
63. A MAZE. Berlin 2016 # config.rb # Proxy old urls from previous Wordpress installation proxy "/2014/06/future-unfolding-first-look/index.html", "/blog/posts/ 2014-06-25-Future-Unfolding-First-Look.html" 63
64. A MAZE. Berlin 2016 # config.rb configure :build do activate :asset_host, host: "http://az756324.vo.msecnd.net" activate :asset_hash activate :minify_css activate :minify_html activate :minify_javascript end # index.html <link href="//az756324.vo.msecnd.net/stylesheets/site-c2327d9f.css" rel=stylesheet> 64
65. A MAZE. Berlin 2016 PART FOUR: QUESTIONS/
 LIVE DEMO 65
66. A MAZE. Berlin 2016 THANK YOU. 66