Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

A MAZE. Berlin 2016 2

Slide 3

Slide 3 text

A MAZE. Berlin 2016 3

Slide 4

Slide 4 text

A MAZE. Berlin 2016 4

Slide 5

Slide 5 text

A MAZE. Berlin 2016 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

A MAZE. Berlin 2016 17 YouTube trailer

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

A MAZE. Berlin 2016 21 Pre-register for review copy,
 used by content creators and press


Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

A MAZE. Berlin 2016 Make your site load fast 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

A MAZE. Berlin 2016 33 Photoshop Save For Web

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

A MAZE. Berlin 2016 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

A MAZE. Berlin 2016 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

A MAZE. Berlin 2016 Don’t let old urls die. It’s called "permalink" for a reason. https://en.wikipedia.org/wiki/.htaccess 41

Slide 42

Slide 42 text

A MAZE. Berlin 2016 Hosting options 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

A MAZE. Berlin 2016 Deployment 44

Slide 45

Slide 45 text

A MAZE. Berlin 2016 Automatic FTP sync 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

A MAZE. Berlin 2016 Worry about Security 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

A MAZE. Berlin 2016 PART THREE: CODE EXAMPLES 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

A MAZE. Berlin 2016 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

A MAZE. Berlin 2016 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

A MAZE. Berlin 2016 59

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

A MAZE. Berlin 2016 61

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

A MAZE. Berlin 2016 THANK YOU. 66