Building a Better Website for your Game

Transcript

1. A MAZE. Berlin 2016
   Hello,
   I’m @andreaszecher
   from Spaces of Play
   1
   

   View Slide

2. A MAZE. Berlin 2016
   2
   

   View Slide

3. A MAZE. Berlin 2016
   3
   

   View Slide

4. A MAZE. Berlin 2016
   4
   

   View Slide

5. A MAZE. Berlin 2016
   5
   

   View Slide

6. A MAZE. Berlin 2016
   BUILDING A
   BETTER WEBSITE
   FOR YOUR GAME
   6
   APRIL 22, 2016 — AMBULATORIUM
   

   View Slide

7. A MAZE. Berlin 2016
   You can find the slides for
   this presentation at:
   https://speakerdeck.com/pixelate
   7
   

   View Slide

8. A MAZE. Berlin 2016
   PART ONE:
   WHAT TO PUT ON
   YOUR WEBSITE?
   8
   

   View Slide

9. A MAZE. Berlin 2016
   Your website is the canonical
   resource for players, content
   creators and press to find
   information about your game.
   9
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. A MAZE. Berlin 2016
    Your website should answer
    these questions.
    13
    

    View Slide

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
    

    View Slide

15. A MAZE. Berlin 2016
    Generate interest
    http://www.futureunfolding.com
    15
    

    View Slide

16. A MAZE. Berlin 2016
    Short gameplay videos (randomized)
    16
    

    View Slide

17. A MAZE. Berlin 2016
    17
    YouTube trailer
    

    View Slide

18. A MAZE. Berlin 2016
    18
    Press quotes and awards/nominations
    

    View Slide

19. A MAZE. Berlin 2016
    Capture interest
    http://www.futureunfolding.com
    19
    

    View Slide

20. A MAZE. Berlin 2016
    20
    Monthly newsletter, used by players and press
    

    View Slide

21. A MAZE. Berlin 2016
    21
    Pre-register for review copy,

    used by content creators and press

    

    View Slide

22. A MAZE. Berlin 2016
    22
    Press kit, used by journalists

    for text snippets and assets

    

    View Slide

23. A MAZE. Berlin 2016
    PART TWO:
    HOW TO BUILD
    YOUR WEBSITE?
    23
    

    View Slide

24. A MAZE. Berlin 2016
    Make your site load fast
    24
    

    View Slide

25. A MAZE. Berlin 2016
    Uninstall Wordpress.
    Make everything static.
    25
    

    View Slide

26. A MAZE. Berlin 2016
    If you really need Wordpress, use caching.
    https://codex.wordpress.org/WordPress_Optimization/
    Caching
    26
    

    View Slide

27. A MAZE. Berlin 2016
    Static site generators:
    • Write your pages in HTML or Markdown
    • Reuse templates
    • Test and compile locally
    27
    

    View Slide

28. A MAZE. Berlin 2016
    28
    https://jekyllrb.com
    

    View Slide

29. A MAZE. Berlin 2016
    29
    https://middlemanapp.com
    

    View Slide

30. A MAZE. Berlin 2016
    30
    https://hexo.io
    

    View Slide

31. A MAZE. Berlin 2016
    Asset Compilation:
    Minify HTML, CSS and JavaScript
    31
    

    View Slide

32. A MAZE. Berlin 2016
    32
    Lossless image optimization
    https://imageoptim.com
    

    View Slide

33. A MAZE. Berlin 2016
    33
    Photoshop Save For Web
    

    View Slide

34. A MAZE. Berlin 2016
    Content-Delivery Network:
    Serve your website assets from multiple locations
    Amazon CloudFront
    Microsoft Azure CDN
    Fastly
    34
    

    View Slide

35. A MAZE. Berlin 2016
    Make it easy to
    share your game
    35
    

    View Slide

36. A MAZE. Berlin 2016
    Facebook Open Graph
    https://developers.facebook.com/docs/sharing/best-practices
    36
    

    View Slide

37. A MAZE. Berlin 2016
    37
    

    View Slide

38. A MAZE. Berlin 2016
    Twitter Cards
    https://dev.twitter.com/cards/types/summary-large-image
    38
    

    View Slide

39. A MAZE. Berlin 2016
    39
    

    View Slide

40. A MAZE. Berlin 2016
    Screenshots and image assets should be accessible
    via right-click using "Save Image As".
    40
    

    View Slide

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
    

    View Slide

42. A MAZE. Berlin 2016
    Hosting options
    42
    

    View Slide

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
    

    View Slide

44. A MAZE. Berlin 2016
    Deployment
    44
    

    View Slide

45. A MAZE. Berlin 2016
    Automatic FTP sync
    45
    

    View Slide

46. A MAZE. Berlin 2016
    Better: Deploy via Git push
    46
    

    View Slide

47. A MAZE. Berlin 2016
    Worry about Security
    47
    

    View Slide

48. A MAZE. Berlin 2016
    Use version control.
    But don’t store API keys and passwords.
    48
    

    View Slide

49. A MAZE. Berlin 2016
    Don’t reuse passwords.
    https://1password.com
    49
    

    View Slide

50. A MAZE. Berlin 2016
    Use two-factor auth where possible.
    https://twofactorauth.org
    50
    

    View Slide

51. A MAZE. Berlin 2016
    Don’t use FTP, use SFTP instead.
    51
    

    View Slide

52. A MAZE. Berlin 2016
    Install security patches on the
    same day they are released.
    https://en.wikipedia.org/wiki/Zero-day_(computing)
    52
    

    View Slide

53. A MAZE. Berlin 2016
    PART THREE:
    CODE EXAMPLES
    53
    

    View Slide

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
    

    View Slide

55. A MAZE. Berlin 2016
    55
    

    View Slide

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
    

    View Slide

57. A MAZE. Berlin 2016
    57
    

    View Slide

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
    

    View Slide

59. A MAZE. Berlin 2016
    59
    

    View Slide

60. A MAZE. Berlin 2016
    # source/javascripts/all.js
    //= require_tree .
    //= require "vendor/_jquery.fitvids.js"
    $(document).ready(function() {
    $(".content").fitVids({ignore: '.noscale'});
    });
    60
    

    View Slide

61. A MAZE. Berlin 2016
    61
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    rel=stylesheet>
    64
    

    View Slide

65. A MAZE. Berlin 2016
    PART FOUR:
    QUESTIONS/

    LIVE DEMO
    65
    

    View Slide

66. A MAZE. Berlin 2016
    THANK YOU.
    66
    

    View Slide