SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 101
  1. #1
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Definitive FAQ on Screen Resolution

    Frequently Asked Questions About Screen Resolution


    The term resolution when used in this FAQ refers to the monitor size in pixels, e.g. 800x600. Technically “resolution” is a measurement of dots per length unit (e.g. 96dpi), but since “everyone” use the term “resolution” while meaning the former we’ll use it in this FAQ as well.

    Can We Drop 800x600 Now?
    No.

    There still is and will be people who use 800x600 resolution, either because of hardware limitations, sight impairment, or personal preference. Even if everyone used a higher resolution that doesn’t mean that the browser viewport (the area in which your Web page renders) is as wide as the available screen area. The higher resolution people have, the less likely it is that they browse maximized. The browser window is basically more or less the same width regardless of the screen resolution, it’s just that the user has more available screen space for other things at the same time.

    Some users also like to have a sidebar open while browsing (which can take up hundreds of pixels). Others might want to browse with two windows side by side, which means that with a resolution of 1280x960 each window can only be 640 pixels wide.

    There are also some PDAs that have a 800x600 screen resolution, and use CSS “screen” media for Web pages.

    What’s The Optimum Width You Can Use for 800x600 or 1024x768?
    There is no consensus on a holy optimum as far as we can tell. Because of scrollbars, borders, snappers, etc., and because the browser window might not be completely maximized, you should probably subtract 20–50 pixels.

    Which is The Most Common Screen Resolution?
    As of early 2007, and according to the statistics we’ve seen, the most common screen resolution is 1024x768. But this information is not very useful; what is more interesting to know is the browser’s viewport width. Your Web page renders inside the viewport, not on the entire screen.

    Different CSS for Different Resolutions with JavaScript?
    It is possible to get the available width with JavaScript, apply different style sheets on load and on resize, but this is not a very good approach, both because it relies on script (which can be disabled or blocked by firewalls, etc.), doesn’t perform very well, and can be done much simpler and more performant with just CSS using a fluid/elastic hybrid layout. Changing the layout when the window is resized can also cause usability problems since the user can loose track.

    If you want to have a different layout on handhelds then JavaScript is not an option, because most mobiles don’t support JavaScript in the first place. You should use CSS media queries instead (e.g. media="handheld").

    Fixed vs. Fluid?
    Fixed width means that the width is specified with a measurement that doesn’t adapt to the browser width nor scale when text is resized (most often specified with px). Some designs “require” a fixed width to some extent, mostly because of heavy use of images, or are just simpler to implement using a fixed width. However, with wide browser windows the site becomes relatively narrow, and with narrow browser windows the page is too wide, resulting in a horizontal scrollbar. Additionally, since the user can resize the text, the line length becomes too short at large text sizes, and too long at small text sizes. If you have only done fixed width layouts in the past then we encourage you to take a closer look at the alternatives below.
    Code:
    body { width:760px; }
    Fluid width means that the width adapts to the browser width (either using the keyword auto or using percentages). With this type the user has control of the line length: simply resize the window. The typical argument against fluid width is that people who use wide browser windows may get too long line lengths. This might not necessarily be a disadvantage however; in some cases long line length results in faster reading, or is just preferred or even needed because of certain types of reading disabilities. People who prefer shorter line length can always make their windows narrower.
    Code:
    body { width:95%; }
    Using a fluid maximum width on images is very useful to make sure images don’t break the layout or cause a horizontal scrollbar in a fluid (or elastic) layout. As the column gets narrower, the image will scale down, and the height of the image will stay proportional (given you don’t use the height attribute in the markup; if you do, try height:auto in the style sheet).
    Code:
    img { max-width:100%; }
    Elastic width means that the width scales when the text is resized in the browser. This has the advantage that the line length doesn’t get too long, regardless of text size. The disadvantage is that it may become wider than the viewport, resulting in a horizontal scrollbar.
    Code:
    body { width:60em; }
    A hybrid is a combination of the above, for instance using an elastic maximum width and otherwise fluid (referred to as fluid/elastic hybrid).
    Code:
    body { max-width:60em; width:95%; }
    Different situations and audiences require different approaches. However, a fluid/elastic hybrid has the all the perceived advantages of both fluid and elastic while at the same time avoiding the disadvantages (except in the case where long line lengths are preferred), which is thus a good choice in most cases if the design allows for it. If not, you can still use a fluid/fixed hybrid, with fixed minimum/maximum width and fluid in between, which at least avoids the horizontal scrollbar in the range where it is fluid.

    More specifically, fluid and elastic works well when the column is mostly text. If you e.g. have a fixed width sidebar (with mostly text), then as text is resized the line length quickly becomes too narrow (long words might not even fit, which might be a problem with languages that have many long words). If you have a column with only or mostly images (and you don’t want to scale them), then fixed width might be best; otherwise you might crop the images or waste space if the column is wider than the images.

    For IE6 you can either just fall back to fluid or fixed, or you can use expressions to simulate support for min-width or max-width. (Those properties are supported in IE7.)

    Further Reading
    Last edited by zcorpan; Mar 14, 2007 at 22:49. Reason: Typo
    Simon Pieters

  2. #2
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Straight and to the point. Very good post!

    There was a study that Sitepoint references in its News Wire that shows the common view size, perhaps you should add that to the further reading section as well. I'll try to dig it up for you.
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com

  3. #3
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Nice job as usual Simon
    I would also insist on Roger Johansson's article!! it is a highly recommended reading IMO

  4. #4
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very interesting, great job!

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Good summary Simon,

    I agree with it all and it's time for me to experiment some more with fluid / elastic hybrid layouts..

    Cheers,

  6. #6
    is craving 'the potato' slayerment's Avatar
    Join Date
    Nov 2002
    Location
    Scottsdale, Arizona, USA
    Posts
    603
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting read. I would say depending on your audience it may be worth dropping 800x600. But it depends on your audience and purpose.

    Thanks!

  7. #7
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very Nice indeed.

    thanks

  8. #8
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This is a great resource for what size you should make your site.

    http://www.webmonkey.com/99/41/index...html?tw=design
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  9. #9
    SitePoint Addict operator's Avatar
    Join Date
    Aug 2004
    Location
    Bangkok
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your "fluid maximum width on images" tip sounds useful. I didn't know about it - thanks!

  10. #10
    SitePoint Wizard silver trophy ldcdc's Avatar
    Join Date
    May 2004
    Location
    Ploiesti
    Posts
    4,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quite a few interesting facts and opinions in this article (I believe I can call it that). A job well done!
    HostPeek.com - budget hosts, compared
    CouponsNexus.com - web hosting coupons

    Ultra Cheap Hosts | Web Hosting Reviews Forums

  11. #11
    ¬.¬ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    There is no consensus on a holy optimum as far as we can tell. Because of scrollbars, borders, snappers, etc., and because the browser window might not be completely maximized, you should probably subtract 20–50 pixels.

    I'm one of those who switches between maximized and not, I usually unmaximize my browser when I across a fluid site like sitepoint here because the width of my screen is 1920px making it very wide and very hard to read long lines.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  12. #12
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one Simon.
    I too haven't tried the percentage width on an image - I'm going to test that later :-)

    Nadia

  13. #13
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nadia P View Post
    Nice one Simon.
    I too haven't tried the percentage width on an image - I'm going to test that later :-)

    Nadia
    Doesn't seem to work in IE6 >.<
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gamermk View Post
    Doesn't seem to work in IE6 >.<
    Indeed it doesn't. IE6 doesn't support 'max-width'.

    It is possible to implement with expressions, but it only seems to work when the parent element has "layout". The following expression will check if the parent element has layout, and, if so, set a maximum width to 100&#37;. (Without the check all images whose parent doesn't have layout will become 100% wide; with it they stay unaffected.)
    Code:
    img { max-width:100%; -width:expression(((w = typeof(w) == "undefined" ? new Array() : w)&&(w[this.src] = typeof(w[this.src]) == "undefined" ? this.clientWidth : w[this.src]))&&(this.parentNode.clientWidth <= w[this.src] && this.parentNode.currentStyle.hasLayout ? "100%" : "auto")); }
    The "w" variable is so that it doesn't forget the initial size. The [this.src] thing is so that it works for different images.

    The dash in "-width" is a hack to target IE6 so that it doesn't affect newer versions of IE that support 'max-width' natively.

    You can't have height="" attributes in the markup though.

    Edit:

    It doesn't seem to perform very well though; when applied here on SitePoint IE6 hangs. If you experience such problems you should probably make the selector more specific so that it only applies to the images you want to scale, and then it should work well.

    HTH,
    Last edited by zcorpan; Mar 7, 2007 at 17:09. Reason: I didn't get it quite right
    Simon Pieters

  15. #15
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Straight and to the point, and all explanations were in layman's term..A great job, especially for someone like me who's a total moron.

  16. #16
    SitePoint Member FranR's Avatar
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting read, thanks for sharing. I suppose there's a place for both liquid and fixed width if the information presented calls for it (like tabular info might look best fixed width).

  17. #17
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FranR View Post
    (like tabular info might look best fixed width)
    On the contrary! Tabular info would probably benefit most from an elastic layout.
    Birnam wood is come to Dunsinane

  18. #18
    SitePoint Member FranR's Avatar
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    On the contrary! Tabular info would probably benefit most from an elastic layout.
    Hm, I probably would want to keep the tabular info presented in tact - so perhaps a bit of both to prevent info becoming incomprehensible when the webbrowser size is reduced beyond a certain limit. I'd hate to hunt info spread over too many lines.

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly why it should be elastic (em-based).

    With a fixed-width layout the table will reflow if you change the text size.
    With a liquid layout the table will reflow if you change the window size.
    With an elastic layout the table will not reflow. Everything stays where it is. The downside is that you may get a horizontal scroll bar if you enlarge the text size too much.
    Birnam wood is come to Dunsinane

  20. #20
    SitePoint Member FranR's Avatar
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oww my bad. I still had fluid in my head >.<

    My train of thought also has been a bit influenced by the book I recently completed: designing without tables (just learning to break that habit) using CSS. There's a chapter where they explain the use of a fixed-width layout in combination with tabular info (like event schedules etc).

    However, when I read into the css samples now, I notice that they too include em-based parts into the design. So hence my slight confusion (and I should read better too).

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a feeling that we were talking about the same thing, only using different words. I didn't want to make any assumptions, though.
    Birnam wood is come to Dunsinane

  22. #22
    SitePoint Member Jay-Bird's Avatar
    Join Date
    Feb 2007
    Location
    Louisiana
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep...my stats show just a little under &#37;7 still use 800x600...but prolly different with different targeted sites...
    Christian Hosting: Church, Ministry, Organizations, Personal-
    We take your news, bulletin, sermon & update website weekly!
    DearmanTech.com -PR4 Ad Space Available -ChurchOfThe.Net-

  23. #23
    Non-Member
    Join Date
    Mar 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very much stimulating and informatice Simon!!!! Good job. Carry on!!!

    Cheers!!!

  24. #24
    SitePoint Member Anakin's Avatar
    Join Date
    Mar 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Currently experiencing some screen size problems. This should definitely be of assistance. Good read. Nice job man.

  25. #25
    SitePoint Zealot dougadam's Avatar
    Join Date
    Jul 2005
    Location
    Grand Rapids MI
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thread Thanks


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •