Optimise screen size with CSS

[Les Juby]

I understand that there are several ways to effectively control the
browser delivery of HTML to make the most effective use of the
different screen resolutions today. (And in the foreseeable future...)

I have a client with a text based site (displays a lot of labour law)
which is being read in a range of resolutions and he wants a rewrite
as a long term solution to browser resolution compatibility.

My thinking goes........
1. What is the effective scope of size.?

800 x 600
1024 x 768
1280 x 1024 and bigger....
2. How to display.?

The 800 x 600 resolution should occupy a full screen.

1024x768 can use the same fonting and image sizes, but should
dynamically resize to occupy the bigger screen

1280x768 can stay at the same external dimension as 1024x768 but the
fonting needs to be increased to give bigger retinal images as the
onscreen fonts shrink in pixel size.
2. Could tables be used.?

I figure that a Java or ASP script can sense if the screen size is
bigger than 1024x768 and can place the HTML within a single table
element that is 1024 wide. If that table is centred the problem is
nearly solved.

Except that the physical pixel size of text will be shrinking as the
resolution goes up.
3. CSS as a solution.?

Is there a CSS solution that fits most sites which would deal with
this issue. It seems that CSS is best suited to handle this, but for
a newby it is daunting to assemble for this many variables.
Any resources out there to maybe refer to....
thanks

.les.

[David Dorward]

Les Juby wrote:

1. What is the effective scope of size.? 800 x 600
Resolution is relevant only as a limiting factor to canvas size, the canvas
is usually smaller then the resolution (thanks to a combination of browser
toolbars, desktop toolbars and people not maximising windows). Also
remember that handheld devices tend to have much smaller displays.
2. How to display.? 1280x768 can stay at the same external dimension as 1024x768 but the
fonting needs to be increased to give bigger retinal images as the
onscreen fonts shrink in pixel size.
The font size only shrinks if you up the resolution without increasing the
physical size of the display.

You could set the widths of elements using units relative to the font size
(i.e. ems).
2. Could tables be used.? I figure that a Java or ASP script can sense if the screen size is
bigger than 1024x768
No, it can't. JavaScript could, but its not a very nice solution. The
max-width property is a better bet, and there are hacks out there to fake
support for it in IE.
and can place the HTML within a single table element that is 1024 wide.
Why abuse a table this way? And it doesn't really solve the problem, users
with a window that size are likely to have a relatively large font size, so
you end up with short (in characters) line length.
3. CSS as a solution.?

"Relax and assume users are not complete idiots who configure their systems
and browsers to make it impossible to read text in them"?

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Mellow Crow]

Les Juby wrote:

I have a client with a text based site (displays a lot of labour law)
which is being read in a range of resolutions and he wants a rewrite
as a long term solution to browser resolution compatibility. 3. CSS as a solution.?
Yes. CSS is probably the best way to do it.
1. What is the effective scope of size.?
Current most popular resolutions, from stats at
http://www.webhits.de/webhits/browser.htm

1024 x 768 57.6%
1280 x 1024 26.3%
800 x 600 5.0%

So I design for 1024 X 768 AND design my page to be "liquid" or "elastic"
2. How to display.?
In CSS/(X)HTML you need, then, to design for a so called "liquid" or
"elastic" layout.
2(a). Could tables be used.?

Don't use tables for layout. Instead you need to consider two things: your
font size; and how you dimension your blocks (navigation, content and other
divs).

As for font size.
David Dorward makes an important point The font size only shrinks if you up the resolution without
increasing the physical size of the display.

You could set the widths of elements using units relative to the font
size (i.e. ems).

You could use relative units like em, keywords, or percentages. Don't use
absolute units like pixels.

So the key setting in CSS is something like:
body, td, th
{
font-size: small;
}

Some people argue that it's best NOT to set the (initial) font size in CSS
but let the default browser setting decide (which may have been deliberately
adjusted by the user).

Perhaps we need others with more conviction on font-sizing to make their
case.

One article to consider: http://www.alistapart.com/articles/elastic/

[Johannes Koch]

Mellow Crow wrote:

Current most popular resolutions, from stats at
http://www.webhits.de/webhits/browser.htm

1024 x 768 57.6%
1280 x 1024 26.3%
800 x 600 5.0%

.... of JavaScript-enabled browsers.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Beauregard T. Shagnasty]

Mellow Crow wrote:

So I design for 1024 X 768 AND design my page to be "liquid" or
"elastic"

For some reason, the term "oxymoron" popped into my thoughts...

--
-bts
-Warning: I brake for lawn deer

[Jake]

In message <12*******************************@40tude.net>, Beauregard T.
Shagnasty <a.*********@example.invalid> writes

Mellow Crow wrote:

So I design for 1024 X 768 AND design my page to be "liquid" or
"elastic"

For some reason, the term "oxymoron" popped into my thoughts...

Although a page may be fluid -- in that the content is accessible by UAs
of all screen sizes down to a cell-phone -- there is always going to be
that one size of screen where the layout is going to look its best. No?

If 1024 x 768 is the most popular size, then it seems reasonable that
you would want to make your page look its best at that size.

Regards.
--
Jake (ja**@gododdin.demon.co.uk -- just a 'spam trap' mail address)

[Alan J. Flavell]

