Needless to say that a single increase in size ‘breaks’ my designs.

Have a look into ‘bulletproof’ web design, increasing text size can be catered for.

I disagree with the approach that a designer’s choice of font size can be ‘over-ruled’.

Something you’ll have to get used to I’m afraid, the user is in control of how they received the content. They might override the text size, colours, layout etc.

The zoom in Opera/Firefox 3/IE 8 may make text-sizing redundent, however, in the short term they will add complications rather than making it easier. (I.e. there are more variations to test).

We’ve implemented the hybrid layout idea on defacto-cms.com. You could have a less robust default layout, and provide a couple of variations. However, it would still be good practice (at the very least) to make sure you’re primary layout is fairly robust. Different systems can have different fonts, regardless of text-size, that would interfere with exact sizing..

Maybe the solution for me is adopting what you call a hybrid zoomed layout?

http://presentations.nomensa.com/techshare2005_zoom/examples/nomensa_site/new_light.html

http://www.ladomery.com/ca/layout.master.2.html
http://beta.tabletpc.it/tablet-pc/portege-3500

I appreciate that this is useful to users, but I disagree with the approach that a designer’s choice of font size can be ‘over-ruled’.

Shouldn’t his/her decisions be resepcted?

I’ll have to re-work my layouts and probably change the design to accommodate this dynamic. What I resent, though, is that my creativity (if you can call it that) is limited.

Of course this is all about making sites accessible. Well, I think that the zoom function in FF3 works wonderfully for that. Also, an alternative text-only version can be served too (which can be made to work for mobile).

Or is this thinking a bit arrogant?

The images fit exactly to the grid depending on their proportions. A tall image will only occupy three or four columns, a wide image will occupy all six.
A custom smoothing technique is used to avoid pixellated browser resizing – demonstrated in the images above

That seems to be a percentage width layout with either naturally expanding, or EM based heights?

Nice image re-sizing

I’ve been looking at the ‘consistent grid – but accessible’ problem myself.
From a design standpoint a fixed width is nice, you get absolute control, unfortunately this comes at the cost of flexibility for the user and the site’s performance in different environments.

A solution that covers all of these points is a flexible grid. It works as you would expect with the new browser scaling techniques, and allows for the maximum degree of user customisation – while maintaining a consistently designed grid.

See it in action:

http://www.2dforever.com
http://www.stainlessvision.com

If you want to view it big, max out your browser window, and bump up the font size. Small? shrink your window and reduce your font size.

Without that sort of robustness in IE, it makes EM layouts difficult.

IE makes many things difficult. Imagine how much easier web development would be if we didn’t have to contend with IE or if it used the Gecko rendering engine. *sigh*

The first does (unless you set the browser to ignore font-sizes), the Zen Garden one fits nicely into 1024.

I was hoping that there was some equivalent to:

#layout {
width: 15em;
max-width: 100%;
min-width: 750px;
}

But the problem seems to be that as soon as there are font-sizes set, EM layout widths evaluate to a pixel value that doesn’t change with the user’s text size setting.

Without that sort of robustness in IE, it makes EM layouts difficult.

You’re approach seems to be to restrict the width so that at the larger text setting it fits the width IE. That’s fine in those cases, but I would want the robustness of a proper max-width for some sites.

Have you got that working in IE? I didn’t manage that when I considered accessible layouts before.

In a round-about way, Alastair. Obviously max-width isn’t supported by IE, but IE has another limitation which actually serves as a saving grace: It will only enlarge by two measurements (though I suppose the developer could set a min-max font size range).

If you start narrow enough, you can design it so it won’t spill out if fully enlarged. I can show two examples:

1) This site I build a couple years ago and is soon going to be redone. It should enlarge fully in IE and stay within 800×600. It’s so narrow because I messed up the font sizing and it triggers the IE font sizing bug. Otherwise it could be initially wider.

2) My Zen Garden submission. I’m pretty this fits IE at 800×600 sans-scroll.

The first version of Accessites was a hybrid, too. In most browsers it’d go all the way down to about 480 pixels wide (looking good, no scroll bar, with text enlarged two sizes), but in IE anything smaller than 720 pixels or something like that and it’d get the scroll bar.