[thelist] Layout Stability

Felix Miata mrmazda at ij.net
Wed Nov 7 22:09:53 CST 2007

On 2007/11/07 08:01 (GMT-0500) DAVOUD TOHIDY apparently typed:

> Felix Miata wrote:

>> You failed to define "layout stability", so I simply offered a limited,
>> generalized response to "Would you please provide a feedback?" based
>> upon my impression of what I found there.

> Well I did not fail to define the layout stability. I swear the definition
> is still in my portfolio :) .

There it may be, but it was not apparent in the content of your message,
which had the common characteristics of a site check - a critique. A site
check is what I took it to be. Normally site checks are mostly about
presentation and no more than nominally about content.

Now that I have migrated down that very long page, which I had little reason
to think I needed to do on first visit, I see the "Layout Stability"
component of your page, which looks like content to me. And now that I've
read it, I see it needs editing. I would think a 6th grade grammar teacher
likely would give it a barely passing grade were it an assignment to be
turned in. ;-)

> However any layout might fail to meet the requirements for layout 
> stability at some point. Not that mine does not meet but as I have 
> provided enough info about my design in my portfolio, it is designed for 
> the rsolutions that I have tested for, locally and online by browsercam's 
> online service not for 2048x1536 . The reason again is in my portfolio. 
> simply, I see it as wasting time etc.

I see, a layout is supposed to be stable, but only at some arbitrary
selection of screen resolutions chosen by you. That is not designing for the
web. The web is not inherently constrained by your choice of resolutions. Its
very nature is one of constraint unknowns.

When one designs entirely using em instead of px, those unknowns don't
matter. As long as the default size of an average text character is
maintained in reasonable proportion to window size, screen resolution matters
not one iota. As a consequence, when actually designing for the web's maximum
potential and inherent nature, screen resolution is entirely irrelevant.

I invite you to visit stores currently selling computers. You'll probably
find as I have found that there are 3 native display resolutions currently
comprising more than 80% of units available for sale: 1280x800 (WXGA),
1440x900 (WXGA+), and 1680x1050 (WSXGA+). Conspicuously absent is 800x600,
while 1024x768 (XGA), 1280x1024 (SXGA), 1400x1050 (SXGA+), 1600x1200 (UXGA)
and 1920x1200 (WUXGA) make up at least 97% of the rest on a sales weighted
basis. Most stores have few if any of these latter. In this context, I
believe failure to test with window widths exceeding 1280px (just how wide is
1280px anyway?) constitutes negligent testing.

> BTW You failed to provide a screen
> capture of any problem in my layout.

I most certainly did too, which you can see in what you quoted below and in
the unedited & unscrambled version of my reply post at:

Farther below you'll see my description of the problem with the columns that
follow your introductory material, but I'll note again here that several of
the links on the left require more than one line, one for a mere four
characters. I find the 140px width constraint to be responsible for that
behavior, which I consider to be poor design.

> It is not possible to design for all resolutions and browsers and 
> platforms while acheiving to exactly same rendering results. So what all 
> of us, including you, as designers and coders do is to reach to a point 
> somewhere in the middle and accepting some rendering issues, such as the 
> gap between my picture and the text at the resolution of 1280x960

On the contrary, when actually designing for the web one does not design for
resolutions. One only tests on the common ones in an attempt to ensure
reasonable accessibility, usability, and hopefully similarity,
_regardless_of_resolution_. The successful ones will work similarly on those
outside the testing range, as long as on those outside that range the
_proportion_ between default text size and window height and width is kept
within a common range.

> In the mean time If you provide a cross resolution/browser/platform 
> solution for this, I will give you credit in my portfolio.

In my previous reply I gave you two simple examples on my own site (ksc and
dlviolin), and a pointer to a site with more elaborate examples (cssliquid).
I'm not interested in a credit in your portfolio.

>> Exactly. This is why sizing in px fails, not only for text, but 
>> alsocontainers. Mixing px widths with em widths is a formula for layout 
>> breakage.e.g. http://cssfreelancer.awardspace.com/ OTOH, sizing 
>> virtually everything in em is a workable solution in most cases.

> Well, I believe sizing the body in % and the rest in ems is a workable 
> solution in most cases. Based on this, I have used % for the body and ems 
> for navigation elements.

