homepage Welcome to WebmasterWorld Guest from 54.205.137.40
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / Webmaster General
Forum Library, Charter, Moderators: phranque & physics

Webmaster General Forum

This 146 message thread spans 5 pages: 146 ( [1] 2 3 4 5 > >     
Days of 800x600 Ending?
Anyone Designing Sites for Higher Resolutions?
jimh009




msg:3297160
 8:46 am on Mar 30, 2007 (gmt 0)

I was looking over my stats tonight and realized that only about 15% of my visitors are hitting my site with a resolution of 800x600 or less...a number that just continues to go down and down and down by the quarter.

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

 

BeeDeeDubbleU




msg:3297171
 9:13 am on Mar 30, 2007 (gmt 0)

I have always designed for 800x600 but I am redesigning a site for a client at present and I am going for 900 width.

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.

Status_203




msg:3297211
 9:54 am on Mar 30, 2007 (gmt 0)

Just because their desktop is wider than 800 does not mean that their browser window is also wider than 800.

BeeDeeDubbleU




msg:3297213
 10:02 am on Mar 30, 2007 (gmt 0)

I think we can take that as a given. :)

bateman_ap




msg:3297219
 10:05 am on Mar 30, 2007 (gmt 0)

I made the decision to start designing everything now using 950 width. Also have started going back to some of my older sites and changing them for the 1024 screens. Great thing is when we did our last redesign and moved to CSS we built it in such a way this was a very trivial task.

topr8




msg:3297223
 10:07 am on Mar 30, 2007 (gmt 0)

>>Anyone Designing Sites for Higher Resolutions?

not here

Corey Bryant




msg:3297292
 12:23 pm on Mar 30, 2007 (gmt 0)

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.

It really depends on your viewers and looking at the stats of your sites as most of you have done

-Corey

jay5r




msg:3297379
 1:53 pm on Mar 30, 2007 (gmt 0)

We're moving to a page width of 875 with a redesign we have underway. Approximatey 10% of our visitors have 800x600 and that percentage goes down a little bit every month.

simonuk




msg:3297396
 2:11 pm on Mar 30, 2007 (gmt 0)

I've been thinking about it but until the percentage is much, much lower I'll still be catering for 800x600 users.

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..

rocknbil




msg:3297714
 6:46 pm on Mar 30, 2007 (gmt 0)

1. 1024x768 50.20%
2. 800x600 14.80%
3. 1280x1024 14.13%

. . . 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.

henry0




msg:3297922
 10:21 pm on Mar 30, 2007 (gmt 0)

Currently working on a site where the Brand analysis, customer and new customer targeted definitely show that audience will be browsing at the very least in the 1024 range with over 60% utilizing the most recent and expensive forms of monitors
Our design will be set for a minimum of 900

BeeDeeDubbleU




msg:3298198
 9:18 am on Mar 31, 2007 (gmt 0)

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.

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?

maccas




msg:3298214
 10:03 am on Mar 31, 2007 (gmt 0)

Javascript sniffer to detect resolution and serve a CSS file depending on there screen resolution with default at 800.

BeeDeeDubbleU




msg:3298218
 10:12 am on Mar 31, 2007 (gmt 0)

And what if they have disabled Javascript?

maccas




msg:3298229
 10:58 am on Mar 31, 2007 (gmt 0)

I just overwrite the default css if they have javascript enabled, so if no javascript or it can't detect their resolution they just get served the default css. I guess I could of also used noscript tags, but the way I have it the only css in the resolution.css files is table widths so not much to alter if I change the layout. I have yet to find a problem with all the browsers I have tried, different resolutions and javascript disabled.

henry0




msg:3298239
 11:36 am on Mar 31, 2007 (gmt 0)

A good statistic to look at (if it exists)
should be: How many people disable JS?

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.......

ken_b




msg:3298316
 2:10 pm on Mar 31, 2007 (gmt 0)

For what it's worth, my main monitor displays 1600x1200. I bought it specifically so I could have two 800 pixel wide windows open in full view at one time.

Do some stats show that sort of situation?

Beagle




msg:3298340
 2:47 pm on Mar 31, 2007 (gmt 0)

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.

I think one important difference between 800x600 and using non-IE browsers is that someone has to have some basic computer knowledge to even know that other browsers exist, while 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 but wouldn't know how to set it herself if her life depended on it. Although they may not be "prepared" to accept horizontal scrolling, they are very likely getting used to it - but that doesn't mean they wouldn't rather visit a site where they don't have to scroll.

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]

Dabrowski




msg:3298379
 3:56 pm on Mar 31, 2007 (gmt 0)

Where to begin?

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!

cmarshall




msg:3298383
 4:07 pm on Mar 31, 2007 (gmt 0)

I tend to write sites for NPOs that cater to relatively disadvantaged people.

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.

maccas




msg:3298404
 4:26 pm on Mar 31, 2007 (gmt 0)

"What many people call "liquid layout," I call "tired eyeballs." It's actually a chore to scan wide format pages". Yeah one of the reasons why most news sites used fixed width, usually 800px.

henry0




msg:3298420
 4:52 pm on Mar 31, 2007 (gmt 0)


"What many people call "liquid layout," I call "tired eyeballs."

Absolutely, everything above the 1200 range becomes hard to focus on

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

pageoneresults




msg:3298424
 5:02 pm on Mar 31, 2007 (gmt 0)

I'm moving into the 950 range myself. I was previously at 760. As I've made the adjustments for screen resolutions over the years, what I'll do is increase the horizontal real estate to the common denominator and then make sure my most important content is visible at 760. 15% (800x600) is still a fairly large number of users to accommodate.

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.

cshel




msg:3298435
 5:14 pm on Mar 31, 2007 (gmt 0)

We *were* designing for higher resoltions, but gave up and went back to 800x600.

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.

Dabrowski




msg:3298541
 8:27 pm on Mar 31, 2007 (gmt 0)

See my previous post, design with larger fonts, not larger layouts!

That also prevents 'tired eyes'! Nice terminology not heard that one before but totally agree!

BeeDeeDubbleU




msg:3298903
 7:32 am on Apr 1, 2007 (gmt 0)

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.

rocknbil




msg:3298974
 10:54 am on Apr 1, 2007 (gmt 0)

develop with a fluid layout with a max-width.

Dabrowski




msg:3299024
 12:07 pm on Apr 1, 2007 (gmt 0)

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.

BeeDeeDubbleU




msg:3299059
 12:27 pm on Apr 1, 2007 (gmt 0)

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.

Dabrowski




msg:3299245
 4:53 pm on Apr 1, 2007 (gmt 0)

No exact correlation, but it's very close if you use the little bit of JS to set the font size.

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.

This 146 message thread spans 5 pages: 146 ( [1] 2 3 4 5 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Webmaster General
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved