Zooming Squishes

There has been some talk recently about turning off responsive design: Bruce Lawson, Webmonkey, and I also I wrote about it a while back. To be clear, I’m a big fan of responsive design, but I hope we can all agree there is no sense being dogmatic about a tool.

As fate would have it, I got an email from a reader:

I work with a 13″ MacBook Air and I use zoom a lot while surfing around because I haven’t the best eyesight.

Your site is difficult to do this because, the global % width is squeezing the content in. I found this “bug” in a lot of RWD websites. It makes it hard for me to access to the content.

They are right. A few zooms isn’t a big deal, but when you get to four or five the content gets pretty garbled up.

Just out of curiosity, I asked: “Would it be better for you if the page expanded wider than the width of the browser window? So you’d have to horizontally scroll as well?”

Yes, I prefer scrolling horizontally. I think if I’m the cause of breaking the page by zooming in, It’s also my responsibility also to scroll horizontally.

That’s interesting to hear, since horizontal scrolling is one of those universally reviled things by web designers that we try and avoid at all costs. Even in the fixed width days. Should we bump up to *gasp* 1024px wide sites? No! It might cause horizontal scrolling!

To be clear, I still think it’s a bad thing, it’s just interesting that someone feels “responsibility” to do it if they “break” the page. It’s a bummer they need to feel like they need to “break” the site to be able to read it at all.

This is my fault. But EM-Based media queries can fix! Kinda!

My media queries were in pixels. If changed them into EMs, then as you zoom in, the EM size changes, and the media queries should take effect where the pixel ones would not. So that’s what I did and it works great! But please note: you have to refresh the screen to see the media query take effect, it doesn’t happen as you zoom. I wish it would, but I also suspect people who do this a lot know to refresh. Also in my experience, at least Chrome is particularly persistant with your preferred zoom level on a site-by-site basis.

My base font size is 16px, so I just did a “Find in Project” for every single one of them and converted them.

@media (max-width: 1200px) { }

became

@media (max-width: 75em) { }

Fortunately I use fancy Sass @content mixins, so the vast majority of them were changed by changing one mixin.

Note that I even notch down my font-size for smaller widths, but the browser zoom is more than enough to actually make the text larger.

Also credit where credit is due, Lyza Gardner showed us the advantages of em-based media queries nearly a year ago.

Too big of an assumption?

So now I’ve “fixed” this and the layout no longer “breaks” when zoomed in. But is this absolutely better for the reader who wrote to me? They specifically told me they preferred horizontal scrolling and that’s not the solution I delivered. I’m assuming that a non-broken layout without horizontal scrolling is even better. But who knows, maybe they don’t like the mobile layout, even thought I don’t limit what you can do. Always a dance.