Fixed width website the only real possibility?

views:

answers:

+2 Q:

Fixed width website the only real possibility?

When creating a web-site design, is the only real option to provide a fixed content width?

I notice most major websites (this one included) center all the content into a fixed width, which ensures all elements look correct on all screen sizes.

I think I already know the answer to this, but a colleague seems to think that there should never be a horizontal scrollbar and a website should resize to the users screen width. I make the argument that text can resize but other elements can’t (buttons, textboxes etc), so a fixed width is the only option.

I'd love your opinions each way.

Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?

I tend to make my websites have a minimum width for legibility, but otherwise the width is determined as a percentage of the window size (I normally pick 80%).

I find this gives me ample coverage of the viewport, whilst still looking good on larger monitors.

I find this approach fails on larger screens when there is little content, as the content tends to get stretched into a line at the top of the page, which can make things confusing. So for those pages it can be good to have a fixed width, centred style.

Matt Ellen 2010-10-20 14:08:06

No. A thousand times no.

If your website presents any kind of body text, fixed width is an abomination from the depths of the mid-90s, forcing readers to scroll like crazy, while being mocked by vast expanses of unused screen space to either size. (Now, a variable number of columns I might buy.)

BTW: flag for CW.

Pontus Gagge 2010-10-20 14:08:48

SO contains lots of text - but everythings centred in the middle fixed width. How do you explain this?

m.edmondson 2010-10-20 14:11:34

@eddy: I didn't exactly express my undying love for the SO layout...

Pontus Gagge 2010-10-20 14:12:46

@Pontus Gagge - Point taken

m.edmondson 2010-10-20 14:13:41

Not the unused screen space argument again. The world is not running out of pixels. It is not hard to hit space bar to get your browser to scroll a page. It *is* hard to read content beyond a certain line length (studies have been done). It *is* tiresome to resize your browser window to make the line lengths readable.

Paul D. Waite 2010-10-20 16:08:27

-1. You do realize that there is a certain range of width with which reading is comfortable, and that anything narrower or wider makes reading harder? The readability and unused space arguments are both counter-factual and irrelevant.

Yi Jiang 2010-10-20 16:14:24

@Paul, Yi: yep. Hint: seen any newspapers recently? It's a shame CSS didn't think ahead to make columns easy. But then, I'm probably silly to want to use web pages for information. Let's all look at the pretty pictures instead!

Pontus Gagge 2010-10-20 17:27:41

@Pontus: “It's a shame CSS didn't think ahead to make columns easy.” It’s really not. Columns on web pages go like this. 1. Read visible portion of column one. 2. Scroll down as much as required whilst reading the rest of column one. 3. Scroll back up to the top of column two, which may not be at the top of the page, to continue reading. 4. Repeat for as many columns as the page has. I’ve read PDFs on my computer that were laid out with multiple columns, and it was freaking annoying, whether the columns contained words, pretty pictures, or ugly pictures.

Paul D. Waite 2010-10-20 21:22:16

@Paul: and that's the **only** way of implementing columns you can imagine? Amazing.

Pontus Gagge 2010-10-21 08:45:36

@Pontus: Enlighten us with your vision of columns that’s easier to read on-screen than one column.

Paul D. Waite 2010-10-21 08:59:44

@Paul: http://www.w3.org/TR/css3-multicol/, specifying desired column width, with overflow handled by vertical page scrolling by the viewport height. Extensions for content-requested width hints and variable column widths (for e.g. embedded illustrations) would be welcome, but not critical. ...or, more simply put: use mostly the same conventions which are well established in print and therefore well-tested and well-known, but use the dynamicism of the web to optimize the layout to the actual display media. Don't force me to view everything through a keyhole, please.

Pontus Gagge 2010-10-21 09:08:45

@Pontus: all that to avoid hitting the space bar?

Paul D. Waite 2010-10-21 09:47:19

@Paul: all that to scan text quickly and efficiently. De gustibus non est disputandum, eh?

Pontus Gagge 2010-10-21 10:31:39

@Pontus: yeah. I guess. I was thinking of the problems with columns for reading. For scanning, yeah, better to have more stuff in one place.

Paul D. Waite 2010-10-21 10:54:02

+1 A:

Dynamic-width web-sites are generally composed of one or many percentage-width blocks which make 100% total. So blocks size change with resolution or browser resizing, but if total width is too short it can occure lisibility problems, so a minimal width is specified for <body>, in which case a horizontal scrollbar appears. But you can think differently : http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/.

MatTheCat 2010-10-20 14:10:54

Horizontal scrollbars are a big problem. A properly designed website should be able to scale down to be used on small resolution screens (640x480). Also, it's nice to have to have my browser window maximized just to browse a site. Also, there's no reason why a person with a high resolution monitor shouldn't be able to use the extra space their monitor gives them.

Kibbee 2010-10-20 14:11:37

+5 A:

You can get clever with floats/media queries to make layouts work well at narrower widths.

But it is indeed more common to go with a fixed width:

It’s easier to design
Not many people have narrow monitors these days — most websites seem to assume they’ve got 1000 pixels of horizontal space to work with, and I haven’t heard of them getting many complaints
When lines of content get too wide (I think more than around 60 words?), they get difficult to read, so there’s not much advantage to be gained from having elements expand to full width for users who have bigger browser windows.

I think the most likely group of users to have less horizontal space available is smartphone users, and you’re going to want a specific design for them if you care that much about their experience.

Oh, just one thing though: “Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?” With the greatest possible respect, that’s a bit of a programmer’s way to think about it. You can’t guarantee anything about web page rendering. Browsers and operating systems can do whatever they want. That’s the web. Let it go.

Paul D. Waite 2010-10-20 16:12:01

Depends on the content. If it is graphics and flash those do not scale. If the content can be scaled, most people like a fluid width.

The majority of people have 1024 screens - they of course need to the content to fit their monitors. It is better to have wider borders of empty space than to force people to scroll on the bottom then scroll on the side then repeat.

Is the layout better with wide borders? That would be normally no. The border is an element of the design as well.

Wayne 2010-10-24 23:00:52

The only content that can correctly scale is text yes? Pictures, text boxes etc all tend to be a fixed width, otherwise you cannot guarantee how it will appears on different browsers/screen resolutions?

m.edmondson 2010-10-25 08:10:38

ansaurus

tags:

views:

answers:

Fixed width website the only real possibility?

related questions