Centred Layout Vs Left Aligned

3 Mar 2010 - 4:49am
4 years ago
11 replies
3905 reads
Alex Morris
2009

One of those old chestnuts that keeps rearing its head in discussion with client and/or the visual design team.

Left aligned (fixed width) sites are evil right? ;-)

Anyone got any evidence to the contrary?

Love to hear your thoughts.

Alex

Comments

3 Mar 2010 - 12:03pm
Ian Roberts
2004

I don't know about "evil", but in my experience all it takes is the manager with the maximized 1920px screen to say, "Why is there all this blank space over here? Can't we make use of that?" But if the same 1000px-wide site is centered on his screen, the comments are about the site and not the whitespace.

3 Mar 2010 - 7:08pm
colleen@hamilto...
2009

Fixed width is fine (this site is fixed width!).  Just center the fixed-width content and call it "Centered-Fixed-Width" or "Centered-Left-Aligned" :)  Everybody wins!

In all seriousness, the benefit to centered is that your eye doesn't have to travel as far to find the content starting point.  With today's screens, starting content allllllllll the way on the left in a 24-inch monitor is a difference of around 9 inches from the centerpoint of the screen.  But if you center the content, whether your screen is 24 inches or 17, your eye doesn't have to travel very far at all.  It normalizes peoples' experience with your site.

4 Mar 2010 - 2:54am
karin.christen
2010

It's the most common way, having the layout centered - even here in Switzerland. I think you do fine, if you center your Layout. But it depends on the style and design of a website. A Layout in a certain style can also look great beeing left aligned. However, if you choose the left aligned version and your customer is disagreeing with you - it is not a huge cost to center it, isn't it?

Just give it a try, if you think it's time to have a page left-aligned:-)

26 Mar 2010 - 3:11pm
Sam Murray-Sutton
2009

You should probably bear in mind that for many people, the advantage to having more space is being able to have more windows open at the same time; so often they won't have sites at max width. Some data-heavy apps definitely benefit from extra space, but sites that are mostly presenting text information maybe don't need that. I am happy to be proven wrong of course :)

-Sam

On 4 March 2010 12:38, karin.christen wrote: > It's the most common way, having the layout centered - even here in > Switzerland. I think you do fine, if you center your Layout. But it depends > on the style and design of a website. A Layout in a certain style can also > look great beeing left aligned. However, if you choose the left aligned > version and your customer is disagreeing with you - it is not a huge cost to > center it, isn't it? > > Just give it a try, if you think it's time to have a page left-aligned:-) > >

4 Mar 2010 - 6:23am
ferg
2010

Alex,

Your clients are right. Er,...

I think as Ian points out, now with the increase in monitors sizes, left aligned, fixed-width sites which only go to around the 960 mark kinda suck because there's this big which space [we all love the white space of course! But its a bit one-sided and not zen].Here's some browser stats from Google from not too long ago: http://onebigfield.tumblr.com/post/295333072/google-labs-browser-size.


So basically the answer is:

[a] get your site builders to pull their fingers out [JP and Pete] and build for each browser setting width and have the sites scale accordingly. Simple :)

[b] Or tell your clients they are evil, wrong and show them on your nice pretty mac screen when they pop into the office: "Stare into the white abyss on the right if you dare!"

Ferg

4 Mar 2010 - 8:33pm
Violet Bliss Dietz
2009

Left-aligned may not be evil but on a wide monitor when one has a number of items open and the windows are not maximized, a centered-content design has more visual "white-space" around it and it makes for an easier reading experience.   I've run into too many left-aligned sites which have poor padding allowances on the side margins which cause the eyes to work harder in trying to separate that site from the rest of the screen content.

Colleen's comment about how far the eyes have to travel is also germane. 

In addition, when the majority of new and remodeled sites are centered and one runs into a left-aligned site, the immediate assumption is that it is an old site that the organization has not bothered to update.  It looks dated.

I would ask what's the point of making it left aligned? What advantages does it bring to the user?

Perhaps the fact that there are no immediate responses that spring to mind in defense of the left-aligned, is all the answer that you need. 

5 Mar 2010 - 1:44am
Dimiter Simov
2006

(After the redesign, the list does not seem to accept posts by email. I replied yesterday but my reply did not show up. Here it is posted directly.)

Left-aligned or centered, there is no difference in the informational and interactional value. User subjective preferences may vary. Centered looks more symmetrical, thus better, when there is a lot of white space - the human eye would rather have the white space distributed on both sides than only on the left or only on the right.

I think the evil part is the browser, not the alignment of the site. Our browsers are still very stupid when it comes to window size.

In essence, most websites are magazines. A printed magazine has a fixed size, and all the content fits nicely within. Now, the browser window is seemingly very flexible - users can set it at whatever size they like. However, the browser is insensitive towards the content it shows - it either crams the content or leaves huge blank areas.

Maybe the browser manufacturers should make the browser sensitive to the type of content shown. If it is text, there is only so much width that is good for reading, so the browser should not make the window wider. If it is a movie, or an application with data, go ahead and spread it across all those 2000 pixels.


7 Mar 2010 - 8:31am
Olli Savolainen
2007

(Could not email to the list either, so posting on the website. Also pasting on Ubuntu from Thunderbird to the rich text editor seems to have deleted all my line breaks initially before I edited the html to replace br's with paragraphs.)

This discussion seems to steer towards being more about column width than whether content should be centered or not: You could left align if it did not cause issues with whitespace.

I have been wondering about fixed vs. fluid width for quite a bit, and about why everybody seems to do fixed width though it would seem sensible to:

define (content) column widths in em's (so text is always legible),

and the width of the entire page content in percentages (so there is no extra whitespace we don't want),

so that within columns defined in %, you could have further floating blocks/columns that take up a lot of horizontal space on a wide screen, but stack up vertically on a narrow screen.

Issues:

Having columns float and jump around depending on available width makes the layout unpredictable and may be hard to do visual design on.

Browser support: In order to define column sizes in em's, you need max-width in CSS to make sure it does not create horizontal scrolling. That is tricky in IE6, at least - not sure about the newer ones. Dimiter, is this the kind of browser support you thought were missing?

Images: We life in a bitmap world. So if you have a column defined in em's or %'s, your images are still going to be defined in pixels, so you need to somehow predict whether or not they are going to fit in your  columns. SVG will in the long run alleviate this, but I photos are never going to be vector graphics, (unless we get the entire physical universe modeled, but then I guess we have other things to worry about anyway :)).

Many of these, especially the last point, are alleviated by the fact that browsers also scale images nowadays and not just text, like Opera did before anyone else, I think. So users can define the optimal content width for themselves even with fixed-width layouts.

But it is still tricky. I am not sure but it seems sometimes column width actually ends up shrinking when you increase font size, because of the way the column widths are defined: so you end up with a bigger font but with 1-2 words per row. Ugh.

8 Mar 2010 - 2:24am
Dimiter Simov
2006

Yes, Olli, one of the things that I think of when mentioning lack of sufficient browser support is this - as a designer I should not need 101 easy steps to avoid horizontal scrolling or to set the desired text width.

26 Mar 2010 - 3:41pm
Fredrik Matheson
2005

Ideally, no, but that's the fact of the matter. 
Personally I think that the rise of HTML5 and CSS3 will be accompanied by the rise of the web typographer; someone who masters the medium and specializes in specific genres, be it web apps, mobile tools, news/video/photo, blog/wordpress etc.
In many cases we are still designing from the outside in. We have an idea of what we want and then we figure out how to make that happen, sometimes bending, flexing and breaking the platform/app we're working with to make it happen.
Designing from the inside out – in the browser, no photoshop, leveraging jQuery etc – is another way of working.It's severely bound to the web genre, but if you are working within that genre, it can be quite effective.
I think we've veered beyond the scope of the left-or-centered theme, but it's been an interesting thread.
 

(((Ple
26 Mar 2010 - 3:11pm
Dimiter Simov
2006

Left-aligned or centered, there is no difference in the informational and interactional value. User subjective preferences may vary. Centered looks more symmetrical, thus better, when there is a lot of white space - the human eye would rather have the white space distributed on both sides than only on the left or only on the right.

I think the evil part is the browser, not the alignment of the site. Our browsers are still very stupid when it comes to window size.

In essence, most websites are magazines. A printed magazine has a fixed size, and all the content fits nicely within. Now, the browser window is seemingly very flexible - users can set it at whatever size they like. However, the browser is insensitive towards the content it shows - it either crams the content or leaves huge blank areas.

Maybe the browser manufacturers should make the browser sensitive to the type of content shown. If it is text, there is only so much width that is good for reading, so the browser should not make the window wider. If it is a movie, or an application with data, go ahead and spread it across all those 2000 pixels.

Dimiter Simov Lucrat Ltd. www.lucrat.net Netage Solutions Inc. www.netagesolutions.com

-----Original Message----- From: ixdaor@host.ixda.org [mailto:ixdaor@host.ixda.org] On Behalf Of Alex Morris Sent: Thu, Mar 04, 2010 0:54 To: jimmy@lucrat.net Subject: [IxDA] Centred Layout Vs Left Aligned

One of those old chestnuts that keeps rearing its head in discussion with
client and/or the visual design team.

Left aligned (fixed width) sites are evil right? ;-)

Anyone got any evidence to the contrary?

Love to hear your thoughts.

Alex

Syndicate content Get the feed