designing to fit into screen resolution

[aa]

what is the most common screen resolution these days?
For what resolution do you usualy design?
What is the technique to designe an HTMP page which would automatically fit
into the resolution set on a particalar Windows installation?

 

[J.O. Aho]

what is the most common screen resolution these days?

I would guess 1024x768, seen this resolution on all to many 17" and 19"
monitors (TFT/CRT), kind of people who thinks the text and icons becomes too
small if you use anything higher.

> For what resolution do you usualy design?

Depends a bit on what I'm working on, but trying to see to that it's usable
from 800x600 (which is kind of the size of my browser window, I never like to
have full screen).

> What is the technique to designe an HTMP page which would automatically fit
> into the resolution set on a particalar Windows installation?

Why limit to microsoft? The number of Unix based/like desktop machines does
increase each day, so make it work in any OS and any browser.

 

[David Segall]

what is the most common screen resolution these days?

The wonderful thing about standards is that there are so many to
choose from
<http://en.wikipedia.org/wiki/Image:Vector_Video_Standards.png>. I
would guess that XGA (1024x768) is currently the most common. I think
that aspect ratio is as important as resolution and I don't think you
should design for this 4:3 aspect ratio. The boom in "wide screen" LCD
televisions has resulted in a price drop for the 16:9 and 16:10 aspect
ratio LCDs which will be reflected in the coming sales of computer
monitors.

For what resolution do you usualy design?

I try, and fail, to make them acceptable from 800x600 to my own
current 1680x1050 screen.

What is the technique to designe an HTMP page which would automatically fit
into the resolution set on a particalar Windows installation?

Print media provides a reasonable guide and they vary the number of
columns on a printed page to compensate for changes in the width of
the page. I don't know of any way to do that in HTML.

 

[Michael Fesser]

..oO(David Segall)

The wonderful thing about standards is that there are so many to
choose from
<http://en.wikipedia.org/wiki/Image:Vector_Video_Standards.png>. I
would guess that XGA (1024x768) is currently the most common. I think
that aspect ratio is as important as resolution and I don't think you
should design for this 4:3 aspect ratio. The boom in "wide screen" LCD
televisions has resulted in a price drop for the 16:9 and 16:10 aspect
ratio LCDs which will be reflected in the coming sales of computer
monitors.

What has a website to do at all with the aspect ratio of your monitor?

Micha

 

[aa]

Thanks, everybody.
Because of my eyesight I have 800x600 on my 19" TFT and I know I am guite
unusual in that.
When I looked it what I did on 1024x768 the margins are too big.
After reading the posts above I have an impression that having versions for
800x600 and for 1024x768 and this should cover the bulk of the users. I am
not sure about fluid design for I use composite pictures which are assembled
from several small fragmets sometimes superimposing using
style="position:absolute; top:;left:";

 

[dorayme]

Thanks, everybody.
I am
not sure about fluid design for I use composite pictures which are assembled
from several small fragmets sometimes superimposing using
style="position:absolute; top:;left:";

Your website is basically pictures? You are set on this course?
Let me not judge that I be not judged.

Look into specifying all your widths for all the pics in % terms
in the css only (not the html). Let the browser calculate the
widths if you cannot work them out. With some luck it will work
over a lot of resolutions and screen sizes.

What you do is look at the whole and think the width 100%, look
at all the fragments and get the proportional widths of each. id
each fragment in the html and enter the width as an instruction
in the css. It should be fun.

 

[J.O. Aho]

Your website is basically pictures? You are set on this course?
Let me not judge that I be not judged.

Look into specifying all your widths for all the pics in % terms
in the css only (not the html). Let the browser calculate the
widths if you cannot work them out. With some luck it will work
over a lot of resolutions and screen sizes.

I'm not as much for this solution

Say your images are or high quality/resolution, even if the browser window
is small, the amount of data sent is the same, still many in US seems to use
modems, no gain for them of having a small resolution.

Say your images are of low quality/resolution, when your browser window is
big, the images are scaled up and looking really crappy.

In this case I would rather have two different setups of images, yes it's more
work, but you make things look okey and you get more speed when getting to
"low quality" version of the site.

 

[Andy Dingley]

Because of my eyesight I have 800x600 on my 19" TFT

You'll get better results if you always set your display to the ideal
resolution that your TFT display is designed for (1280 x 1024 ?) and
then adjust the desktop font size and possibly the browser default size
until the text is a convenient size.

There is no reason why poor eyesight should ever require you to lower
the display resolution, particularly with a display that has such a
strong attachment to particular resolutions. Use all those pixels you
paid for, and use more pixels per character.

 

[dorayme]

I'm not as much for this solution

Of course you are right. Neither am I. It is a bad idea to be
making a website based on sliced up pics in the first place. But
the point is this, if you are set on doing this, there are going
to be a fair number of disadvantages. Either for you to make
various websites for various resolutions and somehow sniff them
out to apply the appropriate or else to cause some unnecessary
download pain to those with small/low res screens. The keyword
here is unnecessary. One should be making pics reasonably quick
to load even for a 19" screen.

Browsers scale pics down with reasonable quality and (along with
just about everything else but an earthling artist) do a lousy
job of scaling up many pics (hard to get something out of
nothing, easy to leave out some from more). Having said this,
Safari and FF and some other browsers (at least on Macs) do a
good job if the emming or %ing is set well in the first place,
but is rather disappointing in IE on a Winbox last time I looked.

 

[dorayme]

You'll get better results if you always set your display to the ideal
resolution that your TFT display is designed for (1280 x 1024 ?) and
then adjust the desktop font size and possibly the browser default size
until the text is a convenient size.

There is no reason why poor eyesight should ever require you to lower
the display resolution, particularly with a display that has such a
strong attachment to particular resolutions. Use all those pixels you
paid for, and use more pixels per character.

This is good advice where text is concerned. Pity that so often
one has to look at pictures of text. But really, a 19" on 800x600
suggests a third solution is needed. For which one needs to know
the platform. I think it likely that native res for the screen
may well be part of it, but it is not certain.

 

[aa]

> You'll get better results if you always set your display to the ideal
resolution that your TFT display is designed for (1280 x 1024 ?) and
then adjust the desktop font size and possibly the browser default size
until the text is a convenient size.

It might be worth trying but I do not care about desktop font size for there
is no text to read on my desktop
I do care about forn size in the application
I am not sure that setting the font for application is the best way out
simply because not for all of them it si obvious how to do that.
As to setting font size for browser, this does not seem good to me as it
most probably screw up a page if it was designed for another text size.
On the other hand you are right about usinf the best resolution for the
monitor.
What would you say?

 

[aa]

The platform is w2k SP4 on PC, Pentium 2.8G
"dorayme" <[email protected]> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
ÓÌÅÄÕÀÝÅÅ:

 

[aa]

"dorayme" <[email protected]> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
ÓÌÅÄÕÀÝÅÅ:

> Your website is basically pictures? You are set on this course?

I realise the downsides of this design and usually do not use it. This time
I just got this set of graphics, and being absolute zero in graphic design,
I had to select this option.
I plan to have two css files, one for 800x600 and the other for 1024x760,
and set all the images locations and scales in these css. Then using JS will
select a css depending on screen.width property.
BTW on 800x600 I had to sca;e down all the graphics, so on 1024x760 it will
be used as is without scaling up, so the quality should preserve.
Also because the target audience of this site are companies in entrtainment
business, I do not expect them to have problems with bandwidth. I even think
that for this type of audience I do not need 800x600 at all.

 

[Jonathan N. Little]

Of course you are right. Neither am I. It is a bad idea to be
making a website based on sliced up pics in the first place. But
the point is this, if you are set on doing this, there are going
to be a fair number of disadvantages.

Will see building a page of images slices is just bad all around, and
not very creative IMHO. Far better if one desires such is to give the
illusion of 1 big image, but in actually is a clever hybrid construct of
image fragments and fills. I have seen some very impressive and arty
examples. The clever layering allows the page to scale, keeps bandwidth
manageable, and appears unified as an image. (Mind you these are
specialty sites, not suitable everywhere) Not easy to do, takes careful
planing and a bit of talent!

 

[the red dot]

"dorayme" <[email protected]> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
ÓÌÅÄÕÀÝÅÅ:


I realise the downsides of this design and usually do not use it. This time
I just got this set of graphics, and being absolute zero in graphic design,
I had to select this option.
I plan to have two css files, one for 800x600 and the other for 1024x760,
and set all the images locations and scales in these css. Then using JS will
select a css depending on screen.width property.
BTW on 800x600 I had to sca;e down all the graphics, so on 1024x760 it will
be used as is without scaling up, so the quality should preserve.
Also because the target audience of this site are companies in entrtainment
business, I do not expect them to have problems with bandwidth. I even think
that for this type of audience I do not need 800x600 at all.

im 1280x1024 should i change my screen resolution when viewing your site?

 

[Ed Mullen]

It might be worth trying but I do not care about desktop font size for there
is no text to read on my desktop
I do care about forn size in the application
I am not sure that setting the font for application is the best way out
simply because not for all of them it si obvious how to do that.

