Lets Try: Duo - A Dual Mobile and Desktop Web Browser
I came across this neat little utility recently, and thought I'd give it a try to boost my frontend development workflow. Duo is a mac app by that that allows you to simultaneously browse any website with a 320px version on the left and resizeable viewport on the right. When visiting a URL, the page is loaded on both sizes.
From their site:
Duo is a web browser that allows you to keep an eye on mobile without losing sight of the desktop. If you're into Responsive Web Development, we made Duo for you.
Initial Thoughts
Pros
Not having to constantly resize the window
At its core, this is what it does best. Duo simply gives you a dual view of each page. When working on responsive sites, i constantly find myself resizing the width of the viewport back and forth between the 3 common widths. Duo solves this problem with the dual panes. Plain and simple.
Works with LiveReload
This one is almost a no-brainer, but LiveReload has become a staple in my frontend development workflow. LiveReload detects changes to your local files and refreshes the pages accordingly. Because LiveReload is just a piece of javascript, it loads in almost any browser you throw at it. If you are not already using it, or one of its competitors, stop everything and grab your self a copy! You wont regret it.
Nifty Bookmarklet
They don't promote this one so much, but at the bottom of the Duo homepage they give you nifty bookmarklet that allows you to quickly open up your browser's current url in duo immediately. And don't forget to use this method to set up a keyboard shortcut for it.
Cons
No way to set the size directly
It would be nice if we could set the size of the viewport directly. Yes, Duo shows us the dimensions when we resize the initial window, but once you start browsing this feature disappears.
Also, a typical responsive design workflow includes 3 sizes (mobile, tablet & desktop). having to open a new window, resize it then load the page kind of defeats the purpose of the problem that this app is trying to solve. A simple toggle button in the menu bar would quickly solve this issue.
Cant set user agent
This one is almost a deal breaker for me. In one of my current projects, we use User Agent Sniffing to detect whether or not to show the mobile version of the site. This allows us to save on resources because of the large amount of content we serve to the user on each page load.
I tested this out on several major sites and I ran in to the same issue. Duo just displays the desktop version in the 320px space on the left. In Chrome Dev Tools, we could simply turn on the emulation setting to the device of our choice.
Verdict
At the time of this writing, Duo costs $4.99. And while its a nice little tool to have, the lack of User Agent switching makes the price a bit too steep for my current needs. However, if your developing a pure responsive website (and as soon as they add a method to toggle the view ports size) i would definitely recommend this to any designer or frontend developer.
Let me know what you think. Feel free to leave your questions, suggestions or rants below.
Happy coding!