Is it time to move beyond 960?

~ 23 April 2009 ~

The new Typographica.org

The new Typographica.org, which uses a width of 1040.

Lately I’ve been questioning if it isn’t time to move beyond 960 for websites, and if so, what the ideal width may be.

Those of you frequenting this site for a few years may recall a similar quandary, “Optimal width for 1024px resolution?”. In it, I proposed 960 as the ideal width for moving beyond 800x600:

I’ve been using 960 for some time now, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities).

Since then it seems 960 has nearly become the de facto standard for fixed-width designs on the web. A number of Photoshop, browser, and OS plug-ins default to it. There’s even an entire CSS framework built on 960. (I should note 984 has also seen considerable usage, most notably Apple.com.)

Admittedly, I’ve not yet settled on an ideal width for 1280ish, and I’m working on only one site at the moment to inform my thinking about the topic. But I think we’re at the point where it’s time to talk amongst ourselves.

Before the flak begins flying from fixed-width naysayers, I remind you that I’m a huge fan of fluid designs with min-width and max-width limits, as evidenced by my Extensible CSS series and case study design for CSS Mastery. But I believe there will always be a need for fixed width, and frankly in many ways it’s more practical than fluid width.

So what’s the ideal width? I’m not sure yet. Let’s figure it out together. Here’s what I’ve got so far:

  • 1020 is divisible by 2, 3, 4, 5, 6, 10, 12, 15 but not 8 and 16. It’s not much wider than 960.
  • 1040 is divisible by 2, 4, 5, 8, 10, 16 but not 3, 12, or 15. Yet it has a reasonable width that sits somewhere between the lower end of 960 and higher end of users browsing full screen (many don’t, of course).
  • 1080, which is what I’m taking for a spin with a site right now, is divisible 2, 3, 4, 5, 6, 8, 10, 12, 15 but not 16. It pushes the upper end of the width spectrum, and measure (line length) could become an issue if not dealt with appropriately.

Of course, there’s probably a slew of other numbers between 960 and 1080 divisible by many of the widths listed above, so speak your mind about widths, measure, pros, cons, etc.

 

74  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Niki Brown | The Design O'Blog ~ 23 April 2009

I’m wondering if 120 pixels will really make that much of a difference. 120px is approximately half the width of your sidebar.

Also - thinking way way way into the future…how wide will we get with websites? How wide is too wide?


2   Beth ~ 23 April 2009

I’m wondering if we can even assume a standard width anymore and we should be determining this site by site based on audience?


3   Dion ~ 23 April 2009

1002…
Open Xscope hit command-3 and toggle browsers.
Watch the number in the lower part of the ‘Screens’ window…


4   Stefan Rechsteiner ~ 23 April 2009

I’m currently working on a site with 1080, because it’s the most logical to divide and I think it’s a better, visual with than everything else between 960 and 1040 … just visually …


5   Chris Harrison ~ 23 April 2009

I think it’s going to depend on your audience… With a new site, I think I’d still play it safe and go no wider than 960px (or go liquid). I’d feel more confident going wider if I had data showing a majority of site visitors had their screen resolution higher than 1024x768… As far as an ideal width is concerned, out of the 3 widths you’ve suggested 1080px seems the most versatile.


6   Branden ~ 23 April 2009

I’d be interested in the screen statistics as of this year. I know quite a few people who are at least expanding their outside image elements beyond 960 but I haven’t seen many venture off into the 1,000+ territory.

I keep trying to imagine a web page of 1280x and the amount of content you could squeeze onto that is amazing. Almost to amazing in fact. I’d have to think really hard on how to fill it all up.

Enjoy your posts!

Northern Utah fellow,

Branden Silva


7   José Mota ~ 23 April 2009

I believe we’re right in the middle of such a transition. Lots of 4:3 monitors are still out there and 16:10 monitors are already a lot visible through laptops. If it’s not a 50-50% distribution, I’d say it’s close.

Unfortunately what I see from such an experiment is double the work, in the way you have to create two different grid layouts and content placement strategies.

Well, there shall be a time where you can simply tell the user to scroll sidewards. What you are saying is: “Why the hell not now??” I’m not sure… :P


8   5tein ~ 23 April 2009

