The other day I was going through eduStyle.net looking for site ideas and one thing that instantly stood out and annoyed me was sites that are left aligned. I realize this is a personal opinion and I totally respect other individuals who believe in a left aligned site, but I am still going to present my case. So I hope that you are ready for a little rant?
The History
As monitor resolutions have gotten higher and able to easily display more pixels on a screen, web design have responded accordingly. Page widths have gone from 600 to 800 to 1000 and now sometimes 1200 people are able to stick more information on a page because they have more real estate. Think of it like the difference between a book, magazine, and finally a newspaper. Each is progressively wider and each is able to display more columns and ultimately more information on a page. Modern web pages read much more like a newspaper than a magazine and especially not like a book. One of the challenges with designing a website for universal browsers, operating systems, and physical setup is that each users experience is different. Besides computers rendering a page differently the resolution of a monitor also can effect what is viewable on a computer screen at a time. Where my resolution might be 1400 pixel width some users still have their setup set at 800 pixels.
The chart above is for wofford.edu over the past month. Notice 800×600 account for 2.76% of traffic. The top ten on this chart represent 96.7% of total traffic. Assuming the rest of the traffic was 800×600 or less we are still only talking about 6% of the total audience and that is an overestimate. I regularly hear that I report on lots of Google Analytics data, but what about actionable steps? The argument in the past has been that developers, designers, and tech people were the only individuals who had high resolution screens, but this just isn’t the case anymore.
So here it is, I’m saying it. Critical mass says that it is ok to design for 1000 pixel width. No I’m not talking about a site that is width 100% and adjust to a users monitor resolution because that can make your content layout look horrible. The data says it and I’m pushing it. Just as we now build sites for high speed connects because dial-up represents such a small population, designing for 1000 pixel width has also become ok.
Left Align… Why?
Back to my gripe here, I have a ridiculous monitor at work that resolves to 1680×1050 so sites simply look small on my browser and anything that is designed for 800 pixels simply looks small in my browser. I’m not so much upset at this as I am when I see a site designed for 800 pixels is also left aligned. This simply looks horrible. It’s a simple div tag guys get your stuff together! Wonder what I’m talking about? Instead of picking on another site I’ll just give you a visual image of what Wofford would like like left aligned and what it looks like center aligned on my monitor.
When a site is center aligned at least the extra space is evenly distributed. When it’s left aligned there is a TON of extra space on the right had side of the page that not only looks bad, but appears like an excessive waste of space. Bottom line, left align just looks stupid and like you have no idea what you’re doing.
Closing Thoughts
- Going forward, think about how wide your next redesign should be and use the data to help you come to a decision.
- Applying a align center div tag to a template is a “low hanging fruit” type opportunity if you don’t do this already.
- It’s not about you it is about your user and their experience and our users have gotten to the point where high resolution is the norm not the exception.
I know the first thing you are going to say is that this blog is optimized for 800 width along with Wofford’s site. That is completely accurate and in upcoming redesigns this data will be extremely valuable in designing accordingly.
So that’s my rant. Feel free to slam me in the comments. That is why they are there and I’d love to hear compelling cases against this argument. Free speech is a great thing and I encourage you to use it.
I agree 100%!!! When I redid my blog, I made sure it was for 1024 because there are just too few users that are still 800×600 and I wanted the extra real estate. We’re moving in that direction for the development pages at Dartmouth as well. And regardless, everything is center aligned
Even though the percentage of users is low, it still is a significant amount of people > 6,600 in your analytic data. Our analytic data is comparable. Put yourself in their shoes having to scroll to the side to get to the majority of links which are within 200px of the right. (
As far as center align is concerned - no brainer.
@Web Manager- So about the same population or maybe even slightly less are still on Dial-up (probably the same users). Are you saying that we need to optimize for that population by not having videos or interactive features that are needed for a high speed connection? Now I totally agree that you still need to optimize your code to load as quickly as possible, including optimizing images and compacting javascript and CSS, but you build to your audience.
Now if your user bases was a higher percent that 3% then maybe, but making 97% of the population suffer for 3% doesn’t make sense.
As far as putting myself in their shoes well it’s only a matter of time before they get a new computer and these numbers shrink more. If I’m always trying to please 100% then I’m slowing down innovation and making the majority of my audience suffer for the needs of the few. Am I blunt and brutal, maybe, but I’m also being quite realistic.
Good points. I hate seeing a web page off center. I’m going to look at the resolution on my site also - I think it’s 1024.
Having just gone through a re-design at https://www.stonybrook.edu and arguing this very point we settled for a 960px centered layout. I fully expected some push back when we launched but have not had one comment complaining about the new width and only positive feedback about it being centered. The extra 160px really opened up the pages and made it easier to see all the links we have to display on 2nd level pages.
I didn’t know what you meant at first by align left. I was thinking in terms of text.
But your illustration make it clear.
I had my site at a wider resolution, but got some complaints so I went back to a more narrow resolution.
Maybe I made the wrong decision.
Warmly,
Linda P. Morton
I am looking for some idea and stumble upon your posting
decide to wish you Thanks. Eugene
Kyle,
I think the world is moving more and more towards centered for the reasons you describe.
And I’m glad you didn’t advocate liquid design. I like it for some smaller sites, but it can be a bear to manage if you want the site look good in all the various sizes.
When going wider I think one needs to be cautious regarding 2 points.
1) Screen resolution is not the only factor impacting what our users see. I have a colleague who never opens her browser to it’s full size. She keeps her windows smaller so that she can see the windows (of various programs) in layers and move between them. So while her browser can display a wide width that’s not the size she’s looking at.
Similarly many people surf the Web with their history or delicious bookmarks displaying in a sidebar. On my Macbook Pro this can take between 140 and 400 pixels of horizontal space. (I don’t do this but I do have a lot of toolbars that infringe on my vertical space.)
2) People should take heed of the reference you make to newspaper columns. One of the reasons they use several columns in a newspaper is to reduce line-length. Wider line-lengths are harder to read, so by breaking them into narrow columns, newspapers enhance readability. When designing for wider sites we should do the same.
A page with a left navigation column then a wide column for text would be harder to read, so in those cases we should really consider presenting the main body copy in two columns. Thus we should design specifically for the space rather than just giving more room to what we’ve done before.
In any case you bring up an issue that we should all be thinking about.
@Heidi - Excellent, excellent points! We definitely don’t want to design for 1400px but 1000px is fair game. Thanks for sharing your thoughts.
Down with left justification! I’m on board with that.
Your resolution data (percent distribution) is practically identical to ours. We are moving from 750 to 950.
Same here Kyle. I looked at this type of data a few months ago and have been pushing our web house to make wider designs. Also agree on the centering.
These are really simple suggestions, but they do make a world of difference. I too use a 1680×1050 monitor, and nothing bothers me more than left-aligned layouts. It’s not just wasted space, but it also makes the content seems so… anchored and static.
As far as putting myself in their shoes well it’s only a matter of time before they get a new computer and these numbers shrink more. If I’m always trying to please 100% then I’m slowing down innovation and making the majority of my audience suffer for the needs of the few. Am I blunt and brutal, maybe, but I’m also being quite realistic.
It’s funny because 1680×1050 (or higher) resolution is probably less than 5% of all users as well. You can’t justify a center-aligned site for that reason alone. Some designs do very well left-justified.
That said, centering just seems to make sense for blogs and purely informational sites.
Aside: people, please just don’t cram more in that extra space you get. Everything you put on a page takes away from everything else.
I would also recommend being aware of the trend in changing aspect ratio on your site. We have seen a double-digit percentage drop over the last year in the standard squarish 1024×768 size and comparable increase in the widescreen size 1280×800. I’m sure most of you will see the same thing due to the popularity of widescreen monitors and, especially, latops. They are about even now, but I suspect in six months widescreen will have taken the top spot.
Interesting discussing! What i am looking for is - proof - that a centered website is easier to use/feels better then a left-aligned (fixed-width) website. The large online shops cannot make decisions based on feelings, they need test results and than make changes.
For instance: On a widescreen monitor, which site design is proven to work better on big and small screens and (more important) why?
1. https://www.ikea.com
2. https://www.bestbuy.com
3. https://www.bol.com
Can we prove our feeling that people want to look straight ahead instead on their screen or prefer to start to look at the left side of the screen?