Beware of Fluid Templates?

  • Before I start designing my own WP template, I have a general issue I’d like to discuss with those who have designed templates before.

    The main thing I’d like to achieve with my template is to have the main content more fully fill the browser window at a 1024×768 resolution.

    To do that, I’m thinking about creating a fluid two-column template, designed with relative widths. I figure that it should be fluid so that it will still look ok on an 800×600 res.

    I should point out that I have been designing websites for 9 years now, and up to this point, I have always preferred absolute widths to relative widths.

    But I’m now beginning to rethink that, partly because I wonder how many people really browse the web with browsers partially minimized and re-sized, and whether it is such a big deal for them to maximize the browser when a site doesn’t display properly.

    So, here are my questions/issues:

    1. Why should I be wary of relative widths in a template? Do the old design strictures against relative widths still apply?

    2. Since blogs are, by nature, dynamic, why are designers still using absolute widths?

    3. Would it be a better idea to design two different templates with absolute widths (one for 1024×768 users, and one for 800×600 users) and to provide a style switcher to allow people to choose what they want? Can I trust that they will even use that style switcher?

    4. Does what I’m looking for already exist?

    thanks in advance for your help.

Viewing 8 replies - 1 through 8 (of 8 total)

  • It’s a tough choice, but most of the web uses resolutions of about 800x60o to 1024×768 so you’d be ok in designing a fluid one. But still some people use resolutions below or above that, I personally use the one resolution above 1024×768 and find most fluid layouts quite annoying. None the less I think a cool idea would be to make a fluid layout but still give the user the option to make it absolute by using a style switcher.

    Thread Starter mkgago

    (@mkgago)

    that’s a good point, basketball–if I set the widths to 100%, the site could look very strange on a res higher than 1024×768…

    I wonder if I could enclose the design in a 1000 pixel width table, and then use relative widths within that…

    But I’m now beginning to rethink that, partly because I wonder how many people really browse the web with browsers partially minimized and re-sized, and whether it is such a big deal for them to maximize the browser when a site doesn’t display properly.

    I’m one of those who keeps my browser at 800×600 (screen resolution is 1280). And for me, it is a big chore to maximize or resize my browser because 1) I usually have multiple items open on the screen at any given moment, and 2) I don’t like reading extremely wide blocks of text. So, as a casual passerby (meaning, first impressions of a site that I’m not a regular at), I’m more likely to skip over it and move on to the next site.

    Just my input. From an 800×600 visitor point of view. ??

    My res is 1280 as well, but I keep my browser at 1024×768 most of the time. I rarely full-screen it unless I’m looking at pictures that don’t fit a 1024 window.

    Personally though, if a fluid layout is designed well (meaning plenty of whitespace and percentage-based margins and em-based line-heights, etc.), I have no problem reading it. It annoys me more when someone forgets that the scroll bar takes up a few pixels and I end up with a horizontal scroll bar on a site that is only 3 pixels too wide for 800×600 or 1024×768.

    So FWIW, a fluid layout can be done if it is done well. If the text becomes hard to read beyond a certain width, then use the CSS max-width selector and a little Javascript for browsers that don’t support it.

    A 1000-pixel wide table will create a horizontal scrollbar at 800×600 resolution, even if it is empty.

    Thread Starter mkgago

    (@mkgago)

    A 1000-pixel wide table will create a horizontal scrollbar at 800×600 resolution, even if it is empty.

    wow–my mind is really gone by the end of the day. thanks for the reminder.

    For one of my sites, I use a fluid three-column layout that I made. It has two “sidebars” that move inward at lower resolutions. I have a centered graphic that is completely visible in 1280* and 1024*, partially visible (which is still presentable) in 800* and MUCH less so in 640* (which none of my visitors have ever used). It works in IE and FF, but comes nowhere near validating. I’d link it, but I’m sure I’d get slammed on that point ?? I’m sure someone could do it properly and it would look great.

    No matter what you do, think of it this way: Screen real estate. Use it or lose it. Design for the least, but ensure you can cover the most. Fluidity is the ONLY way to go. Why waste the space.

    Here’s a nifty take on a compromise solution: elastic layout.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Beware of Fluid Templates?’ is closed to new replies.