Adobe Shadow: Easy Way to Test Websites on Mobile Devices | Mon 12 Mar 2012 | Blog

Adobe Shadow: Easy Way to Test Websites on Mobile DevicesMon 12 Mar 2012

Adobe just announced the free Shadow software, which lets you simultaneously browse websites on your PC and your mobile devices (iOS or Android) - making testing during development of websites a whole lot easier.

It works by installing a mobile app on your devices (phones, iPads, etc) which listen for instructions from the Shadow software on your PC. In turn, the software on your PC listen for instructions from a Chrome browser extension. As you browse in Chrome all the connected devices follow along as you move around and change the site. Refresh the page in Chrome and the devices refresh too. Click a link to another page - the devices follow along too.

It's probably better explained by video:

I've given it a go and it works well and is easy to setup. I'll definitely be using it from now on.

Limitations

It's worth noting that the Adobe Shadow app installed on your mobile device has its own browser built in. At least that's how I understand it to work. Apparently that browser is WebKit-based. So, if you setup Shadow to test on, say, an iPhone, iPad and a Galaxy S2 all at the same time, you're only really testing in the same browser but on different screen sizes.

Also, if you like developing using localhost then it won't work without use of some kind of DNS to point your devices to your PC.

I could be wrong on both counts above, but that's how I interpreted it. Still it's a great tool. Just remember it's not a replacement for properly testing sites on the native browsers on the devices once initial development is complete.

Comments

- Roman Kopac
- Mon 12 Mar 2012 06:05 AM
All browsers on IOS render websites the same way because you really cannot use anything else than the supplied WebKit engine. Android may be different. On my iPhone and iPad I use Atomic web browser almost exclusively because it has more features than Safari, but the sites are always rendered the same - except in Atomic you can use adblock filters which is a godsend.
Adobe Shadow looks like a nice tool. I had some problems with web inspection tools - where you inspect the DOM tree and delete or modify elements. It still has some bugs, but it was impressive to see the same site and synchronized navigation on multiple devices. Will probably use it for my next Bootstrap bootstrapped app.

Reply
1. - Jake Howlett
  - Mon 12 Mar 2012 06:08 AM
  Have you seen that Bootstrap 2 now has uses responsive CSS to scale down to smaller screens!?
  
  Reply
  
  Show the rest of this thread
  1. - Roman Kopac
    - Mon 12 Mar 2012 06:20 AM
    Yes, I was just checking it out yesterday. But it was Sunday afternoon so I will dive deeper this week. Or maybe I will not even have to dive deep because Bootstrap will hide all the complications.
    
    Reply
2. - Jake Howlett
  - Mon 12 Mar 2012 06:14 AM
  I've done some further reading and, according to Wikipedia WebKit is:
  "the default browser in the iOS, Android, BlackBerry Tablet OS and webOS mobile operating systems."
  So I guess it makes sense to use Webkit in Shadow too. I feel a bit better about using it now.
  http://en.wikipedia.org/wiki/WebKit
  
  Reply
  
  Show the rest of this thread
  1. - S.
    - Tue 13 Mar 2012 03:29 AM
    Apple doesn't allow third parties to create apps that can download and execute code (that includes browsers). However, you can include webkit instances inside your app without restrictions. This means that Adobe Shadow has to use the version of webkit included in the iOS device you test with. Thus, what you see in Shadow should be exactly the same thing that you see in in Safari.
    In this particular situation, it has a peculiar advantage: if you use Shadow in devices with different versions of iOS, you will effectively be testing your web against each Safari version, regardless of having the same version of the Shadow app.
    Note that while both Android and iOS use webkit as their base rendering engine, you can find some differences between them, due to the fact that they use a different javascript engine, and Android lacking graphic acceleration (thankfully, that has been solved in ICS). Moreover, webkit is getting new features constantly, and one might support features that the other doesn't, just due to the date in which each one was released (of course, this is only temporally until the other one releases a new version).
    
    Reply
- H
- Mon 12 Mar 2012 06:09 PM
Of course iThings and Android may all be running different versions of webkit so you may still get different results between them. Plus Android now has chrome on some ICS devices which is also webkit but likely a lot newer than stock Android browser and iThings due to it's regular updates. HTH.

Reply
- Colin Ord
- Thu 12 Apr 2012 10:28 AM
My new utility called CrossBro has just extended the capabilities of Adobe Shadow by being able to edit PHP files (and others!) as well enabeling true cross browser development on a multitude of devices etc. with automatic browser refreshing as you edit and your code.
www crossbro com
Instantly see how your development code looks on a PC in Chrome, Firefox and IE (others can be included) and with the aid of Adobe Shadow see how your code looks on Mobile/tablet devices in realtime as you work.
Please take the time to review the utility and I 'm sure you will see its amazing capabilities of this true browser refreshing tool.
Regards,
Colin
www colinord com

Reply