Sometimes showing a simple screenshot of your app or web service is not enough, it can be made look better and more appealing to your audience when shown in a beautiful environment, mocked-up inside mobile devices such as smartphones, tablets, laptops etc.
In this lesson we have hand-picked an awesome tool that not only allows you to live present your website in exciting device mockups but also test the responsiveness of any website, all instantly.
Am I Responsive? is simple, easy to use, yet powerful tool that allows you to know how responsive your website is by showing it off on different screen size devices.
How ‘Am I Responsive’ Works?
You can see any website live on a desktop, laptop, tablet and smartphone simply by visiting Ami.responsivedesign.is, pasting the URL of your website and hitting ENTER (or GO button). That’s it.
It shows you any website in following view ports:
- Mobile 320x480px scaled down to scale(0.219)
- Tablet 768x1024px scaled down to scale(0.219)
- Laptop 1280x802px scaled down to scale(0.277)
- Desktop 1600x992px scaled down to scale(0.3181)
The code is powerful enough to find whether you are logged-in on given website, it is also programmed in a way that you can take screenshots of local development URLs from localhost on LAMP, WAMP, XAMPP etc.
It provides unique URL for every website embedded in various screen sizes. You just need to copy the web address and you can send someone a link to your website showing up on different devices. You can also rearrange the devices by clicking and dragging them.
Only one limitation we have noticed about the service is, it has no built-in option; a button or something to save the screenshot of mocked-up images of your website. But no worries, you can still save the screenshot.
Saving Mocked-up Website Screenshots
You can manually take the screenshot by pressing PrntScr on your keyboard or any other screenshot option available for your device and then crop it to make it yours.
For large screenshot, switch your web browser to full screen (press F11), zoom in (Ctrl+) and take the shot. In the same way, you can take smaller screenshots by zooming out and hitting PrntScr or any other screenshot option on your device.