Test your responsive web designs with free new Google tool

Testing a responsive site just got a lot easier with Google Resizer.

Google Resizer

Here's a quick and easy way to test responsive designs

Responsive web design is no longer an optional extra – if you want your site or app to reach the largest possible audience then you need to ensure that it looks just as good on an Android phone as it does on an iPad Pro or a massive desktop monitor.

Which is great in theory; however there's no real one-size-fits-all solution for responsive design, meaning that launching a responsive site can be a bit of a shot in the dark. Who can afford to test on every conceivable device?

Google Resizer - tablet view

You can view the same site across a number of sizes and orientations

There's help available, of course. Google's Material Design guidelines are great repository of information on responsive design topics such as breakpoints, responsive grids, surface behaviours, and user interface patterns, and beyond the theory Google now has a way to help you test that it's all working.

Resizer is a simple and brilliant site for testing responsive designs. You can just type in the URL of your site and see how it looks across the most common desktop and mobile resolutions and orientations, from a phone in portrait mode up to widescreen HD monitors.

Google Resizer - three devices

You can even view a site on three devices, live

You can switch between different views instantly, making it easy to see how various users view your site, and to spot any problems in your responsive design.

And if you need a little inspiration, Google has included a couple of demos with Resizer that show off the possibilities of responsive design: click on its address bar and instead of typing in your URL, select either Pesto or Shrine from the drop-down.

Google Resizer - Pesto

Resizer include two demo apps to demonstrate responsive design's potential

Pesto is a recipe app that demonstrates a few responsive patterns, using a grid list that reflows based on screen size, while Shrine is a shopping app that uses a different type of responsive grid list that changes navigation patterns based on screen size, rather than simply rescaling.

Resizer is free to use now, and it's just one of Google's web design resources. You can find more here.

Like this? Read these!

ABOUT THE AUTHOR

Jim McCauley is a writer, editor and occasional podcaster, and is available for space parties.