[thelist] Layout Stability

Felix Miata mrmazda at ij.net
Tue Nov 6 22:20:42 CST 2007

On 2007/11/06 17:12 (GMT-0500) DAVOUD TOHIDY apparently typed:

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

> Well, eventough I have the "layout stability" in my subject line some
> comments like yours are off topic and it does not even provide any
> feedback about the "layout stability. However I welcome any comments about
> my portfolio to enhance it as much as I can.

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.

> I believe there is not any %100 perfect layout on earth, since there are
> different parameters a layout needs to be designed for such as cross
> resolution/browser/platform capabilities etc.

Exactly. This is why sizing in px fails, not only for text, but also
containers. 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.
e.g. http://mrmazda.no-ip.com/auth/Sites/ksc/

>> Legibility should be job #1 when accessibility and usability are
>> priorities. This page mildly fails a basic legibility test. The text is
>> all too small. 100% if my default is exactly the right size for most
>> content, particularly P text.
>> http://www.useit.com/alertbox/designmistakes
>> http://mrmazda.no-ip.com/auth/bigdefaults
>> http://mrmazda.no-ip.com/auth/access-lipservice

> Have you checked my css file? I have set the font size to %96 and I do not
> see it as a failure to meeting the legibility as jakob states in his
> article.

96% isn't 100%, and it's made worse by two things: 1-low contrast
(acceptable, but low nevertheless -
http://juicystudio.com/services/colourcontrast), & 2-the significant
difference in apparent size between my default font choice and the Georgia
font your CSS specifies. 96% Georgia has an apparent size of less than 85%
compared to my larger in apparent size sans-serif default. 96% applied to the
common 16px default gets you 15.36px, which all modern browsers render at
15.000px, or 93.75% nominal, which is 87.9% actual. Size is a function of
both height and width, so the nominal CSS % size must be squared to get the
actual % size.

> Jakob's page that you have provided itself fails to meet the
> layout stability requirements .

Seems to work fine here whether 1024x768 or 2048x1536 or anything in between.

>> 7.3em is too narrow for .nav, as is 140px for #left, causing several LI
>> to split into 2 lines when no user CSS is employed, and Standardization
>> to overflow when it is.

> could you send me a screen capture of what you see please giving me the
> necessary info about the environment at which the layout has those
> problems?

My previous comments were based upon examination at 1400x1050 on OS/2 and
1280x960 on windoz. This is 144DPI fullscreen on Linux:


Note the several menu links require two lines, while your about me and about
portfolio columns are about 3 words wide until I zoom. After I zoom only one
step, about portfolio drops below and about me shrinks to 2 words wide.
Because 1200px isn't particularly wide on a 1920px wide screen with
proportionally larger default fonts, the space between the paragraphs and the
images to their right is gone.

>> The huge space between the P and the images to their right probably
>> needs trimming via an overall width limit or some more space to the
>> right of the images. Until zoom is applied to get the text up to legible
>> size in a wide browser window (1200px or more) it simply looks like
>> shoddy design. It gets worse at 2X text zoom because the lower image
>> gets pushed down below the keep in touch P. By 3X zoom it's horribly
>> broken after .nav.

> I have designed this layout to make it work as much as it is possible for
> all resolutions allowing for up to two increments. Now I would like to

Why two increments? The difference between 800x600 and 2560x1600 is a lot
more than two increments. The difference between 800x600 and a mere 1600x1200
is four.

> know how would you provide a cross resolution/browser/platform solution
> for what you see as a problem in regards to the gap at 1200 resolution and
> zoom? And would appreciate it if you reply to the list because I would
> like other members to participate in this discussion as well.

Set sizes in em, as in the example ksc URL above or
http://mrmazda.no-ip.com/auth/Sites/dlviolin . Visit http://cssliquid.com/
for more elaborate examples.

The 2 main exceptions to setting sizes in em are that because of broken IE
fonts-size inheritance, font-size should be set to 100% in HTML and/or BODY;
and for all browsers line-heights should be set unitless:
http://mrmazda.no-ip.com/auth/line-height-inherit .
"   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