Building a Better Website for your Game

Building a Better Website for your Game

Cff55c3d706caca7f33d04b304404796?s=128

Andreas Zecher

April 22, 2016
Tweet

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