#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers

6 Examples of Desktop Sites Synced with Mobile Devices

Article by Awwwards in Web Design -

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 is websockets, which create an interactive communication session between the user's browser and the server. The rest is HTML5, Javascript, CSS3, PHP, Python, Ruby, Flash: anything you want.

  • Just A Reflektor

    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

    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

  • chrome.com/supersyncsports/

  • The Monster That Wouldn't Let the Children Go To School

    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. Technology: HTML5 custom parallax JavaScript engine, HTML5 video, JavaScript socket client.

  • Diplomatic-Cover



    Multi-screen navigation. Use your smartphone as a remote control for the website.

  • Rol it, by Chrome

    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

    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

    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.