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.
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.
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.
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:-)
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 :)
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:-)
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!"
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.
(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.
(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.)
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.
float and jump around depending on available width makes the layout
unpredictable and may be hard to do visual design on.
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?
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
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.
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.
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.
Lucrat Ltd. www.lucrat.net
Netage Solutions Inc. www.netagesolutions.com
From: firstname.lastname@example.org [mailto:email@example.com] On Behalf Of Alex Morris
Sent: Thu, Mar 04, 2010 0:54
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.