The Two Types of Browser Zoom

I had run into this issue a while ago, so I began developing sites with full page scaling (based on font size). I started doing this before firefox 3 came out, but the bonus to my approach is that it is cross browser compatible. Last I checked, it worked with all current browsers…

Here is a blog post I wrote about my technique a while ago:

http://www.forwardthinkingdesign.com/blog/thoughtful-design-relational-scaling

Great post - I’ve been using Opera since version 5 something and the zoom works excellently. I use it to watch embedded videos without the fullscreen option in almost the full size, oh yes it even scales flash :slight_smile:

Jeff, you’ve ruined the illusion! For so many things I not only agree with you, but I’ve been vocal enough about them for years – sometimes shortly before you cover the topic – that some coworkers joke I’ve been leading a secret double life by writing this blog. :stuck_out_tongue:

But this? I have a 30 monitor at 2560x1600 and even though I have good vision, for daily browsing I want high quality text that takes advantage of my monitor’s reasonably high DPI. But at the same time I also want high fidelity images! I simply can’t stand the blurriness that results from resampling images by 25%; what a muddy mess. It makes me feel like a contact lens has fallen out and quickly gives me a headache. Even though my display isn’t quite 120+ DPI, the slightly larger text size is perfect for my web browsing habits, especially with ClearType enabled.

My solution: I use IE8 (hey, I like it!) but I’ve written a plugin that patches the browser to provide basic text-only zoom that affects all text rendered by the HTML engine. It’s not perfect, but it’s good enough for my own use.

That said, I don’t think full-page zoom is a bad feature by any measure. I have a spare TV hooked up to my 52 1080p LCD TV ten feet away, and full-page zoom with IE8 works excellent in that scenario. As you illustrate there are indeed people who like it for regular browsing. I think both options should be provided by all browsers.

I want both the highest quality text my monitor can afford plus the highest quality images. At the same time. (And a pony, but I wouldn’t know where to put it.)

Anyway, I hope the web figures it out.

Have you ever tried using full page zoom with FF3 on an older computer and scrolling the display? The CPU shoots to 100% and the whole machine slows to a crawl while the display slowly, jerkily, crawls up the screen. I’ve turned off full page zoom specifically because it’s the difference between FF3 being (mostly) usable and completely unusable on older machines.

Wrong! Wrong! Wrong!

Ninety-nine percent of the web pages I visit in a day are NOT complex web applications. They are simply informational pages with default fonts that are way too small. The ones that are web applications are mostly simplistic applications with crappy UI that probably should have been plain ol’ HTML pages.

(I have yet to see a web application that can compete with a decent native application in terms of UI.)

Some parts of the page layout should scale with the font size. Other parts should be constrained by other dimensions (like window size).

Web designers need to learn how to make more flexible layouts. They should stop assuming they know what fonts we have on our machines, or what DPI settings we use, or how big we like to keep our browser window, or how comfortable we are reading a certain text size, or what accessibility tweaks we’ve made in our local CSS. Web design is NOT graphic design. UI design isn’t either.

Most images on web pages are graphics, not photographs, and they look crappy when scaled at all. Most photographs should be left unscaled as well. (Photographs can scale down, but there’s little point in scaling them up.)

Your images of the Digg pages all look like fuzzy crap (to the point that I don’t see the point you’re trying to illustrate), because I run at 120 dpi (which is very close to the actual resolution of my panels). But at that nonstandard resolution, whole page scaling kicks in with Firefox and IE8. Now I have a horizontal scrollbar, which I NEED to shuffle left and right just to read the text, even though my window is over 1024 pixels wide. I want the old behavior back. Now!

You’re promoting the same fundamental error the Vista folks made when they penalized all the pre-Vista DPI-aware applications by default, forcing fuzzy text and graphics on unsuspecting users when they had perfectly good experiences on XP.

We finally have the flat, high-resolution, high-contrast, decent gamut, low-power displays that we dreamed of for decades of curved, wavy, humming, power-sucking, ionizing, degaussing, CRT indentured servitude. Now the manufacturers are bringing back the glare with glossy plastic, and the software people are making all the wrong scaling decisions because of the CRT legacy. I didn’t buy these multi-megapixels beasts because I want more in front of me; I bought them because I want what’s in front of me to look better.

If I see another web page with scrollbars when I have my browser at 1920 pixels wide, I’m gonna unplug my network cable.

Really web developers should build websites that do text based zooming properly as well… and not to rely on browsers to fix their mistakes.

With text based zooming (the one I prefer), the main advantage is that a fixed width website (page width specified in px), with a particularly long line length (e.g. 40+ words), users may read the same line twice, or may even skip a line… by allowing the font size to increase, yet keep the containing element at the same size, it makes it allot easier to read (increased line height and less words per line), rather than just making everything bigger.

I was looking for strange bugs in FF one day. CSS seemed slightly off, images looked to be the right size but were blurry. It was just confusing, and it was only my computer.

Ctrl-0 - reset zoom - problem solved.

It must have happened a different time while testing zoom on various pages in the site. The issue was that somehow zoom went up, and when it came back down (say 1.1 - and yes I did use the scroll wheel) all the graphics would either round up or down, and the ones that rounded 1 pixel up became slightly inflated but blurred.

Good feature though. Full-page zoom is far better than other methods. CSS purists can go on all day how they can create the perfect website, but for those of us that have to deal with life, it’s a very practical solution.

In the end, we all know that practical solutions that pave flat the inconsistencies in life are far more effective than an ivory tower of perfection. i.e. there are too many punters who will never write proper CSS websites, so might as well make a smarter browser.

I’d love a CSS pure world, but it’s like trying to convince all the teenagers with video cameras to take classes in film school before they upload photos of their friends falling off things.

You should do an article about alternative style sheets and user styles which give the web site visitor the power to override the intended CSS. Most web developers and web designers don’t realize that they aren’t the final authority on the web site’s design. And most web site visitors don’t realize how much power they have to tweak the look of their favorite web sites regardless of what options have been built into the design.

FWIW, I’ve noticed that many internet terminals in libraries disable the browser menus, leaving little more than an address bar, home and back buttons.

So, I’m still in favor of websites providing their own font-size controls on the page for people who can’t (or don’t know how to) adjust the zoom through their browsers.

What would be great is if you could hold down a key and use the mouse wheel to zoom the entire desktop.

Every UI element of the OS and applications should be vector graphics. I can’t believe we haven’t got this yet. Imagine future displays with near-infinitesimal pixels: a 1000 pixel-per-inch monitor. Windows can’t handle that.

I wonder if Microsoft or Apple are even working on such an operating system.

Couldn’t agree with you more on this one Jeff! The page zoom feature should be push to major browsers, IE already has the page zoom feature…still awaits FF!

I wish more browsers would take the lead from Firefox 3, and adopt full page zoom as the new default page sizing method.

Don’t you mean take the lead from Opera, and ?

look, usability is hard. the best you can do is desperately try to find a rule which pisses off the least # of people for your default features / implementations.

so… until somebody does some kind of actual study, i’ll stick to my personal view that zooming sucks poopy buttocks like nothing else, and old-school text sizing is the Right Thing, and that web sites which doesn’t support it are Jackass Bastards. i mean, come on, anything which causes a horizontal scroll bar to suddenly be needed sucks ass.

imhumbleo.

hugs.

Am I missing something here?
IE7 was the first browser I saw that did Full-Page zoom. Firefox came late to that party.

I can’t just check right now since I’m running IE8 Beta, but I’m almost 100% sure IE7 did that too.

I have seen several comments that people are blaming bad designs for font size scaling but in a business world clients dont want to pay extra for the hours designers spend playing around resizing their designs to make sure it works in a 0.1% poor eyesight / sat over the other side of the room market.

I love full page zooming now its done properly (ff3) the ie7 version wasnt very good in my opinion with all the visual glitches and when you zoomed down again it didnt return to its original size.

The point im making anyway is that the full page zooming is better because it works and its free (free as in zero effort)

I can’t imagine myself browsing with Internet Explorer… FWRP! (see I just threw up in my mouth a little thinking about it) but that doesn’t mean that I don’t think that anyone else uses it.

The same applies to text only zoom (minus the vomit). I seldom use it myself, but obviously some people swear by it. Any browser without full page zoom is useless to me (and my 52 inch display).

I’m a little bit shocked whenever anyone suggests that if they aren’t using it, then it must not matter. There is always someone with a view 180 degrees out from yours and obviously the text vs whole-page zoom issue has two (disturbingly passionate) points of view. The only good solution is to leave it up to the idividual user (remember them?). Any browser that fails in that is giving up on a portion of it’s potential maketshare.

The folks complaining about inferior website programming and design have legitimate gripes. However, the reality is that while poorly designed sites risk shooting themselves in the foot, a browser that can’t display sites the users want to see are destined to fail.

There’s no reason to make this a one or the other choice. Leave both options on the table and let the users surf and be happy.

On a side note, for anyone who hasn’t tried Opera… Why? It’s solid, stable, and user friendly. Try it out and see where the features that you love in the other browsers originated.

NOW I know why all the pictures on firefox have SUCKED since a recent upgrade. Until they find a better way to resample lo-res images, I’ll find that checkbox and zoom text only.

I guess we’ll have to disagree :slight_smile:

take the lead from Firefox 3? Shouldn’t it say Opera there??

K-Meleon has had 3 kinds of zoom for a long time now. It has page zoom, text zoom, and image zoom. Its userbase is pretty small so not many are aware of how many features that browser has gotten right before the big boys.

The laptop that I got given for work has a natural resolution of 1920x1200, which is a joke to try and read at the normal zoom level. I got sick of using 1440x900 with everything looking so grainy though…

I applied DPI scaling to Windows (up to 120 DPI from 96) which makes most apps readable/usable, and it has only broken a few things that I seldom use.

I praise Firefox for its full page zoom, and the fact that it remembers your preferences on a per domain basis. I don’t have to set the zoom every time I load it up, which is awesome!