If you’re manually resizing your browser window to test responsive designs, you’re making life unnecessarily difficult for yourself! A Responsive Design View tool appeared in Firefox 15 and there’s a Responsive Web Design Bookmarklet which works in most browsers.
But bookmarklets can always be bettered! Viewport Resizer is an stunning responsive design tool created by Malte Wassermann.
The bookmarklet loads a toolbar at the top of the screen. The icons on the left allow you to switch between various sizes which are described in the text section on the middle of the bar. Note that some icons provide a hint, i.e. “5” is for an iPhone 5 resolution. You can click an icon multiple times to switch between landscape and portrait view. On the right, there are icons to refresh the page, display information and close the toolbar.
The best part: Viewport Resizer is totally configurable. The home page allows you to select an initial range of screen resolution sizes and build your own custom bookmarklet. You can also add sizes on the fly and re-save the bookmarklet again.
However, what stands out most is the attention to detail. CSS3 animations are used throughout, but they’re subtle and useful rather than obtrusive. It’s an impressive piece of work. Viewport Resizer is certainly the best responsive web design tool I’ve seen, and possibly the best bookmarklet ever devised!
Even if you have no interest in responsive web design, visit lab.maltewassermann.com/viewport-resizer/ using Firefox, Chrome or Safari for the best experience. The bookmarklet also works in Opera but few of the animated effects are shown. IE10 loads the toolbar but not the page — I hope that can be fixed soon.
Viewport Resizer is an amazing free tool — get it today.
Frequently Asked Questions (FAQs) about Viewport Resizer Bookmarklet
What is a Viewport Resizer Bookmarklet?
A Viewport Resizer Bookmarklet is a handy tool that allows you to test how your website or any other webpage looks on different screen sizes. It’s a small piece of JavaScript code that you can save in your browser’s bookmarks bar. When clicked, it adjusts the size of your browser window to mimic various device screen sizes, such as smartphones, tablets, and desktops. This tool is particularly useful for web developers and designers who need to ensure their websites are responsive and provide a good user experience across all devices.
How do I install the Viewport Resizer Bookmarklet?
Installing the Viewport Resizer Bookmarklet is a simple process. First, you need to drag the bookmarklet link to your bookmarks bar. If your bookmarks bar isn’t visible, you can enable it in your browser’s settings. Once the bookmarklet is in your bookmarks bar, you can click on it whenever you want to resize your browser window. The bookmarklet will automatically adjust the size of your browser window to mimic various device screen sizes.
Can I use the Viewport Resizer Bookmarklet on any website?
Yes, the Viewport Resizer Bookmarklet can be used on any website. It’s a versatile tool that allows you to test how any webpage looks on different screen sizes. Whether you’re a web developer testing your own website or a user wanting to see how a webpage looks on a different device, the Viewport Resizer Bookmarklet can help.
Is the Viewport Resizer Bookmarklet compatible with all browsers?
The Viewport Resizer Bookmarklet is compatible with most modern browsers, including Google Chrome, Mozilla Firefox, and Safari. However, it may not work properly on older browsers or browsers that don’t support JavaScript.
How accurate is the Viewport Resizer Bookmarklet?
The Viewport Resizer Bookmarklet is designed to be as accurate as possible. However, it’s important to note that it mimics device screen sizes by adjusting the size of your browser window, not by emulating the device itself. Therefore, while it can give you a good idea of how a webpage will look on different devices, it may not perfectly replicate the user experience on those devices.
Can I customize the Viewport Resizer Bookmarklet?
Yes, some versions of the Viewport Resizer Bookmarklet allow you to customize the screen sizes it mimics. This can be particularly useful if you want to test how a webpage looks on a specific device or a custom screen size.
Is the Viewport Resizer Bookmarklet safe to use?
Yes, the Viewport Resizer Bookmarklet is safe to use. It’s a simple piece of JavaScript code that adjusts the size of your browser window. It doesn’t collect any personal data or interact with the websites you visit in any harmful way.
Does the Viewport Resizer Bookmarklet affect website performance?
No, the Viewport Resizer Bookmarklet doesn’t affect website performance. It simply adjusts the size of your browser window, which doesn’t have any impact on the performance of the websites you visit.
Can I use the Viewport Resizer Bookmarklet offline?
Yes, once the Viewport Resizer Bookmarklet is installed in your bookmarks bar, you can use it offline. However, you’ll need to be online to visit the websites you want to test.
Is the Viewport Resizer Bookmarklet free to use?
Yes, the Viewport Resizer Bookmarklet is free to use. It’s a handy tool for web developers and designers, and anyone else who wants to see how a webpage looks on different screen sizes.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
