We put a video together to show off setting up Muir and it’s capabilities. Check it out.
Adobe Edge Inspect and Creative Cloud
Last year I downloaded a tool from Adobe originally codenamed Adobe Shadow, which was a free desktop+mobile app that provided mobile device browser testing for mobile web developers. I used it quite a bit while it was in beta for synchronizing sites I was developing across multiple devices to test responsiveness on tablet and mobile screen formats, it was a great tool for me.
When Adobe Edge Inspect was unveiled at the end of 2012 if you wanted to test on more than one device, you are now required to have an Creative Cloud subscription at $9.99 per month for the single app, or a minimum of $50/monthly for the full Adobe suite. Having just spent thousands upon thousands of dollars upgrading Adobe licenses at our studio to CS6 Master Collection, it was disappointing to be left with a crippled application unless we wanted to sign up for a “Creative Cloud Subscription” in addition to our licenses.
We Decided To Create An Alternative
At we develop a good number of web/mobile applications and websites in a year. Being a 50/50 creative and developer balanced shop there are plenty of us here that enjoy a challenge, so we sat down to evaluate our options.
Within a couple of weeks we had a rough prototype running that would connect our desktop machines to an iPhone and an Android based client, and could send browsing requests out from the desktop to the mobile clients. Success!
It Is A Good Thing We Did – Mobile Rendering Revealed
We quickly realized there were some key limitations to the Edge Inspect tool as we began to investigate what mobile browsers Adobe was using for mobile rendering on devices.
On iOS devices, the only browser you are going to be able to get to handle web page rendering without jailbreaking your device is mobile safari. So no problems there for realistic render tests.
On Android, we discovered that Adobe was using a proprietary build of WebKit that they engineered to work on their Adobe Air development platform. That means, while you are getting correct media query responses for screen size in your css, your pages aren’t actually rendering in mobile chrome, or any other native Android browser.
This is something that we’ve addressed in our new tool, and developers will have the ability to set their default browser on Android devices to be able to test how a modern Android browser will actually render their pages.
So What Does Our App Do?
Instead of replicating the functionality of Edge Inspect, we decided to focus on creating a tool that was geared only towards previewing accurately rendered mobile pages. In our experience, it is much faster to edit native css and html files and publish to testing servers or our local web servers vs dig through inspection interfaces to tweak properties and then migrate the working fixes back to our css.
We have a simple desktop application that will connect to our mobile app on your devices. The mobile devices can be kept alive so their screens won’t sleep while you are testing. And you can drive the pages that are displayed on your devices through our desktop interface, or by installing plugins for both Chrome and Firefox to synchronize your devices as you browse.
We’ve also created a plugin for Panic’s Coda (since I enjoy using it), that will update your devices when you save or publish files to your server.
So far it has been a pleasure to build, and focusing on a very limited set of features has allowed us to polish the browsing speed and fit and finish of the apps. I hope when they are ready for release that you check them out and can enjoy them.
For the desktop application, we have created installs for both Windows and Mac OSX, and plugins that work with Chrome and Firefox on both platforms.
For mobile clients, we have developed for the standard iOS and Android devices, ad we have created builds that will be available in the Amazon app store for Kindle Fire devices, as well as on the Nook Marketplace for Nook HD devices.
As of the time of this posting, I expect that we will have final builds submitted and reviewed by Apple within the next few weeks, launching early September 2013.
Designers I have seen gravitate towards Bohemian Coding’s Sketch, which is a fantastic app for graphic designers working with vectors.
I would love to know of any other alternative tools you enjoy using instead of the traditional Adobe Creative Suite apps, it looks like a lot of people have been busy filling the void that Adobe has left in selling software.