The Wall Street Journal has an interesting article this morning…

Apple Tests Larger Screens for iPhones, iPads

It got me to thinking about responsive design, specifically the matter of using breakpoints vs. fluid layouts.

The breakpoints I’m using for the gench project correspond to devices, even though I’m aware the experts prefer design-based breakpoints to device-based ones. In other words, since it’s not feasible or economical to create a breakpoint for every device, the site design itself should suggest the breakpoints. The breakpoints needed for a particular design do become rather obvious when one resizes the web browser: there are literally points where the layout breaks apart. In the case of the gench site, the device breakpoints were roughly the same as the design-dictated breakpoints (thanks largely to basing my theme on the Omega theme).

It’s difficult to not be influenced by actual devices. I mean, I’m going to have to test the site on as many devices as I can lay my hands on. I’m fortunate to have two generations of iPhones, an iPad and a Kindle Fire in the house. My wider breakpoints correspond to the vertical and horizontal dimensions of the iPad and Kindle, and my smallest breakpoint occurs at a width a bit narrower than the Kindle vertical breakpoint, making the design fluid for all smaller devices.

This strategy isn’t terrible. It’s ensuring an excellent experience on the aforementioned devices, and for any device I’m not covering, I figure the experience won’t be bad. It’s certainly a big improvement over the client’s current site which is not responsive at all.

But it’s beginning to become obvious to me how much more efficient it is to design one fluid and adaptive design for a site rather than use breakpoints. I predict the proliferation of devices of different sizes will make breakpoint-based responsive design untenable in the future. I suspect it already is for busy Drupal shops who want to realize a profit. After all: time is money, and the more versions of the site that have to be designed, tested and maintained, the more effort,time and hence cost required.

So why do site designers use breakpoints? Because they provide greater precision in terms of placement of site components. They allow designers to design to a grid and maintain relative positioning as the site shrinks to fit smaller displays. It’s important to many clients that their site look essentially the same across all devices. I’m sure many art directors and marketing managers feel that consistent presentation of their site is essential to their brand. But is it? Is it really worth the extra cost?

I think most website visitors possess more design sophistication than marketers generally suppose. I seriously doubt a different layout on different devices confuses today’s visitors or weakens the company’s brand in any way. As long as there are other uniting design characteristics such as typography, color palette and illustration styles, visitors know what site they’re on and forgive slight placement variations.

As website designers, we have a responsibility to give our clients what they want, but we also have the responsibility to educate, innovate and keep project costs from spiraling out of control. We need to demonstrate that in spite of the trade-offs, a fluid design can deliver a compelling user experience.

I’ve decided the next site I build (thomasdimuzio.com) will be completely fluid and without breakpoints – I’ll let you know how it goes.