This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2004 > Critique CSS layout (issues addressed)
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Critique CSS layout (issues addressed)
|
|
|
| I have addressed most of the issues listed in the responses to my last post
"Critique CSS layout (1st go - fingers crossed)". I'm rapt with the progress
I have made, thanks to all for your past critiques.
http://www.limelightstudio.com.au/iss/8/
The issues addressed:
- Nav uses <li> now
- No horizontal scroll in IE6 at 850-900 pixels
- Nav area not fixed, fluid now
- Added <h#> markup to replace <div>
- Changed CAPS
- Darker body text
- Changed footer layout & colour
- Made nav links different on hover
- Mis-alignment of banner in Opera
It's amazing how much easier CSS layout is when using the correct <h#>
markup....
Note: Links don't go anywhere. Font size has remained the same.
| |
| Rijk van Geijtenbeek 2004-11-21, 11:18 pm |
| On Mon, 15 Nov 2004 12:32:43 GMT, rf <rf@.invalid> wrote:
> lime wrote:
>
>
> Why do you waste about 20% if my canvas, on the right hand side. Surely
> the text could wrap near the right hand side of my window?
Easy reading? I don't mind at all. Depends a lot on your window size I
suppose, but full length text isn't always a good thing...
Maybe adding:
min-width: 30em;
to the rules for #mmhidemiddlebox might be nice.
--
Rijk van Geijtenbeek
The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen
| |
| Spartanicus 2004-11-21, 11:18 pm |
| "Rijk van Geijtenbeek" <rijk@operaremovethiz.com> wrote:
>
>Easy reading? I don't mind at all. Depends a lot on your window size I
>suppose, but full length text isn't always a good thing...
>
>Maybe adding:
>
>min-width: 30em;
>
>to the rules for #mmhidemiddlebox might be nice.
Let users determine for themselves what length of text they are
comfortable with, don't impose your preferences on others.
Btw, min-width isn't going to work for limiting width.
--
Spartanicus
| |
|
|
"rf" wrote in message ...
> lime wrote:
>
>
> Why do you waste about 20% if my canvas, on the right hand side. Surely
> the
> text could wrap near the right hand side of my window?
For you it may be wastage (such a pessimist aren't you ;o)) for me it was
limiting the length of text for readability.
| |
| Brian 2004-11-21, 11:18 pm |
| Spartanicus wrote:
> Let users determine for themselves what length of text they are
> comfortable with, don't impose your preferences on others.
Users shouldn't be forced to resize their window to get a comfortable
line length when authors can make a suggestion. MSIE/Win users will be
left out, but those with decent browsers can benefit from better
readability.
> Btw, min-width isn't going to work for limiting width.
Heh, no, max-width might work better. ;-)
p {max-width: 32em}
--
Brian (remove "invalid" to email me)
| |
| brucie 2004-11-21, 11:18 pm |
| In comp.infosystems.www.authoring.stylesheets Brian said:
[color=darkred]
> Users shouldn't be forced to resize their window to get a comfortable
> line length when authors can make a suggestion.
in short: piss off.
i know what length i'm comfortable reading. stop trying to force what
you think is best on me. everyone is an individual with their own
individual preferences and this media can easily accommodate all of
them. get out of your print media mentality of one size must fit all.
--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.
| |
|
|
"Martin Bialasinski" wrote in message ...
> A better way would be something in the lines of
> http://www.uni-koeln.de/~agr30/iss/...com.auiss8.html
>
> (tested in Opera and Firefox). You can zoom in and out without
> destroying to layout (ctrl + Num+ and Num- in Firefox). Maybe lime can
> consider something in these lines and reconsider to not touch the
> fontsize for the content. Using s smaller size for things like the
> page footer is OK, IMHO.
Hi Martin, thanks for your effort. I've saved the CSS you've created to have
a more detailed look later on to learn what you have done there.
I agree about the footer text - leaving that smaller and I will do a version
with 100% body text too.
> I too find many websites having too small a fontsize. Thanks god,
> Opera allows to set a minimum fontsize that can not be overridden by
> css (mine is set to 14px, which is also the 100% fontsize I configured).
>
> Bye,
> Martin
| |
|
| "Rijk van Geijtenbeek" wrote in message...
> rf wrote:
>
>
> Easy reading? I don't mind at all. Depends a lot on your window size I
> suppose, but full length text isn't always a good thing...
>
> Maybe adding:
>
> min-width: 30em;
>
> to the rules for #mmhidemiddlebox might be nice.
I will give that a go as well (I think that's what Martin did in his version
of the page too)
| |
| brucie 2004-11-21, 11:18 pm |
| In comp.infosystems.www.authoring.stylesheets Brian said:
[color=darkred]
> Right back at you.
kissy
[color=darkred]
> Nothing is forced on the www, especially in css, which is optional per
> the spec.
so for your site i have to twiddle with my settings to accommodate
decisions you shouldn't have made for me. i don't think so. back button
is so much easier. i really get sick of reading 5 or 6 words per line.
[color=darkred]
> What has print media to do with readability of paragraphs?
thinking you need to specify the optimum line length to fit all rather
than allowing each individual visitor to make their own choice.
> P.S. Is your <shift> key broken?
no, as a law abiding citizen i removed them with a big pointy knife so i
wouldn't be tempted to bypass sony musics copy protection on their music
cds
--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.
| |
| Christoph Paeper 2004-11-21, 11:18 pm |
| *brucie*<shit@usenetshit.info>:
> In comp.infosystems.www.authoring.stylesheets Brian said:
>
>
ACK, after all knowledgable people can overwrite the 'max-width'
*suggestion* in their user stylesheet.
[color=darkred]
> in short: piss off.
In short: stop being such a wuss! (What? I'm just adjusting to his level
of discussion.)
> i know what length i'm comfortable reading.
Which is that?
> stop trying to force what you think is best on me.
'max-width' with a reasonable high value in 'em' or 'ex' is not really
forcing.
> everyone is an individual with their own individual preferences
So you don't believe in ergonomy studies at all? They tell us there's a
maximum useful line width, depending on certain other typographic
properties.
> and this media can easily accommodate all of them.
Even with the default font-size, you cannot control line length with the
window width alone and that is all the usual (or even slightly advanced)
browser user can do about it. For really advanced users there's
'!important', like I said above.
> get out of your print media mentality of one size must fit all.
You are really overreacting.
--
"Some people say I am a terrible person,
I'm not, I have the heart of a young boy,
in a jar, on my desk."
Stephen King
| |
| kchayka 2004-11-21, 11:18 pm |
| Brian wrote:
>
> p {max-width: 32em}
That's too short for me. Better:
p {max-width: 45em}
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| Martin Bialasinski 2004-11-21, 11:18 pm |
| "Rijk van Geijtenbeek" <rijk@operaremovethiz.com> wrote:
>
> That's what the original 60% width rule was for.
> But using both a minimum and a maximum width makes more sense.
Hmm. With max-width as a percentage, this is not that good.
I did a test with min-width: 40em; max-width: 60% and then made the
window smaller.
In Opera, when 40em got larger than 60%, there was quite some reflow
and you have to scroll horizontally, which is a major no-go IMHO.
Firefox disregards max-width, when 40em got larger than 60% and kept
the linewidth at 40em, which ultimately caused the scrollbar.
Now font sizing with Opera and Firefox will make the horizontal
scrollbar appear as well.
With just max-width you you can make the window smaller or up the font
size and you won't get the horizontal scrollbar, so the page stays in
shape and is usable.
When you up the font size so much, that a line only holds five words,
I think this is better than having to constantly scroll right/left to
read a text.
I do not see min-width as useful here.
Bye,
Martin
| |
| Christoph Paeper 2004-11-21, 11:18 pm |
| *brucie* <shit@usenetshit.info>:
> In comp.infosystems.www.authoring.stylesheets Christoph Paeper said:
>
>
> user stylesheet are only practical in a very limited way such as font
> sizes. using them for much of anything else risks screwing up many sites
> just to accommodate one.
Something calm like
p {max-width: auto/*or your preferred 'em'/'ex' value*/ !important}
shouldn't break any design---and not just because most authors don't use
'max-width' at all for it's not supported by IE.
> i'm surprised it took so long for someone to mention "the studies". i
> don't disagree with them. what i disagree with is people using them to
> justify one size to fit all.
I'm usually using something of this magnitude:
p, blockquote {max-width: 100ex;}
That is just protecting people (with browser recent enough) from
themselves. Something as low as '30ex' would of course be too restrictive.
> with print you have to go for "one size to fit all", not on the net.
Well, there is a huge difference between the absolute units for classic
print and the relative and pro units available with CSS.
> each individual can make their own individual choice if only the author
> will let them.
Albeit the majority of people does either not know about their choice or
cannot or don't want to take it. It's the responsibility of web designers
(and in theory browser developpers) to make a good suggestion for these.
Sadly many web designers kno^Wwere told to make a suggestion, but make a
bad and overly restrictive one.
> start at the optimum if you like but don't try to prevent
> each individual changing it to what they prefer.
That's not possible with CSS anyhow.
--
To be or not to be---that's no question, it's a decision.
| |
|
| lime wrote:
> "rf" wrote
> For you it may be wastage ... for me it was
> limiting the length of text for readability.
Ok. How about your user. What's their viewport size? Hmm?
Answer: You dunno.
So what?
| |
|
| On Mon, 15 Nov 2004 17:54:54 -0600, kchayka <usenet@c-net.us> wrote:
> Brian wrote:
>
> That's too short for me. Better:
> p {max-width: 45em}
I prefer 10,048,373em. Call me funny. I like long lines.
Why not serve it reasonably and allow the user to adjust if it's important
enough?
| |
| Brian 2004-11-21, 11:18 pm |
| Neal wrote:
> kchayka <usenet@c-net.us> wrote:
>
Aside: what I wrote is too short for me, too. I just put in 32em as an
example.
[color=darkred]
> Why not serve it reasonably and allow the user to adjust if it's
> important enough?
Because setting a max-width for p allows for the total window size to be
as large as the user wants without sacrificing readability.
--
Brian (remove "invalid" to email me)
| |
|
| On Tue, 16 Nov 2004 08:38:12 GMT, Brian
<usenet3@julietremblay.com.invalid> wrote:
> Neal wrote:
>
> Aside: what I wrote is too short for me, too. I just put in 32em as an
> example.
>
>
> Because setting a max-width for p allows for the total window size to be
> as large as the user wants without sacrificing readability.
How do you KNOW what level ruins readability?
| |
| Martin Bialasinski 2004-11-21, 11:18 pm |
| Neal <neal413@yahoo.com> wrote:
> Why not serve it reasonably and allow the user to adjust if it's
> important enough?
How do I make a tab in Firefox smaller while leaving the other tabs
at the old size?
| |
| Martin Bialasinski 2004-11-21, 11:18 pm |
| Brian <usenet3@julietremblay.com.invalid> wrote:
> Because setting a max-width for p allows for the total window size
> to be as large as the user wants without sacrificing readability.
This reason is only valid, as long as you hold the results of hundreds
of years of typography and the research done in this field as soundly
founded valid.
When you do, and the other part ignores it, argumentation on this
topic is in vain.
| |
| Martin Bialasinski 2004-11-21, 11:18 pm |
| Neal <neal413@yahoo.com> wrote:
> On Tue, 16 Nov 2004 09:53:50 +0100, Martin Bialasinski
> <agr30+news@uni-koeln.de> wrote:
>
>
> Dunno. How?
I also don't know. It does not seem possible. This rises the question,
if "let the user adjust" is practically feasibly.
| |
| Martin Bialasinski 2004-11-21, 11:18 pm |
| Neal <neal413@yahoo.com> wrote:
> But we're discussing width of paragraphs. Your comment is a
> non-sequitor.
Is it? The webpage originally in question has a nav column on the left
and the main text on the rest of the width.
If you argue, that the main text should not have a max-width set
but the user should adjust it himself, I am interested on how to do
this.
In Firefox, I do not seem to be able to resize the tabs
independently. If this is really the case, this approach is not
feasible IMHO.
| |
| Lauri Raittila 2004-11-22, 4:15 am |
| in comp.infosystems.www.authoring.stylesheets, Chris Morris wrote:
> Martin Bialasinski <agr30+news@uni-koeln.de> writes:
>
> Except in cases where there's a large image or large table on the
> page, what does this gain except lots of whitespace in a column
> somewhere? If someone is running at a large resolution and has their
> browser maximised or nearly so I assume they like it that way, even if
> the majority of people would find it less readable.
I run my browser sometimes fullscreen. That is only way to look at some
image galleries as they have 1600*1200 images...
If site has much text (descriptions of those images in gallerypage), I
certainly can't read it, unless width of text is limited, or if
extreamily big line height is used.... And if line-height is 2 or 3, it
will look horrible when looked on smaller window.
>
> There's a slight problem with setting a max-width in em, though (not
> that the problems with other units aren't even worse), which is that
> depending on the font, an em-set width may allow considerably
> different words/line ratios.
That's why I use ex. Not that it is much better. But this is mostly
irrelevant, unless someone uses Verdana. And using Verdana is bad idea in
first place. (any other font with diffent ratio is irrelevant as it don't
work on web either...)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
| |
| Lauri Raittila 2004-11-22, 4:15 am |
| in comp.infosystems.www.authoring.stylesheets, Martin Bialasinski wrote:
> "Rijk van Geijtenbeek" <rijk@operaremovethiz.com> wrote:
>
>
>
> Hmm. With max-width as a percentage, this is not that good.
>
> I did a test with min-width: 40em; max-width: 60% and then made the
> window smaller.
Min-width of 40em is too big IMHO. I use font big enaugh to make it
overflow my window sometimes. Something like min-width: 15em makes
sence, as text is very hard to read if shorter
> In Opera, when 40em got larger than 60%, there was quite some reflow
> and you have to scroll horizontally, which is a major no-go IMHO.
> Firefox disregards max-width, when 40em got larger than 60% and kept
> the linewidth at 40em, which ultimately caused the scrollbar.
As per spec. It is unfortunate that there is no way to make max-width
more important than min-width.
> I do not see min-width as useful here.
You use too big value for it. It is useful, when there is only one word
on line.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
| |
|
|
"Neal" wrote in message :
> lime wrote:
>
> Ok. How about your user. What's their viewport size? Hmm?
>
> Answer: You dunno.
True.
>
> So what?
put it back to normal...
| |
|
|
"kchayka" wrote in message ...
> lime wrote:
>
> You must be assuming a certain window size and/or text size. Don't.
>
> With smaller windows, 60% width for the content area can make for
> too-short lines of text, which is also a readability problem. Ditto with
> larger text sizes. BTW, your body text size is still much too small.
True - you have a point.
| |
| Chris Beall 2004-11-22, 4:16 am |
| lime wrote:
> For you it may be wastage (such a pessimist aren't you ;o)) for me it was
> limiting the length of text for readability.
Here's a quote on the subject:
"Line length
The recommended number of characters in a
line does not vary between the medium of
paper and screen, however. A range of 65–75
characters per line is a comfortable maximum
for a single column of text in print, with a
range of 30-40 characters per line common in
multicolumn layouts. The reason for this maximum
is based on the characteristics of our
visual system. We scan a line of text in groups
of letters, first picking up the exterior shapes of
word groups, then decoding words as our eye
bounces along from left to right. The sweeping
motion of turning our eye back to the left
becomes increasingly difficult as the line gets
longer. Our ability to pick the start of the next
line is decreased by combinations of long lines,
tight line spacing, and lack of white space on
the left-hand margin."
This is from
http://www.kahnplus.com/download/pd...teractions.pdf, which has
lots of discussion of text presentation considerations.
Another rule of thumb I vaguely recall is that line length in any given
font should not exceed the length of the combined upper and lower case
alphabet in that font.
In either case, you have to express the desired max-width in terms of
ems, so that it will scale with the choice of font and font size. And
the results will vary a bit depending on which font is actually used by
the browser. Max-width: 30em seems to come pretty close for most cases
I tested.
And, of course, the browser has to support max-width...
Chris Beall
| |
| Christoph Paeper 2004-11-22, 4:16 am |
| *Chris Beall* <Chris_Beall@prodigy.net>:
>
> In either case, you have to express the desired max-width in terms of
> ems, so that it will scale with the choice of font and font size.
'ex' should be even more appropriate.
> Max-width: 30em seems to come pretty close for most cases
Although it comes often close to the traditional recommendation, it's too
narrow, because scrolling is also a (negative) factor, that doesn't have
to be considered in paged media, where it's easier to find the next first
word of a page or column.
--
"The squeaking wheel doesn't always get the grease.
Sometimes it gets replaced."
Vic Gold
| |
| Chris Beall 2004-11-22, 4:16 am |
| Christoph Paeper wrote:
(snip)
> 'ex' should be even more appropriate.
Agreed. That might resolve a problem I had with a couple of the fonts I
tested. 'ex' hasn't been brought up much here; I had to go look it up.
>
>
> Although it comes often close to the traditional recommendation, it's
> too narrow, because scrolling is also a (negative) factor, that doesn't
> have to be considered in paged media, where it's easier to find the
> next first word of a page or column.
We're into a very subjective area here. I see two conflicting goals.
To minimize the NEED for vertical scrolling, we want the longest
possible line length, so as to get as much text as possible 'above the
fold', but once scrolling is required, we've aggravated the normal
printed-media situation, since all of our visual reference points will
jump during the scroll, giving our visual system a real challenge to
keep its place. That would argue for shorter-than-print-media lines.
Since we can't control the window or font size, I'd vote for assuming
that we have little control over what stays above the fold and thus
should assume vertical scrolling WILL be needed and thus opt for short
line lengths. But that's my abstract opinion. In any given case I'd
want to look at the page in totality to see what works best (under a
wide variety of conditions).
30em or about 65ex seems like a good starting point.
Chris Beall
| |
| Stephen Poley 2004-11-22, 4:16 am |
| On Wed, 17 Nov 2004 04:00:12 GMT, Chris Beall <Chris_Beall@prodigy.net>
wrote:
>Christoph Paeper wrote:
>(snip)
>
>Agreed. That might resolve a problem I had with a couple of the fonts I
>tested. 'ex' hasn't been brought up much here; I had to go look it up.
Not agreed. I spent sometime investigating this and came to the
conclusion that ex was no improvement at all. It might be for some
specific fonts, but worse for other fonts - and for most browsers it
just seems irrelevant anyway. See
http://www.xs4all.nl/~sbpoley/webmatters/emex.html
--
Stephen Poley
http://www.xs4all.nl/~sbpoley/webmatters/
| |
|
| Neal wrote:
> Martin Bialasinski <agr30+news@uni-koeln.de> wrote:
>
>
>
> But we're discussing width of paragraphs. Your comment is a
> non-sequitor.
His point is this: If a Firefox/Safari etc. user has mulitiple tabs
open, they may want a smaller window for a text page, to improve
readability, but a wider window for an image gallery. To achieve this,
they need either max-width on <p>, or they'll have to change the window
size each time they switch tabs.
--
Brian (remove "invalid" to email me)
| |
|
| Neal wrote:
> Brian wrote:
>
>
>
> How do you KNOW what level ruins readability?
The same way that I KNOW lots of things: by reading about them. In other
words, I have not conducted my own usability studies on this particular
matter, but I've read the results of others' studies.
--
Brian (remove "invalid" to email me)
| |
|
| Chris Morris wrote:
> Martin Bialasinski <agr30+news@uni-koeln.de> writes:
>
>
> Except in cases where there's a large image or large table on the
> page, what does this gain except lots of whitespace in a column
> somewhere?
Hopefully, improved readability. And in any case, not much is lost since
I use max-width (not width) set in em units.
> If someone is running at a large resolution and has their browser
> maximised or nearly so I assume they like it that way
So do I. I do not assume, however, that a large window necessarily means
they like long lines of text in paragraphs. They may like wide windows
for other reasons (more image content per screenful, large font
size...).
--
Brian (remove "invalid" to email me)
| |
| Brian 2004-11-22, 11:22 pm |
| kchayka wrote:
> Brian wrote:
>
>
> Is there a rule that says if you're using tabbed browsing you can't
> have multiple windows open?
Of course not. And nothing I wrote makes that case.
> I often open certain kinds of sites in separate windows, usually
> because they need something extra wide. I can't believe nobody else
> does this.
I'm sure they do. I don't, though, because I prefer having one window,
and one taskbar item, regardless of the content in the tabs.
--
Brian (remove "invalid" to email me)
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|