Google has launched a new service named Resizer. Google resizer is basically an interactive viewer which helps you to view your website in various design breakpoints across devices like Desktop, Mobile and Tablet. This service would help you test your website under some pre-defined breakpoints that Google has come up with across various devices. As per Google Designs, for optimal user experience, the website should adapt its layouts ideally for the breakpoint widths like 480px, 600px, 840px, 960px, 1280px, 1440px, and 1600dp.

What is the benefit of using Google Resizer ?

Well to start with I would say that Google Resizer would let you test your website under a combination of different breakpoints across different devices. On a Desktop device you’ll be able to see how does your website respond to the Breakpoints like 480px, 600px, 840px, 960px, 1280px, 1440px ,1600px and 1920px. However if you select the mobile device under Resizer, you get breakpoints like 360px, 600px, 720px and 1024px.

You can use Google Resizer to even show your site to your designer or stakeholders to give them a feel of how would your website look on various device breakpoints.

How do I use Google Resizer ?

Using Google Resizer is really simple. All you need to do is :

  1. Visit Google Resizer’s webpage at http://design.google.com/resizer/
  2. Type your website’s address in the address bar given on the top of the webpage and hit Enter. For example, this is how this page would look on Google Resizer.
  3. Once your webpage loads in the mockup screens shown on the homepage, you are ready to go.
  4. You may switch between devices from the Device Icons given on the top of the page.
  5. Once you have selected a Device, you can choose to view your page under different breakpoints by clicking on the Breakpoint value specified right under the address bar.

Well, that’s pretty much it. You can now play around with different breakpoints.

While the Google Resizer seems to be a good service, I really suggest that you develop your webpages to be fluid and responsive so that it looks good on devices whose breakpoint might be between the ones provided by Google Resizer. Never develop your webpages just for these breakpoints.

Hope you liked the tool. Let us know about your views on Google Resizer.

Related Posts

  • How to optimize png images ? Well its a fact that a large number of us use PNG images on their website. Most of us might keep images in PNG format for the sake of transparency, clarity and so on. […]
  • Px to Em conversion With a variety of browsers flooding the market and fluid design being a concern, Front-End developers try to be more alert with their code and the unit of measurements […]
  • How to make or convert LTR website to a RTL or Right-to-left Website? I'm sure all of us want our websites to be visited and loved by people all over the world. And yes we would also like it to be shared on social media sites where people […]
  • How to Minify a Javascript File? The web technology today has improved dramatically and the way scripting is done on websites have changed drastically over the years now. Gone are the days when […]
  • What are source maps? With all the optimization techniques like bundling and minification etc getting important and popular it is good that we talk about Source Maps now. Think of this, once […]
  • Unsemantic CSS framework tutorial What is Unsemantic? Unsemantic is a CSS framework that is responsive and based on fluid grid system that uses percentages instead of fixed pixels.  Like any other CSS […]