SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    0 Post(s)
    0 Thread(s)

    Website set body width to pixels or ems??

    I am creating a site and want the site to be as user friendly as possible. So I am going to have the page body 800 pixels wide.

    Now for usability issues should I make the site 50em instead??

    If I do what are the pro’s and cons of doing such a thing???


  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    0 Post(s)
    0 Thread(s)
    A fixed width in pixels means that the layout will reflow if the user changes the font size in his or her browser. How much of a problem that is depends on the site. If you have three or more columns, there's also a definitive risk that long words will spill out of their containers for users who need to bump up the text size significantly. That's perhaps a bigger problem with languages like Swedish or German that use very long compound words than with English or French.

    An elastic width in em shows the same number of characters per line whatever font size the user sets. On the other hand, it might cause the page to be wider than the browser window if the user bumps up the text size enough.

    The best solution for most types of web sites is (in my experience) a constrained fluid/elastic hybrid. That means one or more column widths are specified in em, while the main content column (at least) takes up whatever space remains. The constraints (min-width and max-width) should be specified in em.

    Such a layout adapts both to the browser window size and the text size – within reasonable limits. Lines of text won't be too long to read even with small font sizes in a wide window. And yet you don't get a horizontal scrollbar unless the window is really narrow.

    My blog uses such a fluid/elastic hybrid if you want to see one in action.
    Birnam wood is come to Dunsinane


Posting Permissions

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