11/02/13 Added a check to remove a # at the end of a URL, it was upsetting the layout.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.23/02/13 Updated the instructions to explain how to embed your site in a link and how to move and reorder the devices.07/09/13 Added the Am I Responsive Bookmarklet capabilities.14/09/13 Added support for the transforms across IE6-IE8 thanks to - updated through GitHub Issues.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. 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. 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. 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 This instead is a tool for quick screenshots (for me) and to visually allow people to “get” what you mean in client meetings. This is not a tool for testing, it is really important that you do that on real devices. 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. I take a lot of screen shots of the various device breakpoints for responsive design and it takes a while to prepare them. About Am I ResponsiveĪ time saving exercise by Justin Avery for RWD Weekly Newsletter I'm always trying to improve the tool so please tweet me your feedback on bugs and suggestions. Simply drag this Am I Responsive Bookmarklet to your bookmarks bar and you're away! Now you can check the responsiveness on any site with a single click.Rearrange and reorder the devices by clicking and dragging on the device.Send someone a link with your site already embedded by using ?url= - example.works so it's great for taking screenshots of local development URLs.To do so simply drag the button below up into your bookmarklets bar and you're away! 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.
0 kommentar(er)
