Responsive web design comes to the life with the advantages that help us to create the mobile friendly website. Responsive design is a design that can stretch and rearrange itself based on the width of the browser rendering the site. This technique works based on a mix of flexible grids and layouts, images and an intelligent use of CSS media queries, which will make websites can automatically switch to accommodate for resolution, image size and scripting abilities when users switching their devices.
Basically, the responsive website will automatically arrange the layout based on the breakpoints (the screen resolutions). To help the designers can create perfect responsive design; there are some tools which allow designers to preview responsive sites at different breakpoints. Resizer is a new project to do that, it is provided by Google.
Google is a giant in the world of internet; it has a tremendous impact with internet in particular and computer science in general. And of course, Google also affects web design. For example, Google Fonts is dominating font serving with over 70% of web developers/ designers who rely primarily on it, or Material Design is a design-language which Google announced to replace Flat Design. When Google says “good”, it is frequently taken as ‘best practice’.
So, that’s why the web designers now should pay attention to Resizer. Google already offers guidance for Material Design around the breakpoints:
- 480, 600, 840, 960, 1280, 1440, and 1600dp
They are the breakpoint widths that material design user interfaces should adapt to optimize for best user experience. So, that is the exact number that the designers need to follow to get the best results. And Resizer came to helping us test our designs; it follows the same principle as guide from Google and offers laptop and mobile previews at set breakpoints:
- 480px, 600px, 840px, 960px, 1280px, 1440px, or 1600px wide for Desktop or Laptop screens.
- 360px, 600px, 720px, or 1024px wide For Mobile screens.
That is a good cross-section of sizing (although it doesn’t come close to the full range of Android devices). But still have a fundamental error in the approach: the good responsive design uses content breakpoints, not viewport breakpoints. Not important about size of screen which Samsung use for their next phone, what matters is at what size your content breaks.
Today, most site design applications (ex Adobe Muse) correctly allow for custom breakpoints, which ensure that media queries are written for your content, not a hypothetical device.
Resizer was created specifically to test some of Material Design viewport breakpoints. With the endorsement of Google, Resizer will perpetuate the myth of responsive sites as a series of viewport sizes, rather than as fluid device-agnostic content. Btw, Resizer is still a useful tool for web designers.