How Much Longer Will We Design for 1024?
Over the past few years, the debate over using a liquid vs. fixed layout has heated up. But as we move forward with standard screen resolutions growing larger and larger, the truly important question would seem to be: what will become the new standard, and when?
The Problem
Even in the past year, it seems 1024 screen resolutions are slowly starting to fade away and the monster monitors are starting to dominate.
Unlike before when 800×600 died down and 1024 took place, this time around the larger screen resolutions seem to be much more scattered in size than before.
As you can see users who are on screens with resolutions 1280×800 or higher are nearing 50%. From 2007 to 2008 alone, this figure increased 10%. It seems that , as technology advances and monitors become cheaper, the rate at which people are purchasing them is picking up quite rapidly.
Stats were collected by:
Taking a Look Back…
Here are some interesting comparisons of when major sites like Microsoft and Apple switched from 800 to accommodate for 1024 users.
| February 2006 | 800×600 | 1024×768 |
|---|---|---|
| www.Apple.com |  |
 |
| www.Microsoft.com | |
|
| www.Yahoo.com | |
|
| www.YouTube.com | |
|
| February 2007 | 800×600 | 1024×768 |
| www.Apple.com | |
|
| www.Microsoft.com | |
|
| www.Yahoo.com | |
|
| www.YouTube.com | |
|
| February 2008 | 800×600 | 1024×768 |
| www.Apple.com | |
|
| www.Microsoft.com | |
|
| www.Yahoo.com | |
|
| www.YouTube.com | |
|
But just because the screen resolution becomes bigger, should we design our sites to accommodate the size?
I say no. 1024 ~ 1280 in my opinion is a reasonable range where I feel comfortable scanning for information. Any size larger than that, messages and layouts seem to become disjointed with white space and they lose the power and effectiveness of the original layout intended by the designer.
In my opinion, designing a site fully liquid to accommodate the large monitors would be a bad idea due to the fact that a user should not have to work hard to follow your content from left to right. Just like reading a book or magazine, a proportionate size that is easy to read and consume the information is ideal. I believe using min/max width in your layout is probably the best solution if you choose to give it some flexibility.
Conclusion
Perhaps it’s too soon to do anything different with what we already design for, but I feel this question becomes more important as larger screens become the new standard. Only time will tell… Do you have predictions or thoughts to what resolutions you would consider when designing? Are you feeling ready to move to higher resolutions as well?
Popular Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment51 Peeps Have Spoken Their Minds...
Due to historical use of small screens users (at least Windows users) have become used to maximising their browsers, leading to developers equating viewport size (or screen resolution) with browser window size.
With a ‘big’ screen it is possible to use floating windows instead of maximised windows, but ingrained behaviour leads to users still maximising their browser windows, leading to sites designed for 960 width (or even 785) sitting in a sea of background (if fixed width) or expanding to fill a container leading to stretched layout and ridiculously long lines of text.
The answer is, of course, to design your site to work within a range of window sizes (min/max as the article says) and leave the browser window management to the user.
Another issue is the increasing prevalence of *smaller* screens on mobile phones, pdas etc.
I pretty much agree with You – 960px layout.. looks just fine, maybe something will slightly change in future, but just now, it’s OK like it is :) Thanks for detailed research – appreciated!
Although I´m having two bigger screens I´m creating designs for 1024px screen resolutions. Sometimes even smaller if there isn´t enough textual content. But maybe I´ll pay more attention to the background of the page.
The emtpy areas at the left and right of a page could be pushed up by a good background but it is necessary to mention this background won´t dominate the design of the site and deviate from content…
Personally I think we still have to design for 1024. But the decision is based on the visitors you expect to get..
For students you can design for 1280. But I will set the the height to a max of 800px because most students use laptops with wide-screen format.
I think we will see a switch to more wide-screen websites designs.
I believe you’re right. A page needs to stay readable. A maximum width for the main content shouldn’t be more then 1280 in my opinion. The rest could be used for sidebars or the pagestructure.
I don`t accept the 1024 as standard any longer. Even though many browser windows are smaler than the resultion of the monitor.
I think we’ll see a harmonization in sizes once manufactures only sell wide screen formats. The way most sites are being designed now at 960px wide it’s nice to have a bit of breathing room in the view port.
My concern is more with the way people access a page than filling the real estate. Having done some experimental playing around with 1220 and 1400 wide pages, it becomes a question of what to put in the space without making it so distracting. And people will not read sentences that stretch 900 pixels wide – or even 700 pixels wide.
And when the design starts to fillup with ‘fillers’ it becomes even more distracting.
I am certainly not saying it cannot be done. I’m saying it opens a new set of challenges to meet. And meeting those challenges is really the part of the job we love.
I think we have a few years to work it out.
Of course we could always have four columns of Adsense…. naw.
Unfortunately the release of Netbooks seems to have increased the need for 1024×768 (at least from my brief research this seems to be the most common resolution for those tiny laptops!). In that case I think the requirement for 1024×768 is going to stay for a while.
I agree about not designing for larger. I dont believe that people with larger monitors necessarily surf with their browser full screen. It’s too overbearing on a 22″ or 24″ monitor to have stuff full screen like that, imho
I pretty much agree with most of the opinions above me. Fixed layouts at 1024 seem like they are going to stay for awhile.
I think designing for 1024 users is cautious enough and will suit most users, using a desktop computer, just fine. However, with minimal effort and forethought, it would not be too much to ask to make modular designs with a “max-width” for 1024 screens and have the design degrade gracefully and logically for lower window sizes.
Great article Soh. I do believe 1024 should remain the happy medium, with at most, slight min and max widths to accommodate different sizes. Resolutions don’t appear to be converging on a single size and my guess is they never will again.
Why can’t we design for both 1024 and bigger at the same time? There are plenty of inspirational works that we can look towards that use backgrounds, gradients, and great design in the footers and headers that bring life to the entire 22 inch high resolution screen while keeping content positioned between 960px. Using 100% widths for headers and footers is an all too popular way to fill the page, but we can definitely do more. Examples would be backgrounds that repeat but are long, longer than 1024 and even 1280 to give even the big screen users something new to see as they expand their browsers to full size.
What are the benefits of designing a liquid and fixed layout?
Is there anything you can or can not do with a liquid layout compared to a fixed layout. The design you used for the website is fixed layout, correct? Is there any other kind of layout besides these two?
Thanks
@Dan, I think we are agreeing on the same issue though, because when you mention 960px in width, you are speaking on the actual content being fixed. I don’t really consider a background width of 100% to be liquid, if the content is fully flexible, then I would call it that :-)
@Silver There are fixed layouts, liquid layouts, and semi-liquid layouts. Here is a good read regarding these issues and techniques:
http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/
All Liquid Site Gallery: http://www.cssliquid.com/
I’ve got two 24″ with 1920×1200 and almost never design wider than 750px – it’s only readable width, I think. The large screen is for many windows – not one huge window. That’s how I use it. Do you always maximize the browser’s window, having even 1440×900 or 1680×1050? If so, I believe that’s very “windowish”…
You’re right, and your post was in agreement with my comment. I was speaking more towards the previous comments. Fixed width has to be defined as content being fluid, not just certain parts of the page. Cheers.
@Dan, :-)
@Milosz, I actually have dual monitors at 1600 resolution and I have a weird urge to view all sites with my browser maxed out haha
Amen to this thread.
I am a web designer myself and I have to say that I was working on a really great web template… all fixed width at around 800 pixels. But I had to trash the entire template because there were problems on 1024 resolutions… not to mention 800×600.
It was a big pain to lose that template, one of my best works. I certainly hope people start upgrading their computers to at least 1200 pixels.
While the trend for larger and larger screens seems to be experiencing a rapid upward curve, it’s ironic that many people are/will be browsing websites on smaller and smaller screens–iPhone, Android, etc. So we’re simultaneously progressing forward AND backward (assuming you care about mobile).
Right you are. We will have to focus on that. But still there are about 47% of users that go with the 1024. And think of all the mobile devices? The have to zoom all the rest like the iPhone as Wil already sait.
But thanks for the starting point.
Great point!
The areas outside 1024 are prime for secondary information/elements. Dashboards, special messaging/direction and other mood design elements. I’ll take the extra real estate but keep primary objective within 960.
Hey this post and several others are re-appearing in your site feed. Kind of annoying. Is it too hard to fix? Thx.
Apologies Steve, my feeds were ok for about 2 weeks and seems to be having issues again. I will be looking into this again!
In the print world, there was a move from broadsheets to tabloid sized news papers — the majority of people found them easier to read. I have very few large books. I wonder if the availability of super-wide screens will have have a considerably reduced effect on page widths now that ‘optimal’ sized pages are the norm. Best guess is that for the majority of sites, the rate of change will be slower than it was when people were able to shake off the 800×600 (let alone the 640×480 ;-)
I just recently discovered your Blog and appreciate you sharing your bout with Web Design with the world. but this site also search best knowledge Web Design.
Interesting post, thanks!
Right, I have two things to throw into the air here, so see what you make of it:
1. According to think tanks, expert speculation, blah blah blah, things like notebooks and PCs will fade away over the next couple of years to be replaced… by mobile phones. Now this is just a prediction though I suppose one can assume that, even if it’s not mobile phones, it will be something that has a similar effect.
2. Given current design trends, it’s all about accessibility. We see this with the myriad posts on the internet regarding modular CSS, etc. So you’d have to cater for the biggest percentiles which, it seems, still swims in the 1024 ocean and will be doing so for quite a while. If you design a website that won’t fit on their screen or that isn’t easily navigable, it could affect the hit count.
Once again, great post and makes you want to peek into the future to see how it all will be.
LeoH
http://www.bizarredesigns.com
Unfortunately (and sadly for me), I must still design over 800×600… over 50% of my clients’s website visitors still use that old screen resolution.
I’m going to have to agree with Spooner here. With netbooks selling like hotcakes (I own 3) I’d say another 5-10 years. That is unless you want to design 3 versions of your site, one for phones, one for netbooks and one for notebooks & desktops. So in this day & age this question ends up being pointless. I feel your pain but at the same time I can’t ignore reality.
I’m designing a website now whose content fits on 1024 but I’ve added some nice white margins that spread it out to 1280 and then dark background (with an oblig shadow) going out beyond that size. This was it looks really nice on 1280 with lots of breathing room but it still reads well on 1024 and if you’re on 1600+ you get a ‘page’ effect, 1280px wide..
Tim
p.s. people will just use larger font sizes as devices get higher resolutions so we end up with the same design really, just a higher ‘dpi’ version..
“But just because the screen resolution becomes bigger, should we design our sites to accommodate the size?
I say no. 1024 ~ 1280 in my opinion is a reasonable range where I feel comfortable scanning for information. Any size larger than that, messages and layouts seem to become disjointed with white space and they lose the power and effectiveness of the original layout intended by the designer.”
That paragraph and statement would have benefited from being proofread – if it had been, you would have seen it makes no sense.
If the site is DESIGNED for >1024, then obviously it wont “lose the power and effectiveness of the original layout intended by the designer”.
Still, I feel it’s the mark of hubris to feel that the entire screen is yours to engorge. Like a fungus that crawls all over the bread no matter how big a slice it is, why should a screen design take over the entire screen?
Most users (and by that I mean me) buy large 26 inch monitors to have multiple projects (multi-tasking) side by side, as opposed to having ONE HUMONGOUS PROJECT or WEB PAGE. Furthermore, even as there is a push WIDER, there is also a push SMALLER as extremely capable web devices with smaller resolution come into play.
These devices all come with Javascript and in some cases, Flash and Java, allowing you to interrogate the device directly rather than matching user-agent strings in some huge (i.e. Wurfl) database.
So instead of fixed or liquid I tend to think of intelligently liquid designs instead, this almost mandates using a database driven content managent system with a serverside language (psp, ASP, .NET etc) driving the process.
The days of being an HTML /Javascript only coder are long gone, you need to be at least cognizant of serverside technologies as web technologies grow.
I agree with those who say people with larger screens will stop this habit of maximizing browser windows. I have a 1280 screen and even I don’t maximize my browser a lot of the time. Why? There’s usually no benefit from it; most sites these days have gone to fixed-width designs, so the extra is all wallpaper. 1000px makes both a good minimum for liquid designs and a good maximum for fixed-width, and will probably stay that way.
There are studies dealing with “line length” that further support a fixed width. The studies speak to the biology of the eye, eye strain, saccadic eye movements etc and suggest that a fluid layout on large resolutions end up negatively impacting a user’s readability and retention. Here are some useful links in support of a fixed width (pretty much 960px wide or less):
From the US government’s usability 2006 studies: http://www.usability.gov/pubs/082006news.html
·Dawn Shaikh (2005) reported a study that examined the effects of line length on reading speed, comprehension, and user satisfaction when reading online news articles. She had 20 college-aged students read news articles displayed in 35, 55, 75, or 95 characters per line on a computer monitor. This is equivalent to line lengths of four, six, eight and 10 inches on a 1024×768 pixel resolution monitor using the Arial font. Her results showed that passages formatted in the longest line length (95 characters per line or 10 inches) resulted in the fastest reading speed. The participants reported no reliable line length preferences.
·The best available research suggests that users will read fastest if the line lengths are longer (up to 10 inches). If the line lengths are too short (e.g., two and a half inch columns), the line length probably will impede rapid reading. Users tend to prefer lines that are relatively short (about four inches).
From ERIC (Educational Resources Information Center), which is sponsored by the Institute of Education Sciences of the US Department of Education: http://www.eric.ed.gov/ERICWebPortal/custom/portlets/recordDetails/detailmini.jsp?_nfpb=true&_&ERICExtSearch_SearchValue_0=EJ749012&ERICExtSearch_SearchType_0=no&accno=EJ749012
One of the most important, and most studied, aspects of human perception is the act of reading. Reading has received much attention from researchers, both from a human information processing (HIP) approach and as a common, practical act that needs to be optimized, especially in the realm of human-computer interaction (HCI). One of the text variables that has been studied for over 100 years is line length, at times referred as line width. Psychologists, typographers and others working in the field of reading and advertising have demonstrated the effects of line length on readability of text. Two of the questions addressed in past studies include, How long should a column of text be, to optimize readability of the text? and Which view is more preferred by readers–multiple narrow columns or one wide column with the same amount of information content? Research has led to recommendations that line length should not exceed about 70 characters per line. The reason behind this finding is that both very short and very long lines slow down reading by interrupting the normal pattern of eye movements and movements throughout the text. In a world of personal digital devices (PDAs), one-inch cell phone displays and of wide-screen TVs and full-wall computer displays, the question of line length has renewed timeliness. Studies reviewed here show that different aspects of reading performance such as comprehension, reading speed, method of movement (e.g., paging and scrolling) and eye movements are affected by changes in line length. In addition to that, various typographic factors such as font type and size, line and character spacing as well as different screen structures such as varying number of columns and screen sizes also affect readability. These factors have an effect on optimal line length for the text read from printed or on-screen material.
From the book “Web Style Guide – Basic Design Principles for Creating Website” (cited on this site: http://www.maxdesign.com.au/presentation/em/ ):
The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.
From Web Usability.com (a US consulting company): http://webusability.com/article_line_length_12_2002.htm
What can we conclude when users are reading prose text from monitors? Users tend to read faster if the line lengths are longer (up to 10 inches). If the line lengths are too short (2.5 inches or less) it may impede rapid reading. Finally, users tend to prefer lines that are moderately long (4 to 5 inches).
Hope this helps!
Yeah this is a good chart and analysis, as I think started from 2009, we will no longer design based on 800×600, as many PC and notebook screen has min 1024×768 resolutions.
@chad
Keep in mind that many people read in different ways. My sister and I both read unusually fast – this is because people who do speedreading or photoreading tend to focus in the middle of a column and scan down, picking up all the information. This is much more difficult on a 10-inch column than a 4-inch column. Most people probably do something like this when they skim, and since most of the web is skimmed for keywords, not comprehended like a novel, the results for, ahem, 10-inchers ;) may be flawed for general web use.
I prefer to zoom sites on the bigger monitor so this trend could skew the results.
What about mobile devices? I think these devices will be more and more every day…
Wow, great topic. I’m struggling with this decision myself on a current project. I am a designer and find myself surfing with full browsers on my 22″ monitors. This may not be common though. I would tend to agree to stick with 1024px…
I agree
I am actually moving downwards, with content being designed to be focused on 800px (the most basic Aseus linus netbook) – content WITHIN the 800px is organized into grid blocks of 120px 200px and Iphone size. Having a content management system helps a lot of course – basically, my code pulls site content based on browser and object width – it would be very difficult if I had to do custom sites for each screen layout.
Depending on your requirements, you may find interesting an article on AlistApart.com about making adaptive fluid layouts
Im a little late at posting here but, resolutions are getting bigger and bigger but many people are not interested in technology like most people.
Do not upgrade of buy new screens. We are always struggling with size matters and somehow i LOVE to have some space on the sides of the full website, I find that very pretty and then we dont need to make websites more than 960px for 1024 resolution screens.
Its like the newspaper is getting bigger and bigger and soon we dont have arm to hold it up to read anymore.
Lets simply make websites grow horizontally and make common sence of scrolling the same way.
Stay with 960px width and make it pressy, useful and accessible…
Michael
Using Javascript and absolute positioning,
I created a multiple column layout that would
put the columns underneath one another at small browser widths,
and put the columns side by side at higher browser widths.
Columns were always fixed size regardless of browser width.
I had a “liquid” layout without long lines of unreadable text.
Unfortunately, it simply didn’t look that good.
I’m unsure if any design could make that look good.
i.e. Could a newspaper page expand and move lower columns to the right?
You can try my experiment here:
http://www.tojam.ca/games_2009/default.asp
As Dean pointed out, people don’t always go full-screen with their browsers anymore. This is due not just to the increased size of monitors, but also to the widescreen format, a shape that may be great for movies, but awkward for websites. I may start designing for a 1280px width at some point, but 1024 is where I’m at for now.
Great thread! I know it was started way back in Feb but it’s still pertinent almost a year later. Many of the points are very valid. I use a big screen Mac at work and rarely use my browser in full-screen mode or even max width for that matter. On my home computers (Windows), it’s the polar opposite. My wife and I both tend to use the browsers in full-screen mode. Although our desktop is set at 1280 and my laptop is set at 1440, I prefer to see things in the middle of the screen. I don’t care much for the fixed-width sites for 800pix, however, simply because they present too much white space.
I agree that larger screens are being utilized for multi-window purposes more than single-window. However, there are several exceptions such as movie watching, game-playing, word processing, etc. But most web designers, programmers, and graphic artists have multiple windows, if not multiple monitors.
I’m with several of the posters that 1024 is a solid place to be. But one of these days, the 1280 width will slowly become the norm. And as one or two folks pointed out, it’s not so much a matter of the screen res as it is how the human eye tracks and reads. If I have a screen full of text, the font is usually increased to make it easier to read. But if I’m just reading a standard 10pt/12pt font on a 800/1024 website, then there’s no real need to increase the font size. With the move towards 1280, I think we’ll also see a move towards increased font sizes, which, as it was also stated, ends up with the same effect as a smaller site template.
My 2cents…
While the cost of printing (newspapers, magazines, etc) has gotten cheaper, the standard size of a magazine has not really changed (given some small range).
Just like websites, people have a comfort zone for how much they can take in all at once. Despite widescreen monitors being going from 1600x+ doesn’t mean people keep their website maximized.
And regardless, most browsers are moving to a “zooming” technology such that a smaller resolution design can be “zoomed” into larger resolutions.
Liquid layouts are cool. I like them, but they’re much more challenging to get right and certainly do not have a place in all web design. One most be careful to consider how a page acts on extremes.
But with IE6 going away by most big websites, we can start trusting in more min/max width decorations and allow for better designs and controlling the alpha and the omega.
I thought maybe this could be handy to some fellow designers:
http://teknekwebservices.com/screensize.php
I think the biggest push for the 21″ – 30″ displays is for media types like video, which is great because I watch most of mine on my computer. It’s great for us as developers to be able to be creative with that space, and I have seem plenty of great interactive sites that use all of my screen real estate, but it doesn’t mean it’s right for every or even most sites
Thats the beauty of CSS, Fluid Styles.
Damn i can’t see the percentage of people using my resolution… 1366×768.
And the site I am designing at the moment is 1000px in width and think that is enough. It doesn’t need to be any bigger really.
Speak Your Mind...