Screen Resolution

[robin]

Is it better to make a page in a 800x600 screen resolution or a 1024x768 or does it even make a difference? Would it be worth the time to make a page in each screen resolution and place a redirect script that will send the visitor to the page for their screen resolution? :confused:

[David Gillaspey]

Hi Robin,

I'd say go with 800x600 and use "liquid design." That is a technique of using tables to ensure your content is always centered horizontally on the screen. (I use it for Great Church Websites.)

Yeah, we rich Americans all have high-resolution computer screens (I say that facetiously), but church webmasters should always remember that their site can be accessed by people from around the world. You can't be sure that someone on the other side of the world has a high-resolution computer monitor. If they don't, I can tell you that scrolling left to right to view content that's 1024 pixels wide is really annoying. By contrast, people are used to scrolling vertically, and keyboards even facilitate this by including the Page Up and Page Down keys.

Of course, some people -- a very few, I hope -- still have 640 by 480 screens (speaking globally), but I think it's safe to aim for the next size up.

Another reason to go with 800x600 is for accessibility. A person with poor vision who uses a screen magnifier to browse the web would really be frustrated trying to scroll left and right and up and down if a site was 1024 pixels wide. But if they had a 1024-pixel-wide monitor, I think they would be able to view an 800-pixel-wide site adequately.

(Also remember that the browser window has borders left and right, a scroll bar on the right side [sometimes], menus and buttons across the top, and a status bar across the bottom. That's "overhead," so to speak. So you can't completely fill an 800x600 screen or a 1024x768 screen with your content. You have to leave some space for the browser overhead.)

Sincerely,

David Gillaspey
President
Great Church Websites

[robin]

Hi David..

Thanks for your advice. I have checked out different websites in different screen resolutions and some that I have seen in the 1024 resolution, the text is really small and it makes it hard to read. I have a script embeded in my page that reads the screen resolution of each visitor. About 85% of the visitors I get have the 1024 resolution. When I made the page, I had mine set at 800 and when I looked at it with the 1024, I was really surprised at how small everything looked in it. I have always thought most people use the 800 resolution.

[JackWolfgang]

I try to make sure that my sites are no wider than 600 px so that they are available on the smallest resolutuon without horizontal scrolling.

In my humble opinion, horizontal scrolling is a feature of a bad web design.

[David Gillaspey]

When I made the page, I had mine set at 800 and when I looked at it with the 1024, I was really surprised at how small everything looked in it.
When a person increases the resolution of his or her monitor, the pixels necessarily get smaller and therefore the type appears smaller. So there's good reason for the phenomenon you mentioned occurring.

I think the solution is this: Set your monitor to 1024x768 as you design your site (it probably already is, I suppose). That will naturally result in your setting the font to a size comfortable for reading. Then create a site that's only 800 pixels wide. (Actually less than this, because of the browser overhead I mentioned before.) Then use the liquid design technique to ensure the 800-pixel-wide site is centered horizontally within the 1024 pixel width of the screen.

If a person has an 800x600 resolution screen, however likely or unlikely that is, they will see the site in larger type and so can still read it.

I created a test page here

http://www.greatchurchwebsites.org/resolution_test.html

with the same phrase sized using different CMS techniques and one HTML font size technique. I deliberately chose values that make all lines appear about the same size in Firefox on the Macintosh. I was hoping to prove something by creating this test page, though I'm not sure I have.

In I.E. (Mac or PC), the bottom group of lines is larger than the top three in general. Also, within this bottom group, the lines themselves vary in size among themselves. However, I use the "px" designator (top line), as I suppose most web designers do. This "px" designator results in type size being fairly stable across browsers and platforms.

When I resize my monitor (on both my Mac and my PC) to 800x600, the type just gets generally larger.

Sincerely,

David Gillaspey
President
Great Church Websites

[robin]

Thanks David..

When I redo my site I will have to keep all that in mind. I was always under the assumption that most of the people had their resolution set at 800x600. Apparently other people have thought that too because I can look at certain sites and the site will look really good in the 800x600 but when I look at it with the 1024x768, it doesn't look nearly as good.

[JackWolfgang]

I try to make sure that my sites are no wider than 600 px so that they are available on the smallest resolutuon without horizontal scrolling.

In my humble opinion, horizontal scrolling is a feature of a bad web design.

Clarification:

I don't put constraints on my content other than a 5% margin on each side.

The 600 px limit applies to images and stuff.

[flutem3]

Is it better to make a page in a 800x600 screen resolution or a 1024x768 or does it even make a difference? Would it be worth the time to make a page in each screen resolution and place a redirect script that will send the visitor to the page for their screen resolution? :confused:

Hi, Robin,

I have been going round and round with this very issue myself. I am told that our website is "old fashioned" at 800x600 resolution. But I tell you what. I like it!! Actually, I set it at 760x600 so I am sure people don't have to scroll horizontally which I consider a real pain. And it is terrible for someone who is blind and has to use a "reader" to get their information.

Taking everything into consideration I am going to keep the resolution where it is...but it does look bad at higher resolutions. However, I figure if someone is that interested, and God knows I hope he/she is, he/she can change the resolution on his/her computer. It isn't as if we are stuck because we aren't. We just get perplexed, get too much advice or not enough, get contradictory advice, and pull our hair out...then do it the way which seems to work best for your website. The same sized shoe doesn't fit us all. :-) Go, Robin!

[David Gillaspey]

Taking everything into consideration I am going to keep the resolution where it is...but it does look bad at higher resolutions.Hi,

I'm not sure why you say your site looks bad at higher resolutions. My monitor is set to 1152x870 pixel resolution, and I don't think your website looks any better or worse because of the higher resolution of my screen.

Sincerely,

David Gillaspey
President
Gerat Church Websites

[iamcam]

http://www.w3schools.com/browsers/browsers_stats.asp
This website gives several web statistics, including screen resolution. According to the w3schools, about 66% of web users have screen resolutions of 1024x768 or greater. 29% are still using 800x600.

[David Gillaspey]

Hi Cameron,

Thanks for making us aware of this comprehensive set of statistics about web users.

