What is the BEST Web site Width?

[ibuyforums]

It isn't about the technology or purity of coding principles or anything like that ... it's about making a site that works for everyone, a site that everyone can use easily. I'm sure the "idiots" in the business group – if you actually sat them down with a few "real" users and showed them the barriers that their pretty site puts up by being too wide, ifthey saw for themselves how it frustrates users and makes it less likely that they will complete a transaction or return in the future – would understand that usability should trump aesthetics in any sensible decision.

I understand where you're coming from but the limitation in your reasoning, IMHO, is that:

(a) fixed width does not mean unusable (or should I say "fixed widths.") Not even close.

(b) real users also want no advertising. If we are talking about just giving people everything for free and everything that they want, you're right.

(c) the only sensible decision is one which people can easily understand and reduce to simple terms. With fixed widths you'd have every advertiser needing to discuss screen size, how the ad may shrink, where it goes when screens are made wider or reduced and other variables. Every additional variable adds another part to the equation and nobody wants to get short changed. By having limited but perfectly accepted widths, order and expectations are regular and expectations are maintained.

I found that everything in the world is a sacrifice of sorts.

[Stevie D]

That's very true. But, I think it's actually a myth that a truly usable design can't be aesthetic. If designers warmed up to the notion that aesthetics didn't need to suffer (at all), we'd be one step further today.

You're right, I didn't phrase that very well. I was referring to the deezyner's idea of aesthetics that are tied to a particular pixel-perfect image. While we know it's perfectly possible to have flexible or responsive designs that look fantastic, there are still far too many webbists who won't relinquish that level of control in order to make a site more user-friendly.

[Stevie D]

(a) fixed width does not mean unusable (or should I say "fixed widths.") Not even close.

I'm not saying that fixed widths are "unusable", but that they can present usability difficulties for people whose window widths are narrower – and no matter how well you design the site, those difficulties will be there.

(c) the only sensible decision is one which people can easily understand and reduce to simple terms. With fixed widths you'd have every advertiser needing to discuss screen size, how the ad may shrink, where it goes when screens are made wider or reduced and other variables. Every additional variable adds another part to the equation and nobody wants to get short changed. By having limited but perfectly accepted widths, order and expectations are regular and expectations are maintained.

I accept that there are compromises that may need to be made. I strongly disagree that the 960-grid approach, which is currently popular, is on the right side of those compromises though, it hinders far too many people. I've not noticed any advertising banners wider than 768px, so I'd be very surprised if you needed a page much wider than that even if you need to accommodate ads.

[ibuyforums]

I'm not saying that fixed widths are "unusable", but that they can present usability difficulties for people whose window widths are narrower – and no matter how well you design the site, those difficulties will be there.

What difficulties are there with a 960px site? Personally I'm a fan of responsive sites where you have a couple of widths defined and done.

I accept that there are compromises that may need to be made. I strongly disagree that the 960-grid approach, which is currently popular, is on the right side of those compromises though, it hinders far too many people. I've not noticed any advertising banners wider than 768px, so I'd be very surprised if you needed a page much wider than that even if you need to accommodate ads.

I agree with you on the frustration but it's more about how these ad sizes get to be what they are instead of the other way around, such as figuring out the best grid sizes for a variety of popular devices and then affixing them properly. For 200x250 the 960px approach is fine for two column. The awkwardness begins with the introduction of the leaderboard sizes causing all sorts of strange things to happen in order to accommodate them.

[cgCody]

Ok, so first off, I'm sort of in the process of relearning web design trends, as I've been out of the loop for the past 5+ years. A LOT has changed.

So I understand the fluid, semi-fluid, responsive, etc concepts. One thing I'm not sure about is all the talk in this thread against using pixel units, especially for fonts. Based on things I've read recently in various articles and forum threads, I started to gather the impression that people are going back to using pixels due to modern browsers using page zoom anyways. IE6, who?

Wouldn't a semi-fluid/responsive hybrid, with pixel fonts be an ok way to go?

[Stevie D]

So I understand the fluid, semi-fluid, responsive, etc concepts. One thing I'm not sure about is all the talk in this thread against using pixel units, especially for fonts. Based on things I've read recently in various articles and forum threads, I started to gather the impression that people are going back to using pixels due to modern browsers using page zoom anyways. IE6, who?

Wouldn't a semi-fluid/responsive hybrid, with pixel fonts be an ok way to go?

