HTML5 @Yahoo!

Bradley and Montgomery

Alex Porter - @streetalchemist

Kyle Werner - @wernull

May 13, 2013 - bamideas.com

Bradley and Montgomery

Full-Service and Digital Agency

Los Angeles + Indianapolis

What we do

Living and breathing HTML5

Working with Microsoft and Internet Explorer has allowed us to really focus in on the bleeding edge technologies.

Tonight

We'll cover the two very different facesof HTML5 and current web standards.

• Practical Side
• Fun Side

modern.IE

- Testing for Internet Explorer just got a little easier -

Key Features

• Resources for testing across different versions of IE
• Free tools to make the process faster
• Advice on supporting multiple browsers and devices

Responsive Design

• Grid Layout
• Mobile First
• IE8 and below show fixed desktop width

Device Testing

Virtual Tools

• Virtual Maching downloads
• Browserstack - live web-based testing
• Sauce Labs - cloud testing

modern.IE Scanner

• Detect common problems with older IE versions
• Automated Compat Inspector by Sauce Labs
• Suggestions for emerging best practices
• Windows 8 and other touch based browsing enhancements

Download Scanner

• Test local environment
• Test inside firewalls
• Runs on Node.js

modern.IE

• Evolving project in BETA
• Developer feedback encouraged

boredtodeath.ie

- pushing browsers to the limit -

The Challenge

Build a game that:

• Can run on the web.
• Can play in an arcade machine at SXSW.
• Shows off the strengths of Internet Explorer as a modern browser.

The Solution

• A side-scrolling brawler that is:
  • Fun to play
  • Fast-Paced
  • Memorable
• Marshmallow People web cartoonsby Jason Steele

boredtodeath.ie

The Machine

How we did it

Game

Impact.js + Create.js

Multiplayer

Node.js + Socket.io

A quick note on the engines.

Lessons from the game

• Use an engine:
  • Achieve our goals quickly
  • Focus on fun, not just getting it working

Lessons from the game

Audio Limitations - HTML5 Audio still sucks.

Sprite Sheet Limitations

Lessons since the game

Benefits of multiple canvases and off canvas rendering

Use requestAnimationFrame wherever possible

In the end

We were really able to pull of exactly what we set out to do.

True arcade game on the web without plugins.

Client ecstatic!

Questions?

bamideas.com

code.bamideas.com