Fork me on GitHub

Fixed size vs 100%  Bottom

Go to page 1 - 2 [+1]:

  • Before I start, I'd like to thank all the designers who have provided us with free themes. I've been setting up a couple of sites recently, and these themes have been a godsend in getting my feet wet with a PostNuke based site.

    But I'm a little confused.

    Why are so many themes (free and non-free) designed with a fixed width? For most of the themes I've played with, it would have been as easy to create a theme that works in all resolutions as it was to create one that's limited to one size. For about half of the ones I tried it was nearly as simple as a search and replace of the fixed size with one that said "100%".

    Admitedly, some themes with highly structured graphics that didn't accomodate stretching might cause a designer to go with a fixed width. I can understand the design decision in that case.

    Most of the time, though, it seems that a 100% design is just as easy to write, and certainly more desirable.

    Or maybe it's not more desirable. I guess that's what I'm asking. What am I missing that makes fixed width designs so common?
  • Just the fact that it allows more control over the presentation... Some designers don't want a way stretched out window if someone if viewing on a hi-res screen with a maximized window... Plus, it's difficult to read text the goes across a long-ass center block... Most really professional looking layouts I've seen are not 100% width.

    What would be ideal, would be to have a variable width layout that would only go *up to* a certain width. Though I haven't found a good way to do this with style sheets, tables/divs, etc...

    --
    Get PhotoGallery, PayPalCart, Dynamenu, Enhanced Blocks & other mods

    Cape Cod Travel Info...
  • Fixed width design also allow more creative use of graphics because you don't have to worry about using background images that will "stretch" properly.
  • nate_02631


    What would be ideal, would be to have a variable width layout that would only go *up to* a certain width. Though I haven't found a good way to do this with style sheets, tables/divs, etc...


    Yes this is quite a tax... you could of course make everything % including text size, block widths, etc - but they could get gigantic on a large screen! I think it would be cool to say have blocks that will wrap around each other like text does, and as the screen got bigger the blocks would all space in a line and when the res got small they would break to the next line, I am not sure how much room this would allow for design however....

    --
    -Lobos
    Professional PHP Framework Services: Concept, Development and Deployment
  • Anyone got any idea on what percentage of internet users are still on 800x600 resolution?

    --
    -Lobos
    Professional PHP Framework Services: Concept, Development and Deployment
  • No clue, but I'd say that it would have to be quite low.
  • Here some stats on the subject (about 18 mos. old)

    http://www.onestat.com/html/aboutus_pressbox14.html

    There's probably been more shift to higher res.'s by now, but still enough @ 800x600 to still have to worry about them... :(

    --
    Get PhotoGallery, PayPalCart, Dynamenu, Enhanced Blocks & other mods

    Cape Cod Travel Info...
  • Anyone know of newer stats? I know some of my themes must look like crap at 800 pix, but I hate to make anything for less than 1024.
  • nate_02631

    What would be ideal, would be to have a variable width layout that would only go *up to* a certain width. Though I haven't found a good way to do this with style sheets, tables/divs, etc...

    There is a way in CSS2, but is only supported by browsers like Mozilla, and presumably Opera and Safari, not IE (browser war won, MS has no interest in expending time and energy improving it much). It's min-width and max-width (fancy that!)
    So, you could go
    min-width: 800px;
    max-width: 1000px;

    http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

    I have no stats on what percentages use certain screensizes, but I do remember reading a survey, which showed that by far the majority wanted 1024px, followed by variable width (amounts to the same, as 1024 is the average screen setting), and last 800px. People are annoyed by the wasted space and cramped columns of text. Not as much as having to scroll sideways in fixed-width themes, of course. This will of course increase as uptake of XP increases. Win9x is no longer supported or sold by MS. All modern OS's tend to assume greater resolution than 800x600. Certainly MacOSX, which use 128x128 icons. WinXP looks crap in 800x600, and only people like my dad who wants large type he can see choose it. Although some time off, and initially only for people with top-line systems, Longhorn would certainly look bad in 800x600.
  • Lobos

    I think it would be cool to say have blocks that will wrap around each other like text does, and as the screen got bigger the blocks would all space in a line and when the res got small they would break to the next line, I am not sure how much room this would allow for design however....
    Sounds like you're describing DIVs. DIVs are in many ways opposite of Tables in their behaviour, so on the whole not useful for blocks with graphical borders. Their behaviour of having adjacent DIVs wrap to the next line is what makes them bad for graphical border grids. But for blocks with at most top graphics (end graphics can be floated left and right, so don't need multiple cells), and otherwise CSS-borders, it's possible. From my experimentation, I'd keep the overall grid as a table to keep headers, left-centre-right and footer arrangements in place, but others could be made using DIVs. Other behaviours of DIVs however make them annoying for such use, such as how long text can spill out of the bounding box. Care also has to be made of floated graphics, as they're no longer in the text flow, and may protrude from the bottom border. This has to be fixed with a DIV spacer (DIV with a style of clear: both applied. I use a .clear class). This can be seen in PostNukeBlue100.
    But, for instance, in my themes, I tend to replace the opentable function (not the second one) with

    again unless there's a graphical border. Hell of a lot better than the nested tables in old PN themes.
    Forget about NN4. I leave a comment in style.css and just use styleNN.css (if style.css was completely empty, it may cause problems).
  • An easy way to accomodate all widths is to use a background image for the top of the page (make it 1600Xwhatever). The rest of the site can easily be made to autosize. You'd be surprise how many people use ultra-wide resolution. One wonders what a fixed 800 pix theme must look like at 1600 resolution.
  • Quote

    You'd be surprise how many people use ultra-wide resolution. One wonders what a fixed 800 pix theme must look like at 1600 resolution.


    That's why I brought the subject up. I never full screen *anything*, but even so my browser window is always big enough that the 800 pixel themes look horrible (to me anyway.)

    Now some themes are graphic intensive and use graphics that really depend on a fixed size, so I understand why a designer would want to use a fixed width theme. But a lot of the free themes I've looked at were fixed width themes that required about five minutes of editing to make them autosize themes, with no loss of visual appeal. That was got me wondering -- if it was so easy to make them autosize and they looked fine that way (better even) why weren't they designed like that in the first place?

    Others required a lot of work to convert, just because of how they were built, not because of any visual elements that demanded it. I didn't do many of those.
  • Dunno. I agree with your analysis. Of the 175 themes I've created, I think less than 5 have been fixed width.
  • I'm not a real themer, I just sometimes like to mess with PostNuke and clean up/update old themes for fun. PostNukeBlue is one of those themes that was unnecessarily fixed-width. I released a full-width version, with the archaic multiple-nested table code largely replaced with a few DIVs, and the CSS overhauled. It was a simple matter of slicing the top graphic, and because of the design of the Header, it looks fine stretched to 1024. Never seen it in 1600! Need a monitor and graphics card upgrade for that. 800px makes a 3-column layout rather cramped, I feel.
    The Web is a relatively new media, different from traditional design in that you don't have a fixed width and height, and things like load-times are important, which affect the number of large graphics. You're better off on the whole designing for flexibility. But of course it depends on the design, some look fine centered, perhaps with a decorative background to fill in the sides. And graphics-heavy themes easily run into trouble if you want to stretch them. Then your only option may be to design several versions for the 2 or 3 most common resolutions, and request the user select the appropriate design in their preferences. Hardly ideal, perhaps. You'd have to be careful going overboard with lots of large graphics though, as most like me are still on dial-up. We don't like to wait forever for each new screen to load. Broadband will soon be the norm, some countries even legislate all new homes has to have cable installed.

    I noticed on the dev list a while back they were talking about making PostNukeBlue a 100% theme, which most thought a good idea. LarsNeo, I think, vetoed it. Nonetheless, Mark West tells me the version in PN 0.8 will be based on my 100% version. Standards-compliant clean code is getting more attention.
  • I aggree with you guys that a background will compensate nicely for a fixed width ... but ... erm ... which file should I tweak to make this work. I'm kinda new to this 'do-your-own-theme' business and I've been trying for a few hours now to pin-point where exactly to tell my theme that it needs to use an image to for a global background. No banana so far. It's not so much the HTML part of things, but more the file/location that i'm after.

    Thnx for any help in advance

    hansz.

Go to page 1 - 2 [+1]:

  • 0 users

This list is based on users active over the last 60 minutes.