Lately I have seen a few of these so called multi-screen experiences, sites where users are able to interact with the desktop version of website using their mobile device.
With the rising popularity of mobile devices like smartphones and tablets, we will be seeing a lot more of these multi-screen experiences. I don’t think it will be something that will become popular in mainstream web development any time soon, but it’s a cool concept as far as experimental web design goes and certainly something worth exploring.
The core technology that makes this possible is the WebSocket protocol. With WebSockets you can pass messages back and forth between a desktop website and the mobile version.
The majority of multi-screen experience websites seem to be mostly games, but I have come across a few for products and services as well. Today we will be taking a quick look at some of these multi-screen experience websites. If I have missed any please do let me know about it in the comments below.
Mobile Browser Multi-screen Experiences
Super Sync Sports
Super Sync Sports allows you and 3 friends to compete in running, swimming and cycling games on a shared computer screen, using a mobile device as the game controller.
The Diplomatic-Cover website connects your smartphone with the desktop browser, allowing you to navigate and consume the content they offer using your phone.
ING Direct and UNICEF have partnered up to create The Monster. You are shown a video where a monster is destroying school property and frightening off children from a local school, and you are encouraged to send a text message (it will cost €1.20, all of which goes to UNICEF) so that the teacher and students can defeat the monster and return to school.
Racer is a slot car game that works across multiple mobile/tablet browser screens. Start a race, sync up the devices and tap your screens to accelerate and release to slow down. But, don’t accelerate too much or you might go off track. It can also support up to five screens/users.
Withyou can roll a ball from your phone to your desktop browser. This game also makes use of the phone’s accelerometer to perform some special moves.
Just a Reflektor
Just a Reflektor is an interactive short film that makes use of the desktop and mobile device to tell a story. Once you sync your phone with the browser, you will have to align the screen and the webcam and then the story will begin.
Omnisense is an interactive experience that aims to make you think about the different uses of social data.
Digital Trip is a 3D game that can be played using one of three optional controllers – the keyboard, your mobile device, or your webcam.
Native App Multi-screen Experiences
Llévalos a la escuela
Just as they did above with The Monster (above), ING Direct and UNICEF also partnered up to create Llévalos a la Escuela. The story begins on a website and ends on your mobile device.
Brass Monkey is a video game console that uses your smartphone as a controller and web browser as the main display. You can download a mobile app from their website that allows you to sync your browser with your phone. Then you can then use it to select the various games they offer.
So, after all that, no doubt you will be wanting to learn more about WebSockets! As expected, Tuts+ offer a few comprehensive tutorials:
- Diving into WebSockets.
- Start Using HTML5 WebSockets Today.
- Using Node.js and Websockets to Build a Chat Service.
There are a few more examples over at Chrome Experiments as well. I would love to feature other sites that offer similar features, so if you come across any other cool multi-screen experiences, or if you develop one, please do let me know and I will showcase them here.