6 Examples of Desktop Sites Synced with Mobile Devices

The gaming industry's influence on web design

  • Share on Google
  • Share on Stumbleupon

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 www.justareflektor.com

    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 chrome.com/supersyncsports/

    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 www.elmonstruo.org

    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

    Diplomatic-Cover www.diplomatic-cover.com

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

  • Rol it, by Chrome

    Rol it, by Chrome chrome.com/campaigns/rollit

    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 rcz.peugeot.com

    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 www.chrome.com/racer

    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.

Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com