1080. It’s fate. It’s a massive trick in snowboarding, and a fable for skaters. 1080i resolution on TVs, the list goes on. Coincidence? I think not…


9   Rich Clark ~ 23 April 2009

Although I would argue that you’ve got to look at your stats and make a call whether to move to a 1280 res target audience.

It probably makes sense to use an elastic design where appropriate for this.

I’m not sure why you’ve stopped at 1080? Why not go all the way and use 1200px, divisible by 2,3,4,6,8,10,12,16?

Also Niki makes a great point about where will we stop!


10   Matt Stover ~ 23 April 2009

I would like to see a slight increase in page width maybe to 1080px once the majority of visitors are so equipped. Thus any of the numbers you’ve posed could work well.

However, going much wider begins to require almost full screen browsing which I don’t care for unless I’m watching a movie.


11   Dave Smay ~ 23 April 2009

Cameron,

Great point. I’ve been designing some new projects recently that pass by the 1,000 threshold, but am yet to finish and launch them. Do you find “too much space” to ever be a problem vs. content, or not so much? Is there a line you feel that dictates when that design should determine most future content and not the other way around? -DS


12   Tim ~ 23 April 2009

Just because monitors are bigger doesn’t mean sites need to be bigger. For example, I have a 20” wide screen monitor at home; if possible, I like to have two windows siting side-by-side. As page widths grow, I can’t do that; 960 still fits comfortably.

Also, I wonder about the impact of some of the new netbooks — those little 10” computers with 1024px displays. If they become super popular, width restrictions will be important.


13   5tein ~ 23 April 2009

I’m very interested in how this decision cascades down to type size and line length. 1000+ wide designs should consider line length for readability or type size to correspond to resolution (assuming resolution has a consistent correlation to screen size, which it doesn’t always).


14   jason ~ 23 April 2009

I understand the desire to determine a suitable width, but I think the key ingredient is user behavior. From usability reports that I have read, the majority of users who have 1280px wide monitors or larger no longer browse with the browser “maximized” (which I don’t think is the correct term for full screen anymore).

Until I see proof otherwise, it doesn’t matter how big the standard monitor gets, I’m sticking at 960 max for fixed width sites.

I’m sure the majority of people who visit this site have 1680px wide monitors, maybe a few 1280s (granted, probably not the typical user for most sites). I’d be curious to see how many of them browse with the width maxed out. I know I don’t.


15   Trent White ~ 23 April 2009

I agree that the best approach may be to take this on a case-by-case basis after target audience research.

I, myself have been liking 12 column grid-systems, and have been using 960px width. I’ve based this opinion loosely on the success of the Unigrid by Vignelli from the ’60s.


16   Westley Knight ~ 23 April 2009

With the advent of the popular ultra portable laptops/netbooks, most of them are set as standard at 1024 resolution, so I don’t really think there’s much choice in expanding beyond 960 as it stands.

When statistics start to move in the direction of 1280 as the mainstream, only then would I consider moving up from 960.

Alternatively, should we be designing for multiple resolutions (along the lines that Beth above states), or using liquid layouts to expand a 960 based site for those larger resolutions.


17   Steve Rydz ~ 23 April 2009

I think it’s still too soon to move beyond 960. From what I have seen many people with wider screens actually have narrow browser windows.

I go into more detail here: http://steverydz.com/133

You also bring up a good point with the measure. As sites get wider we need to find more content to fill the spaces.

In order for content to still be legible we would need to have content spread over 4 or 5 collumns.


18   Cameron Moll ~ 23 April 2009

Regarding comments about audience stats and such, absolutely. But at some point the lowest common denominator for the general web audience will probably be such that we can all agree on a standard size, much like we have for 960.

It’s funny as I write this how “wide” the design for this very site felt five years ago. It feels like a lodgepole pine right about now.


19   Vladimir Carrer ~ 23 April 2009

The next number is 1200px.

I did mini research when I was projecting “The Goleden Grid” -> http://www.vcarrer.com/2009/02/golden-grid.html

All the numbers and calculations: http://spreadsheets.google.com/pub?key=pXCrVPXw4_Xh-QIjQt—cOw


20   Topher ~ 23 April 2009

