SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member Wally Hartshorn's Avatar
    Join Date
    Feb 2001
    Location
    Springfield, IL
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page Width Tradeoffs

    I suspect that there is no clear answer to this question, but I'm seeking opinions. Here's my dilemma.

    Good page coding principles say that I should not use a fixed-width for the body of my text. "Let the width expand or contract according to the reader's screen resolution."

    However, good page layout principles say that I should not allow my lines of text to be too long. "Long text lines are difficult for the eye to read. Keep your columns narrow so that the eye can easily move from the end of one line to the start of the next."

    These two principles seem to be in conflict. Our web site tends to be very text-heavy. (Yes, I know, we should be re-writing our text to be shorter for the web. I have no control over the content, so all I can do is work on the presentation.) Currently I keep all web pages within an invisible table that is 580 pixels wide and centered on the screen. I would like to begin using CSS more and, if possible, abandon the use of the table.

    I'm also debating a possible move to a 2-column or 3-column design. Having fixed-width columns on the left and right would have the useful side-effect of keeping the center column to a reasonably narrow width for readers who have high-resolution screens -- but it would make the center column much too narrow for readers who browse at 640x480.

    Any opinions on how to handle this? Is there some nifty JavaScript + CSS trick I can use to display 3 columns for high-res visitors while still displaying 1 column for the 640x480 crowd? Are there any text-heavy web pages that you would recommend looking at for inspiration? Keep in mind that much of our target audience is likely still using version 4 web browsers, which will effect how much fancy stuff we can do with CSS.

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.thenoodleincident.com has an amazing tutorial on this very thing. They call it "The Box Lesson"

    The short answer would be that yes, you could indeed format your page according the way your visitors are viewing your site. However, you might consider dropping the 640x480 people as there are only a few percent of them using that resolution to surf the web.

    The best way to do it would be to:

    1) drop your content into a database so that you can reuse it.

    2) Set up a page template for each of the resolutions you want to support

    3) Have a "sniffer" page that detects their screen width

    4) Pull in the appropriate content for each page and then display it using the template for the resolution you have detected.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my advice as a web designer is to go with a fixed width. (by the way, if you have a text heavy site, you need 750 not 580) you also need to split your information into subcategories. take a look at the sitepoint tutorials. notice each one is split into about 10 sections? its one thing to make a 480 screen scroll a foot, but its definitely another to make a 768 scroll for a mile. as for changing how a page is viewed in different browsers/resolutions, id forget the idea. just my style, i think its about a million times easier to update 1 page instead of 3. and then you dont have to worry about compatability. if you make a layout on one page and it works, then you dont have to test every page on every browser on every platform on every resolution. thats just what i think though. single designers have GOT to make it easier on themselves. also, try SSI.

  4. #4
    SitePoint Zealot Megs's Avatar
    Join Date
    Oct 2000
    Location
    Kitchener, Ontario
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm... just to offer another completely different opinion. You should really look at your site stats if you can and find out what resolution your visitors are using. One of my sites, for example, still has 10% of its viewiers at 640 x 480. Now, if most of your visitors are surfing between 640 x 480 and 1024 x 768, a flex width table should be fine. The 2 or 3 column design you mentioned would probably work well. Good compromise between letting the viewer's choice of screen res. control how information is presented yet still prevent the content from stretching too far across. Use 2 columns if you're concerned about 640 x 480 (really, I'm sure these people are used to seeing sites that don't work well for them - even Yahoo doesn't fit at 640), maybe 3 if you don't (and if you get a lot of high-res visitors fixed at 760 might be best)


    Personally, I think that serving different pages to different resolutions is just not worth the effort unless you get a really broad range of resolutions in your site stats. I also wouldn't necessarily say that all pages should be expandable, or all pages should be fixed. It depends on what works best for your site.
    Megan Jack
    Proud to be Canadian
    http://www.meganjack.com
    Moderator at The Webmaster Forums and EDevCafe Forums


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
  •