Responsive Design Emulation Tools For Front-End Developers

Someone in the Minneapolis St. Paul WordPress User Group recently asked for input on the best mobile emulation software for responsive web design work. There are several tools Due North Studios uses when working on a responsive project:

The Real Deal: Using An Actual Mobile Device

When it comes to developing or debugging responsive website designs, nothing beats being able to use an actual device. This is the process I use:

  • Plug iPhone into my Mac
  • Open up Safari (make sure “show development menu” is check under preferences->advanced)
  • Open Safari on my iPhone and navigate to the page I’d like to inspect
  • In Safari’s menu on the Mac, go to Develop -> (iPhone) -> (Page)
This allows you to use the developer tools you’re used to (shown on the Mac’s screen) while viewing the webpage in its native form (on the iPhone). Highlighting sections of code in the code inspector highlights the corresponding element in Safari on the iPhone. It’s pretty cool and useful!

Chrome Canary Developer Tools Emulation

Also Chrome Canary has an awesome new built-in emulation feature. This lets you work directly in the browser (basically shrinking the browser viewing area to the size of the selected device screen). Here’s how to use it:
  • Open up developer tools
  • Open up the console by pressing the escape key
  • Click the emulation tab
  • Select the mobile device you’d like to emulate and off you go!
You can learn more about Chrome’s mobile emulation tool here: https://developer.chrome.com/devtools/docs/mobile-emulation

Others

  • Saucelabs.com – offers a cloud-based Android emulation tool. However, the device only emulates one screen size.
  • Browserstack.com – allows for debug/development across multiple mobile devices, all in the cloud. The subscription cost may be a bit expensive if you aren’t working with mobile development everyday.

Whichever tool you decide to use, let Due North Studios know if you need some help. We’ve worked on a number of responsive web development projects and would be happy to lend a hand.