Width: Fixed or Fluid?

[naiani]

Good morning everyone.

I know my question is really easy to be answered considering the accessibility issue. I understand that fluid layouts are better than solid ones because they adapt to the user's needs and possibilities. But since last night, I've been facing a dilemma about what is really important, based on my knowledge and time to study the details of everything.

For the ones who followed my last thread at some point, I'm redesigning this website (http://www.cglg-canada.com/) into this one (http://www.cglg-canada.com/testnew/index_imp.html).
If you test it in widescreen resolutions (what I think is the standard screen in North America right now, but tell me if I'm wrong), using FF, IE7, IE6 and IE5.5, the positioning is perfect. Everything looks as planned and coded. The same when you test it on "normal" screen dimensions with resolutions 1024x768+ (what is the standard screen in Brazil (the only other country I can talk about, since it's where I come from)).
But when using 800x600 or resizing the browser to something close to 800x600/less, the design breaks. The title/subtitle doesn't stay in the right place (they are images, and I don't think I can "text" them, because of the font type), and things look weird because of the image in the middle column when the window is really small.

My reason half tells me to leave it the way it is, because there are not many people who use 800x600 these days, and people who don't maximize their windows should just acquire a new custom. But my feeling half (and the W3C, the webstandards people, the accessibility people, the usability people..) tells me that everybody should be able to have at least a similar experience when navigating through the website.

As I don't have enough time to study the details on how to make it COMPLETELY fluid, like this CSS Zen Garden design (http://www.csszengarden.com/?cssfile=/063/063.css&page=0), or to make n style sheets to reach all the possibilities, and I'm not being paid to do it (loOOOOng story...), I've thought about making it solid, using a fixed px-width that works fine for 1024x768+ and users who happen to use smaller resolutions or don't maximize their windows would just use their scrollbars. It's not perfect, but at least it's more accessible/usable/standardized than using tables.

Can you help me with opinions/suggestions/consolation?

[Veronica]

I just looked at it in lower resolutions. The biggest problem is with title.png

Since that's a pretty simple graphic, have you considered making it just text, so it would then re-size with everything else?

The other thing might be to combine title.png with bluelogo_sml.jpg into one graphic, so it would be one logo across the top. That would keep it from breaking when you look at it in smaller resolutions.

Otherwise, even at 640x480 the site is readable, and at 800x600 it looks fine.

[naiani]

Like I said, I can't make it text, because of the font it uses (Biondi). It's the font that was used on the logo, and I'm still impressed by how I was able to find it, because I had never heard of it, and also because it's not on it's real proportions in it (it's a little bit stretched).

I hadn't thought about putting it together with the logo, it's actually a neat idea. I'm going to try it.

Besides that, I'd like to know your opinions about the design: good/bad, well/badly implemented, etc (comparing to the previous version AND considering that, again, I'm NOT being paid to do it).

Thanks again!

[Twey]

Like I said, I can't make it text, because of the font it uses (Biondi). It's the font that was used on the logo, and I'm still impressed by how I was able to find it, because I had never heard of it, and also because it's not on it's real proportions in it (it's a little bit stretched).It doesn't look too unusual -- I think you could probably swap it out for Times New Roman in small caps and no-one would notice.
Besides that, I'd like to know your opinions about the design: good/bad, well/badly implemented, etc (comparing to the previous version AND considering that, again, I'm NOT being paid to do it).Well it's one heck of a lot better than the old one, obviously -- the big white "click here to install plugin" boxes were kind of ugly. One thing I noticed immediately design-wise was the gold bar across the top of the content section. With smaller window sizes this goes right the way across and meets the gold on the other side, but if I enlarge my window it breaks away from the gold on the other side. I don't know if this is intentional or not, but if not, you should use a background-image on the content section and just set it to repeat-x.

