Responsive web design and Google’s new Resizer approach

Andrea Ferguson

President at AndiSites Inc.
Andi is founder and President of AndiSites Inc. She writes about website design and development, best practices, and random stuff her busy brain thinks would be useful.
Andrea Ferguson

(NOTE: This post was written in collaboration with Alex Centeno, AndiSites’ Director of Digital.)

What is responsive web design?

Responsive web design creates mobile-friendly websites that provide optimal viewing and interaction experiences. This means easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices, from desktop computer monitors to mobile phones. Responsive design allows a single website to respond to a user’s screen size by automatically hiding some elements, stacking content, resizing images, etc. There is no need for a separate “mobile” website.

Responsive design makes the content “fit” on different-sized screens. If you use a website on a mobile phone, it should look and behave a certain way in that size. So when we’re developing a mobile-friendly website, we hide or resize some elements; replace images with mobile-friendly ones; compress some elements further to save bandwidth; and load elements selectively. Significantly, we define “breakpoints” that tell the mobile-friendly website when to modify the look and feel of the display.

There are many tools (e.g., Responsinator, Responsive.is, Google Chrome’s Dev Tools) that let us preview a mobile-responsive site during the development process and see how our breakpoints are working. Now, there’s also Google Resizer.

Hooray, right? Maybe. Maybe not.

Why is there a question?

Google’s Resizer is based on the assumption that breakpoints should be predetermined for “common” screen widths of 480px, 600px, 840px, 960px, 1280px, 1440px, and 1600px wide. According to Resizer, mobile screens are 360px, 600px, 720px, or 1024px wide.

Some developers, including Joe Casabona, think it best to let your content dictate the location of your breakpoints. In other words, customize breakpoints according to the particular website. If you have a chunk of important content that fragments at 754px, put a breakpoint there so that it will stay together and move as a piece. AndiSites subscribes to this philosophy.

Other developers prefer breakpoints at predetermined sizes, so you can control the look and feel for common screens. The problem with this approach is that available screen sizes change constantly, making it difficult to design sites based on what’s currently “common”. For example, Apple will soon announce their new 4 inch iPhone, which isn’t currently covered by the predetermined size approach.

Reponsive design is still relatively new, and opinions on best practices change as often as the screen sizes they address. We believe that designing a website without considering its content and uniqueness–whether for mobile or desktop–isn’t the best approach. Let’s make sure that our designs look and work great on the most popular devices. But also make sure sure that the mobile view of a client’s website meets their needs and their users’ needs best. Since each client’s content and offerings are unique, responsive design should treat them that way–no matter the device on which they are viewed.

Back to Blog