If you're interested there's now a post on the process of building Am I Responsive
A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.
We spend hours curating the best content, interview industry leaders and send it to you every Friday. For Free. If you don’t love it, unsubscribe at any time.
Now you can check the responsiveness on any site with a single click from your very own browser, no need to come back here to type in the URL.
To do so simply drag the button below up into your bookmarklets bar and you're away!
http://localhost/works so it's great for taking screenshots of local development URLs
I'm always trying to improve the tool so please tweet me your feedback on bugs and suggestions.
I take a lot of screen shots of the various device breakpoints for responsive design and it takes a while to prepare them. This tools allows me to get what I need quickly, and hopefully it can be helpful for showing your more visual clients what you mean by responsive design when a suite of products isn't at the ready.
This is not a tool for testing, it is really important that you do that on real devices. This instead is a tool for quick screenshots (for me) and to visually allow people to “get” what you mean in client meetings.
The viewports I have chosen are based on the devices that were a part of the responsive PSD layout I previously bought, and yes they are all Apple. Apologies to all the Android fans out there, I'm sure a few of you have the “Android has a bigger market share” argument in mind but although you're right I just didn't have that suite of images when I started. If there's enough of a desire I could do a suite of other products, but I'm just not sure if adding those will improve the basic function of the tool.
#fffbecause if it isn't set on the previewed site you see device image instead.
<div>'s are more than the visible image so you might need to play around a bit with where you can click. Thanks Tim.
The website that you're trying to view on Am I Responsive has X-Frame Options set to Same Origin or Deny. This isn't great for the tool, but it is a great thing for a more secure web.