Responsive Screenshots Website (http://ami.responsivedesign.is)
How it works
1. Add your URL to the input field
2. Click GO (reloads the preview) or press Enter (reloads the page)
3. Admire your good work
If you’re interested there’s now a post on the process of building Am I Responsive
Features
http://localhost/works so it’s great for taking screenshots of local development URLs- Send someone a link with your site already embeded by using
?url=http://www.yoursite.com–example - Rearrange and reorder the devices by clicking and dragging on the device
- Now you can check the responsiveness on any site with a single click. Simply drag this Am I Responsive Bookmarklet to your bookmarks bar and you’re away!
I’m always trying to improve the tool so please tweet me your feedback on bugs and suggestions.
About Am I Responsive
A time saving exercise by @justinavery for RWD Weekly Newsletter
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.
Viewports
- Desktop
- 1600x992px scaled down to
scale(0.3181) - Laptop
- 1280x802px scaled down to
scale(0.277) - Tablet
- 768x1024px scaled down to
scale(0.219) - Mobile
- 320x480px scaled down to
scale(0.219)
A note on the viewports
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.