Lets Try Duo - A Dual Mobile and Desktop Web Browser

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!

Esc