14 replies [Last post]
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

I know this comes up from time to time. I remember a time when variable width layouts were preferred because "not everyone has a 800px wide monitor". Layouts were running off the screen causing horizontal scroll bars.

Now it's the opposite. "Fill the screen" is the new mantra, causing me to have to shrink my browser window to make the lines of text comfortable to read. 1280px (and surely 1600px) using a full width browser window is just too much if with a variable layout. All things otherwise being equal I still prefer a fixed width layout at right around the old 760px standard.

What do you say? What is your preference? If your preference differs between your personal usage and your professional designing please explain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Oh, my. I tried posting the

Oh, my. I tried posting the same question on a non-technical forum—which in the past has revealed that those of us in the web design community really don't know what the general public wants or how it uses the internet—but it turned into a nightmare because they didn't understand what I meant by layout.

"OMG - don't, like, change my browser window or move it!!!!onety-eleven!!!!!!"

I was trying to ask if anyone browses full-screen or partial and if fixed width is preferred by anyone other than me.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Variable width is better for ultimate flexibility

...but that width should be constrained by a max-width so you don't get that problem you describe of having to make your window smaller.

But then that variability is really only a factor when you're dealing with smaller screens; I think it's fine for a layout to be fixed for larger screens. For smaller screens I've been starting to use media queries to linearise the layout into a single column. Actually, I've been using the mobile first approach where the default stylesheet is for a single column layout with media queries then adding on horizontal nav bars, columns etc. for larger screens.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Tyssen wrote: ...For smaller

Tyssen wrote:

...For smaller screens I've been starting to use media queries to linearise the layout into a single column. Actually, I've been using the mobile first approach where the default stylesheet is for a single column layout with media queries then adding on horizontal nav bars, columns etc. for larger screens.

Yes, I do agree. I do need to start using media queries to fit the variables. Mobile first sounds like a good plan.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

I've run into a fellow that

I've run into a fellow that considers fixed width layouts utter failures. Anyone else have an opinion?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

He's wrong

The only question that matters when assessing a website is: what is its primary purpose? If it's primary purpose (i.e. sell stuff online, provide football scores, whatever) is achieved using a fixed width layout then it is not an utter failure. Even if it fails him because of his hang-ups, but doesn't fail others then it is not an utter failure. Nothing is ever just black and white.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 46 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9231
Points: 3237

Ha! His nick wouldn't be

Ha! His nick wouldn't be deathshadow, would it? He's a sharp guy, but quite positive in his opinions. Wink

Most sites benefit from having some elasticity, but it is really the content that determines whether a fixed, liquid, or some point in between is better. Better for whom? The designer or the visitor?

Consider a page that consists of a single column of text, ESR's Armed and Dangerous for example. When he designed it, his choice to make the content liquid in width was likely a good one, given that 800×600 was the dominant lap-top screen size, and 65% figured to be about 500px width for the text. The trouble is that screens got larger, and like Parkinson's law, the designers designed larger pages so that we had to enlarge our UA window to accommodate their attempts to use the whole screen. We are being pushed now toward having to waste more screen space with yet larger UA windows. Meanwhile, ESR's text is on longer and longer lines, until ease of reading is degraded. View his site at 800px width, then compare on your big ol' Apple designer magnum 2560×1440 monitor with a full width window. This a site that would benefit from a fixed width for the content, or at least a width within fairly narrow constraints.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Haha, yes. That's the

Haha, yes. That's the fellow!

You've covered my point exactly. Reading columns can benefit from fixed widths.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Tyssen wrote: ... Nothing is

Tyssen wrote:

... Nothing is ever just black and white.

That's exactly how I feel about this subject.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Snap

gary.turner wrote:

Ha! His nick wouldn't be deathshadow, would it? He's a sharp guy, but quite positive in his opinions. Wink

That's exactly who I thought it was too. Laughing out loud I personally can't abide him and when I used to be a Sitepoint regular, he was one of a handful of people I had on my ignore list.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Well it seems I've been

Well it seems I've been initiated into the club. Do I get a hat or something?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 46 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9231
Points: 3237

Verschwindende wrote: [snip]

Verschwindende wrote:

[snip] Do I get a hat or something?

You mean one to talk through?Tongue

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

gary.turner wrote: You mean

gary.turner wrote:

You mean one to talk through?Tongue

Wow. That one wrote itself, didn't it? Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 days 27 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Quote: Fill the screen" is

Quote:

Fill the screen" is the new mantra, causing me to have to shrink my browser window to make the lines of text comfortable to read.

New mantra? There is, sadly, a fad going around with an attendant buzz word so soi disant developers can sound knowledgeable called 'Responsive' (ignoring the media query aspect) this is teaching designers who were stuck in pixel fixated mode due to mental print constraints to start to code in a fluid manner the rest of us have been doing that for years.

As Gary & Tyssen have said though, fluid but with a mix of fixed width sections or min/max widths in there somewhere.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Guh, its unbearable. I'm

Guh, its unbearable. I'm going to stick with here and avoid there.