When I was rethinking the design for my blog, drawing grids on paper etc., I was struck by the very basic question – “Should I still care about optimizing for 1024×768″? First question, about optimizing for IE6, I answered a while ago, by simply not doing it, because I honestly think that IE6 should become a thing of the past as soon as possible. But – in the era of widescreens and double screen setups, should we still take 1024×768 as the basic resolution to start with?
My answer to the question is – it depends, but it’s most likely the beginning of times when we’ll say farewell to 1024×768 as the point to start with. If your site is a design blog like this one, there is a solid chance that your readers will be tech-savvy enough to have bigger resolutions. If you’re designing for the wider audience, like horizontal portals do, you have to remember, that most likely you’re gonna have lots of non-technical users that use computer only to play Solitaire and read news and the percentage of users with 1024×768 will be bigger.
Why is 1024×768 dying?
Why do I think that it’s the beginning of new era where 1024×768 will soon be extinct? Well, simple thing – sooner or later even non-technical users come to the point, where the computer they have breaks down or stops being enough due to increasing requirements of new versions of the applications they use on a daily basis. Evolution of operating systems is usually being followed by evolution of desktop applications and even big corporations, that usually have the biggest problems with upgrades because of internal requirements that have to be met, come to the point where they need to upgrade. And since you can’t efficiently run new software on old hardware because of the increased requirements (try running Vista on old Pentiums, good luck), the hardware gets an upgrade too. With upgrade, the screen gets upgraded to LCD, and even the cheapest LCDs now have 1280×1024 or something similar.
What to do about it?
What I’m doing now is going the same way I did with CSS3 – this blog still works in 1024 and the most interesting part (posts & sidebar) is still perfectly visible, just the places where I intentionally broken the grid (like comments) look good, just not perfect (if you’d open the comments on 1024 screen, you’d see that avatars get cut off. With only 11% of users (according to Google Analytics) having less than 800×600, I think I can afford that.
What do you think about dropping the support for outdated screens, how do you do it? Do you use liquid layouts (a bit tricky with very big screens)? Do you create special version of site for low-res users? Do you optimize for 1024? Do you drop the support absolutely?
The question IMO is ‘do we need that extra space. Sure, we can make the sidebar wideee. But… what for? Even you could make it smaller without loosing a thing. And, as we know, the length of main content also can’t be too big, cause it won’t be nice to read.
Sure, sometimes (especially when you aim for graphic-based layout) you need extra space, but in most cases we could apply some tricks to avoid too wide pages.
So then. I still use the base of 960px for every created page (see no real reason why not), or – as you mentioned – liquid layout (with max-width it’s not a problem).
zx, yes. But, on the other side, with modern screens going up to 2560 pixels wide in the biggest versions, 960px is just a strip in the center of the screen. That’s why I am very big evangelist of em-based designs (even though I’m not using them myself, yet) that look good on every screen.
Do people get higher resolution screens because they want to have wider/larger web browsers? Some might but a lot do not – they want to put that webpage on one side and wordprocessor on the other, or see their email while updating an spreadsheet. Most websites are not immersive environments for the user, they are an adjunct to what they are currently working on.
Ask yourself why someone is getting a higher res screen, not just that there is an opportunity to landgrab more of the user’s pixels.
David, you actually have a point here that I missed while thinking about the design of my blog and this post. And this point is actually pretty valid – when I’m on my laptop only, I use full-screen browsing because the screen is quite small for me and I like to have more browser real-estate. But when I’m on a dual- or tri-screen setup like I usually do while at home or office, I never do fullscreen browsing.
Thanks for that insight, needs to be taken into consideration too.
I agree with David, even when I think sufficient majority of end users have higher res screens, the majority view with high res screens tend to view in minimised mode to make full use of screen real estate for work flow.
Personally all site I build aim at 1024×768 unless the client demands larger and I can’t counter argue why its not in their interest to go larger.
Fair point, Derek, as I written in my comment before. Still, just recently, I tend to think that 1152-1280 in width is a fair compromise between 1024 and larger screen real estate.
I’m a big fan of designing sites for 800×600 and/or 1024×768 because the majority of clients that I work with still use these resolutions, or have visitors using these resolutions. Not to mention that it’s much easier to design a site for 800×600 or 1024×768 and have it scale for mobile applications than the larger resolutions (although this is a mute point with a separate mobile style).
Even on my desktop with larger display I don’t run most of my windows at full screen resolution so that I can enjoy the benefits of multi-tasking and using my screen real estate as efficiently as possible.
As a students my skills in webdesign and standards are not perfects. But I still think that optimizing for 1024 is and gonna be in our lives for few times. It’s like IE6. Many people still using it and they are fine with it.. Oftenly, people with 1024 juste don’t need to realize that there is big screen to get better designs. If it show good when they open there mailbox then it’s alright nothing else matter.
Sry for bad english :)
I totally agree. I design sites on my MacBook Pro, at a resolution of 1400×900 (widescreen). Finding a size to use as a guide is nearly impossible with so many different resolutions out there.
I’d say the biggest issue, above the width, is the height. A lot of the time I’ll want to have specific information above or below the fold, which is practically impossible to do accurately across all browsers.
Either way, I’m with you that 1024×768 should not be the go-to resolution to design for, along with IE6 being cut off completely – I know it is from my designs anyways.
Cheers
Personally on my 1920×1080 display I almost never have it take up the entire screen. Its to large and becomes a huge waste of space. I will almost always have something else on the other half of the screen. So yes we may have more space on our screens but I don’t want to give it all to a site.
Thank you all for your insights. I also hardly run fullscreen on my 1680×1050 (planning to switch to HDTV-size 1920×1200 pretty soon), but the fact is that with screen of that size I hardly go below 1280 in width when it comes to browsing.
@Jon: I dropped 800×600 a very long while ago due to same reasons I’m writing this post. I do not agree with you on the mobile devices though, as you can (and should) have different stylesheet for mobile devices.
@Carson: I’m not saying that we should drop support for 1024 browsers. I’m asking if we should. I noticed that most of my viewers have at least 1280 screens set to fullscreen browsing or bigger, set to at least 1280 browser size. That’s why I stated the question.
@Patrice: I am not supporting IE6 for several reasons, one of them being the fact that workload needed to fix weird and totally unexpected CSS and JavaScript bugs in it is not worth the time and money.
@Mariusz
I am in the process of dropping 800×600 in my web designs, but at this point I’m still seeing around 7% of visits with this resolution, and I don’t want to alienate anyone by forcing a larger design on them.
As for the mobile topic, many devices simply ignore mobile stylesheets these days (unless you’re using browser/device detection, which you shouldn’t), so this can also cause problems with larger designs.
@Jon: yes, I guess it’s probably based mostly on what customers you have – for most of my latest projects, 800×600 percentage is somewhere around 0.5% with 1024 being around 7-10%.
Jon: We could use the device screen width detection instead of browser/device itself detection. Something like that:
link rel=”stylesheet” type=”text/css” href=”smallScreen.css” media=”only screen and (max-device-width: 480px)”@zx: you might want to use <code> when you’re posting listings.
You forgot hugely popular netbooks with resolutions of 1024×600px (up to 1366×768). So the answer is a big fat YES
@Dusan: yeah, I forgot about them – thanks for pointing that out!
@ZX device width detection can be a great way to detect mobile devices (and even visitors with lower resolutions), in fact your code their will catch all iPhones and HTC G1’s, which represent about 50% of the current mobile market.
The problem stems from the fact that there are a variety of other mobile devices in use that do not follow any sort of standard:
RIM/BB 19% – doesn’t use handheld stylesheets (or any stylesheets at all in some cases) by default and doesn’t support media queries such as device width,
Windows Mobile 15% – loads both screen and handheld CSS,
Palm OS 9% – loads both screen and handheld CSS but doesn’t support media queries such as device width,
Hiptop/Sidekick 4% – loads both screen and handheld CSS but doesn’t support media queries such as device width,
Symbian/Nokia 2% – doesn’t support stylesheets with a media declaration or media queries such as device width).
@Jon: And what can we do? We can count that developers will do something with their products. As for today, the mobile web is not very popular, so we can just support the easiest part (the 50% seems pretty good for me), and leave the rest for now (of course if there is no real reason for supporting all the rest). IMO the only problem is testing it all in real environment.