Isn’t this really all moot? Shouldn’t we be designing for the content first?

At any rate, a higher resolution screen does not mean a wider browser window. I -never- max my browser width except on my netbook, and from what I’ve observed that’s typically how it works, most people like a little desktop rather than having the browser window spread far and wide.

Possibly having to turn ones head to take in all the content on a page is a horrifying thought, but not irrelevant as many of use use 24’ plus screens. There is an accessibility issue worthy of it’s own post.


21   Ty (Crssp) ~ 23 April 2009

The obvious answer for me has been to center the 960 container, grow it if you must but push the visual candy boundaries by 80 pixels in both directions, keeping in mind all users might now see what’s out there.
960 + (80 + 80) = 1120
1120px if you must Obi Wan.
IF I could just influence more to step up to the plate of 960 and all it’s fabulous flavors!!!


22   Chris Wallace ~ 23 April 2009

I think the question isn’t “should we” move to higher than 960, but “is there a need to” move higher? For me, the reason behind designing sites beyond 800x600 was a need to get important content into view of the user (above the fold, if you will). Once you get to 960, unless you’re designing reports with tons of columns, I don’t see a huge need to go beyond that for most sites. Obviously on a case-by-case basis, that can change.


23   Mike ~ 23 April 2009

I took a look at the “not divisible by 16” issue and once you start factoring in margins/gutters it looks viable: http://www.flickr.com/photos/shapelike/3468875326/sizes/o/


24   Jay Fanelli ~ 23 April 2009

There’s definitely a point of diminishing returns with browser width. How wide *should* we get? I’ll admit, nary a design project goes by where I don’t wish that I had a few more pixels to work with, but I don’t think we’re necessarily hurting for screen real estate.

Also, someone made this point earlier, but I don’t think users with displays larger than 1024 are apt to use their browsers at max width. I rarely use all 1,440 of my horizontal pixels to display web content, and I don’t think I’d like it much if I had to.


25   Andrew Ingram ~ 23 April 2009

I don’t think there’s a benefit of finding a set of magic widths that happen to divide well, because there’s too many factors that make that lovely property useless.

As soon as you add in gutters, pixel borders and other things 960 suddenly becomes just another number that you might end up with.

It’s better to start with the elements and build up a suitable grid rather than to go the other way.

I expect this is something that you are well aware of and subscribe too, but I think the web design community as a whole has become a little too sheeplike when it comes to their grids.


26   roger wilco ~ 23 April 2009

I think 960 is comfortably wide enough. I have a 20” display — small for most web designers nowadays but larger than most user have — and a 960px wide design feels just right.

I also think the trend of “displays are getting larger, so now we will make our websites larger” is just a little frustrating. Half the reason monitors get bigger is so we can display more things…designers keep filling that space up with bigger and bigger websites. Pretty soon the norm for body text is going to be 48px. If you recorded the last five years of display size vs. website size and ran it through time-lapse photography it’d look like those Flash sites that automatically resize the browser window full screen.


27   Craig Erskine ~ 23 April 2009

No matter how high monitor resolutions go I will always keep my browser window at 1024x768. Sites that use widths larger than 1024 will always get a right click + swipe left.

Thank the Lord for apps like MercuryMover (OS X) and Sizer (Win).

With the 100+ sites I built that year alone I still am debating on using 960 exclusively since it still seems too big for most situations. If the client doesn’t have enough content, multiple columns are useless.

I’m seeing better results by using narrower widths and simpler site designs.


28   Daniel Sellers ~ 23 April 2009

When I first saw this I started playing around a bit and if we are going to go wider I think 1080 is a good next step.

I have to agree with a couple @Tim that we need to be increasingly aware of the rise of netbooks in the mix. 960 would display comfortably on their tiny screens but once you go beyond 1000 you are pushing them into horizontal scroll bars. Of course I also don’t run my browser windows full size, its a Mac thing, and i am sure there are lots more like me as screens get bigger and bigger.

If we keep it up though we could radically alter the web be removing the need to scroll at all…


29   Lee ~ 23 April 2009

Hasn’t the 13” macbook been the best selling laptop for the last few years? And as some people have already said, the netbook market has seriously exploded.

I have a 24” cinema display, but my parents are still on an old 17” 4:3 LCD. Even my tech savvy in laws, who own a fairly large 19” use it at 1024 due to their failing eye sight.

When my cinema display is plugged in my browser window might be ~1100px, when I’m just on my macbook it’s often less than 1000px.

As Apple becomes more popular, and as people learn to use computers efficiently actual monitor resolution is less and less relevant. It’s all about the window size.

The few devices that will continue to use full screen will be the inexpensive netbooks that often have a max resolution of 1024px anyway.

On top of this, there’s the already mentioned audience factor. Sure a design oriented site could probably jump the resolution a little, but everyone else might have to give up on the idea.

As an aside, I’d like to point out that I hate the fixed vs fluid debate. I can’t believe this is still being discussed when most decent browsers do full page scaling anyway (as in scale layout and images, not just text)

Of course this point probably renders even this ‘beyond 960’ debate irrelevant too, I guess if ultra wide sites take off as a trend, browser manufacturers might be forced into rescaling pages DOWN by default.

As a final note, if the browser manufacturers and the W3C guys got together and actually had a sit down, we would have columns… What a better way to use up the extra width than to use newspaper style columns. Users with wide browser windows get 4 or 5 columns, everyone else gets two or three.

I’d LOVE to use columns in some of my designs.


30   suBi ~ 23 April 2009

When I redesigned A.M. Design I chose a width that was over 1200px. It might not fit in normal resolutions, but i think works well for the target audience. Worked fine in a 1440x900 res. screen.

One size won’t fit all, ever… I think it depends upon what the target audience is. If you’re targeting the general audience, i think 960 still fits the best.


31   seo wales ~ 23 April 2009

Your current comments are 320px, i.e. one-third of the available width (960px).

In your content area the left and right margins (outside the columns) add to 120px.

You propose a change of 120px.

Perhaps all that’s needed here is a reconsideration of how white-space is currently used?


32   George ~ 23 April 2009

The answer: no.

The reason: net-book laptops are mostly sold with resolutions topping 1024 pixels in width, mobile browsers tailor to 980 pixels in width, and there’s still far too many using this resolution or lower.

According to W3Counter’s global stats, the most widely used resolution is 1024x768, at around 40%. 800x600 is at 5%, so already we’re looking at about half the global audience under 1024 pixels at full width.

If the user base of the web site you are building has more consistent high resolution visitors, then you can defensibly go higher. For general audience sites, though, it’s too early to go there.


33   Kim Siever ~ 23 April 2009

Screen resolution is a terrible measure to determine how wide to make your design.

You need to find out the width of your users’ browser viewport to determine the width of your design.

People on large monitors don’t maximise their browsers, and many browsers have sidebars open.


34   Billy ~ 23 April 2009

I’ve been working with 950 for years. That gives you a nice wide margin which feels good in the page. Sometimes I’ll butt things up to both sides but rarely.


35   Blaž ~ 24 April 2009

What about vertical resolution?

Someone pointed out that screens are moving toward 16:10 screens. What that means for netbooks? Thats aboout 600 pixels in vertical direction.

If we consider that than it’s reasonable to widen our designs to keep some content above the fold.

I think the best way is to create some kind of semi-fluid layouts where it can stretch to a certain point but not further and not less. Maybe we need to think more about ratios then pixels. Maybe this is the time when fluix-fixed layout swithcers actually become a usable addition and not only fancy design feature.

Power to the people. Let them decide how they wan’t to view our sites. Isn’t that just logical user centered design?


36   Tim Parkin ~ 24 April 2009

Ty (Crssp) makes an interesting point. Use the 960 for content and use the extra space for whitespace to make the content breathe. Hence you get a website that looks complete at 1280, complete with background at 1600 but still works at 960.


37   Peter Hawkins ~ 24 April 2009

Well you also have to bare in mind not just creating your websites at that size to fill a screen. I would say its nice to have a little whitespace either side of a website to give focus.

Also I would have to throw out there the whole newspaper thing, how wide do you want you lines to be? if your lines of text are too wide your visitors will loose focus and strain to read your content.

This inivitably means you will have to include a third sidebar of somesort, I just see the whole thing getting kind of messy when you come to increasing your width just to fill bigger screens.

