Over the last year, we’ve been doing a lot of R&D to make social games entirely from HTML5, CSS and JavaScript. Game development in HTML5 is a brave, not-yet-standardized world, but today marks a major stride for both Zynga and the industry. Say hello to Zynga Poker Mobile Web , the next evolution of Zynga Poker , and one of our first games to be featured on Facebook’s mobile apps and mobile site.

Zynga Poker Mobile Web was created in cross-collaboration by teams from Zynga Austin and San Francisco, as well as key contributions coming from a shared technology group focused on HTML5 game development. It marks the first game to launch after myself and the team at MarketZero joined Zynga in April 2011, a fact that we’re all particularly proud of.

The promise of HTML5 game development is pretty clear: rich, high-quality games built on one code base that can reach across many screens and platforms. The tough part is actually making it work. The team spent countless, trial and error hours trying to make it work, and here are some of the things we learned:

• WebSockets: Zynga Poker Mobile Web is one of the first games to utilize WebSocket connections on a massive scale. Using WebSockets in Zynga Poker HTML5 delivers smooth, high-speed gameplay that allows for a synchronous experience on the mobile web. How fast is it? It varies based on connections, but the game loads in seconds and refreshes almost instantaneously. The problem with WebSockets is that there are currently two active specifications since it’s still being standardized. We used Socket.IO in order to support both specifications seamlessly. Socket.IO also allowed us to support two “fallback” transport mechanisms: Flash sockets and XHR. Since iOS has good WebSocket support, these fallbacks weren’t necessary, but can allow us to turn up support for nearly any browser on the connection layer.
• CSS3: CSS3 allowed us to create more fluid animations and richer visual experiences without slowing down gameplay. For example, CSS3 animations allow for players to flip cards in 3D and 2D, and drag and drop sliders – all on a mobile web browser. CSS3 also helps the development team utilize the actual graphic chips of a device, and off-load process and logic from the interface to the browser. This results in richer animations without sacrificing gameplay speed.
• Offline Application Features: Zynga Poker Mobile Web uses features of offline applications – new caching APIs and local storage – to increase app load times after a player opens the app for the first time. In the future, this may allow us to leverage offline features and local storage to save session history and allow players to play hands without an internet connection.

Overall, game development in HTML5 is so new that almost every aspect of design was a learning opportunity. The team worked around bugs, built on previous experience and learned a lot through trial and error.

Zynga recently joined W3C and will contribute to building industry standards that enables rich social games in the browser across multiple devices. We also just released our first HTML5 open source projects at https://github.com/zynga/scroller and https://github.com/zynga/viewporter .

Sound off below with any comments or questions. We’d love to hear from you.