From a technical standpoint, it's not so good. You're using XHTML but serving it with an HTML Content-Type, so a browser will attempt to parse it as HTML and realise it's broken. Since IE doesn't have support for XHTML yet, I suggest you stick with HTML for the time being. Also, you're using a Transitional DOCTYPE. Transitional DOCTYPEs were designed to ease the transition between HTML3 and HTML4. As such, they should have been dropped when HTML4 became commonplace, around a decade ago. Your document doesn't quite validate (http://validator.w3.org/check?uri=http%3a%2f%2fwww%2ecglg-canada%2ecom%2ftestnew%2findex_imp%2ehtml), but I presume that's because it's still being designed?

[naiani]

It doesn't look too unusual -- I think you could probably swap it out for Times New Roman in small caps and no-one would notice.
I thought about that in the beginning, but I had to give up the idea because of the "stretching" of the text. I really don't like to use images for titles, because I know that's not how it was supposed to be. But in this case, I didn't have much of a choice... =\


Well it's one heck of a lot better than the old one, obviously -- the big white "click here to install plugin" boxes were kind of ugly. One thing I noticed immediately design-wise was the gold bar across the top of the content section. With smaller window sizes this goes right the way across and meets the gold on the other side, but if I enlarge my window it breaks away from the gold on the other side. I don't know if this is intentional or not, but if not, you should use a background-image on the content section and just set it to repeat-x.
It's not intentional, and happened as an accident.. eheh I'll fix it this afternoon.


From a technical standpoint, it's not so good. You're using XHTML but serving it with an HTML Content-Type, so a browser will attempt to parse it as HTML and realise it's broken. Since IE doesn't have support for XHTML yet, I suggest you stick with HTML for the time being. Also, you're using a Transitional DOCTYPE. Transitional DOCTYPEs were designed to ease the transition between HTML3 and HTML4. As such, they should have been dropped when HTML4 became commonplace, around a decade ago. Your document doesn't quite validate (http://validator.w3.org/check?uri=http%3a%2f%2fwww%2ecglg-canada%2ecom%2ftestnew%2findex_imp%2ehtml), but I presume that's because it's still being designed?
Thanks for the tip about the Transitional DOCTYPE. I knew it was designed for the transition of types, but I didn't know that it had become kind of "deprecated" 10 years ago because of its initial purpose. It happened when I first learned HTML... eheheh
Yeah, it's not finished yet, it's kind of hard to finish stuff when people keep suggesting "small changes"... But yesterday it was approved, so I want to finish all the details today, like the validation and etc (although the CSS already validates).

[naiani]

Well, it turns out that it wasn't an accident. I don't know what's happening to cause that gap between the #content and the #news. And the weird thing is that it happens with most of the pages, but I identified 5 pages that don't have this problem:
- Export Documents > Consumer Packaging and Labeling
- Export Documents > Role of a Customs Broker
- Visiting Canada > Visa and Immigration
- Visiting Canada > FAQs
- Business Opportunities

I just uploaded the latest version of the website, so maybe you can help me find out what is going on with these pages. I DON'T want the gap, and they are supposed to look exactly as they look in these 5 specific pages that I listed above (same padding between the text and the #news border).
I noticed that when I load these pages that look ok, the website's width gets narrower than the other ones, so I suspect it might be something to do with the margin. The other pages, including the Home, make the whole website wider, and the padding gets too big.
I looked for some pattern that could be causing this problem, but I couldn't find anything.

I truly appreciate your help.

[naiani]

People,

I've spent my WHOLE day trying to figure this out. Now I just tested it and it works perfectly on IE7, but doesn't work on FF. Right now, I'm very keen to say that IE is right (yeah, I know, it's really hard for me to consider that). There's NO REASON (or at least I can't see one) for this gap to happen in most of the pages, and not happen in 5 of them. I couldn't find any pattern in the codes that could lead to this.
Again, http://www.cglg-canada.com/testnew/index_imp.html.

[boogyman]

I am seeing a negative margin in Firefox 2.0.6 when you outline the block level elements, and if you resize the screen down to 800x600 the center content will partially disappear behind #menu content.

I highly doubt that's what you were talking about in regards to the margin with the #news content, but those are my observations

I may be wrong in this, but I think that you cannot use anything but n.0 or n.5 percentages, try to increase your margins of the center content to .5 rather than .2

[naiani]

I think I'm gonna go crazy until the end of the day..
If I use n.5, the #content doesn't touch the #menu and the #news, and I need it to touch them.
Anyway, I made the margins n.5 and it works partially. Partially because the margins keep the same distance from the #menu and the #news, but as they don't touch them, I can't leave them that way. But when I open one of the 5 pages that I listed before, the #news moves to the left side... I don't know why, but I have the feeling that it's the same problem that was happening before, with the #news coming to the left and the #content dropping. But this time, there are no styles applied directly to these 5 specific pages (as there are no styles applied to the other ones either), so I don't know what might be happening.

-----

EDIT: I forgot to say that when I use the Outline Block Level Elements, everything looks fine. But when I disable it, it wrecks up again.

[Spiritvn]

The first problem just becoz the image can't be fixed with the width if you view in small resolution. If you want it can be wided in small resolution, you should not use width with percentage, replace it by a exact number for your header. I think the problem will be solved, anyway i agree with many people here, you should use text instead ...

The 2nd problem, sry but i don't understand becoz i view it fine 8-}

[naiani]

I think I just needed some time to refresh my mind..
I just found out what the problem is related with: the size of the content. The pages that cause the position to be changed are the ones which their contents create a vertical scrollbar.
According to my restrict tests (FF 2.0.0.6 and IE7), this problem only happens on FF. I don't think it's an implementation error. I think it might be a bug or something. Any ideas?

-----

EDIT: I FOUND THE PROBLEM! The thing is the viewport is (obviously) calculated using the whole blank space. IE7 doesn't change the calculated space when the scrollbar is created, but FF does. So, it makes the horizontal margins smaller (as they are set as auto) and makes the website "move" to the left, but the paddings are not proportionally resized, making less room for the text. I think it works perfectly on IE because IE doesn't recognize the margin: 0 auto; and uses the text-align attributes for the body and for the #container to put everything in the middle of the viewport.

[Twey]

So long as you've got the scrollbars, no problem. A good test is to crank your font sizes right up to the maximum in your browser; if it's still readable, you're good to go.

[naiani]

Now I don't know what to do about this whole scrollbar vs. viewport issue. The centering trick for IE doesn't work on FF. And the centering trick for FF doesn't work on IE. And even without the centering trick for FF, the problem still happens, so I guess it might not be related to the margin: 0 auto;, but only to the different ways FF and IE choose to understand the part the scrollbars play on the viewport. Is this part of the (in)famous box model problem?

[Twey]

For most elements, IE will behave like other browsers with regards to centring so long as it's in standards mode.

[naiani]

IE doesn't recognize the margin: 0 auto;, because it doesn't render auto horizontal margins. So I have to use other meanings of centering the #container (text-align: center; for the body and text-align: left; for the #container).
But I noticed this is not related to the problem anyhow. The only thing that screws up the layout is the way FF implements its scrollbars (as part of the viewport, not of the window itself), opposite to IE's implementation (as part of the window), which I think makes more sense, as the scrollbar is not supposed to be a part of the website, but of the window as a way of making the website navigable.

I don't know if I was able to show my point, but that's what I think.

[boogyman]

For most elements, IE will behave like other browsers with regards to centring so long as it's in standards mode.

which means no errors