Another point to bear in mind, why not stick at 960, and left align so that your not taking away too much from those with massive screens + the ones with smaller ones are still catered for. I see no real urge to go beyond 960 at present, if you cant fit what you need to into 960 you have too much content.


38   Chris Neale ~ 24 April 2009

Small quibble : I thought 17” and up LCDs had a 5:4 ratio ?


39   Dan ~ 24 April 2009

I’ve saw the switch to 960 cause major havoc by designers who didn’t know how to use the space they were now free to use. for instance: 960px wide forms where the fields where all the way on the left, and the submit button was all the way on the right. Some designers get it, some don’t. Depends on the audience and the application. Maybe for Car sites and music sites. For informational and sites with forms… how wide is Facebook? 940px — that’s what people are being trained to work within right now. When Facebook jumps we jump.


40   John Athayde ~ 24 April 2009

I just had a client have me size a site *down* 60% because they approved a photoshop mock that was resized in their browser and freaked when the site, built from aforementioned comp, went live.

While many of us runon high resolutions and nice big monitors, there are still a large number of clients who are barely over 800 px wide.


41   Calvin Walton ~ 24 April 2009

Well, I’m pretty sure that, given the most popular type of computer being sold currently is the 14-16” laptop range, averaging 1280x800, it would appear that you could have a little more width.
But I’m using one of those laptops, and I got a little curious and pulled out a measuring stick. My browser window has exactly 971px of viewable area (That’s 9” horizontally), once the window borders and scrollbars are chopped off. Typographica has an annoying horizontal scrollbar. The main reason my browser window is small? I have my instant messenger buddy list open beside it. I have a couple desktop icons I like to hit on occasion. Sometimes I even like to copy text between browser windows!
I think that browser windows are going to hit a max size, but it’s not based on pixels. It’s based on physical display width—people will like their browsers to look similar sized to a regular piece of paper, maybe a bit wider. We’ll get more pixels to play with when display DPI goes up, but not until then.


42   DavidK ~ 24 April 2009

I am no designer, I’m a geek.

But I can’t help but wonder what the deal is.

You all seem to design grids for the sake of a grid. Why not design a grid to most optimally contain and layout the content.

Does it not seem backwards? Designing a grid when you know roughly what your content is… and then pouring the content in to fit the grid.

What I mean by this is that it is well understood that there is an optimal number of words per line for different mediums.

We also know that there are good uses of whitespace around content.

And we know that there are a limited number of column based layouts that accomodate different kinds of textual content.

Why aren’t the starting points the content? Why aren’t we establishing grids that are only relatively fixed? Why aren’t we using golden ratios to size a left-hand column according to the size of a right-hand column, when the right-hand column is based on the em value that represents the optimal characters and therefore words per line?

What I as a geek and reader want to see is the pages design for the content, the page width to be optimal for the content. And as my eyesight worsens and resolutions increase I’d like to see this whole thing scale effortlessly.

Forget set width grids, go to relatively sized grids that are based on 2 or 3 columns that follow the optimal widths to display the content and use the golden rule for the lesser columns.

I tend to think the search for the most ideal grid has led people to not see the wood for the trees. But maybe I’m just very wrong.


43   Emil ~ 24 April 2009

Why do you need the number to be divisible by other numbers. A prime integer can be as good as any other number. When you have a multi column layout, the columns end up with different widths anyways (or ems and %).

Also, 25% of all visitors to my e-commerce sites use 1024 or less. I do not want to loose quarter of my visitors.

If I need more space, i will go with fluid.


44   Cameron Moll ~ 24 April 2009

@ DavidK: Well said. Good thoughts about the golden ratio, as well.


45   Michael Kozakewich ~ 24 April 2009

Let me be the first to mention high-def screens. Any compulsive math nerd might automatically tell you that 1920 / 2 = 960, which makes 960 exactly half of a high-def screen.
I’ve got a program that lets me hit a button combination to fit the window to a third or a half of my screen, so I’ve been using 960 for a while. (In fact, though, the window borders and scroll bar take a few pixels extra, so I still have horizontal scrolling.)

