This document discusses some key differences between developing HTML5 websites/apps and HTML5 games for mobile. For websites/apps, the goal is conversion and simplicity, while games aim to be fun through evolving gameplay loops. Games also require more complex mechanics and depth to engage players for longer. While HTML5 is a good fit for websites, it is not ideally suited for games due to technical limitations of mobile browsers. The document recommends restricting game design and focusing more on narrative elements to create engaging games within these constraints.

1. From HTML5 websites
to HTML5 games
Pietro Polsinelli
@ppolsinelli

2. What is the
difference?
Some observations for those moving from (mobile, HTML5) web site / app development to (mobile,
HTML5) games
2

3. The object you are talking about:
(mobile, HTML5) web site / app (mobile, HTML5) game
Product, service – not the web content The game content
“Reference” is the semiotical term.
Thursday, January 31, 2013

4. Your aim:
(mobile, HTML5) web site / app (mobile, HTML5) game
Conversion Fun
Solve the problem
Then one can go and ask “why fun”, well, fun is learning… see http://www.raphkoster.com
Thursday, January 31, 2013

5. Flow:
(mobile, HTML5) web site / app (mobile, HTML5) game
Linear towards conversion. Evolving loops aimed at playing more.
Pages can stay there for hours. Time /rhythm is often a core factor.
http://www.whatgamesare.com/2010/12/functions-vs-loops-finding-fun.html
Thursday, January 31, 2013

6. What does “simple” mean:
(mobile, HTML5) web site / app (mobile, HTML5) game
Simplicity of: Simplicity of:
Controls Controls
Mechanics Mechanics (can be a problem)
Message: “great product” Message
Involvement often requires a background story.
Thursday, January 31, 2013

7. The complexity of the resulting
solution:
(mobile, HTML5) web site / app (mobile, HTML5) game
Express, articulate the reference, which is Constitute the reference, which is required
well defined and unchanging. to change (levels or other means).
Games need depth.
Thursday, January 31, 2013

8. “Depth is an informal term to describe whether a game has enough dimensions of play,
actions, rules or story content to be played over a long term. Depth is essential for
deep engagement.”
http://www.whatgamesare.com/2012/05/your-game-is-a-graph.html

9. Note. Let’s try to graph it:
This is a very, very simplified view.

10. Relationship with HTML5
technology
(mobile, HTML5) web site / app (mobile, HTML5) game
Perfect fit with its standards: content is king. Unfit by design. “Oh, you can do everything”
Still…
Thursday, January 31, 2013

11. Least common
mobile device:
Android with
stock browser
but it’s worse:
AndroidS with
stock browser
Here very little works, and what does, actually doesn’t on some Android device, even when restricting to
updated OSs. Crucial implementations, like sound, are largely device dependant.
Launching a single “beep” can be a problem.

12. Is there is a way out?
“Unfit by design” is related to geeky
commonplaces about games & fun.
“A game is essentially animations,
3D, things that go fast played in real
time”
Not necessarily.
Thursday, January 31, 2013

13. Restrict your game design
choices. Keep it technically
simple, invest in other stuff.
Players don’t care about 3D,
animations, complexity – they
only want to have fun.
Think of Twitter narratives in 140 characters.
Thursday, January 31, 2013

14. My advice:
- Minimal technology
- Maximal background effort
Thursday, January 31, 2013

15. Example: this game I
designed could is
technologically and
game-mechanically
quite simple:
http://goodmorning.
appsfuel.com/
Thursday, January 31, 2013

16. It’s a misleading
simplicity. Making it
addictive requires a
study, design, testing,
previous attempts.
The key here is “fun
because of hints of a
non trivial narrative
through a trivial game
mechanics.”
Addictive.
Thursday, January 31, 2013

17. Art of Game Design
http://artofgamedesign.com
Game Mechanics: Advanced Game Design
http://bit.ly/magooo
http://www.jorisdormans.nl/machinations/
Learn more about game design.

18. My twitter stream is dedicated to game
design: http://twitter.com/ppolsinelli
A blog on game design
http://designagame.eu
eu

19. Image sources:
http://www.visionmobile.com/blog/201
0/04/is-android-evil/