Forum Moderators: phranque
I've noticed that popular sites like Yahoo/YouTube/New York Times and many others are all having resolution sizes greater than 800 pixels in width.
As such, if popular sites like these can broaden their minimum resolution size width wise, and with fewer users going the 800x600 route by the month, I've begun to wonder why I'm still designing sites for this resolution.
I'm giving thought to kicking up the minimum resolution size I use to around 900 pixels wide.
Anyways, was wondering what people think of abandoning the 800x600 resolution? And if you have already done so...what have been your results?
Oh, the site this will be on is a photoblog/blog/travel guide essentially...not a e-commerce site.
Thanks
Jim
I just did a check on some of my sites and I was surprised to find between 5% and 20% of people still using 800x600. This suggests that it will be a year or two yet before we can forget about it.
not here
It really depends on your viewers and looking at the stats of your sites as most of you have done
-Corey
Any potential lost customer is bad but to only lose them because they were forced to scroll horizontally to see the whole page is a bad thing IMO..
. . . currently 11K+ uniques per month. At that rate, even 1% is significant. This question goes away for the most part if you develop with a fluid layout with a max-width. Beyond a certain point exceptionally wide pages become more difficult to digest.
The same thing probably applies to people who use browsers other than IE. They must find lots of sites that do not comply with Firefox, Opera or whatever and are prepared to accept this?
My experience in dealing with company owners or employees is that the vast majority have no clue on so many computer aspects
believe it or not quite a few people do not even use right click :)
Many just know enough about their PC to perform required daily work tasks
So speaking of disabling JS
What are the chance.......
Do some stats show that sort of situation?
Another thing to consider here is that people with 800x600 monitors must come across a lot of websites designed for higher resolutions. In this case they may be prepared to accept horizontal scrolling.
As most people posting in this thread have said, it depends on your site visitors and what resolutions they tend to use - different kinds of sites have different kinds of visitors.
As those who use the default setting (no matter what it is) get newer monitors, the use of 800x600 will continue to drop - at least from that set of users. But ken_b's question about two 800x600 windows on one screen is an interesting one, and I'd be interested, too, in knowing if that can be picked up by site stats.
[edited by: Beagle at 2:48 pm (utc) on Mar. 31, 2007]
For people who talk about 875/900/950 wide, why? It's too big for 800, but wasted space on 1024+? Why? Why? Why?
To topr8 and simonuk who are still only writing 800x600, time to move into the 21st century.
You could also consider using fluid layouts as well. Even thought I am on a 1900X1200 monitor, I very rarely have my screen browser maximized. When I was on the 1280X1024, my browser was maximized.
Corey Bryant, rocknbil, nail on the head guys. Fluid layouts are most effiecient as they take all of whatever space is available.
Javascript sniffer to detect resolution and serve a CSS file depending on there screen resolution with default at 800.
Maccas, another excellent resolution.
A good statistic to look at (if it exists) should be: How many people disable JS?
Henry0, unfortunately if JS is disabled there is no way to pass this information to stats programs. I really hope someone will correct me on this cos I would also really like to know!
ken_b, I have 2 flat panels and a dual display gfx card, even better I believe, I have code on one screen and browser (normally with an auto-refresh) on the other. Very handy.
many 800x600 users are either on old monitors that came with that resolution set as the default and don't even know other resolutions exist, or are like one of my supervisors who needs the low resolution to be able to read the print onscreen
Beagle, 2 excellent points, which finally leads to my contribution to this thread:
Surely if people can't read the print onscreen, they set their font size bigger right? Oh, wait a minute, everyone out there has used css to set a default of 12px, so browser font size control doesn't work any more. Or worse it works on some of your page making it look really crap. Incidentally this also goes against various disability regulations for poor sighted people like Beagle's supervisor.
OK, so the solution to BOTH these problems is: Write your fluid layout based on font size.
First set your default font size (on BODY) to 62%. Based on browser defaults, this is 10px. Too small for most people to read easily, but bear with me. Now 1em is 10px.
For example you have a menu bar at the top of your page that (in your chosen design resolution) is 30px tall, with 20px text. OK, set your bar height to 3em, and your font-size to 2em or 200%.
It's worth noting that if you set this on the same element, you have to do it slightly differently as follows. When you set 'font-size: 2em', then 1em becomes 20px. So then your height would need to be 1.5em, as 3em at this point would give you 60px.
Now user your enlarge your browser font size. What happened? The text got bigger, the menu bar got taller too. I know you could do this with padding but that's not the point.
If you then have a left have bar for news or blog articles or whatever. You may want this to be 200px. OK, set it to 20em. Then it too will scale with font size, not creating horrible wrapping/scrolling/clipping.
BUT WAIT! I hear you shout. That still doesn't solve the problem that the content will be a different size on a larger/smaller resolution?
That's where a tiny, tiny bit of JS is necessary. Use a bit of JS to set the BODY font size based on screen res. The default is 16px.
So, use JS as follows:
default res = 1024, this is the resolution you are coding in.
conversion percentage = screen res / default res.
desired em = 10, your desired 1em size, 10 is really the easiest to work with.
default em = 16, this is assumed browser default size, at least in IE6/7, FF1.5.
Complete expressions is:
Math.round( (10 /16) *( screen.width /1024) *100) +"%";
This will give you 1em = 10px in your chosen screen res, hence scaling ENTIRE content to fill the screen with the same proportions in any res.
You should then use relative font sizes throughout your entire site, given that we now know how big 1em is, this should be easy.
I found this method on some CSS example site somewhere that I wish I could remember the name of 'cos they deserve a big credit for this method. It takes a big of getting used to but I've done a couple of sites now this way and found it to be extremely good.
If anybody knows a way to find out the browser font size without assuming it please please present it here. I tried querying the current style for document's font-size but only reports it if you specify it in the first place, which defeats the object.
Please somebody tell us how to detect this, that would make this method absolutely perfect!
In these sites, I use 800 X 600 as my base, and will continue to do so in the forseeable future.
I have also found that you don't usually want to get a lot wider if your content is very heavy with text.
What many people call "liquid layout," I call "tired eyeballs." It's actually a chore to scan wide format pages. This is not a new concept. Columnar layout is hundreds of years old. You'll note that most blogs use fixed width layout.
At my day job, I wrote an intranet wiki that can adapt to much higher resolutions.
I also own a nice DLP projector. It maxes out at 1024 X 768, and encourages me to keep resolutions to 800 X 600.
"What many people call "liquid layout," I call "tired eyeballs."
What is missing is a real mini-max width fully cross browser
I’ll love to deliver it fluid but with mini max that works
I've been reading some research concerning fluid layouts as I've been a fixed width person since the beginning. There are few sites that "truly" look and work well in a fluid layout with today's varying resolutions.
P.S. I've had great success using a stylesheet switcher. I'll provide the user with 1X/2X/3X viewing modes.
We're in the middle of a 6 month long website overhaul and originally the consultants convinced our company to build for a 1024x768 resolution.
After we finally got the comps for the homepage, they realized that on our monitors at work, you can't see any text above the fold :) So, we ended up having the entire site scaled down to 800x600.
Personally, I never have my browser windows open to full screen anyway. So I don't see myself designing anything much wider than 800 pixels anytime soon.
That also prevents 'tired eyes'! Nice terminology not heard that one before but totally agree!
Corey Bryant, rocknbil, nail on the head guys. Fluid layouts are most effiecient as they take all of whatever space is available.
Fluid layouts are a different topic. We all know how easy it is to create them but reading them is not so easy. As someone already said newspapers have been columnising print for hundreds of years. They don't do this for nothing.
My personal preference is to use full screens when browsing and I find many 100% width screens difficult to read. They can also have lots of unnecessary blank patches created by unpredictability of text wrapping around images at the higher resolutions.
In actual fact pages like this on higher resolutions can look very amateurish.
develop with a fluid layout with a max-width.
many 100% width screens difficult to read
BeeDeeDoubleU, please read my post in full. My fuild layouts are based on font size, which is scaled with screen res. That way the text takes the same (very almost) space visibly on the screen in all resolutions.
As I said, takes a bit of getting used to and experimentaion, but I've done a couple of these now and find it to be very effective.
BeeDeeDoubleU, please read my post in full.
I did read your post.
There is no real correlation between font size and width settings so what you are doing must not be a very exact science.
Also, websites that use a font size larger than required look ugly and amateurish to me. I am a control freak when it come to these things. I like to know what my site visitors are seeing.
If you do it right your users will see almost exactly the same in any resolution.
The font size doesn't look visibly any bigger on 1280 than on 800. And if you think it looks ugly, you can set the font size smaller in your browser and it will still work properly.
I think days of 800x600 should be declared over. It became the standard resolution over 10 years ago, since then CPU's have increased in speed over 10x! Isn't it about time people moved on to 1024 as they are now doing?
Exactly how you code it is your choice, I was just giving an example of how to write a completely scalable site, but either way it's definately time to move on.
