The Two Types of Browser Zoom

Also, please consider modifying your blog to have threaded comments. I’ve been reading for about a year now and I have to tell you that this @ business is getting retarded. It’s not that hard to have threaded comments. You’re a Web Developer; you’d think that your blog would provide a better way for users to communicate with one another.

IE7 full-page zoom is indeed borked:

  • Pictures get scaled really poorly.
  • Scroll bars get scaled as if thy were pictures, with jaggies and all.
  • Text gets rendered with weird letter spacing and no kerning. Especially in Hebrew.
  • Sometimes the text renders all letters on the same spot.

It looks as if someone knocked on an additional x=x*1.25 after all the regular rendering was done.

IE8 looks better, at least from the little I’ve seen.

Well, you’ve broken your streak of posts that I agreed with. I was actually getting worried for a while there. Page zoom is no substitute for text zoom. At least for well-designed sites, which are admittedly few and far-between.

However, I’ll note that after using Mobile Safari and its double-tap to zoom in on the element, I miss that ability on the desktop when people hardcode their narrow column widths. Especially on my high-res widescreen monitor, which already requires me to up the text size from the usual defaults.

Also, I’ve worked a lot with graphic designers that did both websites and print, and I’ve noticed that they tend to treat text as a design element rather than as something to read, so they make it really tiny or really big. And since they’re used to print design, they also start by defining their pixel boundaries, and work with pixels within that (mocking things in Photoshop before touching HTML/CSS). The fact that web images really have to be done in pixels (rather than vectors) encourages this.

The accepted web design guidance is that you should generally produce web page layouts that work at:

the default font size (obviously)
one size below the default font size
one size above the default font size

I don’t seem to recall this guidance being accepted, on the contrary W3C’ guidance (http://www.w3.org/QA/Tips/font-size) states:

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

With this sort or guidance being increasingly enshrined in regulatory frameworks, many sites could find themselves open to accessibilty lawsuits.

With the increasing age of the average Web user and the fact that there will soon be ten times as many people using Web on a small form factors it seems commercial stupidity to not follow the W3C guidlines.

Also, please consider modifying your blog to have threaded comments. I’ve been reading for about a year now and I have to tell you that this @ business is getting retarded. It’s not that hard to have threaded comments. You’re a Web Developer; you’d think that your blog would provide a better way for users to communicate with one another.

Programming Is Hard, Let’s Go Shopping!

It seems Opera pioneers many of the features that later become industry standard. Tabbed browsing, zoom resize, mouse gestures, two-dimensional keyboard navivgation around links, and so forth. It’s a wonder more people don’t use Opera, now that it’s free - not open source, but when have most people ever needed to look at the Firefox source?

I second Jeffrey Friedl: your preferences and the preferences of your browser are highly customisable … Don’t trust a (default) white background, width of 1024px, normal sight and so on!

To Sergey Shelukhin
3) I don’t even know why you want to resize all this other stuff at all?
What’s the point in resizing anything, except text?
Maybe vector images make sense too, but they are rare on the web.

Some people are partially sighted and use a magnifying system in order to surf the web. Zooming text AND images is useful for them.
Between blindness and the sight of combat pilots, there is room for macular degeneration, amblyopia, deuteranopia and other color blindnesses, myopia (not everybody in the world can afford glasses matching exactly their myopia), etc


When designing pages in XHTML/CSS, I try to make them compatible with a +4 level in Fx (with the old Fx2 zoom-style) and biggest/smallest text sizes in IE6/IE7. There’s a bit of extra work with images and height extensibility but anyway it’s quite the same than for +1 level of zoom … It’s not that hard, like relevant ALTs and valid HTML.

My grandfather has macula degeneration, and he needs letters of about 1 to 2 cm tall (and reversed high-contrast as well). Since website scaling and OS scaling in general is so bad, we gave him a big LCD tv to use as a monitor. Now he doesn’t have to upscale everything that much, and he can sit normally in his chair instead of with his nose to the monitor.

Bonus: the tv is wide screen but we kept the resolution to 1024:768, so that all Arial letters become as wide as Verdana, which is much more readable.

Why Ctrl + +/- ? Why not just +/- ? Opera is, and have always been, superior. It was first, and it is better. :wink:

Full page zooming is ideal for late hour surfing - you know when your eyes really want to close down, but you just have to read one more blog… …or see some more pictures…

Well, I do think you’re all right. Some people like the text-zoom (since that’s what they are mostly looking at), and some like the full-page zoom to preserve layout or maybe preserve the app/graphics. I prefer the full page zoom, but I can relate to the other group as well. there’s a proper description of this phenomenon at http://wed-design.co.il/ besides - everybody can win this argument. let’s not dig in.

If the source image is higher res

Isn’t this only true if the image was downscaled by the browser

Joel Spolsky wrote about this in his Joel on Software article From the Department of Badly Chosen Defaults.

http://www.joelonsoftware.com/items/2008/12/22.html

He suggests adding img { -ms-interpolation-mode:bicubic; } to a stylesheet for smoother image scaling in Internet Explorer.

So are we all supposed to now be using 900px wide source images for 300px wide IMG’s in our HTML files?

Great post. Page zoom is the way to go, so fixed layouts (print designers love these) actually work.

Page zoom by default on Iphone’s safari rocks. :slight_smile:

‘traditional browser font sizing’ with Android’s Chrome browser sucks. :frowning:

Actually font-scaling alone would be perfectly okay if webmasters would start creating decent webpages. Decent means stop using absolute units. Don’t use inch or pixels or similar nonsense. If you do all scaling using relative units (e.g. em’s), you can usually just increase font size by 8 and it will still look okay, as everything will scale accordingly.

This is basically the whole magic behind full page scaling. When a browser does that, it treats all units as relative. That means unless plain font scaling, where only the font is scaled and only units depending on the font size are scaled (like % or em), full page scaling just scales everything on the page, even if it is given in px, inch, cm, mm, or a similar unit. But using units like this on a webpage is plain stupid. Why? You have no idea how big the monitor of the viewer will be, which resolution he’ll use and how many DPI his monitor has. Without knowing this, these units can’t render a good-looking readable webpage for every visitor to begin with.

It’s great that we get this in browsers, but we also need proper scaling support that works across the entire OS. As Jeff R points out, adjusting the default DPI in Windows is pretty useless. It breaks the layout of many apps (including Microsoft ones) and many other apps simply ignore it.

In a similar vein, many apps really don’t layout well when the window is maximised on a bigger monitor. Worse still, some get around this by not resizing. I’m fed up seeing tiny dialog boxes that can only show partial contents of a text field, but don’t let me resize the window.

Jeff, you are obviously not a designer! Please stay away from design-related commentary in future, unless you have researched the topic properly (and preferably run it by a real designer first). Ta.

I agree that full page zooming is better which is why I put all dimensions in em and ex units, which effectively means you have full page zooming in all browsers.

What would be great is if you could hold down a key and use the mouse wheel to zoom the entire desktop. That would work with EVERY app, and it would be smooth, perfect scrolling as well.

It could even be used to manually fit video to the screen when some stupid web site doesn’t provide a Full Screen button on their flash crapplication.

Man, maybe they’ll build a computer that cool some day.

Or you can build CSS system on ems like Emastic(http://code.google.com/p/emastic/) and then you don’t need zoom :wink: Just text resize.

I just wish firefox’s zoom feature would also zoom flash applets.

Since every post about faults in browsers includes the clause (except Opera) and every request for a new feature includes (like Opera does) - might I suggest an obvious solution?