Google challenges responsive best practice with Resizer

Since the advent of responsive web design, entrepreneurs, designers, hobbyists, prototyping startups, and design applications have been releasing tools to allow us to preview our designs at different breakpoints. The latest to throw their hat into the ring is Google with their new Resizer project, designed to allow designers to preview responsive sites at different breakpoints.  The significance of Google entering the market with a solution is that through its sheer size, Google carries enormous weight within the design community. Whether it’s Google Fonts dominating font serving (a recent WebdesignerDepot poll showed 70% of our readers rely primarily on Google Fonts), or the supplanting of Flat Design by Material Design, anything Google says about web design is frequently taken as ​‘best practice’. So it’s a valid cause for concern when Google advocates an approach that’s contrary to established standards. Google’s Material Design specification already offers guidance around breakpoints: 

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp. 

Resizer follows the same principle: it offers laptop and mobile previews at set breakpoints. Laptop (or desktop) screens can be 480px, 600px, 840px, 960px, 1280px, 1440px, or 1600px wide. Mobile screens can be 360px, 600px, 720px, or 1024px wide.  Whilst that is a good cross-section of sizing — although notably doesn’t come close to the full range of Android devices — there is a fundamental error in the approach: Good responsive design uses content breakpoints, not viewport breakpoints; it shouldn’t matter what size Samsung makes its next phone, what matters is at what size your content breaks.  Most site design applications — the latest Adobe Muse for example — correctly allow for custom breakpoints, which ensures that media queries are written for your content, not a hypothetical device. Resizer is specifically designed to test for (some of) Material Design’s viewport breakpoints. The danger is that Resizer, with Google’s endorsement, will perpetuate the myth of responsive sites as a series of viewport sizes, rather than as fluid device-agnostic content.