some basic design considerations
Before you start building your site, there are some factors you need to consider including the screen size you site will be designed for, the fonts and font sizes you will use, and how you can accomodate for different browsers and browser versions. None of this is all that technical but working it into the planning process will give you a better site and fewer headaches.
screen size
You already know that it is possible to change the settings on your computer so that the screen will display data at different resolutions. For example, many computers shipped in the past three years have come with their screens set to display 800 pixels across and 600 pixels down (usually written 800x600). Prior to that, screens were usually set to 640x480. Today many computers are set to 1024x768 or higher.
Your problem as a web designer is that you have no way of knowing the screen resolution being used by each of your visitors. Many people never change the pixel depth of their computers, even if they know how. Another factor if your audience is in elementary classrooms and homes with elementary age students is that some basic programs used (like Kid Pix), require that the computer be set to 640 x 480. As a result, the resolution is left at that depth. Some people change the resolution to make the screen easier to read.
So what happens if you visit a web page that is designed for a resolution larger that what you have? Normally, you would have to scroll left and right in addition to up and down. Not a fatal flaw but it is very annoying for people reading your page and could mean the different between people returning to your page often and never coming back.
The bottom line is that you have to decide the resolution to which you are going to design your page. The chart below should give you some basic guidelines. The numbers in the right column are smaller than the size of the screen since you need to allow for a scroll bar and window border (left and right) and for the buttons and status bar (top and bottom).
|
If you are designing for this Pixel Depth... |
Design for this size Web Page |
|
640 x 480 |
615 x 400 |
|
800 x 600 |
775 x 515 |
|
1024 x 768 |
1000 x 690 |
fonts and typography
You probably already know that the font you use in your design of a web page must also exist on the computer viewing your page. If not, the browser will substitute the default font (Times on a Mac and Times New Roman in Windows).
This line was set for a very nice font called Lynda but since you don't have the font, your browser just uses plain old Times.
On top of that, you have very little control over font size unless you're willing to learn Cascading Style Sheets (not hard!). A browser can only display seven font sizes:
|
Using Font Size settings |
Using the Paragraph Formatting settings |
| 7 point | Heading 6 |
| 9 or 10 point | Heading 5 |
| 12 point (the default in most editing programs) | Heading 4 |
| 14 point | Heading 3 |
| 18 point | Heading 2 |
| 24 point | Heading 1 |
| 36 point | > |
Finally, you have another problem with the differences between Macs and Windows computers. Most Windows computers display fonts one to three points larger than does a Macintosh computer. We don't need to worry about the technical reasons why (lots of stuff about different graphics cards, monitors, etc.), you just need to be aware that it happens and that the display you thought was perfect, doesn't look the same on the other platform.
To compensate for parts of this, some web designers tell the browser to use specific fonts. Very often you will find this line in the source code for a web page: <FONT FACE="verdana, helvetica,arial,san serif"> This line tells the browser to use the font Verdana (installed with practically every piece of Microsoft software) first. If Verdana can't be found, use Helvetica (standard on every Macintosh), then Arial (standard in Windows 95 and higher) and finally any San Serif font (just in case we have someone surfing with Netscape 1.1 in Windows 3.1) in that order.
You could use any fonts in the list but this one is common since Verdana, Helvetica and Arial are very close to being the same font but Arial is a "small" font, compensating for Windows increasing the font size. For this site and most of the sites I build, I use this Font Set. Verdana is a font which has been specially designed to read well on a screen and which scales well on both platforms.
In the end, is all this worth a lot of worrying? In my opinion, no. You also have a large number of visitors to your site who have set their browser font to their own choice of type and size. And that takes all your hard work to tweak things just right and throws it out the window. I think the set mentioned about is a good choice is to use and instead worry about giving your vistors the information and ideas that they will want to read.
If this isn't enough information about typography and you would like to learn more as it applies to web pages, read this article at the Web Page Design for Designers site.
Browsers
Another consideration is which browser your visitor is using to view your page and it's not just a matter of Communicator (current version 7.03) vs. Internet Explorer (current version 5.1 for Mac and 6 for Windows). Each new version of a browser is capable of displaying more sophistcated pages but that means that if you design for the technology in the latest versions, your viewers who have not upgraded may not see your page they way you designed it.
The display of basic pages with just text and images and with no special formatting will probably work just fine in any browser. If you want to add more sophisticated features to the pages such as Java Script, DHTML or Cascading Style Sheets, you will need to look at your audience and what browsers they are likely to be using.
If you want to use multimedia elements in your pages (sound, video, etc.) or Java applets, you have another problem. Some of these features require that the viewer have special software (such as plug-ins) installed on their computer. Many sites handle this by providing instructions for the viewer on how to install the software but for people with weak technical skills, they may just decide to go elsewhere. Think of your audience when you plan for using these features. For more about this topic, take a look at this article on what you need to know about linking files to your pages.
And More...
Finally, there are many little differences which you need to be aware of, although you may not be able to do anything about them.
Images - In general, graphics appear slightly darker on Windows computer than they do on Macintosh computers.
Image Placement - Netscape browsers do not allow images flush with the top of the browser window where Explorers' does.
Frames - Unless they are designed very carefully, pages using frames can look very different in different browsers and on different platforms.

