Zoomfusion

I know I’m not the sharpest knife in the drawer but there’s one recurring topic that makes me feel downright stupid. I’ve heard a lot of my fellow designer/developers talking about how page zoom (rather than text zoom) spells the death of liquid layouts.

Now, forgive me for being dense, but I just don’t get it. I totally understand how page zoom could spell the death of elastic layouts; using ems for layout won’t be necessary if browsers natively resize pixel-based layouts. But both pixel- and em-based layouts have a set width and that width doesn’t change depending on the width of the browser window.

A liquid layout will resize depending on the browser width, right? Page zooming doesn’t do away with that flexibility. If I open a fixed or elastic width page in a browser window that’s narrower than the size dictated by the designer, I’ll get a crawlbar. Now I could use the browser’s page zoom feature to shrink down everything until the content fits within my browser window but the content would become illegible.

Text-resizing and viewport-resizing are related only in as much as they are both ingredients in good bulletproof design:

  1. Ensuring that a design works for different text sizes.
  2. Ensuring that a design works for different viewport sizes.

Native page-zooming in browsers obviates the first concern. It does absolutely nothing for the second concern.

I’m perplexed. Either a whole swathe of my peers are confusing elastic and liquid layouts or I’m missing something fundamental.

A more plausible explanation for this strange equation of page zoom and liquid layout mortality is that designers who have already decided that they don’t want to deal with liquid layouts—for the very understandable reason that they’re harder to do than fixed layouts—are attempting to retroactively justify that decision without really thinking through the argument.

Rather than clutching at ill-thought-out strawmen like page zooming, their time might be better spent reading a good book.

Have you published a response to this? :

Comments

"…a whole swathe of my peers are confusing elastic and liquid layouts"

Bingo.

# Posted by Cennydd on Wednesday, May 6th, 2009 at 1:00pm

I would think given Ethan Marcotte’s recent A List Apart article on Flexible Grids, and his subsequent addendum to that article on his blog regarding flexible images, the whole page zoom / text zoom issue would be rendered moot with regard to liquid layouts.

In this case I’d ask to see a working example that proves the "death factor" for liquid layouts using text zoom / page zoom.

Until an example can be provided that proves death by zoom of a liquid layout I am with Jeremy on this one. BTW, Thanks for the book recommendation I’ll have to pick that one up.

# Posted by Jeffrey G. Allen on Wednesday, May 6th, 2009 at 5:35pm

"Either a whole swathe of my peers are confusing elastic and liquid layouts"

I wouldn’t underestimate the likelihood of this. I’ve always found these terms absolutely terrible and had a lot of difficulty remembering which was which in the first place.

Kudos on the "crawlbar" post, BTW. You seem to be quite good at coming up with more accessible terminology - how about fixing "fluid"/"liquid"/"elastic" for us, too :-)

A baby oft thrown out with the text zoom bath water is that purpose of designing for different text sizes is only loosely coupled to any zoom controls in the user’s browser.

To test that a design doesn’t fall apart when text is resized is to test for the brittleness of the implementation.

Will the site behave well if a low-vision user has a custom stylesheet with large font sizes; that’s one thing. But also, if we change the content in 6 months time, does the layout still hold together? What will happen if a content editor puts an image somewhere never anticipated? How about if we want to refresh the typography at some point without a full redesign?

It is in the web’s nature to be robust, so anything we add to it must be similarly robust.

I’ve also had people assume that using pixel sizes for text is also now acceptable thanks to zooming. Just not true. Why would you need to anyway?

I always appreciate a thought through liquid layout - "thought through" being the operative words there.

# Posted by Matt Bee on Thursday, May 7th, 2009 at 3:04pm

My thoughts exactly… I’m hoping Ethan’s Fluid Grids article (http://www.alistapart.com/articles/fluidgrids/) proves to be a big step forward in getting more designers on-board with this.

Failing that how about a nasty little "I’m Flexible, not Fixed in my ways" campaign.

# Posted by Tom H on Thursday, May 7th, 2009 at 7:47pm

Hooray! Finally something about browser zoom which makes a whole load of sense…

plus surely we will need to keep coding with em’s for the older browsers?

There seems to be a missing term, unless "hybrid" layout is what I’m looking for. Your comment—‘If I open a fixed or elastic width page in a browser window that’s narrower than the size dictated by the "designer", I’ll get a crawlbar’—is not always the case. Take 456 Berea St, for example. This site has (what I assume is) an elastic layout (sized in ems) but is fluid once the browser window becomes narrower than the set width. Is that what "hybrid" means? If so, we need a better term. Is "fluid-elastic" too bland?

I look forward to reading the Gillenwater book. Thanks for directing us to it.

I turned page zooming off. Just because I want bigger text doesn’t mean I want the whole page to be bigger. And you’re right. Fixed width layouts work really badly with page zoom.