While you're here, subscribe to my RSS feed. Thanks for visiting. Be sure to come back!

Too "Cool", or not Too "Cool"
Note: This article is part of the free eBook, "Take My Tips … Please!"

Webpage Design Tips

Don’t put up a site that takes forever to load. No one will stick around and wait. Here are some of our tips for your webpage design to help make it load, easier to read, and one people will want want to stay at for a good look (A must if it’s a business site).

1. The "Cool" site: You see them all over the Web. There’s even 100’s of "cool site" awards. But, to us, "cool" is another way to say slow. With all the sounds, graphics, java, video, add-ons, and more that have to load — well, you get the idea. If you are trying to sell something, you’re going to lose the customer before your site loads, so:

• Unless you’re a radio station, or selling cd’s, lose the sound. Waves, midis, and the like can be large files. They can take a long time to load, usually contribute nothing to your page, and probably isn’t the type of music your viewer likes anyway. I like "Ride of the Valkries" by Richard Wagner, but you probably don’t.
• And, let’s not forget the copyright questions. You might want to play a clip by Elton John, or maybe even Meat Loaf. But, you don’t own the rights to their music. Publishing on the Web is the same as publishing a printed book, or an audio tape, or CD. Don’t violate copyright law just because others do, unless you are asking to be sued. Remember Napster™? In case you haven’t noticed, the law has started paying attention to the Internet. A lot of attention.

2. Use graphics wisely. A picture may be worth 1000 words in a newspaper — but on the Web, 100,000 words may load faster than one picture. Not to mention the millions of people who surf with their browser set not to load large graphics, because of speed considerations. What should you do?

• Make your graphics as small as possible (both size and resolution) and still be viewable. If you must have large pictures in order to show a product, then use thumbnails. These thumbnails can load into your main page fairly quickly. They will be small, but still show what needs to be shown. Then, when the thumbnail is clicked on, a larger version of the picture is shown (on a separate page if coded with the "target=blank" attribute in the <A HREF> tag).
• If you don’t like thumbnails, then crop the big picture. Show only a part of it on your main page. Then, when it’s clicked on, the whole picture loads. Another thing to do if you choose cropping instead of thumbnails is to reduce the number of colors. You might have a picture with 16 bit (1,000,000’s of colors). You can reduce these pictures to 256 colors without losing too much - usually. This reduced color picture results in a much smaller file size, and faster loading.
• Use the "height" and "width" attributes of the <IMG> tag when coding your page.

  <IMG SRC="graphic.gif" HEIGHT="31" WIDTH="88">

  Or, if someone does the webpage design for you, make sure they use Them. This way, any browser newer than Netscape 2.x or Internet Explorer 2.x will know how much room the graphics will take. As a result, the text can load & be displayed while the graphics are loading, because the browser knows how much space to leave for the graphic. Your viewer will be able to start reading your information instead of waiting around.

• Use the "alt" attribute of the <IMG> tag when coding.

  <IMG SRC="graphic.gif" ALT="description of the picture" HEIGHT="31" WIDTH="88">

  This way, even if someone has their browser set not to load graphics, a short text description will appear in its place. Make sure what you say is relevant to the picture because it could still be clicked on if you give a good description.

3. Put as few graphics as possible on your main page. As the viewer follows links to other pages on your site, they begin to get a better idea of what they are in for. If a person clicks a link that says "see our new model widgets", they should expect pictures of them. Then they may wait for the picture to load. But, still make the pictures as quick loading as possible.

Let’s also remember copyrights also apply to graphics and photographs. If you are not the designer of the graphic or the person who took the photograph, be sure you have permission (in writing) to use it.

4. Java. It’s one of the hottest items on the Web today. It has been for several years. But, we usually surf with Java turned off, then turn in on only when needed. Why, we got tired of poorly written programs crashing our browser. And, even more giving us a continual string of javascript errors. We’ve often wondered why people use a java script in their webpage design that doesn’t work. Maybe they never test it.

And, some people still have older browsers that don’t support current versions of Java. Although this number is continually growing smaller. Probably, less than 3%. Anyway the point is, don’t make your site too dependent on Java. If you do, some folks will never see it.

5. What can we say about videos? There’s way too many different formats. most people won’t have the software to view the format you choose. And, if they do, will they wait for a 2MB (or more) file to download. Also if you have a standard deal with a web host, a couple of videos may take up most of your allotted server space.

Even as fast as computers are getting now, it’s still the speed of the Internet connection. And, most of them are still slow (by state of the art standards). It’s not safe to assume that most people are connected with DSL or ISDN, cable,or whatever, even if that speed is available. Most of our viewers are still connected at 56.6. And, so are we.

6. Flash! No, I’m not talking about dirty old men in raincoats. I don’t use a superfast connection, just 56K BPS most of the time. 28.8 BPS on my second computer. And, even on my 56K BPS modem, I can still wait 10 minutes (or more) while the browser displays, "Loading Flash." Want to bet if I stick around for that long, or just hit the stop icon and move on?

