designing to fit into screen resolution

Discussion in 'HTML' started by aa, Jan 15, 2007.

  1. aa

    aa Guest

    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?
     
    aa, Jan 15, 2007
    #1
    1. Advertising

  2. aa

    J.O. Aho Guest

    aa wrote:
    > 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.

    --

    //Aho
     
    J.O. Aho, Jan 15, 2007
    #2
    1. Advertising

  3. aa

    David Segall Guest

    "aa" <> wrote:

    >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.
     
    David Segall, Jan 15, 2007
    #3
  4. ..oO(David Segall)

    >"aa" <> wrote:
    >
    >>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.


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

    Micha
     
    Michael Fesser, Jan 15, 2007
    #4
  5. aa

    aa Guest

    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:";
     
    aa, Jan 15, 2007
    #5
  6. aa

    dorayme Guest

    In article
    <45abcc1a$0$8759$>,
    "aa" <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, Jan 15, 2007
    #6
  7. aa

    J.O. Aho Guest

    dorayme wrote:
    > In article "aa" <> wrote:


    >> 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.


    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.


    --

    //Aho
     
    J.O. Aho, Jan 15, 2007
    #7
  8. aa

    Andy Dingley Guest

    aa wrote:

    > 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.
     
    Andy Dingley, Jan 15, 2007
    #8
  9. aa

    dorayme Guest

    In article <>,
    "J.O. Aho" <> wrote:

    > dorayme wrote:
    > > In article "aa" <> wrote:

    >
    > >> I am
    > >> not sure about fluid design for I use composite pictures which are
    > >> assembled
    > >> from several small fragmets...

    > > 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).
    > >

    > 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.

    > 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.


    --
    dorayme
     
    dorayme, Jan 15, 2007
    #9
  10. aa

    dorayme Guest

    In article
    <>,
    "Andy Dingley" <> wrote:

    > aa wrote:
    >
    > > 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.


    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.

    --
    dorayme
     
    dorayme, Jan 15, 2007
    #10
  11. aa

    aa Guest

    "Andy Dingley" <> ???????/???????? ? ????????
    ?????????: news:...
    > 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, Jan 15, 2007
    #11
  12. aa

    aa Guest

    The platform is w2k SP4 on PC, Pentium 2.8G
    "dorayme" <> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
    ÓÌÅÄÕÀÝÅÅ:
    news:...
    > In article
    > <>,
    > "Andy Dingley" <> wrote:
    >
    > > aa wrote:
    > >
    > > > 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.

    >
    > 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.
    >
    > --
    > dorayme
     
    aa, Jan 15, 2007
    #12
  13. aa

    aa Guest

    "dorayme" <> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
    ÓÌÅÄÕÀÝÅÅ:
    news:...
    > 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.
     
    aa, Jan 15, 2007
    #13
  14. dorayme wrote:
    > In article <>,
    > "J.O. Aho" <> wrote:
    >
    >> dorayme wrote:
    >>> In article "aa" <> wrote:

    <snip>

    >>> Look into specifying all your widths for all the pics in % terms
    >>> in the css only (not the html).
    >>>

    >> 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.


    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!


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 15, 2007
    #14
  15. aa

    the red dot Guest

    "aa" <> wrote in message
    news:45ac014b$0$8726$...
    >
    > "dorayme" <> ÓÏÏÂÝÉÌ/ÓÏÏÂÝÉÌÁ × ÎÏ×ÏÓÔÑÈ
    > ÓÌÅÄÕÀÝÅÅ:
    > news:...
    > > 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.
    >

    im 1280x1024 should i change my screen resolution when viewing your site?
     
    the red dot, Jan 15, 2007
    #15
  16. aa

    Ed Mullen Guest

    aa wrote:
    > "Andy Dingley" <> ???????/???????? ? ????????
    > ?????????: news:...
    > > 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.


    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.
     
    Ed Mullen, Jan 16, 2007
    #16
  17. aa

    Roy A. Guest

    David Segall skrev:
    > "aa" <> wrote:
    >
    > >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.


    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.
     
    Roy A., Jan 16, 2007
    #17
  18. aa

    aa Guest

    "the red dot" <>
    > 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, Jan 16, 2007
    #18
  19. aa

    aa Guest

    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


    "Ed Mullen" <> ???????/???????? ? ???????? ?????????:
    news:...
    > aa wrote:
    > > "Andy Dingley" <> ???????/???????? ? ????????
    > > ?????????: news:...
    > > > 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.

    >
    > 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.
     
    aa, Jan 16, 2007
    #19
  20. aa

    John Hosking Guest

    aa wrote:
    >
    > 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?

    --
    John
     
    John Hosking, Jan 16, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew FPGA
    Replies:
    0
    Views:
    1,010
    Andrew FPGA
    Sep 26, 2005
  2. Boki
    Replies:
    7
    Views:
    14,160
  3. Piet
    Replies:
    0
    Views:
    597
  4. Pat
    Replies:
    5
    Views:
    561
  5. aa
    Replies:
    9
    Views:
    680
    Neredbojias
    Jan 18, 2007
Loading...

Share This Page