Screen Resolution

by Don Singleton

A web designer needs to realize that visitors to his website may use a different screen resolution, and therefore may see things very differently that he sees them. When the internet was young, most websites were designed for 640x480. Currently I have not had a single 640x480 user visit TulsaHighTech.

After 640x480, most websites were designed for 800x600, and that is the resolution I use, most of the time. I have been told that I should join the modern age and use at least 1024x768. The reason I stay with 800x600 is that my vision is not the best, and I can read things more comfortably at 800x600 than 1024x768. And I don't think I am the only one that finds 800x600 more comfortable, because SiteMeter tells me that 12.6% of my viewers use 800x600. Some part of that 12.6% is probably me, checking to see how something looks, but I suspect some of them are senior citizens like myself, whose vision is not the best in the world.

Because of my vision, I cannot follow the advice I have been given to format my site for a minimum of 1024x768. However I do try to make sure I accommodate the needs of my higher resolution viewers, where ever possible. If you see pages on TulsaHighTech where I have not taken into consideration my higher resolution viewers please let me know. In the examples below, I have done screen captures at 800x600 (the lowest resolution my laptop will support), and 1200x800 (the highest resolution my laptop will support), and sometimes at 1024x768. For the sake of consistency, I have made all of the screen captures 700 pixels wide (so lower resolution viewers will not have to scroll to see the wide captures), and there is a 10 pixel red frame around each picture, so you can see exactly what my screen showed.

Some websites seem designed for 800x600. Consider Ann Althouse at 800x600:

and at 1200x800, where you have the same 800 pixel site, centered in the screen:

The White House page is designed for 1024x768.

800x600 viewers lose some things on the right:

And 1200x800 viewers see the 1024x768 image in the center:

The Corner is designed for 1024x768:

But if you view it at 800x600 you just lose part of an ad on the right:

And if you view it at 1200x800, the 1024x768 image is in the center:

When I designed the APCUG Blog, I used 800x600 as my design point, just as Ann Althouse did:

And at 1200x800 you see:

The TCS website was designed for 800x600:

When viewed at 1200x800 it fills the screen, but does not look as I intended it to look:

My custom Google page looks like:

And when I view it at 1200x800 they see they have more space, so they reformat my Date & Time area, and show the date and a calendar too, in addition to the clock. At 1024x768 I get the clock and the date, but no calendar.

Beginning with the March issue, TulsaHighTech will have a photo on the cover. This presents some interesting design challenges.

I could design it for 800x600, and it would look fine at that resolution:

but if you viewed it at 1200x800, the boxes are not where I intended to place them, with relation to the photograph.

And if I designed it for 1200x800 it would look fine at that resolution:

But at 800x600 I would lose things off to the right:

I decided to go with multiple front pages, and use some javascript to select the proper page for the viewer's screen resolution. But what do I do if the viewer has disabled javascript? This javascript code will be executed only if javascript is turned off

Notice in the following screen capture the normal "Issue and Tulsa Links bar" at the top of the screen is not there (it is created by javascript), and there is a new box in the center, warning the viewer that JavaScript is disabled. The menu system will not work, and other aspects of the site may not work normally either.

The code I am using came from Geniusbug. All I have to do is put the following statement in my <head> area:

and put the screenRes.js file in the folder with my htm file. As they distribute it, the file reads:

switch(screen.width)
{
case 640: goToPage('640x480.htm'); break;
case 720: goToPage('720x480.htm'); break;
case 800: goToPage('800x600.htm'); break;
case 848: goToPage('848x480.htm'); break;
case 1024: goToPage('1024x768.htm'); break;v case 1152: goToPage('1152x864.htm'); break;
case 1280: goToPage('1280x1024.htm'); break;
case 1600: goToPage('1600x1200.htm'); break;
default : goToPage('800x600.htm'); break;
}

function goToPage(url)
{
//window.location.replace(url);
alert('You would now be forwarded to ' + url);
}

And when I loaded the html page an alert box pops up saying "You would now be forwarded to 800x600.htm" (or whatever your screen resolution is. I made the following changes:

I changed "800x600.htm" to "200903/mar2009_800.htm", the address of the 800x600 page for March, 2009 (and made the corresponding changes to the other entries). Right now the system supports two formats: 800x600 and 1200x800. I will probably make a couple of more pages before the March issue is made public.
I took the "//" off, which turned the line into a javascript comment line, and now "window.location.replace(url);" will take me to the proper page.
I removed the "alert('You would now be forwarded to ' + url);" statement, because I no longer want the alert box to come up.

So I now have:

switch(screen.width)
{
case 640: goToPage('200903/mar2009_800.htm'); break;
case 720: goToPage('200903/mar2009_800.htm'); break;
case 800: goToPage('200903/mar2009_800.htm'); break;
case 848: goToPage('200903/mar2009_800.htm'); break;
case 1024: goToPage('200903/mar2009_1280.htm'); break;
case 1152: goToPage('200903/mar2009_1280.htm'); break;
case 1280: goToPage('200903/mar2009_1280.htm'); break;
case 1600: goToPage('200903/mar2009_1600.htm'); break;
default : goToPage('200903/mar2009_1600.htm'); break;
}

function goToPage(url)
{
window.location.replace(url);
}

So now I have the viewer directed at the proper front page. Fortunately it is not necessary to have separate versions of each page. The Photographer's bio of the Photography Contest article, looks ok at 800x600

And it is ok at 1200x800.

The type is perhaps a bit small in the 1200x800 version, and one might wish the picture was a little larger, but at least it fills the screen.

I was even able to get the Hover effect, covered in a separate article to work at 800x600. The larger picture almost overlays the thumbnail, but you can still see part of it.

and at 1200x800.

In summary, these are the screen resolutions SiteMeter says most of our visitors are using, and how we are trying to accomodate those viewers, using the techniques described above:

1024x768	31.6%	1024x768 (mar2009_1024.htm)
1280x1024	20.0%	1280x1024 (mar2009_1280.htm)
800x600	12.6%	800x600 (mar2009_800.htm)
1680x1050	8.4%	1600x1200 (mar2009_1600.htm)
1280x800	8.4%	1280x800 (mar2009_1280.htm)
1440x900	7.4%	1600x1200 (mar2009_1600.htm) The javascript does not have a special category for 1440x900, and I suspect it will therefore take the default, wich is 1600x1200. I cannot test this, because my laptop does not go above 1280x864, and my desktop video card jumps from 1280x1024 to 1600x1200. If you are one of the 7.4% of my viewers that uses 1440x900, and if this does not work for you, please email me, and I will try to figure out a solution for you, and the other 7.4% of my viewers.
1920x1200	5.3%	1600x1200 (mar2009_1600.htm) 1600x1200 is the highest supported by the javascript code