Until WQUXGA screens become more popular, it might be best to keep it at 960. Besides, most lines of text can only go on so long before they become a stretch to read, and 960 leaves ample room for sidebars. It’s much easier to work with than 800.

Even if you go right to 1024, it’s only slightly better, and a lot of people couldn’t handle anything more. In that light, it might be best to keep with the general minimal size of 960, for now.


46   Ankit Bathija ~ 25 April 2009

I’m sure upgrading the width would make a great difference to Browsing since many people are increasing hteir resolutions these days, it even seems feasible to do it…


47   CW Petersen ~ 25 April 2009

Time to move beyond fixed width?

My current favourite notion needs a better name than “Bungee on a stick”, but so far I haven’t come up with one. One style, flexible by plan, from small phone to as wide as is comfortable to read.

48   Tim Archer ~ 26 April 2009

The flexibility of 960 is due in part to its base-60 (sexagesimal) mathematics, which gives you factors up to 15 barring 8 and 16. To include 8, your base will have to be 120, for which the next figure in the sequence is 1080, and for 16 as well it will have to be 240, meaning 1200.

However, from a design perspective you have to question how many actual columns (not underlying grid columns) you should use before you overwhelm the viewer, but more importantly the width of those columns. Practitioners as diverse as Tschichold and Ogilvy agree that there is a limit to the length of the line that a reader can read comfortably.

While fluid widths challenge this argument, and readers may become used to reading a full screen Wikipedia entry, conventional print media and many blogs (including this one) reinforce the argument for a limited width. Having poor visual acuity myself, I find a maximum width on screen for 12px type to be around 600px. 720px is acceptable for short columns.

I think 1080px wide could be construed as a layout error by some viewers and would opt for 1200px. I can’t forsee the need to go any larger, even if larger screens become more widespread, because the likelihood of browser windows being maximised on screens that size seems unlikely to me.


49   Bryan ~ 26 April 2009

The larger the resolution does not necessarily mean the site width needs to increase. I never view a site with my browser full screen. I usually have some other activity going on wether it is work, or it is another browser. If the sites continue to expand this will become more difficult. And consider the iPhone. Larger sites will just make content even smaller. Regardless, it’s interesting to watch the evolution of this standard, but in my opinion, designing for 1024 will still be the standard due to the remaining large number of users with this setup.


50   hakki kekilli ~ 27 April 2009

If we keep it up though we could radically alter the web be removing the need to scroll at all.


51   David Sparks ~ 27 April 2009

In response to Nikki, the first comment.

960px is only 160px wider than 800x600 which is what most everybody was designing for before. even 10px can make a world of difference.


52   Chris Papadopoulos ~ 27 April 2009

I disagree. Thin is usually the best solution for web-design.

* Wide sites make browsing with an iPhone (to say nothing of lesser quality mobile platforms) really difficult.

* Modern computers are powerful enough to allow people to have multiple programs open at once and many people, especially “power users”, don’t always browse full screen even on normal desktop computers.

* Just because monitors are getting a a bit wider doesn’t automatically mean your sites must get wider. If your content requires it and your audience can generally handle it, there’s nothing wrong with a really wide website, but the vast majority of sites don’t have any content wider than 640 pixels anyway. Looking at this site as an example, the main content area is only about 420 pixels wide.

* Allowing the designer even more space to work with perhaps can compel the designer to get into the temptation of filling in that empty space with even more useless content instead of focusing on what information is actually important.

Personally, I’d rather the trend be towards designing for 800 pixels wide, or even less to be frank. Gutting useless content and making sites thinner is better for the end user. For plain text and normal quality photography and the like, you really only need that much room.


53   dr ~ 27 April 2009

It seems there is a general lack of foresight among the designers commenting here. The main issues at hand seem to be:

1) drastic, imminent increases in screen resolution / pixel density

2) resolution independence

3) web fonts

With just those three factors in mind, and with a modicum of knowledge about psychology and common sense observation about human behavior, we can make some good projections about what we’ll be seeing on the web.

Multi-tasking is a myth, so the idea that users will keep multiple windows carefully positioned and sized side by side on their desktop at once defies common sense. This is why tabs are more efficient than separate windows: they keep our focus on one activity at a time and more efficiently use the available display space.