Every application may have a different way of dealing with displayed
font size relative to OS font settings. You simply need to record what
you have now (so you can revert if need be) and then experiment.

As to setting font size for browser, this does not seem good to me as it
most probably screw up a page if it was designed for another text size.
On the other hand you are right about usinf the best resolution for the
monitor.
What would you say?

You can never expect anything on the Web. There are billions of pages
created by tens or hundreds of millions of authors, most (I'm guessing)
have little knowledge or understanding of the issues surrounding Web
page development. So. Learn how your OS' and browser's display
settings interact, how you can control your browser's display settings
on the fly (e.g., Mozilla's "Text Zoom" function and using a mouse wheel
to control it), etc. Or just give up and live with what you have now.
There is no "right" answer, it's what you are willing to invest in
learning and execution.

In general, it's a trade off for you (or any individual user) of the
time and energy to invest in learning vs. whatever benefit you might
accrue. Doing nothing, however, is both the easiest course and the one
which offers the least possibility of change and benefit.

It's one of the most egalitarian of life's choices because it puts the
control and decision in our own hands. Enjoy, there aren't that many
such options in life. ;-)

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Old age is when you still have something on the ball but you are just
too tired to bounce it.

 

[Roy A.]

David Segall skrev:

The wonderful thing about standards is that there are so many to
choose from
<http://en.wikipedia.org/wiki/Image:Vector_Video_Standards.png>. I
would guess that XGA (1024x768) is currently the most common. I think
that aspect ratio is as important as resolution and I don't think you
should design for this 4:3 aspect ratio. The boom in "wide screen" LCD
televisions has resulted in a price drop for the 16:9 and 16:10 aspect
ratio LCDs which will be reflected in the coming sales of computer
monitors.
I try, and fail, to make them acceptable from 800x600 to my own
current 1680x1050 screen.
Print media provides a reasonable guide and they vary the number of
columns on a printed page to compensate for changes in the width of
the page. I don't know of any way to do that in HTML.

If you consider both tables and floating divs as tools to lay out your
page, html with css2 offer you som help. At least in the
specifications. With floating divs, columns could be given a relative
width and jump up or down to compensate for changes in the width.
Unfortunately the properties for minimum and maximum widths are, as I
can recall, not supported. You could try with relative but fixed width,
but it could be hard to avoid white space where it shouldn't be.

The css2 specification is eight years old, so we can always hope.
Absolutely positioned divs could give you a mess that is hard to handle.

 

[aa]

im 1280x1024 should i change my screen resolution when viewing your site?

No. You will have some margins, and it will lokk ugly but all the info I
want you to see will be seen without scrollin
You can try
http://www.pifpaf.front.ru/index_en.htm
http://www.pifpaf.front.ru/arenda_en.htm
Mind, for the moment it is made for 800x600
I am adding now css for 1024x760 and after you mentioned 1280x1024, I will
add it too

 

[aa]

Right you are
I am aware of the browsers/OS etc statistics and of opinion that in desire
to match all possible user setups and habits, one has to decide where to
draw the line.
I visited quite a lot of customers of the site in question, and also when
receive phone calls from the site I enquire what OS/browser a customer has
how the site looks there.
So far with my slice of visitors I never came across anything other then IE6
or higher and XP (with small exceptions for w2k). As to resolution, people
simply do not know and do not seem to care. Most probably they have what
they got by default, which now is most probably 1024x760
And even those few who browse with half-size browser window, they know to
click a littile (x) at the upper right corner to maximise the window is a
particular web-site looks better this way
Therefore admitting existence of Macs, Lynux, Opera etc, I believe that
taking into aqccount my customer base and limited resources instead of
spending time on these, it would be more beneficial to spend time on
developing the product

 

[John Hosking]

No. You will have some margins, and it will lokk ugly but all the info I
want you to see will be seen without scrollin
You can try
http://www.pifpaf.front.ru/index_en.htm
http://www.pifpaf.front.ru/arenda_en.htm
Mind, for the moment it is made for 800x600

I am sorry to tell you this but the pages look bad at 1024x768, and
don't get any better at 800x600 (for which they're supposedly made). It
looks like the elements which are visible are misaligned and
overlapping. Oh, I see it looks a bit better in IE but I checked first
in Firefox.

I am adding now css for 1024x760 and after you mentioned 1280x1024, I will
add it too

Don't code for specific sizes. How do you know which of your three exact
sizes the visitor has? What if they have a different size? My browser is
almost *never* at any of those three sizes. For example, right now, my
browser's viewport is 851 px wide x 643 px high. What will you show me?