Skip to content
December 16, 2012 / carlispina

Test a Website’s Responsiveness with Viewport Resizer

Viewport ResizerWith the number, sizes, and shapes of mobile devices proliferating, responsive web design principles offer a great way to create a single site that will work for virtually any device. This saves site designers from the need to anticipate and design for every device that their users could possibly use to visit their site. Testing responsive sites, however, still requires that the designer either resize a browser window to the exact size of each device screen or have access to examples of all of the major mobile devices. Tools are emerging to support responsive web designers and one that has been attracting some interest is Viewport Resizer.

This bookmarklet makes it easy to quickly see how a responsive site looks on screens of various sizes by shrinking the site to any resolution with the click of a button. Installing the bookmarklet is as easy as dragging and dropping it into your bookmark bar. From there testing is as simple as navigating to the page that you wish to test and clicking on the bookmarklet. The bookmarklet is available in a basic format that includes 5 default resolutions, an advanced version that includes 8 default resolutions, and a version that focuses on iOS devices. In addition, users can manually change the resolution or add and save additional resolutions that they use frequently. If you focus on developing sites for specific devices, Viewport Resizer also offers a tool that will help you customize your own bookmarklet with those devices that are most important to you as the default options with over 40 options to choose from.

I found that this bookmarklet worked well for testing responsive sites in portrait mode, but I did have trouble shifting automatically to landscape view. It is also worth noting that this tool is solely designed for testing responsive sites; it will not detect and display redirects to mobile sites. But, in spite of these limitations, this is a useful tool for those who want to quickly test responsive websites during the design process.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: