Evans-COS.com

Web Tips & Tricks

You must have come here for my ideas about web design and construction. I've been doing it a while; some of this is my subjective opinion. Other things are live-by rules I've picked up over time.

Some of this will be a repeat of tips you can find from other sources. For example, ever been to Vincent Flander's www.webpagesthatsuck.com? You'd also be educated and entertained by Bud Uglly. While I'm at it, check out Top ten mistakes of web design.

Before I start running down my own list of things to avoid, I'd like to mention the three categories I use while surfing the net. (listed in order of importance).

Content: A good internet page has something to say. Your site should be more than just electronic graffiti.
Navigation: A good web page provides an obvious, effective way to move around within the site.
Presentation: Third and least important, but still a criteria, is how the site uses graphics, color and sound to enhance the visitor's experience. If either of these, especially sound, is a distraction, your visitors are less likely to return.

So, having reviewed the 'big three' criteria for success, let me touch on the other areas that each web page should consider closely:

[Anim] [Basic] [Frames] [Graphics] [JAVA] [Maps] [Tables] [Valid] [Construct]

Animated GIFs: I like 'em, they're cute, I use 'em. But don't over use 'em. Animated GIFs, AKA GIF87, is somewhat more efficient than programming a Java applet to do your animation, but equally annoying. You can download free animated .GIFs. One of the best free collections I've found is at SS Animation. If you want to create your own animated GIFs, the GIF Construction Set is one tool I've used; you can find it at Alchemy Mindworks. As in all things, moderation is the key: show some discretion *grin*

[Top of Page]

Basic HTML: Learn HTML. No tough feat, you say? Take a look around, then. Some of our peers could not format their way out of a paper bag. There are dozens of HTML guides out there, one of the best: the NCSA page. If you need a brief list of valid HTML tags and their syntax, I keep Kevin Werbach's Barebones Guide to HTML at my side all the time.

[Top of Page]

Frames: Let's face it, frames are confusing. "But Jim!" you say, "You use frames on some of YOUR pages." That's true. I do. I think the way I use them is elegant. I stole this format, I didn't invent it. Some love 'em, some hate 'em. Some even formed The I Hate Frames Club to voice their frustrations.

[Top of Page]

Graphics: Good rule of thumb: more than 30k to 50k of graphics is just annoying. Ever been to a site that takes more than about 45 seconds to load? Ever go back? The Golden Rule of graphics on your web site: Always 'constrain' the size to actual image dimensions. That is, in your <IMG SRC=> tag, always supply WIDTH= and HEIGHT= parameters. Here's why: The client browser will load faster because it can allocate the space for your graphic, continue downloading the image, AND continue to display the text around and below the graphic! Your visitors can begin to read your page while your nifty images are loading. Saves time and helps retain your visitors, who might otherwise just surf on in search of something better. The Second Golden Rule is do NOT constrain the image to a (much) smaller size! The graphic will be the same file size, and will take just as long to load, whether you display WIDTH=100 HEIGHT=200 or WIDTH=10 HEIGHT=20!!! Trust me and remember this, it can make or break a web page.

[Top of Page]

Java: I know Java, and I've seen only ONE application I liked. Check out the ColorCenter, which Vincent Flanders refers to in webpagesthatsuck. But if you've got cool flickering colors at the beginning of your page, you need help. But everyone has a right, so if you want to try Java, you can download the Java Developer's Kit (JDK) at java.sun.com.

Javascript, on the otherhand, doesn't seem to crash as many browsers, and can be as useful as any Java applet you might come across.

[Top of Page]

Mapping: There are two styles of mapping: client-side and server-side. In client-side mapping, you provide the coordinates of each area in your graphic, and the client determines the URL. There's a fellow named Paul Sabatino who did a nice, useful JAVA applet to give you map coordinates (wow, that's two). In server-side mapping, you use special software to create a .MAP file and the server determines the next URL. Both have pros and cons. For server side .MAP files, there is a popular shareware software called MapEdit by Boutell.Com, Inc. For those techies out there, the NCSA Imagemap Tutorial. explains more on image maps and their implementation.

[Top of Page]

Tables: IMHO, one of the best, cleanest ways to format your page is through the TABLE tags. Use them, they are your friend. That's how I format my graphics on the welcome page. Like it? thank you, thank you. When you see a page you like, click on your browser's View, and then Document Source (or whatever commands your browser provides to see the raw HTML) to find out how the author layed out their page.

[Top of Page]

Validation: Don't you hate it when the site you visit isn't even clean HTML? Validate your HTML through services like Wilber webtechs

[Top of Page]

Under Construction: The internet, by it's very nature, is always in a state of change. Don't even bother to tell people that your site is under construction, because it always will be, and everyone should expect that. Especially don't use that cute 'under construction' gif as an excuse to have broken links, missing graphics, and major spelling & grammar errors. (mine are excused, however).

[Top of Page]

That's all for now. Hope I don't seem holier-than-thou. Check back later and I'll add more stuff, or drop me a note with specific questions.

[Anim] [Basic] [Frames] [Graphics] [JAVA] [Maps] [Tables] [Valid] [Construct]

signature

Evans-COS.com
Home About To Do Tips Toys Album
Web Tips & Tricks You must have come here for my ideas about web design and construction. I've been doing it a while; some of this is my subjective opinion. Other things are live-by rules I've picked up over time. Some of this will be a repeat of tips you can find from other sources. For example, ever been to Vincent Flander's www.webpagesthatsuck.com? You'd also be educated and entertained by Bud Uglly. While I'm at it, check out Top ten mistakes of web design. Before I start running down my own list of things to avoid, I'd like to mention the three categories I use while surfing the net. (listed in order of importance). Content: A good internet page has something to say. Your site should be more than just electronic graffiti. Navigation: A good web page provides an obvious, effective way to move around within the site. Presentation: Third and least important, but still a criteria, is how the site uses graphics, color and sound to enhance the visitor's experience. If either of these, especially sound, is a distraction, your visitors are less likely to return. So, having reviewed the 'big three' criteria for success, let me touch on the other areas that each web page should consider closely: [Anim] [Basic] [Frames] [Graphics] [JAVA] [Maps] [Tables] [Valid] [Construct] Animated GIFs I like 'em, they're cute, I use 'em. But don't over use 'em. Animated GIFs, AKA GIF87, is somewhat more efficient than programming a Java applet to do your animation, but equally annoying. You can download free animated .GIFs. One of the best free collections I've found is at SS Animation. If you want to create your own animated GIFs, the GIF Construction Set is one tool I've used; you can find it at Alchemy Mindworks. As in all things, moderation is the key: show some discretion grin [Top of Page] Basic HTML Learn HTML. No tough feat, you say? Take a look around, then. Some of our peers could not format their way out of a paper bag. There are dozens of HTML guides out there, one of the best: the NCSA page. If you need a brief list of valid HTML tags and their syntax, I keep Kevin Werbach's Barebones Guide to HTML at my side all the time. [Top of Page] Frames Let's face it, frames are confusing. "But Jim!" you say, "You use frames on some of YOUR pages." That's true. I do. I think the way I use them is elegant. I stole this format, I didn't invent it. Some love 'em, some hate 'em. Some even formed The I Hate Frames Club to voice their frustrations. [Top of Page] Graphics Good rule of thumb: more than 30k to 50k of graphics is just annoying. Ever been to a site that takes more than about 45 seconds to load? Ever go back? The Golden Rule of graphics on your web site: Always 'constrain' the size to actual image dimensions. That is, in your <IMG SRC=> tag, always supply WIDTH= and HEIGHT= parameters. Here's why: The client browser will load faster because it can allocate the space for your graphic, continue downloading the image, AND continue to display the text around and below the graphic! Your visitors can begin to read your page while your nifty images are loading. Saves time and helps retain your visitors, who might otherwise just surf on in search of something better. The Second Golden Rule is do NOT constrain the image to a (much) smaller size! The graphic will be the same file size, and will take just as long to load, whether you display WIDTH=100 HEIGHT=200 or WIDTH=10 HEIGHT=20!!! Trust me and remember this, it can make or break a web page. [Top of Page] Java I know Java, and I've seen only ONE application I liked. Check out the ColorCenter, which Vincent Flanders refers to in webpagesthatsuck. But if you've got cool flickering colors at the beginning of your page, you need help. But everyone has a right, so if you want to try Java, you can download the Java Developer's Kit (JDK) at java.sun.com. Javascript, on the otherhand, doesn't seem to crash as many browsers, and can be as useful as any Java applet you might come across. [Top of Page] Mapping There are two styles of mapping: client-side and server-side. In client-side mapping, you provide the coordinates of each area in your graphic, and the client determines the URL. There's a fellow named Paul Sabatino who did a nice, useful JAVA applet to give you map coordinates (wow, that's two). In server-side mapping, you use special software to create a .MAP file and the server determines the next URL. Both have pros and cons. For server side .MAP files, there is a popular shareware software called MapEdit by Boutell.Com, Inc. For those techies out there, the NCSA Imagemap Tutorial. explains more on image maps and their implementation. [Top of Page] Tables IMHO, one of the best, cleanest ways to format your page is through the TABLE tags. Use them, they are your friend. That's how I format my graphics on the welcome page. Like it? thank you, thank you. When you see a page you like, click on your browser's View, and then Document Source (or whatever commands your browser provides to see the raw HTML) to find out how the author layed out their page. [Top of Page] Validation Don't you hate it when the site you visit isn't even clean HTML? Validate your HTML through services like Wilber webtechs [Top of Page] Under Construction The internet, by it's very nature, is always in a state of change. Don't even bother to tell people that your site is under construction, because it always will be, and everyone should expect that. Especially don't use that cute 'under construction' gif as an excuse to have broken links, missing graphics, and major spelling & grammar errors. (mine are excused, however). [Top of Page] That's all for now. Hope I don't seem holier-than-thou. Check back later and I'll add more stuff, or drop me a note with specific questions. [Anim] [Basic] [Frames] [Graphics] [JAVA] [Maps] [Tables] [Valid] [Construct]
Jim Evans © 2004