A recent presentation in Adobe Labs, are bringing a new and effective tool to the web designers tool belt. The problem, a lot of web designers have to deal with, is the time consuming task of optimizing the display to multiple screen sizes. Something designed for a desktop suffers when presented on the screen of a small device. Dealing with users rotating their device from portrait to landscape, viewing in different resolutions on different operating systems – all in all cumbersome, and something you surely aren’t waving your hand saying “Pick me, pick meee!” for.
Well … until now, I guess. Adobe has made a tool called Adobe Shadow, that sync your browser (Google Chrome) with devices in the same network. Users of Mag+ know the magical feeling, when you update something in InDesign, and it updates instantly on the tablet. It is like it is all wired up, and the tablet just appears as a second (or third) monitor in your workflow. Now you can do it (for free) with Adobe Shadow.
To get it up and running just go to http://labs.adobe.com/technologies/shadow/ and follow the instructions. Some things to pay attention to, during installation, is:
- There was a problem with the URL to the Chrome extension in the instructions. The right one is https://chrome.google.com/webstore/detail/ijoeapleklopieoejahbpdnhkjjgddem
- If the extension doesn’t start, you may have forgotten to start the Shadow Application (http://labs.adobe.com/downloads/shadow.html)
- It only works if the devices are on the same network. Some companies have several network for you to choose from. Maybe you have a separate secure network for your workstation, that doesn’t allow devices in. If you are facing problems, you could start a wireless hot spot on your device, and connect via that.
What Adobe Shadow tries to do, is to take some of the pain out of handling multiple style sheets targeted specific devices or resolutions. When making responsive designs, you often have to work on remote servers, in a desktop-upload-device-update manner. In the “nudging” phase, that is a bit tedious. When Adobe Shadow is set up correctly, it will redirect the information from the desktop browser to all connected devices instantly. It will evaluate the devices specifications and present the relevant style sheet. This way, you can have four devices laid out next to you, that responds whenever you preview your website in the Chrome Browser.
You ought to try it out. It is pretty impressive to see multiple devices, that updates almost instantly as you work in the desktop browser. You can event remotely access the device and alter the CSS or HTML shown. Take a look at http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow if you just want to see it in action … after that – if you design for multiple devices – you surely wanna try it yourself 🙂