When building a responsive site there may come a time when you may want to create a screenshot of how your new responsive design looks on all those different devices. I know I have been asked to make them on a number of occasions for presentations and other marketing material. It’s not hard to make them but it can be time consuming. Well not anymore.
The good folks over at “Am I Responsive – http://ami.responsivedesign.is” have created a handy little web based tool that does exactly that.
How it works
- Add your URL to the input field
- Click GO (reloads the preview) or press Enter (reloads the page)
- Admire your good work
You can see an example by visiting their site or just look at the images used at the bottom of this post.
The best part for me is that I can actually enter a URL for a site that is behind a firewall or even a local file and still get the pages rendered on the fly.
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.
Here are a few examples I produced in less than a few minutes on a few of the projects I am currently working on:
Prudential Branded Bootstrap