Sacrifice source order for design

[croatiankid]

I'm looking at 2 elastic (em based) design concepts for a new web site I'm making.

The first concept's benefit is that the source order is header, horizontal navigation, primary content, secondary content (sidebar). The con is that when text size is changed to a certain point (namely the wrapper becomes wider than the viewport) a horizontal scrollbar is introduced.

The second concept's con is that the source order is header, horizontal navigation, secondary content (sidebar), primary content. The pro is if you resize the text and/or thin the browser window and the wrapper width approaches the width of the viewport, when the wrapper meets the viewport and the text size is enlarged or the window is made smaller, it doesn't introduce a horizontal scrollbar (it sticks to the viewport until the viewport becomes wider than the maximum width of the wrapper in ems).

Without going into the details of the CSS, which would you choose?

Off Topic:

Has anyone else noticed sticky footers don't work properly in IE 8b2?

[dtm32236]

To me, it depends on a couple things...

How small do you have to make the browser before you get the horizontal scroll?

I guess it depends on your target market - but generally, i see that most (about 80-90&#37 of users that log into my site use a 1024x768 resolution. So I make my sites look best at that size. People with 800x600 res are used to seeing horizontal scroll bars, and they only consist of 3-10% of my audience... so I kind of ignore them if a horizonatal scroll issue comes up.

Another thing I do is look at text size. This is only an assumption, but most people aren't going to have a text size larger than 1, maybe 2, sizes above 'normal'... So, I don't normally test with humongous sizes, cause again, I'd rather it look nice for 95% of my users - and sorry to the other 5%...

In firefox, with the WebDeveloper plugin, there's a feature that lets you preview your site using different resolutions (it's called the 'resize' function - I'm sure it's not 100% accurate, but it's gotta be close).

I'd like to see others' opinions on this though. It's an interesting issue you raise.

Oh - one more thing - always design your site with the user in mind... not the search engines...

[croatiankid]

The site will fit to a maximized browser window at 1024x768 pixels if there is no user stylesheet and the text size is at the default (except in Internet Explorer on a system that's using something other than 96 DPI).

The second concept's also useful because it's not constrained by viewport size if someone's browser isn't maximized (kind of like a fluid layout except it's a maximum width set in EMs). I'm not exactly sure why the second concept works, but I use it on a site that has the navigation in a left sidebar so it's good for all users.

Oh - one more thing - always design your site with the user in mind... not the search engines...

Besides the fact that I care about search engines, I care about the user with no CSS and/or a screen reader as well. That said, I also care about the user that wants to increase text size or surf with a smaller browser window without a horizontal scrollbar.

[dtm32236]

Do you use the standard <div id="container">?

If you do, you can set a min-width on it... that's what i do with my sites so that they don't break if the size is too small. I haven't had one complaint about it yet.

If you want the user to make the browser as small as they want without having the layout break at all - then I don't know what to tell you... I'm not sure that's possible.

There's gotta be a breaking point in which cater to everyone you can, and the 1-3&#37; of the other people you almost have to forget about (as bad as that sounds) - but they're used to broken websites if they're text/screen size is that far outside the norm...

[AutisticCuckoo]

I would go with the first one (primary content before sidebar) and fix the CSS so that it didn't cause a scroll bar outside extreme situations (very narrow window or extremely large text).

[croatiankid]

I'll try out some combinations with min-width.

What do you think of something like this but with the default width being around 1000 pixels (but specified in em like it is)? That would unfortunately bring the scrollbar problem, so do you have any suggestions for the widths (what unit if any, min-width, max-width, etc.)?

[dtm32236]

That looks perfect to me. It fits at 800x600 with normal text size. That's all you can really ask for. It will be rare that someone has to scroll, and again, if that's the case, then the user probably see that issue frequently.

The layout doesn't break when the screen gets small or the font is large, and the content is before the extra information.

On a side note - do you realize that you have no <body> and </html>?

[dtm32236]

and this:
<link rel="stylesheet" media="screen,projection" href="http://foxresourcesglobal.com/style.css">

should have type="text/css":
<link rel="stylesheet" type="text/css" media="screen,projection" href="http://foxresourcesglobal.com/style.css">