So when someone goes to read your web page, the horizontal resolution of the display IS a valid factor in the decision behind your page’s design, whatever the local latte-sipping elitists may spout to the contrary.

The rise of netbooks is an important consideration and a strong argument for maintaining 960x for the time being. However, in the longer term what will happen is quite simple. Web pages will increase in size. Font sizes will increase proportionally as well, as increased pixel density and resolution independence bring us to defaults of 16-point, 24-point and beyond.

Personally, I can’t wait for 1080x, 1200x, etc. to become standards. I’ve been staring too long at this screen, and my eyes are starting to give out. Give me a nice, wide site with large, beautiful fonts and a well-designed layout and I’ll be one happy surfer.


54   Jakob S ~ 28 April 2009

Echoing a bunch of other commenters above, but screen resolution is a terrible metric to decide your design width by.

All the numbers I’ve seen indicate that people don’t enlarge their browser windows past a certain size (roughly 1000-1100 pixels), no matter what their screen resolution might be.

On my website the most used screen width is 1280px - used by 40% of my visitors. But if I were to make my design 1080 pixels wide, a whooping 30% of my visitors would be getting a horizontal scrollbar. To me, that’s not acceptable. At a 960px width, only around 7-8% suffer horizontal scrolling.

By all means, go for as wide a width as you possibly can. But please, don’t base your decision on the misleading screen resolution statistic.


55   coskunlar vinc ~ 28 April 2009

I thought 17” and up LCDs had a 5:4 ratio ?


56   coskunlar vinc ~ 28 April 2009

With the 100+ sites I built that year alone I still am debating on using 960 exclusively since it still seems too big for most situations. If the client doesn’t have enough content, multiple columns are useless.


57   coskunlar vinc ~ 28 April 2009

As soon as you add in gutters, pixel borders and other things 960 suddenly becomes just another number that you might end up with.


58   DJ ~ 30 April 2009

Noobie question: Why are you calculating what the resolutions can be divided by?


59   Kris Noble ~ 30 April 2009

@DJ: it’s useful for when devising a grid because it tells you how many evenly-sized columns your grid can have.

I think 960px is fine as a base to work from right now, but really the content does dictate the ideal width to a large extent.. I’ve built microsites 600px wide purely because that’s what looked best with the content available at the time.


60   Michael Kozakewich ~ 30 April 2009

@dr:
“Multi-tasking is a myth, so the idea that users will keep multiple windows carefully positioned and sized side by side on their desktop at once defies common sense. “

Every time I use my browser, I have a couple other things open beside it. I do keep multiple windows carefully positioned and sized side-by-side on my desktop at once, and even have a program designed specifically for that use.

Personally, I hate the fact that density itself is stuck. Screens should be 300ppi at the very least, and then you should be able to set your base size on your operating system to a larger setting, rather than changing your monitor (there’s no reason not to be using the native size). In Windows, you can go through the desktop display items and manually increase the size and font-size of every individual element, but there’s no single dial for pan-system display size. Also, most browsers DO have options to change the default text size.
At that point (300ppi screens with easily-accessible font-size), we might be using 48px fonts as regular text, and we’d have much smoother lines. We could bold text in much smaller increments, too.

Once that happens, though, you’ll have no clue, as a developer, if someone is using a 7-point font or a 30-point font, and it would be really hard to make things in pixels OR ems. What would fill the screen for one person would only fill a third for another person.
At that time, percentages might be the best idea.


61   Burak İlem ~ 01 May 2009

1080 is a good deal. but remember, most of the screens still have 5:4 ratio.


62   Ryan Swedal ~ 04 May 2009

NO! Please stop the spread of horizontal scrollbars.

What are the advantages of 1080 over 960, other than the obvious 120px? You posed an interesting question but didn’t address why you would want to use 1080. I’m curious as to why you think it is a better solution or even a viable option. (As others have commented just because the standard monitor size is increasing doesn’t mean the standard browser size is increasing.)

To me the trade-off between having a few more pixels to play with and potentially annoying end-users is not worth it. If you enjoy horizontal scrollbars then it is time for you to move beyond 960…

If you have the time and resources then I say make it liquid. However, the learning curve to create an effective liquid layout is pretty steep. In most cases it’s simply not a practical solution.


