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

More Decks by Andreas Zecher

Other Decks in Technology



  2. A MAZE. Berlin 2016 You can find the slides for

    this presentation at: https://speakerdeck.com/pixelate 7
  3. A MAZE. Berlin 2016 Your website is the canonical resource

    for players, content creators and press to find information about your game. 9
  4. 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
  5. 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
  6. 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
  7. 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
  8. A MAZE. Berlin 2016 If you really need Wordpress, use

    caching. https://codex.wordpress.org/WordPress_Optimization/ Caching 26
  9. A MAZE. Berlin 2016 Static site generators: • Write your

    pages in HTML or Markdown • Reuse templates • Test and compile locally 27
  10. A MAZE. Berlin 2016 Content-Delivery Network: Serve your website assets

    from multiple locations Amazon CloudFront Microsoft Azure CDN Fastly 34
  11. A MAZE. Berlin 2016 Screenshots and image assets should be

    accessible via right-click using "Save Image As". 40
  12. A MAZE. Berlin 2016 Don’t let old urls die. It’s

    called "permalink" for a reason. https://en.wikipedia.org/wiki/.htaccess 41
  13. 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
  14. A MAZE. Berlin 2016 Install security patches on the same

    day they are released. https://en.wikipedia.org/wiki/Zero-day_(computing) 52
  15. 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
  16. 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
  17. 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
  18. A MAZE. Berlin 2016 # source/javascripts/all.js //= require_tree . //=

    require "vendor/_jquery.fitvids.js" $(document).ready(function() { $(".content").fitVids({ignore: '.noscale'}); }); 60
  19. 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
  20. 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
  21. 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