(It's particularly impressive that Firefox already has a 25% share of the market. On the other hand, the percentage of Macintosh users is sadly very low.)

Having said that, allow me to say it's important to also note the fine print (literally) on the page. These are statistics based on worldwide visitors to the W3Schools' own site.

If a church's website attracts local visitors or primarily visitors from the same country, then, it seems to me, it's possible, depending upon the demographics of visitors, that a higher percentage will have higher-resolution monitors.

Furthermore, according to the fine print, "Different sites attract different audiences. Some web sites attract professional developers using professional hardware, other sites attract hobbyists using older low spec computers." A youth ministry website perhaps could safely target users of higher-resolution monitors, as an example.

Nevertheless, these statistics beat mere guessing about monitor resolution, which I myself have been guilty of on this forum.

Sincerely,

David Gillaspey
President
Great Church Websites

[generalhavok]

I try to design all sites for 800x600...for three reasons:

1. We do, as a church body, feel responsible to provide resources to anyone (regardless of geographic location) who visits our site. That means that a LOT of those we're trying to reach might have monitors with such limitations.

2. Number 1 also includes our blind friends. Screen readers, I'm told, sometimes have trouble with greater resolutions. One of my clients is blind, and his wife is as well...so I have the benefit of knowing someone who can check out my sites for me. (BTW: he's a hosting client, not a design client...he designed his own site: http://www.4familyreformation.com/).

3. Currently, most of the 'better' designs use a centered and narrow design rather than a full-page design. For sites like this one, with a lot of templated content, liquid designs are best. For sites that seek to promote themselves with nice designs and layout, a 'pixel-perfect' approach is in vogue. This has and will again change, but I think it's important to keep a site's design as fresh as its content.

[David Gillaspey]

Hi all,

This thread was getting long and covering a lot of ground, so I've split the thread. Two posts related to the Theophilos Bible study program are now a single thread in the Resources for Church Webmasters topic area (the closest match for them at this point in time); see this link (http://www.greatchurchwebsites.org/forums/showthread.php?t=188). A number of posts (primarily by myself and generalhavok) about using tables vs. CSS for positioning and layout are now combined into a single thread in the Roundtable topic area; see this link (http://www.greatchurchwebsites.org/forums/showthread.php?t=190).

Sincerely,

David Gillaspey
President
Great Church Websites
and Forum Administrator

[youthman]

The first website I ever designed was SOLE Ministries (http://www.soleministries.org). This is my youth ministry site. It wasn't until I got into web design that I realized that I created it too big. One day, I decided to email everyone that had subscribed to my student email newsletter to see what resolution they had their monitors set at. Since many people do not even understand what that is, I simply asked the question if they had to scroll left and right to view the entire page when visiting the site. 1/2 of those that responded to my email were using 800 x 600 and had to scroll. It was a lesson learned early in the game. I now design my pages 779 wide (to allow for scrollbar). Higher resolutions are definitely becoming the standard due to lower prices with newer and larger monitors.

Pegaweb (http://www.pegaweb.com/articles/screen-resolution.htm) has a good article on this issue. Daniel (owner of Pegaweb) suggests that every site needs to have a "sliver" or repeating portion of the page so that you do not have a lot of "empty" space when viewing the site on higher resolutions. I think if you can use a liquid design (with tables set to percentages) it is nice because no matter how large your resolution, the site will fit. The problem that I find with that is that your layout will change (text, images etc) so just be sure to test it with different resolution settings to see how it will look.

[generalhavok]

Welcome!

It's clear that liquid sites work very well for larger resolutions...but it's not true that they work on "all" resolutions. With the price of large monitors coming down quickly, it's clear that many have resolutions larger than 1024x768. One of my clients has a letterbox flat-panel screen that must be at least 30" horizontally. I'd never seen anything like it (it was, indeed, very cool)...and those monitors allow your browser to get, well, too big.

It is a good idea to provide additional graphics or content to break up the monotony of a smaller site on a larger monitor.

[ckvkkeek]

I think 1 year after Vista is released I will start developing for 1024x768.

But until then, I will stick with as close to 800x600 as possible.

[flutem3]

What is Vista? I understand why you are waiting a year. :)

Carol

[youthman]

Vista is the next version of Windows Operating System. You might have heard of the term Longhorn. That was Vista's project name when it was being developed. You can read more about it here (http://www.microsoft.com/windowsvista/default.aspx).

[generalhavok]

The appropriate principle here isn't just to wait until a lot of people have the ability to see a design in a certain resolution. The principle is to 'know your audience'...and to address their needs directly.

If you check your traffic (with a decent stats package) you should be able to see what percentage of people view your site with each resolution. It may be that Site A has a disproportionate amount of traffic from poorer areas where technology advances more slowly. That site should reflect the needs (or capabilities) of its visitors, like every other. It may be that Site B has a disproportionate amount of traffic from wealthier areas, or is frequented mainly by computer geeks. That site should also reflect the needs (or capabilities) of its visitors.

It's a bad idea to design things 'just because'. The best designers think through their designs, consider their audience, and make informed decisions on the best way to present their information. Success online is seldom an accident...it's the result of combining good information with best practices in a purposeful way.

[flutem3]

The General wrote: "The appropriate principle here isn't just to wait until a lot of people have the ability to see a design in a certain resolution. The principle is to 'know your audience'...and to address their needs directly."

AMEN GENERAL! The majority, by far, of the people who come to our website use a resolution of 800 x 600. The next is 1024 X whatever.

I will keep our resolution where it is until I see a definite majority shift. Then I will change the resolution.

It is so easy, in my not so humble opinion, to build the website that we as the web site editors like instead of placing the viewer first. I would put all kinds of stuff on the website. I love to use animated figures, but they take up lots of file space and don't really enhance the site except for me.

Just because we can know how to do something doesn't mean that it is wise to use it.

Carol

PS Our website is now two years old! How time flies...trite but true.