We’re always looking for tools to help us avoid creating bugs as well as discover the bugs that do make it into the code. It’s impractical to setup automated tests for responsive design because it’s so subjective. And since responsive design requires testing variations of a site’s design, manual testing is tedious and error-prone. Duo, by Electric Pulp, makes this process easier.
Duo is a simple web browser that lets you keep an eye on the desktop and mobile versions of your site as you’re building them. It keeps your site open in two panes side-by-side at different widths. If you navigate to a different page in one pane, Duo updates the other pane for you.
While it’s handy for building, it’s also great for debugging. You’re able to browse pages at multiple sizes without having to resize your window to see the differences.
I was using Duo non-stop while building our new site, and now I can’t imagine building or testing responsive sites without it. 1 I used two Duo windows to keep four breakpoints visible so I could see changes without refreshing four browsers.
For convenience, they offer some common breakpoints so that you can resize a pane to the desired width in a couple of clicks. 2 They also offer a handy bookmarklet so that you can open a site from your daily browser in Duo with a single click.
So far, the only limitation that I’ve found is that Duo doesn’t work with
post requests. This makes sense when you consider that
post requests change data. If both panes perform posts, they could create duplicate content or validation errors and interfere with your testing. I’m not sure what, if anything, they could do to address that. Regardless, that’s a trivial concession given how much time it saves reviewing other pages.
If you’re doing any responsive work, Duo can work wonders for your productivity, and at $4.99, it’s a steal. It saved me hours of effort by changing my responsive design process from tedious and error-prone to efficient and almost fun. I can’t imagine building responsive sites without it.