Add captionFeatureshttp://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 ResponsiveA 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 viewportsThe 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. Updates- 14/09/13 Added support for the transforms across IE6-IE8 thanks to @ingozoell - updated through GitHub Issues
- 07/09/13 Added the Am I Responsive Bookmarklet capabilities.
- 23/02/13 Updated the instructions to explain how to embed your site in a link and how to move and reorder the devices.
- 23/02/13 Updated the iFrame background color to be
#fff because if it isn't set on the previewed site you see device image instead. - 11/02/13 Added a check to remove a # at the end of a URL, it was upsetting the layout.
- 10/02/13 Updated so that pressing enter after adding a url will use the ?url get variable to update the iframes. This also means that you could share a link like http://ami.responsivedesign.is?url=http://www.thegreatdiscontent.com and it will load it up, helpful for emailing clients.
- 09/02/13 Added jQuery UI for the ability to drag the elements around the page. Remember that the
<div>'s are more than the visible image so you might need to play around a bit with where you can click. Thanks Tim. - 09/02/13 update the layout to be responsive across devices (even though it was just a tool for screenshots), although the iframes are WAY taller on tablet and iphone then they should be, still need to fix that... thanks
|
No comments