There seems to be a fundamental misunderstanding about people using different text sizes – this isn't aimed just at you Cody, because I've seen plenty of other people make the same mistake.

The issue is not just that some people look at a web page and think "Oh dear, that text is a bit small, I'd better make it bigger" and then Control-and-Scroll (or whatever their preferred method is) until it looks legible. Sure, some do, but there are a lot more that have set a default text size that is suitable for them, so that (in theory) every web page they go to will appear at a legible text size straight up. So then having set the size they want, it's reasonable to expect webbists to respect that and give them websites that appear at that chosen size. Yes, they can zoom in (although this doesn't do a whole lot for the quality of images and design a lot of the time), but why should they have to?

Imagine if you went into a library and (because you've got bad eyesight) took out a book from the 'large print' section ... only to find that it had normal sized print, "because the publishers thought it looked neater like that, and everyone has a magnifying glass they can use if they need it bigger".

Nuh-uh. If I change a setting like the default text size, I have done that for a good reason. I don't then want an arrogant designer to be saying to me "I don't care what size you want to read it, you're getting it in 12px". Yes, I can enlarge the text, but that's solving a problem that shouldn't have been a problem in the first place.

[cgCody]

Good point. It definitally has been a misunderstanding on my part. I suppose that since I never bother with the default text size myself, it's been a feature I haven't taken into consideration.

[itmitică]

If I change a setting like the default text size, I have done that for a good reason.

And so has the designer. He's been deciding on the fonts in the first place, while you can only decide for the text size, with under the hood settings. Unless you choose to completely ignore its style, which would render the issue void.

Yes, I can enlarge the text, but that's solving a problem that shouldn't have been a problem in the first place.

Yes, you can. It's not a problem, but you should do that if it feels like one.


With that, I fail to see any problem on any end with px font sizes. Everybody has choices and the freedom to choose one or the other, whilst everybody else has means to adjust accordingly.

On a side note, using CTRL+wheel to zoom works in a heap of apps, that it's standard and common knowledge to the users. More so than going under the hood to change default text size, which is a bit too much for the average user.

[itmitică]

So I understand the fluid, semi-fluid, responsive, etc concepts.
[...]
Wouldn't a semi-fluid/responsive hybrid, with pixel fonts be an ok way to go?

Just to be perfectly clear, what does "a semi-fluid/responsive hybrid" means to you?

[TechnoBear]

Yes, I can enlarge the text, but that's solving a problem that shouldn't have been a problem in the first place.

Yes, you can. It's not a problem, but you should do that if it feels like one.

We've had this discussion before. One of the problems is that many of the users with larger default text settings are older people, whose system has been set up by a younger friend or relative. These users are the least likely to know how to zoom in or out on a site, and shouldn't need to; the site should respect their settings.

[itmitică]

Yes, we did had this discussion before.

And yes, no one slamming the px font size has brought forward actual proof of the said "older people/savy tech" situation being anything more than a wild guess. Nevermind it being a mass phenomenon.

And the possibility of the user learning easier methods, like zooming, is far more likely to occur, given the overwhelming number of sites using px fonts, a fact that makes changing the default text size useless.

Though there are friendlier UAs that override this px font size behavior, letting the user to simply and easily decide among Small, Normal, Large, Huge settings for font. Now, that's a feature to promote, not em and not under the hood changes for only the default text size, if you're serious about this kind of accessibility enhancement.

[TechnoBear]

And yes, no one slamming the px font size has brought forward actual proof of the said "older people/savy tech" situation being anything more than a wild guess.

What would you like me to do? Get sworn statements from the folk for whom I have set up just such a system? The fact that I know several people in that situation, and other folk on the forums have also raised this issue, says it is commonplace, whether you choose to acknowledge it or not.

[itmitică]

Get sworn statements from the folk for whom I have set up just such a system?

I'd think not.

Let's try Google:

- how to zoom in browser: About 126,000,000 results (0.23 seconds)

versus

- how to change default font size in browser: About 3,210,000 results (0.25 seconds)


And, BTW, you're not helping them help themselves, you realize that, do you? While simply showing them how to zoom will work even if they decide to change the browser, or if the OS has been freshly reinstalled, or if they happen to land behind the keyboard of an unfamiliar computer.

[kohoutek]

Yes, we did had this discussion before.

And yes, no one slamming the px font size has brought forward actual proof of the said "older people/savy tech" situation being anything more than a wild guess. Nevermind it being a mass phenomenon.

I have human proof right here. Three of my family members who use the internet but haven't a clue and had me adjust their system. Three people, all very smart people who are all over 60 and not interested to learn the technical aspects. They just want to have it work. It's far from being a wild guess at all.

[TechnoBear]

And, BTW, you're not helping them help themselves, you realize that, do you? While simply showing them how to zoom will work even if they decide to change the browser, or if the OS has been freshly reinstalled, or if they happen to land behind the keyboard of an unfamiliar computer.

These people are learning to use a computer from scratch. That's enough of a challenge, without having to learn what to do when somebody over-rides their carefully-chosen system settings. We may well get round to it one day, but it's not top of the priority list.

[itmitică]

I don't pretend to speak for the user.


The technical facts are these:

- changing the default text size under the hood is partially ineffective, hard to emulate by the common user who becomes dependable, and it offers but one level of accommodation

- zooming is easier to achieve, it's in the reach of every common user, who becomes independent, and it offers multiple levels of accommodations


Testimonials are good. But given the technical facts you should consider switching dependency for independence for the users you advise.

[TechnoBear]

We seem to be getting off-topic here, and you're clearly not going to change your views, so let's just leave it there and get back to web site widths.

[itmitică]

Did you even consider changing yours?
Because I know I've given you some solid arguments.

Back to widths it is...

[cgCody]

Just to be perfectly clear, what does "a semi-fluid/responsive hybrid" means to you?

I think what you really mean to ask is why did I make the distinction between responsive and semi-fluid design.

Naturally, fluid design and responsive design go hand in hand. However, I still feel that fluid, semi-fluid, fixed, elastic, and responsive are all different design methodologies, with different overlapping and/or mixable qualities. One could make a fixed layout that is responsive to screen size, for example.

[itmitică]

However, I still feel that fluid, semi-fluid, fixed, elastic, and responsive are all different design methodologies, with different overlapping and/or mixable qualities. One could make a fixed layout that is responsive to screen size, for example.

Let's compare notes.

There are two basic types of design: fixed and flexible.

Fixed layouts speak for themselves: fixed widths. If one would go for a fixed layout, then the question: "What's the best website width?" would be of some concern. But I think that no designer these days still thinks of fixed layouts as viable.

Flexible designs are relative designs. They are based on relative dimensions. They can be elastic (based on em) or fluid/liquid (based on %).

Together with min/max, hybrid layouts are anything in between.


Responsive design is a design, fixed, relative or hybrid, that uses media queries. And since the uprising of the mobiles, "What's the best website width?" is no longer a valid question. Responsive should take care of any width.

[cgCody]

<snip>
Flexible designs are relative designs. They are based on relative dimensions. They can be elastic (based on em) or fluid/liquid (based on %).
<snip>
Together with min/max, hybrid layouts are anything in between.

Responsive design is a design, fixed, relative or hybrid, that uses media queries.
<snip>

Which is a solid breakdown of the various methodologies. So if one, such as myself, wanted to refer to a specific mix of the above in bold, it might be worded as a semi(min/max)- fluid/responsive hybrid Ya dig?

[itmitică]

Well then, another one, such as myself, if I wanted to refer to a specific mix, I might word it like this:

"Wouldn't a responsive design based on a hybrid layout, with a pixel font base, be an OK way to go?"

And the answer is yes, definitely yes!

[cgCody]

Dude, you're getting way too deep into the semantics of wording. I'm just a simpleton, not an English professor.

[itmitică]

Trust me, it's not about an English language issue.

First off, I'm an ESL, so it's really not my place to give English language lessons, but rather to take English language lessons.

But, what stroke me in your sentence, and I probably should have said something earlier, is the fact that a semi-fluid is a hybrid already. And... it's about layout!

Put "semi-fluid/responsive hybrid" in the wrong context and one would get the idea that a layout type and a design concept can be put together to make a "layign", a hybrid.

Also, a lot of designers get confused when talking about designs and layouts, and which is what, and so I took the opportunity to maybe clear the air for those few reading this thread and possibly for myself.

That's about it.

[Ryum]

The general rule as far as I know, is that a website should be viewable at a 960px width (or viewport). But as said earlier there are different ways of defining width. Percentages are best, but it's hard to design for and make it work across all devices. I always go for the 960px approach, but set this to work as a min-width, so that if a user has a wider screen, margins, padding and so on will adapt to this.