And, sometimes I use a browser without the Flash™ add-on (my second computer). Think I’m going to download it just to see some fancy presentation I don’t need. And, most of your visitors won’t either.

Now, if you’re just running a site where you expect your visitors will stick around that long, fine. But, if your running a sales page or information page - there’s just too many other places your visitor can go.

7. Since we just mentioned not having the software to view your video or Flash ™, let’s talk briefly about add-ons. There’s hundreds of good add-ons for the popular web browsers. But, fact is, most people have few of them. If any at all. Don’t put something on your site that is dependent on an add-on (unless you are the person who is selling the add-on).

Note: If some of what’s written in this first section sounds kind of cynical, it was meant to. The truth is, some of us get so overtaken with the newest and best technology, we forget one basic fact. Not many people have the newest and best. Some people still surf with 28.8 modems hooked up to 386 processors at 30 Mhz. Of course, most of these computers should be paperweights. But, you have to allow for millions of antique (last years’) machines.

The time for your website design to be coded in HTML 4.0 is about the time HTML 5.0 becomes standard. The time to assume most people have Netscape or Internet Explorer 7.x is when they introduce version 9.x. Most of the world is at least one generation behind the newest. Whoever said "less is more" wasn’t talking about the web, but they should have been.

On a personal note, I use the newest Netscape, Internet Explorer, and Firefox because I need to see what something looks like on the new stuff. But, almost everything I code for my pages will work on versions 3.x. And, those versions didn’t crash on me a few times a day. If it weren’t for having to keep up with the new stuff, I’d probably be using Netscape 2.5. It did everything I need a browser to do, and fit on two floppies.

8. I’ve Been Framed: When frames first came out, lots of sites, including ours, started using them. Very quickly, we learned a few things about frames:

• They take longer to load than pages without frames. This is because you are essentially asking your browser to load multiple pages at once. To make matters worse, most programmers code the side, top, and bottom frames with graphic links. These graphics slow things down even more.
• They are confusing for many people to navigate. This includes us, and we’ve been on the web 100’s of hours a month since 1995. It’s difficult to navigate sometimes because it’s hard to tell which is the active frame. And, the back button rarely takes you where you expect to go.
• Some frames won’t let you out. When you’re through at their site and hit your bookmark to go to the next site — you are still in the frame. Sometimes the only way to get out is to shut down the browser, and re-load it.

  This is a controversial subject to some people because they swear by frames. But, in our opinion, if you want a site that is easy to navigate — stay away from frames.

9. 640×480x800×600x1024×768 - What these numbers are, are the most used screen resolutions on monitors. Which one do you design for? If your monitor is 800×600, and your site looks great on it - it may be too big to fit a 640×480 screen without having to scroll left & right. Our stats show most of our viewers are using the largest resolution, but be on the safe side and design for a 800×600 monitor. Your page should be acceptable on the other sizes.

10. Let me console you: All of us have seen the pop-up (or pop-under) consoles you get on some web sites. Some of the biggest free web space providers insist you have their console attached to your site. This is where they put the ads that pay for your free site. Other times, commercial sites pay you to put their console on your page. It’s hard to escape the consoles — but try. The only time I would recommend putting a console on your website is if you have absolutely NO CHOICE. This is because:

• They slow down your web page because you are essentially asking your surfers to download two or more pages. We’ve been at a site that loaded up six different consoles. Question. Would you ever go back to that that site?/B>
• Almost all consoles are ads for something your surfer does not want to see. They will close the consoles as soon as they see them, if they can.
• Some consoles are hard to get out of. They are programmed to open up a second console when they are closed. Then that console opens another, and another, and another… Some sites open consoles faster than you can close them. Once, we had twenty-seven consoles opened on one web page. We gave up trying to close them & just re-booted the computer.

The only decent use of a console we’ve ever seen was on the Star Trek® home page. (OK, I’m a trekker) They use one as a navigation tool. Unless you are using a console like this, don’t use them.

11. Size matters when you’re waiting for a web page to load. Keep the size of your pages small. Instead of having one page that takes a few minutes to completely load, split it into 3 or more pages. Use logical places to split the pages, and use clearly marked links to go to the "next page."

12. But, how do I get there is a question your visitor should never ask themselves. In your webpage design, be sure your pages are well linked to each other. Each page should give a link back to your home page. Your home page should link to each major section of your site. In addition, pages in your site can have links to the major section as well.

You can have these links in several ways. Text links can be seen by everyone & they load fast. Graphic buttons can be very appealing if they are done correctly. Keep the size small and have them very clearly marked as to what they are. Use the same buttons on each page if you can. This way, they are already loaded, and won’t slow down your page’s loading time.

Until next time,

Subscribe to the DanJan Associates eZine and get some great information, and qualify for bonuses.