63   Kedron Rhodes ~ 04 May 2009

I think 1080 is going to be unavoidable. As a creative, I’m excited about have another piece of canvas to work on - hoping for the right project to come along and give it a go. Thanks for the post!


64   GearModa ~ 04 May 2009

I definitely think that we could go wider than 960, most people I know have widescreens anyway. However, its one of the most annoying things to have to scroll horizontally. Call me old fashioned, I say keep it simple with 960!


65   Joost ~ 06 May 2009

I honestly don’t think you need such a ‘magic’ width. I’d rather have like a range where you’re going to put your design in. It’s funny to see though that my website has a width of 964px very close to 960.


66   Moe Hong ~ 12 May 2009

Developers: please start making things NARROWER, not wider. There are more of us on laptops than with $2000 gigantic displays, and many of our laptops are small. I’m not rich: stop implying I am when you design a website.


67   DS ~ 13 May 2009

How does the IAB determine the ad banner sizes? I ask because those “guidelines” more often than not, dictate the width of some sites.


68   Andy Rutledge ~ 13 May 2009

Woot.com (and the rest of their sites) is a good example of 1080 width design for a big, successful brand. Unit Interactive’s recent examination of creating that design can be found at http://unitinteractive.com/blog/2009/05/11/big-brand-1080px-design/ .

I post this here because I think it adds to the discussion/examination of this issue.


69   Dylan Hall ~ 13 May 2009

Holy crap, I can’t believe anyone hasn’t raised the point - we should be designing sites that scale. I generally go for a min-width of 800-960 (depending on content) and a max-width of 1280.

Open it on any monitor, it shold scale to the width of the browser with suitable margins and look great. This site, for example, leaves an enormous amount of unused space on either side of the content, and that’s in a window taking up only a small portion of one of my screens.

I think people have really fixated on making it look just like the photoshop image of the site, not wanting to face the fact that the site is going to be viewed in a huge number of different configurations.

Mind you, I’m a total geek that enjoys getting the css working right, most probably don’t want the headache of scaling width .. but it’s still the right way of doing things.


70   J Mehmett ~ 14 May 2009

It would be fine to see even wider websites and it would help less down-scrolling. However, the majority of internet users still use monitors less than 1024px and in that case, something wider than 960px will cause frustrating horizontal scrollbars down the screen!


71   Matt ~ 18 May 2009

With IE6 on the wane, and with a growing disparity between large and small screen sizes, I think that fluid layouts with min- and max- widths should really be ready for prime time. You don’t have to worry about overly wide line lengths and you hand control over to the user. The fact that everyone commenting has different desires — big, beautiful layouts that maximize content above the fold vs. wanting to tile browser windows — is a dead givaway that this is an area where handing control to the user is ideal.

The biggest drawback to fluid-width layouts is that it can be hard to incorporate images as major design elements, since they don’t scale well (if they are placed with CSS, they don’t scale at all yet.) The only solution I’ve been happy with is using images that can be clipped and/or repeated without problem… think “sliding doors” tabs, but on a larger scale.


72   Phil ~ 19 May 2009

I have to say I’m disturbed to hear that sites are being developed for 960! Just because screens have high resolution doesn’t mean the real estate is there for websites to grab with their designs. As someone using a 1600 pixel wide screen, the last thing I want to encounter is a website that wants my whole screen. Keep in mind what is natural eye movement … portrait orientations are easier for the eye to process.


73   Steve H ~ 21 May 2009

I think you are all assuming that everyone runs browser windows at full screen. I have 2 screens, one at 1920x1200 and the other at 1280x1024. I never run the browser full screen in either. I have multiple screens so I can have more windows, not 2 big windows.

My ‘default’ browser window size seems to be roughly 1000x900, regardless of which screen I display it on.

Also, if you keep making web pages wider you either have to start making the text bigger or adding more columns to make it readable - or come up with some other ‘standard’ design that is still readable.

So I say stick with 960 wide please :-)


74   Graphic Design Orange County ~ 11 June 2009

Great article! I think it’s about time we all start designing for larger than 1024 x 768 resolutions! The rest will catch up if they haven’t yet!




About

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter