programming and human factors
by Jeff Atwood
From the dawn of the web – at least since Netscape Navigator 4.x – it has been possible to resize the text on a web page. This is typically done through the View menu.
This was fine in the early, primitive days of the web, when page layouts were simple and unsophisticated. Want the font to be three times larger? No problem! Pump it up until your eyes bleed; you're unlikely to break the design, because there's precious little design at all.
But this was a time long before the web had become a platform for full-blown applications, with complex, dense, almost GUI-like designs.
The accepted web design guidance is that you should generally produce web page layouts that work at:
I agree, and you should be testing for this on your own websites. The handy keyboard equivalents in most browsers are:
Ctrl + 0 Reset font size to default
Ctrl + + Make font one size larger
Ctrl + - Make font one size smaller
(yes, holding down the Ctrl key and then scrolling your mouse scroll wheel works, too, but no real programmer would use that.)
It is important to let the user control their browsing experience. But I think that the traditional method of font-only browser sizing is a solution whose time has come and gone. There's a better way. Opera was the first browser to introduce full page zoom as an alternative to traditional font sizing, but Firefox 3 is where most people actually experience it. In fact, in Firefox 3, it's the default page sizing mode.
Note that "Zoom Text Only" is unchecked. And for good reason. Compare for yourself. Here's the Digg homepage using old-school Netscape 4.x style font scaling.
Browser Font Scaling: Default
Browser Font Scaling: Size +1
Browser Font Scaling: Size +2
Digg follows the design rule of thumb I suggested above: it scales to font size +1, but beyond that, all bets are off. With the fonts at +2, the top menu is scrunched, the search box clipped, and the digg numbers are spilling out over the boxes. The "most recent" navigation element has completely disappeared! Now compare this with the newer method of full page zooming:
Browser Full Page Zoom Scaling: Default
Browser Full Page Zoom Scaling: Size +1
Browser Full Page Zoom Scaling: Size +2
While the page does get wider, the full page zoom method has tremendous advantages:
To prove that full page zoom scales like nobody's business, here's a screenshot I captured of the Digg homepage scaled to fit the entire width of my 1920 x 1080 monitor. In comparison, increasing the fonts beyond +2 results in a jumbled, unreadable mess.
Honestly, I can't see much use for traditional browser font sizing. It's increasingly fragile on today's web. I wish more browsers would take the lead from Firefox 3, and adopt full page zoom as the new default page sizing method.
It's also the default for IE8 beta 2.
Elijah Grey on January 16, 2009 4:55 AMYeah, well, tell that to Safari and Chrome, man.
Jeff Atwood on January 16, 2009 4:57 AMFull page zoom really is a great feature, but with the ubiquity of smartphones and netbooks, it will likely be more useful for a browser to be able to cram a large page into a small space.
Opera does this really nicely with it's Fit to Width and Small Screen modes, which work especially well in situations where iPhone-style pan zoom isn't possible.
I'd really like to see more websites and browsers be able to adapt to the new, cramped-for-space web.
jasonmray on January 16, 2009 5:00 AMThe reason text zoom doesn't work is because the silly web-designers built a design that only works with certain text sizes. That's great for IE and Firefox and Chrome and Safari on a 1080 screen and up, but when I'm trying to read a webpage on my digital clock it's a real mess.
By the way, typo alert. It should be Ctl-- to reduce the size.
Damien on January 16, 2009 5:04 AMText zoom is useful for me when I come across a bad designed website that uses windows-only fonts that appears too small on linux.
Other than that, I never had a use for full-page zoom, maybe I just prefer sites with more text than pretty graphics :)
gian on January 16, 2009 5:05 AMI like the fact I can do this with my scroll wheel (ctrl). My favorite part though is that when I do this in IE, even the scrollbar grows. Zoom in a few times and its like super mario-scale.
fschwiet on January 16, 2009 5:14 AM@Damien the majority of all keyboard either have Ctrl or Control, very few say Ctl. Heck, if you want to be really correct, Ctl and Ctrl are both not words.
http://en.wikipedia.org/wiki/Ctrl
Webkit has support for it, I just don't think it has hit Safari yet.
http://webkit.org/blog/165/full-page-zoom/
oh, I take my previous comment back about IE scrollbar resizing. That was the behavior of a particular site (where the div had the scroll) and not the browser's window scrollbar.
fschwiet on January 16, 2009 5:15 AMForget IE8 Beta 2, it's in IE7.
Ben on January 16, 2009 5:17 AMThis kind of zoom is in Chrome 2.0. Download the developer preview by changing your Chrome to get updates from the Developer Channel.
Google Chrome Channel Changer to get the tool to change your binary repository.
JohnNoonan on January 16, 2009 5:25 AMOne of the guys I've picked up all my web coding habits from has been singing the praises of full page zoom for some time. Nonetheless, it's still good practice to support a +/- 1 font size in layouts for those who'd like to keep the images unblemished, but make the type a bit easier on the eyes.
Ryan Meray on January 16, 2009 5:28 AMOr web designers could follow Jeff's lead, and fuck up their text rendering completely. In Safari 3.2.1 your bold text has occasional negative kerning. In NetNewsWire using that same Webkit version (5525.27.1), the text doesn't render at all!
I personally love text-scaling, and hate full-page zoom on the desktop. I don't zoom so I can use my computer from far away, I do so because the text is unreadable from a normal position.
Webkit is capable of extremely high-quality full-page scaling — it's used on the iPhone, the Pr#275;, and Android.
Fred Blasdel on January 16, 2009 5:33 AMJeff, how the fuck did you manage to make a comment submission system that can't handle unicode at all?
I used LATIN SMALL LETTER E WITH MACRON to correctly accent the name of Palm's recently announced device, and it was mangled into it's code-point in decimal.
Fred Blasdel on January 16, 2009 5:38 AMAnd it removed the question mark from my first sentence? Both this sentence and the previous sentence end with question marks?
Your site's comment handling is baffling.
Fred Blasdel on January 16, 2009 5:41 AMI like text-resizing much more than full resizing.
Text resizing allows me to increase the size of what matters -- text content.
The rest -- graphical fluff -- takes relatively less space, which is good.
Another problem with full resizing is that browser is getting too wide and extends outside of my monitor.
Hopefully this problem will go away when I buy 22 monitor.
He's not picking on the CTL vs CTRL...he's noting that both Small and larger are using the same plus sign instead of a minus (or dash) for smaller.
When I blow up a webpage's text, I want it to still fit on the screen...which the zoom described doesn't necessarily do. All this is because some developer built a page that only works with text at some fixed number of pixels instead of a flexible, flowing design.
Harley on January 16, 2009 5:43 AMI find fit to width feature in Opera FAR more useful than zoom. But that is biased, I have perfect sight and I am less than 50 years old.
Hoffmann on January 16, 2009 5:49 AMActually, I think IE7 was where most people first experienced it. One of the exceedingly rare instances where IE was an early leader.
Kevin Dente on January 16, 2009 5:49 AMI couldn't agree less. Image+Text zoom was invented as a workaround for both lazy/inept web designers and Internet Explorer's continued refusal to scale pixel-specified fonts. As others have commented, the original intent of text-only zoom was to allow those with poor eyesight to read content more easily, not to make everything bigger. Horizontal scrolling, which often occurs as a result of text+image zoom, is such a usability no-no that it should have been thrown out long ago. Seriously, what's your problem with text-scaling on a well-designed layout? Any decent CSS guy can create a layout that won't break for at least 2 increases (not sure where you get your 'accepted web design guidance' from, but I've never seen just 1 increment recommended). Just because a lot of people get it wrong, doesn't mean we should all pander to an inferior workaround.
Five Minute Argument on January 16, 2009 5:55 AMForget IE8 Beta 2, it's in IE7.
Full page zoom is *horribly* broken in IE7. Half the sites I used it on would exhibit terrible rendering artifacts, making the site almost un-navigable.
Jeff Atwood on January 16, 2009 6:00 AMI'm a Firefox user, with a big monitor and bad eyes. I set my default font size way up, but I don't need the images resized. Most websites work just fine; the few that don't, well, they're usually idiotic in other ways. The real fix is to not put characters in things with pixel sizes, but the Web Markup Gods have basically made this impossible.
I suspect that most people in my situation set their monitor resolution down, because that's the only way Windows/IE can deal with the issue. That's silly, though.
Greg Lindahl on January 16, 2009 6:03 AMFirefox 3's full page zoom can have pretty obvious artifacts too:
http://www.antipode.ca/2008/seeing-red-css-sprite-borders/ Apparently zooming layouts based on background images is a hard problem.
Where do you all get the horizontal scrolling from? I'm looking at this page at 200% now because I'm at my dinner table (across the room). No horizontal scrolling, just elements getting bigger..
vent
Also, although I reckon it sounds evangelistic, why doesn't anybody ever give Opera the credits it deserves? Time after time they introduce great new stuff (full text zooming, awesome bar, mouse gestures, tabbed browsing etc) that years later earns some other browser tons of credits...
This is not a retorical question. Is it marketing? Is it user share?
/vent
Just because a lot of people get it wrong, doesn't mean
we should all pander to an inferior workaround.
I love this. If developers can't seem to do it the elegant way, they're stupid. And their users? Screw 'em. They should be using Web pages designed by smarter people.
mike on January 16, 2009 6:28 AMFor once, I completely disagree with you, Jeff. There are two reasons that text-zooming is currently broken on the web. The first is that IE doesn't support text resizing of pixel text sizes. This goes against the spec that defines px as a relative unit (yes, relative). [http://www.w3.org/TR/CSS2/syndata.html#length-units] note where px are listed under Relative Units. The second reason text resizing has failed is developer laziness. An em based layout will provide the same fluid-design functionality as a full page zoom. Even better, it leaves the 'screen overflow' issue in the control of the designer. Set a max width on the body element of 100% and allow the height to grow. Internal sub-elements can be made to grow horizontally to a certain max value. This would keep pages from growing beyond their borders and introducing the dreaded horizontal scrollbar. But thanks to lazy developers and IE (the combo responsible for the worst of the web) we get other half-wit solutions like full page zoom trying to pick up the slack.
Jason on January 16, 2009 6:29 AMFull page zoom is the first option I switch off after installing FF on new machines.
I like browsing with a larger text (+1, or even +2). I also like to read text in a narrow column - so much easier to the eyes.
On the other hand, a lot of websites these days use overly wide layouts, 1000px and more, and expect you to always maximise your browser. Full page zoom makes such websites even harder to navigate.
Alex on January 16, 2009 6:38 AMSo is there a way to have it automatically use the full width of a high res monitor? (1920x1024). It would be interesting if fixed width pages could be enlarged to take advantages of the space.
SuperJason on January 16, 2009 6:58 AMMan, screw webpages. I want that for my OS. Why aren't we using vector graphics for everything yet? Why do applications still look like distilled, concentrated butt when you increase the OS DPI?
I want variable DPI for my OS, and then I want ultra-high-DPI monitors. Then I'll be happy.
Ben Wilhelm on January 16, 2009 7:33 AMHow does page zoom affect flash movies and content?
Uri on January 16, 2009 7:37 AMFirefox's full page zoom sucks. For ease on my eyes, I view everything at +4 and higher. Most sites work. The ones that don't, too bad. +4 with image resizing means everything has hugely pixelated garbage everywhere, so I have [x] Zoom Text Only set. Works for me most of the time.
It's not just web apps that have problems with overlarge fonts though. These problems are everywhere. Excuse me for liking 16 to 18 pt. fonts for everything instead of the default 9. I don't like sitting 6 in front of my monitor to read the damn thing. That's why I bought a giant ass monitor.
I have a giant ass monitor, AND I run everything maximized 100% of the time.
Michael on January 16, 2009 8:01 AMJeff, this is the default on Chrome2 (the dev branch) now also.
Scott Hanselman on January 16, 2009 8:40 AMI wish more browsers would take the lead from Firefox 3, and adopt full page zoom as the new default page sizing method.
Opera and Firefox 3 support it, who cares if no one else does. Everyone with any real interest in browsing installs one of these as soon as they have finished installing their OS. Web users have to vote with their feet.
Brian on January 16, 2009 9:03 AMYour entire post seems to make the assumption that the base view is something you can know more than just for your browser on your system, as if you know not only the hardware and software particulars of all your readers, but also their personal preferences (what size they're running their desktop at, what font they pick for their default, and what size they like to run it at).
I agree that full-page zooming is nice, but it doesn't obviate the need for smart design.
Chrome and safari misses this feature as they're using webkit layout engine. Zoom with Gecko is really awesome
As you tweeted in twitter, Chrome is no equivalent to FF 3 . When I had an early review, I just mentioned this in one of blog post
http://sarathc.wordpress.com/2008/09/03/early-review-on-google-chrome-beta/
Sarat on January 16, 2009 10:50 AMBut actually Firefox's zoom is best done with
cntl-mousewheel! Then you just keep rolling until its the size you want.
Also, a huge use for me.. zooming into images in web pages. If the source image is higher res, you'll see the extra resolution as you zoom in, without having to manually save the image or whatever.
If the source image is higher res, you'll see the extra resolution as you zoom in, without having to manually save the image or whatever
Isn't this only true if the image was downscaled by the browser IMG tag? Seems unlikely to me, as this is a pretty dangerous practice, but I suppose..
Jeff Atwood on January 16, 2009 11:42 AMI was an avid reader of codinghorror, but in the last 2 months quality went down so much with posts like this.
n' on January 17, 2009 1:13 AMWebKit has had full page zoom since March - however there are no public (as in not alpha, beta or developer release) products I am aware of that are presently using a version new enough yet.
Products that do have it that aren't public that I know of:
WebKit nightlies - Safari with the latest WebKit builds. Currently at r40000. I find it suitably stable for my self and use it because of the sheer speed compared to other browsers.
Chrome 2.0 - Having updated their version of WebKit to roughly r39410 (alongside their own changes) has Full Page Zoom as stated above.
Safari 4.0 Developer Preview - Available free from Apple if you make an Apple Developer account.
FullPageZoom however in Safari 4 and the WebKit nightlies needs to be turned manually:
http://webkit.org/blog/165/full-page-zoom/ (March 21st, 2008)
Chromium (the development build of Chrome) does full page resizing better than any other browser I've tried. It even scales the canvas element perfectly!
Mark on January 17, 2009 1:26 AMI agree that full page zoom should be the default, but I do think that font zoom is a nice feature too. Matter of fact, I read this page right now with +4 or something like that. I just prefer a big font for reading long blogposts. It's nice that Firefox remembers the zoom settings for each page, so I can read my blogs in a huge font, but can view other sites where the layout is more important and there is less text in the default resolution.
Paul-Gabriel Muller on January 17, 2009 1:48 AMHi,
Phew - what a backlash!
I have to join in
Mostly the sites I design and use are for reading - online journals, encyclopaedia etc. I can't read properly at normal font size - but I don't need all the nav and furniture big, just the text content I'm trying to digest.
So I whack up the font size and let the other element break.
What I really want is to ONLY increase the main content text.
Zooming the whole page really sucks, and it's my main bugbear with browsing on the iPhone. I hate having to drag a page around to see what's on both side or the full line of text.
Lou.
@Jeff Yeah, well, tell that to Safari and Chrome, man., responding to Elijah:
You do realize that it has been entirely possible to zoom in on anything on the screen on Mac OS X since well before the first public release right? And that was like 8 years ago.
Apple's zoom does indeed include anything displayed in Safari. The only drawback is that it's a scaled bitmap you're panning over, but the smoothing is the best i've ever seen so everything remains more than legible. Still, I do hope they'll be able to integrate a real text zoom into OS X soon.
with full page zoom, images get blurier ...
m on January 17, 2009 2:18 AMI think we are witnessing a transition from e-Text (classic html with sortof-semantic elements) to e-Paper (which used to be done with PDF). Personally I preferred the old way where you just told the browser I want a heading, now some text oh and now an image. Granted - it didn't look as good as today's sites but it scales nicely to different device types.
Those old sites work perfectly in mobile browsers like Opera Mobile, while those DHTMLed, DIVed and CSSed pages require full-page zoom and require horizontal panning all the time.
Daniel Lehmann on January 17, 2009 2:20 AMTwo things I think you miss is that
1) It's easier to read (and especially scan) text in relatively narrow column (I think there are even papers on that). Unfortunately, web designers have never heard of that, and lines on most sites are ridiculously long; text zoom makes lines shorter, full site zoom doesn't have consistent effect and usually resizes everything just like in your example - I agree that text-zoomed digg looks much better :)
2) Many sites develop horizontal scrollbar on full zoom even after one go - so if you just need to increase font size to see the text you're screwed.
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.
After like 2 hours of trying to use full zoom on FF 3 I went and reverted to default zoom - never looked back.
Sergey Shelukhin on January 17, 2009 2:42 AM@CodingHorror Learning how to deal with all types of text zooming is very very important when working on web applications. If you design a front end to a system that connects to someone else's data then you have no way of knowing in advance what that content is and how it will break your layout. The same is true of designing multi-lingual web applications, as anyone who has had to deal with German text will attest to.
So, while under normal circumstances the whole page zooming might be a nice feature, without some mechanism for doing text only zooming it becomes more difficult for developers to test their layouts and make design decisions accordingly.
MikeM on January 17, 2009 3:15 AMWe recently built a new system for my mother with her first large LCD monitor. We immediately ran into the problem of text readability at the monitor's native resolution. So we bumped up the display's DPI. This increased the text size in many applications, but not all of them. Some applications ignore the DPI setting so we had to tweak them in various ways. Then of course there are all those web sites. Some sites include their own text scaling options, so we were fine with those. Most simply display text at whatever size they damn well feel like, leaving the user no option but to zoom the whole page. Initially we had her set up to do this in IE7 and it worked reasonably well. But as soon as you zoom a page more than a notch or two, you have to start using the horizontal scrollbar to see anything on the right side of the page. And of course all the navigation and graphics and advertisements also get pointlessly huge. Then I discovered that Firefox 3 had the ability to zoom only text. We quickly switched her to FF3 and it's been smooth sailing ever since. Please don't encourage developers to give up on text-only zoom. People NEED it! PS This is the first time I have ever disagreed with you. So smarten up (grin).
Jeff R on January 17, 2009 4:28 AMFull page zoom is all good fine as long as the browser is not forced to add scrollbars - this is when all hell breaks loose and the entire website usability drops to very low levels. I'm usually looking for the useful content on web pages, which means the text is what I care most about, not the background chrome. The best way I've found to do this is on sites that provide Print version of their pages - the layouts are a lot simpler and there's not extra garbage.
All in all I'd say that the two types of browser zoom are different tradeoffs between page fidelity usability and they both come short in the other departament than the one they were designed for.
But hey, Jeff, it's only 2009, we've had these zoom types for the past 10 (text) 5 (full page) years at least, I'd say it's time for some new, different tradeoffs to appear.
What about a browser that would understand the layout of your website and allow me to concentrate on just the center column that contains your blogpost, something like Deep Zoom for web pages and instead of zooming into an image, it zooms into a logical part of the page (btw, I've patented this already, haha). I know, some people won't like this because it will decrese their ad revenues, but I'm immune to web ads anyway.
Would you like this better than full page zoom? I know it would be hard to do but hey, engineers need new challenges and I don't think what we have now is the best we could come up with.
Sigh. I still hold to the belief that HTML pages should be readable on ANYTHING, far beyond the +1/-1 text size rule. Specify the content, and let the browser fit it to the screen/text size/etc. But that battle is now completely lost.
A. L. Flanagan on January 17, 2009 7:03 AMThat's all very nice, fine and dandy. But there's one catch: What is the default font size?? The default size the browser ships with?
Designers will have to prepare their pages for font size zooming becaue people are likely to change the default font size in their browsers. When that breaks your page you can hardly blame the user.
Early IEs' browser text size +/- didn't apply if the text size was set using PX units. That's why em was a better practice. In fact, many designers went through the trouble of using em as the unit for layout elements as well(img, divs etc). This way, the page is truly elastic. It's less of a problem now that most modern browsers support better page zoom.
jin on January 17, 2009 7:20 AMUsing em is still a good idea for elastic web applications. This lets you change a single default font size ON THE SERVER and change the whole site to scale accordingly. This can also be a user preference setting so that they don't have to use the zoom feature just for your site.
Browser zoom really isn't very practical. You have to keep changing it back on a per site basis. What ould be more practical would be per site zoom where I could set a preference for a specific site to be zoomed to 1.5 but go back to 1.0 for other sites.
Matt on January 17, 2009 7:43 AMSidebar:
Jeff, your posts lately seem to be pissing people off. This is good and bad -- you get lots of comments and people returning to re-read, which is good for your stats and all, but at some point you're going to need to re-group and re-focus, or people will quit coming.
I also love this comment Full page zoom is *horribly* broken in IE7. . Yeah right. So you blog about this great new feature that everyone should check out in FF3. Then you find out that it has been available for a couple of years in IE so you justify the mistake by saying that it was horribly broken in IE.
Come on, give credit where credit is due. It isn't horribly broken. I've used it on many sites with no problems. Perhaps it is your usage model that is horribly broken...
Matt on January 17, 2009 8:31 AMLooks like lots of people have disagreed with this post. I do too, but I'm delighted to have seen it since it showed me how I could stop FF3 frm doing this ridiculous thing. I now have it doing text-only zoom and I'm much happier.
Greg Black on January 17, 2009 11:01 AMSorry - I don't see the point in this blog (this particular topic). What's next: Links - they take you to another web page, but right click and you have more options like opening in a new tab or new window. Telling us about the most basic functions of our browsers is probably not going to be useful to people who know how to use their browsers....
Seriously, the articles here are normally well through out, sometimes controvertial and sometimes just what I'm up to sort of stuff. That's all great, but this isn't. How about another logic problem - Try to connect three houses to three utility sources (GAS, Electricity and water), none of which can cross. He he he...
Philip on January 17, 2009 11:08 AMOpera was the first browser to introduce full page zoom as an alternative to traditional font sizing
I wish more browsers would take the lead from Firefox 3
Stop pimping your busted-ass copy-cat browser.
Sincerly,
A Pissed Off Opera User you just insulted and demands an apology.
Professor Tom on January 17, 2009 11:15 AM@Ben Wilhelm Mac users have had this feature for years. It's called control + scroll. This magnifies the area of virtual desktop that the cursor is in to the entire screen. It's light years ahead of Microsoft's retarded Magnifier.
Professor Tom on January 17, 2009 11:22 AMAlso, 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.
Professor Tom on January 17, 2009 11:26 AMIE7 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.
Jonathan on January 17, 2009 12:06 PMWell, 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.
Rob Funk on January 17, 2009 12:11 PMThe 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.
Word of Mouth Mike on January 17, 2009 12:41 PMAlso, 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?
Jonathan Drain, Dungeons Dragons Blogger on January 18, 2009 2:24 AMI 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.
alwin on January 18, 2009 10:47 AMWhy Ctrl + +/- ? Why not just +/- ? Opera is, and have always been, superior. It was first, and it is better. ;-)
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...
Vegar on January 18, 2009 11:42 AMWell, 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.
Shlomo on January 18, 2009 11:54 AMIf 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?
Zack on January 19, 2009 1:14 AMGreat 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. :)
'traditional browser font sizing' with Android's Chrome browser sucks. :(
Kai Hendry on January 19, 2009 1:43 AMActually 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.
Mecki on January 19, 2009 2:27 AMIt'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.
Graham Stewart on January 19, 2009 2:55 AMJeff, 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.
Kenn Bracey on January 19, 2009 4:52 AMI 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.
Chris on January 19, 2009 5:02 AMWhat 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 ;) Just text resize.
Vladimir on January 19, 2009 7:08 AMI just wish firefox's zoom feature would also zoom flash applets.
AndyL on January 19, 2009 7:34 AMSince 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?
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
Will Stevens on January 19, 2009 7:59 AMGreat 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 :)
Shadrach on January 19, 2009 8:40 AMJeff, 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. :P
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.
Tony on January 19, 2009 8:40 AMHave 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.
Dave on January 19, 2009 9:33 AMWrong! 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.
Adrian on January 19, 2009 10:17 AMReally 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.
Craig Francis on January 19, 2009 12:35 PMI 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.
Phil E on January 19, 2009 12:49 PMYou 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.
Robert S. Robbins on January 20, 2009 6:07 AMFWIW, 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.
Lis on January 20, 2009 6:32 AMWhat 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.
Zack on January 20, 2009 7:12 AMCouldn'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!
David Chen on January 20, 2009 8:05 AMI 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.
Raoul Duke on January 21, 2009 5:59 AMAm 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.
Tigraine on January 23, 2009 10:43 AMI 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)
rtpHarry on January 23, 2009 12:20 PMI 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.
B.S.Smith on January 25, 2009 9:27 AMNOW 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 :-)
Norman Ramsey on January 31, 2009 7:04 AMtake the lead from Firefox 3? Shouldn't it say Opera there??
Svish on January 31, 2009 12:29 PMK-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.
Morton Fox on February 6, 2010 11:13 PMThe 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!
Simon Hartcher on February 6, 2010 11:13 PMJeff, as pointed out earlier, Google Chrome 2.0 supports full page zoom, I'm using it right now. Google has very little part in developing the webkit part of Chrome, so they were waiting on Apple's team, basically.
Aaron on February 6, 2010 11:13 PMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |
