Cross-Device Communication

I’m not sure exactly what to call this awesome trend of having our devices (phones, mostly) share information, send information or interact with another device: Cross-Device Messaging? Cross-Device Communication? Cross-Device Syncing? A combination of the three? Either way, it is awesome. It has actually changed the way I do things for the better and allows me to access/watch/transfer things from one device to another. When this happens, many times it feels like magic, I click a button and boom I’ve transferred a map from my computer to my phone and can walk away from my desk and head off to wherever it is I need to go. As I was creating a list of things that fit under this umbrella of device-to-device communication, I broke them down into different categories. Push, Remote Control, Sync and Companion.

Chrome to Phone in action.

Push
Push notifications have become commonplace and fairly standard with most Mobile Apps, especially those that involve social networks and email, where people want/need information as soon as it is available. As a result of all this pushing, our devices have become central hubs for our digital life, whenever anything happens, we get a notification and can take action. More about how awesome push is in my previous post: Push Away. When push technology is applied between devices and not just web services and phones, a whole new world of possibilities open up.

Chrome to Phone
Google’s “Chrome to Phone” was made possible after an upgrade to Android called “Cloud to Device Messaging” which allowed almost instant communication between devices and computers. To get this working, you need an app installed on your phone (to receive, and take action on the “message”) and an extension in Chrome (to send the “message”). What this allows is nothing short of amazing. If I am on Google Maps, looking up a new dinner spot, I simply click the “Chrome to Phone” icon in Chrome, and my phone receives the “message”, a URL to Google Maps, and opens up the same spot using Google Maps on my phone. Magic. You can do the same thing with any URL, your phone receives the URL and opens the browser or the appropriate application that matches the URL. This setup is a must-have for users of Android and Chrome, I use this almost every day, it IS that useful. Watch the video below to see how awesome it is: 

Google Play Store
The Android Market Google Play Store has allowed users to install apps from the web directly to their Android Phones for quite some time now. It feels like magic whenever I do it, seriously: I click “Install”, select a device, then BOOM! my phone begins downloading and I have the app, without even touching my phone. Here’s a quick video demonstrating, ignore the cheesy promotional material and music:

Recently the Android Market Play Store has been updated to allow Updating and Uninstalling of Apps on a device. If I want to get rid of an app, I just pull up the Play Store on my computer and then click the trash can, and boom, uninstalled, simple as that, no hunting through the settings menu or Play Store on my phone for the uninstall button (which isn’t hard to find, but this is still cooler and faster). Same goes for apps, when they’ve been updated, you can click the “Update” link in place of the “Install” or “Installed” button. This is a great way to manage the apps on your device without ever having to touch it.

Google Play Update/Uninstall Apps

AirPlay
I’m going to have to refrain from using the word magic again, even though by most standards AirPlay is pretty magical. It simply works, it IS limited to a few (mostly Apple-only) devices, and I haven’t used all of its features, so I haven’t been able to fully appreciate how awesome and “magical” it is. In my own practice I was able to send music from my phone (iPhone 4) to a pair of remote speakers: my iTunes on my home Windows PC, and my Android phone using a hacky app called AirBubble, which pretends to be an AirPlay speaker. It was pretty cool to have music playing downstairs on the PC and upstairs on my phone and being able to control it from wherever I had service. The "killer-app", I’m told, is being able to send video to your Apple TV from your iPad/iPhone/MacBook and watching it on your TV; and having a Home Theater Receiver (Denon, Onkyo, etc) with AirPlay support, so you can listen to your music on the best sound system in the house. I have neither a sound system or an Apple TV, so for now I’ll take other people’s word for it. This particular example also creeps into the “Remote Control” aspect of multi-device-awesomeness, which I’ll get into in another post.

Xbox 360
Microsoft has really done a great job with the Xbox, knock them for some of their other endeavors, but the Xbox and the Live Marketplace are great customer service experiences (not counting Microsoft Points, which are annoying, still). I imagine most people probably buy things using the Xbox itself, due to their frequent use of the console or by responding to an ad on the Xbox Live Dashboard. When you buy things on the Xbox, it is quite simple: buy it, and then the download begins, unless you are playing a game that requires the internet, either way it is added to a queue to be downloaded when the connection frees up, or once you turn “off” the console for the night. Buying a game on xbox.com, you are presented with a “Download to Xbox 360” option which, upon completing the purchase, adds the item to your download queue. The use-case here, at least from my perspective: “Oh cool, the latest Map pack for Call of Duty just dropped. I’ll buy this here at work (on my phone since xbox.com is blocked) and it will begin downloading as soon as I get home and fire up my xbox.” While not as instantaneously gratifying as installing an app from the Play Store, it adds a layer of convenience to my shopping experience.

Xbox Live Download to Xbox

These are just a few examples in the “Push” category. While some might not change your life at all, they allow us to make devices and the internet work better for us.

What are some “Push to” services that you use?

Mobilificationizing

If you are reading this on a desktop computer, the screen shots are for you. If you have a smartphone or other smaller screened device let me know in the comments how it looks and what does/doesn't work.

I was feeling under the weather recently, and as a result I stayed home from work to sleep longer, take some medicine and get better. After waking up around 10am I realized that there were a few things I was putting off because I didn't have time during the day at work, and most of my free night-time is taken up by a side-project that I've been working on for the last few months (http://studybuddycampus.com) and normal life things.

I took the opportunity to make some changes to my wife's blog about our family. It now has 3 columns and she loves it! Go take a look: http://tommyandalisha.blogspot.com

I finally got around to fixing the obnoxious problem I have when I visit this very site on my phone, the fixed-width sidebar. I know that I haven't been the best at updating and that is partly due to me wanting to play Halo/Call of Duty/etc or just not feeling like I have anything interesting to say. I feel that, as a heavy mobile internet user, I should have a site that looks good on a phone.

My site was slapped together a few years ago using asp.net/c# with master pages. Their was no concern in my mind for a mobile site, luckily master pages are wonderful and all I needed to do was create a duplicate of my existing template and start chopping. First thing I did was move the sidebar on top so that it sits on top of the content it normally flanks. Then I gave each main wrapper a width of 100% so that it would stretch to whatever screen size it was given. I checked it out on my phone and realized that the phone thought the web page was much wider than the phone's screen. I added the following meta tag to prevent this and tell the page to fit the width of the device and not assume a desktop size.

After a few more tweaks to the general layout and adjusting the padding/margins I got the site to look somewhat presentable. I used some fancy jQuery magic to get the sidebar er...menu to show/hide when the arrow in the upper right-hand is touched.

Now all I needed to do was redirect users to the correct master page when visiting my site on a mobile phone. I found the following code online and added it to all pages in need of the mobile layout.



After that was in place I realized that images from my posts were a little bit too wide for the average phone screen. Instead of manually resizing all of my images, I once again turned to jQuery for some help. Using an example I found, I check each image's width, if it is wider than the current width of the body tag, it reduces its size to fit nicely within the confines of the given screen.



All in all the process was fairly painless to convert an existing site, most of the work was getting the formatting correct. In the future I'd like to build a site from the ground up with current mobile browsers in mind, but that's for another sick day...