In the past few months we have seen some great examples of desktop websites synced with mobile devices. Many of them are games that use a smartphone or tablet as a game controller. Device syncing is not a new thing- a lot of companies have already been experimenting in this area for years, including Brass Monkey and Muzzley, who provide an SDK for developers who want to create games for their platforms.
For the moment, we have to recognize that this technology is still not stable. It throws up a lot of problems regarding performance and cross-browser compatibility. But the potential is there and it’s promising. We know that many people hate this kind of complexity in web projects, but we are not talking about web standarization, we are talking about experimentation, and we need that in order to innovate. In an interview for our “Web Design and Mobile Trends for 2013” eBook Ian Hickson, editor of HTML at WHATWG, said to us:
“Innovation doesn’t happen in multi-vendor discussions. If you have a proprietary platform, it’s easy to add features to it.”
We have to fight for innovation in web design and games are the best laboratory to do this from.
So what’s the technology behind all of this interaction? Basically, the key to synchronization
Just A Reflektor
The team wanted to explore websockets connection in storytelling. The phone became a source of light. Give the illusion that we have a small video projector in our hand. The application uses camera vision from the computer to track the phone image. This information is paired with the mobile gyroscope and accelerometer data sent through network.
Concept and development: AATOAA, Google Creative Lab, UNIT9.
Technology: WebGL, Three.js
Super Sync Sports, by Chrome
Sync your smartphone or tablet to your computer to Run! Built using HTML5 technologies, Chrome Super Sync Sports allows up to 4 friends to compete in running, swimming and cycling games on a shared computer screen, using their smartphones or tablets as game controllers.
Concept and development: Google, London, UK in collaboration with Weir + Wong
Technology: HTML5, Websockets, Web Audio
The Monster That Wouldn’t Let the Children Go To School
Thanks to the technology, users were able to intervene in the story to help the children. All they needed to do was send text messages instructing the children on how to defeat the monster.
Concept: Grupo Bassat Ogilvy / OgilvyOne Madrid.
Multi-screen navigation. Use your smartphone as a remote control for the website.
Rol it, by Chrome
Roll It links your devices through Chrome: roll a ball from your phone to your laptop. Since the whole thing runs on Chrome, no apps, installs, or special configurations are needed.
Concept and development: Google, New York, USA
Technology: WebSockets, HTML5 Canvas, Three.js, Go,Google App Engine, Google Compute Engine
Peugeot RCZ Test Driver
Interact with your smartphone as a remote or on your tablet and desktop computer. Join the chase and try to escape your pursuers.
Concept, Production and Development: BETC Digital Paris, Circus – Dak Tirak, Sylvain Tran.
Racer, by Chrome
Speed across up to five phones and tablets. No apps. No downloads. Just Chrome and the web.
Concept and development: Active Theory, Plan8, PA Consulting
Technology: HTML5 Canvas, Paper.js, WebSockets, Web Audio API, Go, Google App Engine, Google Compute Engine.