Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Better Website for your Game

Building a Better Website for your Game

Andreas Zecher

April 22, 2016
Tweet

More Decks by Andreas Zecher

Other Decks in Technology

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