Two apps for your responsive design tool belt

Posted on by

While developing this site, I was testing its responsiveness with that age-old method of resizing my browser window. In my case, I was testing in Chrome on my Mac. What I didn’t realise, though, was that my instance of Chrome will not resize below 400px and that I really wasn’t testing my 320px breakpoint.

This became very clear when I actually tested the site on my iPhone in portrait mode.

When I tweeted about this, I got a stream of responses1. The first one that caught my eye was by Arjan Eising, urging me to try out responsivepx.com by none other than our very own Mr. Remy Sharp2.

ResponsivePX

ResponsivePX is basically the bee’s knees if you want to test out your responsive design at exact breakpoints. And you can test locally too. Did I mention that Remy is a genius?3

Here’s a screencast of Remy, showing ResponsivePX in action:

iWebInspector

I’m not really sure how I stumbled upon iWebInspector4 but it, too, is amazing. This Mac app by Maximilliano Firtman can launch and connect to the iOS Simulator and gives you a fully-blown web inspector to use when developing and debugging your web sites in Mobile Safari, Phonegap apps, or even custom hybrid apps5.

Just install and start up the app and press the Open iOS Simulator button to launch the iOS Simulator if it isn’t already running6, launch Mobile Safari and load a site, and then click the Load from Safari button to see your DOM magically appear. You can use the inspector just like the Elements Inspector in Chrome Developer Tools, Firebug for Firefox, or Opera’s Dragonfly.

How. Cool. Is. That!?7

I know for certain that these two apps are going to make my life so much easier, and I hope that you find them useful too. Here’s a huge thank-you to both Remy and Maximilliano for making then and sharing them with the community. Thanks, guys–you rock!

  1. I’m very lucky to have some lovely followers. Other suggestions included the commercial ProtoFluid app (thanks, John Morton), and Ripple (thanks, Dominic), Matt Kersleys tool (thanks, Matt Simon), and thank-you to everyone else who responded. You guys and gals rock.↩
  2. I swear Remy must have a little army of developers doing his bidding. It’s just not possible for one person to create so much awesome in the world.↩
  3. Remy is a genius.↩
  4. Isn’t it just fun, fun, fun trying to search your Twitter stream–or your mentions–for a specific tweet?↩
  5. Hybrid apps are native apps that use a WebKit component to render some or all of their User Interface or to implement a portion of their functionality. Most apps today make use of web technologies in some manner and probably fall somewhere on the hybrid spectrum.↩
  6. You can also easily launch the iOS Simulator using a Spotlight search. If you can’t find it, you may need to install Xcode.↩
  7. Very, very, cool, that’s how much!

Leave a Reply