On Wed, 26 Oct 2005, Jake wrote:

If 1024 x 768 is the most popular size,

Of screen, maybe, but not of browser window.

And I've never yet met a graphical browser which installed with a
fullscreen browsing window, so - if one believes the popular legends
about users never reconfiguring their browsers - then the size of the
full screen is not the point.

[kchayka]

Les Juby wrote:

I understand that there are several ways to effectively control the
browser delivery of HTML to make the most effective use of the
different screen resolutions today. (And in the foreseeable future...)

<URL:http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html>

That's just one link from the now defunct allmyfaqs.com
<URL:http://web.archive.org/web/20041012213559/http://allmyfaqs.com/faq.pl?AnySizeDesign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Alan J. Flavell]

On Wed, 26 Oct 2005, Les Juby wrote:

I understand that there are several ways to effectively control the
browser delivery of HTML to make the most effective use of the
different screen resolutions today. (And in the foreseeable future...)
That's an impressive piece of verbiage, but I'm afraid it doesn't
really stand up to scrutiny.

"Effective control", in a web context, is in the hands of the reader;
we as authors can do no more than to make presentation proposals.
Which, we hope, the main body of users will be able to use, but, when
push comes to shove, a user who finds the presentation proposals to be
inappropriate for their browsing situation (technology, screen size,
eyesight, any other relevant disabilities...) can override them, while
still getting the *content* which one is offering.

Current best practice is to mark-up the content in HTML to denote its
logical structure, without specific regard to its presentation; then
to offer stylesheet(s) in CSS which propose some suitable
presentation(s).
I have a client with a text based site (displays a lot of labour
law) which is being read in a range of resolutions and he wants a
rewrite as a long term solution to browser resolution compatibility.
What's wrong with it at the present time? Is it preventing the
readers from choosing a suitable text size for comfortable reading? Is
it causing them problems with choosing a suitable window size in which
to read it?
My thinking goes........
No, really - what *is* wrong with it at the present time? To give a
realistic answer, we do need to know more about that, before
discussing the actual medicine. But in the absence of any samples...
1. What is the effective scope of size.?
None at all, really. If it's text, then it's just as valuable on a
speaking browser, or a 24 x 80 text window, as it is on a graphic
display.
2. How to display.?

The 800 x 600 resolution should occupy a full screen.
Should it? That's the reader's decision. What it *should* do is
accommodate best to whatever display situation the reader is offering
it. That doesn't mean that you have to actively research the reader's
situation - it means you would be advised to use designs which are
flexible enough to accommodate themselves.
1024x768 can use the same fonting and image sizes, but should
dynamically resize to occupy the bigger screen
I hope you're not seriously proposing to design a separate stylesheet
for each and every browser resolution? 1.0em is the default text size
which the more-discerning reader has chosen, and to which the
less-discerning reader has consented: it represents a text size which
they can demonstrably read - or else they would have already taken
some action about it.
1280x768 can stay at the same external dimension as 1024x768 but the
fonting needs to be increased to give bigger retinal images as the
onscreen fonts shrink in pixel size.
You haven't mentioned screen size yet. I use my little laptop at
1024x768 (it's designed for that), but I've seen people with 19-inch
CRT displays used at the same pixel settings (i.e very different
per-inch resolution). Both of them respond well to 1.0em text size,
which they certainly won't do if you aim to specify a fixed text size,
which is what I fear from your way of discussing the topic.
Is there a CSS solution that fits most sites which would deal with
this issue.

Have you read any discussion on this group *before* posting that
question? Seriously.

If you presented me with the kind of stylesheet that I fear you are
describing, then I'm pretty sure I'd turn CSS off in the browser.
That's how much "control" you would get by trying to over-specify.

What I'd have to recommend is a more flexible attitude to the whole
task. This old article has been around so long that it's grown
whiskers, but it's still apt:
http://www.westciv.com/style_master/...oil/not_paper/

Good luck.

[Stephen Poley]

On Wed, 26 Oct 2005 18:21:41 +0100, Jake <ja**@gododdin.demon.co.uk>
wrote:

In message <12*******************************@40tude.net>, Beauregard T.
Shagnasty <a.*********@example.invalid> writes

Mellow Crow wrote:

So I design for 1024 X 768 AND design my page to be "liquid" or
"elastic"
For some reason, the term "oxymoron" popped into my thoughts...

Although a page may be fluid -- in that the content is accessible by UAs
of all screen sizes down to a cell-phone -- there is always going to be
that one size of screen where the layout is going to look its best. No?

I understand from the OP that the site consists pretty much of text. In
that case it is not very difficult to design a site that will look fine
on any size of screen (at any rate as long as it's large enough to
display a few words of text per line).

If 1024 x 768 is the most popular size, then it seems reasonable that
you would want to make your page look its best at that size.

To the extent that images are to be included, you do have to have some
idea of the size aimed at. But you would be foolish to assume that your
readers have no navigation bars, always have their browser maximised
etc. It shouldn't be too difficult to design a site that looks good at
all widths from about 600 to 1024, and passable from 400 to 1200.
(Always assuming that the user has a default font size appropriate to
his window/monitor combination of course).

And making use of the handheld media type should allow you to cope with
very small screens. Always assuming that they typically identify
themselves as "handheld" of course - has anyone investigated this?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/