enchantress.net Resources
Things to Consider When Designing a Website

There are many facts in this section, and there are also many opinions conveyed here. The opinions are obvious, and if you do not agree with them, then I certainly do not mind. I appreciate the many flavors of ice cream, as everyone has different tastes, and while I prefer to stick with plain old vanilla, I hold nothing against anyone enjoying the vast array of beefed up flavours! On to the topic of this section....

Viewer Resolution - What many fail to appreciate

The following statistics come from a sampling of approximately 8,000 of the last visitors to one of my websites, and will give you an idea of what the general population sees when they look at your website:

    800x600 resolution - 52.42%
    640x480 resolution - 22.08%
    1024x768 resolution - 12.38%
    Other (such as WebTV) - 11.72%
    1280x1024 resolution - 0.67%
    1152x864 resolution - 0.60%
    1600x1200 resolution - 0.08%

I, quite frankly, am extremely surprised that the 640 x 480 resolution carries such a high percentage - the second highest of the viewing population. This apparently is due to two factors:

  1. Those with older monitors and video cards that are incapable of higher resolutions

  2. The elderly or people otherwise sight-impaired, that require very large print to comfortably view what the page has to offer.
Personally, I view in 1024 x 768 resolution, and have a 17" monitor. I am able to view pages in each of the resolutions listed above, and since the majority of viewers use the 800x600 resolution, strongly suggest that websites are designed to be the most friendly to that particular viewing resolution. The trick, however, is to be able to provide a website that is MOST attractive in 800x600 resolution, but is still attractive and functional in all the other resolutions.

Actually, this is not that hard, it just requires that you pay special attention and endeavor to check your work in several resolutions to be sure it will be multi-viewer friendly. If you do NOT have the ability to view your work in several resolutions, talk with your friends and see what resolution they view in - likely, you can solicit responses from others with no trouble at all!

Browser Type

Since the internet is NOT a brand new thing, and since there have been many versions of browsers before the great war between MSIE and Netscape, you should always take into consideration the various browsers that people will use to view your webpages. Not all browsers support graphics or java, just as not all computers support graphics.

For your general information, the following Browser statistics come from my sampling of some 8,000 most recent viewers:

    MSIE 4 - 26.53%
    Netscape 4 - 24.89%
    AOL 4 - 16.91%
    MSIE 5 - 13.38%
    WebTV 1 - 9.64%
    Netscape 3 - 4.78%
    MSIE 3 - 2.49%

The remaining 1+% were other browsers.

Now, if you view the above statistics, and realize in that view that almost all the visitors in this sampling use current browsers, you need to understand that not all html commands in even the most current versions of MSIE and Netscape work the same way. Each browser supports various "special" effects, and you may find that something that works the way you want it to in YOUR browser does not work at ALL in the other popular browser!

Although the vast majority of internet users these days now have current versions of MSIE or Netscape, you should still pay close attention to both what some of the "older" browsers do to your design and what the browser you do NOT use does to your design. An online service for viewing through various browser types and versions is available at AnyBrowser.com.

Loading Time

Ahhh… One of the biggest issues on the internet. OK… This will be a tough one to conquer - how to achieve everything you want but get it up there quickly.

If you are fortunate enough to have a cable internet connection (I'm not), then I understand pages load almost instantaneously. The next best choice seems to be an ISDN connection (I don't have that either), which does not give instantaneous loading, but is much swifter than standard phone lines. If you have a standard phone line connection, THEN how quickly a page loads depends your computer's processing speed and on the modem speed you are using.

Outside Factors

Now, it does NOT stop there. There are outside factors, totally unrelated to what goes on with the connection on the viewer's end, that effect loading time… In the first place, when you access a page, it does not just automatically route directly to you - it goes through several different "channels" via satellite. AND, just how busy each of those "channels" are will depend on how quickly the page loads on the viewer's end.

Another factor is, as you most likely know, how "busy" the internet is, and this one is two-fold. Obviously, the more traffic on the phone lines, the slower your connection will become. Not so obvious is the traffic on the actual host server that is the home of the page being accessed. Even if the internet lines are not overburdened in general, the lines directly out of the home of the page could be extremely busy, resulting in long loading time.

The next "outside" factor is the quality of the lines your own ISP (internet service provider - the people you pay to be able to access the internet). If your ISP does not have quality lines, and enough of them to handle the load their customers bring, then you will have slower connection times necessarily, or, you will be "kicked out" more than the average user (and, on average, I am only "kicked out" about 6 times per year, and can get right back online).

Finally, and the last "outside" factor, how quickly the page loads depends on the quality of the lines coming from the host provider. You've probably seen mention of "We have lightning fast T-3 Lines" and so on. I will not attempt to explain the differences in the lines, BUT, I will offer suggestions on choosing a host provider for your website. First and foremost, if the page trying to "sell" the space does not load quickly, then I strongly suggest you exit immediately and seek something else.

Factors Under Your Control

All that having been said, the remainder of the loading time is entirely in the hands of the webmaster. Obviously, the more graphics, bells, and whistles you have on your page, the longer it will take to load on the viewer's end. I, quite frankly, have little patience for long-loading pages. The recommended appropriate loading time to keep your viewers satisfied is 15 seconds.

How do you get there? Obviously, if you have no graphics on your page whatsoever, you can load quickly and efficiently. You also will have a very boring page, and it is sure to attract no one unless you happen to be a celebrity of some type that people just are dying to get information about! So, the next best thing is a balance of quality graphics optimized to the smallest filesize (bytes) possible while still maintaining the desired appearance AND text.

A Word About "Cache"

The viewer's "cache" is your best friend in a website. If you use buttons, for instance, that are identical in size, color, etc., but have different words on each, then you have separate graphics for each, and the load time is multiplied by however many there are. If you use buttons sparingly, and use one "bullet" graphic with standard HTML text defining the link, then your viewer only has to load ONE bullet - the others are already in the viewer's cache, so they require no additional loading time.

To improve matters, if you use the same graphics on subsequent pages that you've used on the first page (such as a navigator bar, bullets, background, etc.), THEN the graphics will also still be in the viewer's cache, so the viewer does not have to suffer the loading time twice!

Best Plan of Action

That having been said, I find that the best plan of action is to limit the graphics on the first page to those necessary to attract the viewer's attention, make them WANT to come in and see more, and only have lengthy load times if they are navigational aids that will be used on subsequent pages throughout the site.

Bells and Whistles

Mouseover buttons require twice the loading time of standard buttons, because you are actually loading the same link button twice - one for the image seen when the mouse is not over the button, and another for the image seen when the mouse IS over the button. I suppose you can see a conflict in my OWN mind on this issue, because the effect of mouseover buttons is so appreciated by the viewer (this is called an "interactive effect" - because it is the viewer that causes the change) that I feel the loading time is worth the wait. Whether or not they will work for you will depend on the other graphics used on your page.

I assume by now most everyone has seen the quite popular "lake" applet - the one that makes an image appear to be a reflection in water beneath the image. I find it quite lovely, and VERY effective when used properly and with discretion. BUT, do remember that this greatly increases page loading time, as the applet requires time to load. There is another variation of this applet available that looks like raindrops falling into water over your image - another absolutely breathtaking effect, and another load-time eater.

Basically, every single bell and whistle you add to each page will slow down the loading. If your page is designed for family/friends only with a great appreciation of such things, then there is no problem. If, however, you are putting together a website where you greatly need to keep the viewer's attention so they may purchase products or services, or even just hear what you feel is important to say, it would be best to leave out the fancy tricks.

Banner Links

Banner links are a load-time consumer as well. If you link with code that is entirely on your website, and does not "go out" to another website for information (as many these days do), then you are only hindered by the loading time of the graphic you are displaying. If, however, you have an active link that gets it's code from another page, then the viewer not only has to wait for YOUR page to load, but also, for the link's host page to transfer the data to make the link work. This is common practice with link exchanges, the Missing Children links, and most web rings. Additionally, if you have an "awards" page, some people that give awards actually give you code that links back to their website for the award image. Again - slower loading time than if you copied the image directly for use from your website.

If you choose to use these links, it is best to put them on a separate page, specifically designated as "Web Rings" or "Links", so your viewer has an option to tolerate the load time.

Linking to Graphics From Another Website

Unless you have been asked to link directly to another site for graphics and/or other information (such as the examples in the preceding section), please do not EVER consider linking to another website for graphics. Why this is not currently illegal, I do not know. I do know, however, that it is referred to as bandwidth theft, and it is totally unacceptable web etiquette.

Now, from your end, you will have slower loading time because, as stated before, your viewer will need to wait for the outside source's host to transfer the data. That is not my issue with this controversial method. If you are just starting out, you probably don't know a lot about bandwidth issues. Basically, hardly any host will take you at the published rates if you have in excess of 2 GIG traffic/month. Trust me - that's a LOT of bandwidth. It is not how much space you have on their server - it is how many people come to your site times how many bytes are transferred when they come there.

Now, my sites are basically only graphics, and people come to find something for their own sites, so there is a great deal of data transfer going on during each visit. I exceeded 2 GIG/month in October of 1997; the host I was with charged me $150/month for the excess traffic (it's in the small print, but nobody ever sees it)… There was no way for me to strike a mutually acceptable bargain with that host, so I sadly had to find another. My host since then has a whopping 8 GIG/month limit, so I was ecstatic! For the first six months, that is, until I exceeded my limit. Then, I opened two more accounts which gave me 24 GIG/month total - all I had to do was spread my stuff out so there was no more than 8 GIG/month on any given account. And pay for three accounts instead of one. OK… That worked great, for about six more months, when I exceeded 24 GIG/month. I now own five accounts, and have a 40 GIG/month limit, but I'm kissing that limit and … well, you can put the rest of it together…

SO… If you link directly to my site for your graphics, then my host counts the data transfer into my limits, and it actually ends up costing me monetarily! The moral of the story is: if you like something someone has done enough to want it on your own website, PLEASE don't "punish" them by linking directly to their site.

Aesthetics

Now we're getting out of loading time issues and into what makes or breaks a page AFTER the viewer is "in" - the look and feel of the site.

Clutter

I'm not going to ask you what your desk looks like, and I'm certainly not going to tell you what mine looks like! But, let me pose this question: when you walk into an office and you see someone's desk, are you impressed with the professionalism of the person with a clean, well organized desk, or the person with mountains of disorganized, coffee-stained papers literally scattered from one side to the other? I view websites in exactly the same manner - what you are trying to show your viewer is "professionalism", and you won't do a good job of that if your pages are filled with clutter.

There are two types of clutter - graphical and text. I like to avoid the text clutter by placing a table in the page, centered and non-visible to the viewer (i.e., no borders), at a width of anywhere from 50% to 90% of the page. That way, there is some blank space to both the left and the right of your text, and your viewer is not overcome by words, words everywhere…

When I refer to "graphical clutter", I'm speaking of putting all those extra, although cute, little animations, stars, icons, and you name it all through the page. Further, I am speaking of non-continuity of graphics within a page - if you use a separator bar on a page, you should use the same one again in the page if needed, rather than selecting a different one. Continuity both within the page and within the website is a very strong method of producing a "professional and polished" appearance.

Text Color and Sizes

Again, take a look at a room you like. Do the walls contain red and blue, the sofa or bedspread fushia or green, the carpet purple, etc.? I hope not. If they do, stop reading… The appearance of the website should contain the same consideration in size and coloration an interior designer would give a room - use colors that GO together - select a main color, perhaps one or two complementary colors, and for Pete's Sake, STOP THERE!! If you want to make something stand out, try boldfacing it or putting it in capitals.

How do you use the different colors? Well, I use them for my links. I like to have one color for the main text, and a different color which complements my design for the link color. Do you know how to find the appropriate color numbers for use in HTML documents? My favorite resource is at Hype's Color Specifier - have a look!

Now, as far as how to use the colors as the LINK color? This is added to the statement. So, no matter if you have all kinds of other stuff already in there, you will want to add the following at the end before the final > symbol:

Link="#nnnnnn" vlink="#xxxxxx"

Where the n's and the x's are replaced with the appropriate six-character html color reference.

One more word about links: If you like the ones you may have seen that are a different color BUT are somehow NOT underlined, then add to your html, beneath the </TITLE> tag, the following:

<STYLE TYPE="text/css">
<!--
A:link, A:visited, A:active { text-decoration: none; }
-->
</STYLE>

I am almost in the same mindset over changing font sizes within a page. Once - sure, maybe have a larger font for your headers. But consistently? What's the point? Well, I can assure you the viewer will NOT get the point if you do it consistently, because you've removed one of the single aids for drawing attention to a topic with larger font size, and convinced the viewer that everything on the page is of equal importance. Another note on text sizes - refer back to the first section concerning viewer resolution - then, try viewing some pages that have multiple text sizes in the LOWER resolutions… my, my… they get SO big…

I am not in favor of pointing out something important with the underline feature, as that is associated SO strongly in the minds of viewers as the key indicator of a link, and therefore, confuses the viewer as an "emphasis" tool.

Animations

I've made animations - I have several animated buttons, stars and bars available within my own website for those interested in using them. I do not, however, use them myself, nor do I like them. Oh, perhaps the flying dove is nice, and a few others, but in general, I would like for a page to STAND STILL while I'm making my way through it. I don't care for the distraction that is produced by most animations.

All that said, there are many people that find my pages a bit boring, being void of flashy animations and so forth. Well, perhaps. But, I believe the vast majority view my pages as "professional pages" (I've even been asked for the URL to my "personal" site - that IS my personal site!!!), and that view would be distorted with distractions added in…




[Resources Index]





Design and Content Copyright © 1999 Teri Williams Carnright.
All rights reserved.