473,788 Members | 3,030 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Optimise screen size with CSS

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.

Oct 26 '05 #1
9 3414
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
Oct 26 '05 #2

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/

Oct 26 '05 #3
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.)
Oct 26 '05 #4
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
Oct 26 '05 #5
In message <12************ *************** ****@40tude.net >, Beauregard T.
Shagnasty <a.*********@ex ample.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)
Oct 26 '05 #6
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.
Oct 26 '05 #7
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?AnySizeD esign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Oct 26 '05 #8
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.
Oct 26 '05 #9
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.*********@ex ample.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/
Oct 26 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
14544
by: Michael Hill | last post by:
I have a perl script that i use to render a html page. In that page i call out a stylesheet. If the user has a 800x600 display the fonts are really too big. Since screen resolution is a function of the client and I have this javascript ot detect the srecc size: function ck_res() { if ( (screen.width != 1024) && (screen.height != 768) ) {
48
8714
by: David J Patrick | last post by:
I'm trying to rewrite the CSS used in http://s92415866.onlinehome.us/files/ScreenplayCSSv2.html. using the w3.org paged media standards as described at http://www.w3.org/TR/REC-CSS2/page.html The ScreenplayCSS is flawed, for several reasons; -overuse of <div id= tags -doesn't scale screen resolutions (convert from px to in, pt ?) -no media="print" (how much coule be shared between "screen" & "print") -no automatic page breaks (with...
64
4279
by: Dave | last post by:
A friend of mine pointed out the other day that certain elements on my web site are too small. But in most of what I publish, fonts are at default size or smaller, and my images are easy to see. I am viewing at 800x600 right now by the way, because that's what I can comfortably see. Times New Roman default pitch is what - 12px? With people increasing their screen resolutions, is it possible for "default size to ever become too small in...
4
1851
by: UJ | last post by:
I have a client who wants me to make a web page with a marquee on it. No problem. They want the text to be easily changeable. No problem. They want it so that the text will appear about the same size regardless of the screen resolution. Now that's my problem. In a sense, they want it so that if the screen is 800x600 and the text would be 1" tall, and then they make the screen 1600*1200, they still want the
2
3855
by: copyco | last post by:
Does anyone have any suggestions on this? I have a form that can be collapsed into a compact size and expanded back to full size. If the user moves the compact size of the form close to the edge, then when it is brought to full size, the right edge goes off the edge of the screen. How can I code to adjust for this? If I code for checking for the left edge and the size and being a certain distance from the right edge of the screen, then...
5
6208
by: Maxi | last post by:
I have a 30X16 cells table in my html page. Table height and width are set to 100%. I have set size of every cell inside the table to 24 pixel. When I open the html page in maximize state in either resolution 800 X 600 or 1152 X 864 it takes up the entire explorer size. In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel in the cells it takes up the entire cell size (ideally it should as the cell size is also 24 X...
31
4205
by: melinama | last post by:
Hello, I've looked through alt.html and this group for an answer to my question. However, I found only cranky arguments with, occasionally, bits of hard-to-understand code - out of context - each of which is slammed by the next people along in the thread. So I'm afraid to ask this but I need to know!...
5
9020
Atran
by: Atran | last post by:
Hello Everyone. In this article: You will know to capture the screen in 2 ways: 1)- Capture full screen. 2)- Capture region. Let's Begin: First make a new Windows Application project. And make sure your program uses these namespaces: using System;
10
44087
by: =?Utf-8?B?UmljaA==?= | last post by:
A lot of users at my workplace use different screen resolutions, and I build apps to use 1680 x 1050 pixels res by default. But some users are using 800 x 600, and the apps are too large for their screen. I used to write code in Java a few years ago (2005), and you could stretch a form with the mouse and all the controls and fonts would resize to larger or smaller size. Does .Net framework 3.5 support this kind of functionality? Or -...
0
9655
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9498
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10363
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9964
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5398
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5535
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4069
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3670
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2894
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.