Partially, yes, but also I see among others the following:
#back {...MIN-WIDTH: 735px; MAX-WIDTH: 1200px;...
#menu {...MIN-WIDTH: 735px; MAX-WIDTH: 1200px;...
#container {...MIN-WIDTH: 735px; MAX-WIDTH: 1200px;...
#wraphead {...HEIGHT: 75px;...
#mypicdiv {...HEIGHT: 210px;...
.content {...WIDTH: 595px;...
#left {...WIDTH: 140px;...
#left2 {...WIDTH: 140px;...
#left3 {...WIDTH: 140px;...

> Yes I have mixed it with pixels only for the containers not for fonts and 
> I have tested my layout with most of the browsers and have confirmed that 
> there is no , as you say, "layout breakage", not even when resizing the 
> browser's window locally and using browsercam's online service and the 
> results are shown through a link to browsercam website in my portfolio.

On the contrary, I believe content columns that only hold 2-3 words per line,
a result of columns contrained to a width defined in px, do constitute
breakage. I do believe that a pair of narrow columns side by side that do not
remain side by side after using 2 levels of text zoom consitutes breakage.
That behavior is not necessary, as those widths, and the rest of the widths,
could have been defined in em, with the result that the proportions you
intended could have been nicely maintained at 2 text zoom levels, and
possibly many more.

BTW, the link on your page to browsercam presents a page with no screenshot
thumbnails, but only a link to your page repeated in each block in which a
thumbnail would ordinarily be expected. Clicking those JS links leads to 404

> Therefore I have confirmed that the combination of %,em and px that I have
> used in my portfolio for the resolutions/browsers/platforms of my tests
> is a perfect solution.

I think you need more opinions than your own. I asked people on
irc://moznet/css about it and received 0 positive responses.

> I do not see anything wrong with 96%. 

You mean besides the fact the net practical result of your 96% gives me text
only 88% the size I find works best for me?

I think you may be mislead by the smaller in apparent size default default
Times* font in comparision to the Georgia that you specify. 96% Georgia does
indeed look bigger than 100% Times*, but that's an arguably illegitimate
basis for comparison. Like with font size, users have the option in their
browsers to select their choice of font family. To most of those who prefer
sans-serif and have established their preference by choosing a common
sans-serif face (Arial, DejaVu, Geneva, Helvetica, Liberation Sans,
Trebuchet, Tahoma, Verdana, etc.) in their preferences, your 96% Georgia will
be a significantly smaller apparent size than the same nominal size in their
preferred font family.

> If I agree with 
> your calculation above,which I will need to recalculate later myself, 
> based on the 96% you will get 13.2 px (actual) and plus two more room for 
> increments. This is not considered as small at all. It is even a proper 
> text size for elderly people!

I think you need to reinvestigate. Try
http://www.nlm.nih.gov/pubs/staffpubs/od/ocpl/agingchecklist.html and
http://psychology.wichita.edu/surl/usabilitynews/3W/fontSR.htm if you want to
know what size seniors really prefer. (hint - they prefer an actual 14pt,
which on default windoz systems is in the broad vicinity of 18.7px)

>> the significant difference in apparent size between my default font 
>> choice and the Georgia font your CSS specifies.

> Through all the tests that I have done I have confirmed that there is no 
> problem with the font size that I am using.

I see. Your eyes are the same as everyone else's, and you sit at the same
distance from the screen as everyone else, and you have the same size display
as everyone else, and your own personal text size preference is the same size
as everyone else, so there can't possibly be any problem with deviating from
100% of the choice of all those other people.

>> My previous comments were based upon examination at 1400x1050 on OS/2 
>> and 1280x960 on windoz. This is 144DPI fullscreen on Linux: 
>> http://mrmazda.no-ip.com/tmp/sc-davoto1.html 
>> http://mrmazda.no-ip.com/SS/davoto1.png

> I do sincerely, appreciate taking your time for providing the above links.
> However you fail to provide a problem with my layout.  Actually I do not 
> see any problem in regards to font sizes or anything else in the links 
> that you have provided. It shows a completely perfect layout. please see 
> the link below for what I have on my screen.

> http://cssfreelancer.awardspace.com/capture.html

Your screenshot confirms what I wrote above and my own screenshot, that
#left/#left2/#left3 @ 140px wide and .nav @ 7.3em wide are excessively
constrained, resulting in some nav items taking roughly double the vertical
space of the others.

Furthermore, the text in your screenshot proves the grossly inferior quality
of using 1024x768 resolution in this era of native resolutions on common type
displays that begin at 1280 wide and extend as high as 2560 wide. When I drop
the resolution on my Mac to only 1280 wide I nearly cringe at how much worse
text looks. How can you set your testing limit so low that you can't even see
for yourself why people who can afford it opt for high resolution? It offers
a superior experience. Please don't ignore those who wish that experience.
"   A patriot without religion . . . is as great a
paradox, as an honest man without the fear of God."
	                             John Adams

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.com/

More information about the thelist mailing list