Category Archives: 1890

10-Minute Homepage Tune-Up by Dan Thies

Is your site’s home page search engine friendly? Think so, eh? The vast majority of websites, even those belonging to Fortune 500 companies, are far from optimized.

I use a simple four-step process to find the most common errors. Using this to do a quick tune-up on your homepage takes about 10 minutes, and it will pay off for years to come.

Step One: Identify Your Keywords

The first step, and often an overlooked one, is deciding which keywords and phrases you’re targeting with your home page. What you want to identify are the 4-7 top keywords or phrases that you will use on your homepage.

Step Two: Keyword Placement Review

Once you know which keywords you’re targeting, pick the most important 1 or 2 keywords or phrases, and make sure they’re loaded into the right places on the page.

– TITLE tag: keyword phrase/more keywords if possible

The optimal title tag starts with a keyword or keyword phrase, followed by a vertical bar (should be above the Enter key), then as many more keywords as you can work in. Limit your page titles to 5-8 words if you can. Make sure your page title still makes sense to someone who reads it, because search engines will display the title in your site’s listing.

– META Description & Keywords

Your top keyword or phrase should appear as early as possible in these tags – “Welcome to…” is not the right way to do it! Your Description still has to make sense, since many search engines will display it in your site’s listing.

– H1 or H2 Heading

The first text on your page should include your top 1 or 2 keywords or phrases wrapped inside of an H1 tag. In addition, I like to work my other keywords into H2 headings (2-3 of them) farther down the page.

– First Paragraph and Body Text

The first paragraph of text should include your top 1 or 2 keywords, as early as possible, preferable within the first few words. Additional keywords can be worked into the rest of the text, under the H2 heading where they appear.

– Hyperlinks

For best results, all of your top keywords should appear in hyperlinks on your home page, leading to internal pages on your site. If you use images for your navigation links, use the ALT property of those images to contain the appropriate keywords for that link.

– Closing Text & Site Map

If it makes sense to have your top 1-2 keywords appear again at the bottom of the page, use them again here, but don’t make nonsense out of your homepage over it. If you have a site map, put a text link to it at the bottom of your page.

– Page Size:

Your home page should be as small as possible. Move any Javascript or CSS you’re using into external files, and do what you can to move your important keyword content toward the top of the file. Using layers instead of tables for layout makes the latter task a lot easier.

Step Three: Check Your Links

It should go without saying, but you should check every link on your homepage to make sure it’s working and active.

Step Four: Validate Your HTML

Finally, run your homepage through an HTML validator. Invalid HTML can make it impossible for the search engines to read your page correctly. Here’s a link to an online validator you can use for free:http://www.htmlhelp.com/tools/validator/

There you have it – ten minutes to a higher ranking homepage! I wish you success…

Dan Thies is the author of “Search Engine Fast Start,” a concise, step-by-step guide to search engine positioning for the beginner to intermediate level webmaster – available now at http://www.cannedbooks.com For the free weekly “Search Engine Optimization 2001” newsletter, send a blank email to subscribe@cannedbooks.com

Defenses Against Hackers by Roy Troxel

We’re not talking about script-kiddies here. You know, the fourteen-year-old kids who can slip little programs into you server that leave obscene messages on your web site?

We’re talking about dedicated criminals, mean-spirited ex-employees, organized crime – these guys are going after the big enchilada. They want to take down defense systems, banks, brokerages, and corporations. These are the kind of guys that hacked Amazon and Microsoft.

They’re also the kind of characters that divert electronic funds transfers.

Or maybe they work on a smaller scale. Maybe they just go after small business. If they go after enough of them, then they make money. One thing they all have in common is patience.

In this article, I’ll try to explain briefly ( a few sentences) how various hacking methods work so that you can learn to recognize them. For the more technically-minded, I’ve included several web references that contain more detailed explanations. Please remember that the methods you use to locate hacking attempts on your system are similar or, in some cases, identical to the methods used by the hackers themselves. But that’s how you catch the crooks sometimes: determine what their methods are, and then proceed logically as they would, step-by-step.

Sources of Information:

So how do you defend yourself against such attacks as Denial of Service, spoofing, sniffing, and password theft. This article is intended as a guideline to several methods of protecting your servers. There are other more detailed sources, such as “Counter Hack”, an excellent manual on hacker defense strategies by Ed Skoudis, as well as the following websites:
www.sans.orgwww.eeye.com www.securify.comwww.atomictangerine.comwww.cert.org

I’ve tried to limit the site references to “safe” ones. There are numerous sites on the ‘net, set up by and for hackers. Professional security experts often visit these sites to download hacker software. Don’t do this unless you have taken a number of precautions. Many of these sites will record the IP addresses of all visitors, and these aren’t the kind of people who should have that kind of information! If you’re interested in investigating these sites, or even downloading their software to become familiar with hacking methods, set up a separate “lab” network and use a different ISP than you use for your professional network.

Let’s now discuss the number one defense against hackers:

Plug up Those Ports!
We all know what ports are, right? Those spaces in computer programs set aside for input and output of data. The operating systems Windows NT and 2000, for example, each have 65,535 ports. They are used by Windows to perform numerous tasks, most of them invisible to the user. Some of the ports however, are visible to the user, and are called “well-known” ports. For example, the default port for the HTTP protocol is 80. For example, if you’re running MS Internet Information Server as your web server (or, for that matter, Apache), then you will probably use port 80 for the input and output of data to your site.

Now, there’s nothing that says some hacker couldn’t use that same port for input and output of data, only in the hacker’s case, the data could be a virus or a Trojan Horse. (We’ll discuss the ways that this can be done later.) One defense against someone entering your server through port 80 is to run your web site from a port that is not “well-known”, like, say, port 5555. If you do this however you will have to notify your visitors to enter your site through that port. So the URL would look something like this:
www.yoursite.com:5555

Now suppose you aren’t running a site on your server; i.e., you’re just using it for a gateway. In that case, there’s no need to have either port 80 or the HTTP service running at all! So, just shut it off. The same goes for FTP, Telnet or any other service that you don’t really use.

Protect Passwords, Logs and Accounting Files

If hackers can reach the files and folders containing your users’ passwords they can be copied (by FTP or Telnet, for example) to the hacker’s PC and then decoded. A similar situation exists with accounting files in which file permissions are set (give name of file in UNIX and Windows), and logs which record the files that users access or services that the server runs. All of these tidbits are pieces of a puzzle to the hacker, enabling him to build a total picture of your network.

This defense here consists of initiating a strong password policy for your users and making sure, via memo or email, that users are aware of the dangers of password cracking and should follow the policy to the closest letter. The more sensitive the information the users work with, the more stringent the policy should be.

Hide the password database:

This is located in the \SYSTEM32\CONFIG directory of the Windows 2000 server. In UNIX or Linux it is in /etc/groups or /etc/passwd.

Conduct your own password – cracking tests with software like L0phtCrack. This can be purchased at the following site:
http://www.sunbelt-software.com/

Other authentication methods, like voice recognition or security cards, can be used for highly confidential information. Or you can store your password files and logs on write-once CD-ROMs.
Make your important files difficult to find, using the .htaccess directory. (UNIX machines do not see files or directories preceded by a dot.) (Hiding files works both way, of course. Both the attackers and the attacked can hide files. If you think that hackers have left hidden files on your servers, use file-integrity checking software to locate hidden files.)

Windows’ checks and balances:

Like the US legal system, Windows NT/2000 security is based on a system of checks and balances. NTFS file properties, user properties and account properties can override each other, if not set properly. This can create confusion in the mind of the systems administrator: “Why am I denied access to this file, when I know it’s part of the Administrator group?”
Well, it’s because the file properties themselves are set to “Access Denied”, and that overrides everything else. “But how did THAT happen??” Well, someone hacked into your system and changed the permissions!

Conclusion: Permissions for Users and Permissions for Processes must both be monitored.

Beware of Denial of Service (DoS) attacks!

Denial of Service attacks have become very popular with hackers during the past few years. They’re relatively easy to perform, for one thing. The most basic kind of attack consists of repeatedly pinging a server’s IP address, until the server stops under the burden of having to reply to so many requests.

A more sophisticated form of this attack includes the creation of “zombies.” These are servers or workstations that have had special communications software installed on them, by stealth. The software enables the hacker to communicate with machine and order it to begin executing pings to a specific server.

Let’s suppose that the hacker has created a team of zombies by installing his communications software on eight servers, located on the internet. He now has eight servers at his command, and when he executes his order to each server to begin pinging, say, a server or servers on a large corporate network, you can bet that they will come down very swiftly! And, because the attacker has used servers randomly located on the ‘net, it will be difficult to find the perpetrator of this attack.

There are several lines of defense against DoS attacks, but they can be expensive. You can purchase wider bandwidth from your ISP. This can extend the length of time it takes for your server to crash during an attack. Or, you can sign up with multiple ISPs and create redundant paths to them from your server(s).

The second line of defense is simply to have a rapid incident response set up with your ISP. This way, you can notify your ISP immediately when any server slowdown or other intrusion is detected.

Copyright 2002 (c) Roy Troxel, All rights Reserved. Roy is webmaster of Cyber-Routes, an online newsletter for Internet professionals, specializing in issues about web design and web security. You can also receive Cyber-Routes weekly by email by subscribing from our home page at http://www.cyber-routes.com

How to Avoid Sloppy Web Site Copy by Herman Drost

If your web site visitor can’t find the information on your web site, within 10 seconds or less, you will lose them. Two of the largest factors that contribute to this, are the lack of clear purpose and poor layout of your web pages.


Let’s look at how you can resolve each of these issues.


Lack of clear purpose – the first page of your web site must have a clear title and description, which immediately states what your site is about. (if you need help to determine the purpose of web site, read: “How To Build A Web Site That Sells”: www.isitebuild.com/buildingA.htm)

You must include a clear benefit of your product or service in your description. For example if you are a web design company, your title may be “How to Build a Web Site That Sells”. Your description may be something like: “Let us save you precious time and hassles, by designing a professional web site that WILL sell your product or service”.

In this example, you have stated the clear purpose of your website (designing professional web sites that sell) and given your readers a clear benefit (saving time and hassles). The rest of your web page, should support the title and description of your web site. Continue to emphasize the benefits of your product to your visitors. You should conclude your copy with a call to action eg “click here to order”.

Layout of Your Copy – you may spend a lot of time and money, to attract visitors to your web site, but if you have a poorly designed web page, then visitors will become frustrated and leave.

1. Alignment – There are 3 kinds of alignment for your web page – left side, right side and centered. Choose one, then use it on the entire page or even throughout your other web pages.

Don’t try to mix alignments, because this will make your web page look unprofessional. One such example, is to align all the text on your page to the left. This will create a strong edge and make it easier for your visitors to navigate and read. Avoid bumping up your text to the navigation bar or graphics. Create an equal amount of space between all the elements on your page. If they are bunched up, it will create a cluttered appearance.

2. How To Use White Space – Visitors do not appreciate useless clutter and masses of content on Web Pages. Most users prefer a page with well distributed content resulting in less clutter.

Users quickly scan pages and the more that they must scan through, the more information they will miss. This does not mean you should not provide a lot of information. Just do not provide it all on one page. Each page should contain approximately 50 per cent less text than a printed version of the same information. If you have a lot of copy on your web site, try to have only 4-6 sentences per paragraph. Split the page up into different topics, with the subject title close to the accompanying text.

3. Repetition – each page of your web site should look like it belongs to the same web site, the same company and same concept. For example, navigation buttons, colors, style, illustrations, format, layout can all be part of the repetition that unifies the entire site.

4. Contrast – this is what draws you into the page and pulls you in. Pages that just have all text and no graphics, or vice versa and have no contrast can be very boring (unless it is an article or book). If elements on your page, such as type, rules, graphics, color, texture, are not the same, make them very different. Be aware of what you want the visitor to focus on. What will be the first thing that a person will be attracted to when that person first enters your site? If your site is not well organized, it will be difficult for your visitor to find what he is looking for.

5. Graphics – graphics should be used to illustrate the benefit of your product (this is why there is the popular saying, “a picture is worth a thousand words”). You should use them to enhance the experience of your visitor. If it does not have a clear purpose to be there (other than just to have a pretty picture on your site), don’t use it.

6. Spelling and Grammar – bad spelling and grammar can destroy the professional effect of your web site. Don’t just use the spell checker for correcting your copy. Read through it yourself several times or get a friend who is a proficient proof reader to check your work, before you launch your site for the world to see.

With a clear purpose and layout to your web pages, your visitors will easily find the information they are seeking, rather than your competitors. Doing this, will help to increase sales from your web site.


Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com Free Consultation for Site Design Hosting from $30/year http://www.isitebuild.com) Subscribe to the “Marketing Tips” newsletter for more original articles. mailto: subscribe@isitebuild.com

Defenses Against Hackers – Part 2 by Roy Troxel

This is the second general article on hacking techniques which all webmasters and sys admin’s should recognize. Let’s look at a few more “classics”:

The Trojan Horse

The name of this technique comes from a Greek legend describing a covert operation in which an army of Greeks delivered the gift of a giant wooden horse to the citizens of Troy. The Trojans hauled the huge monument to a position inside their city walls. When night came, however, a platoon of soldiers exited from the wooden horse and went about their way plundering and slaughtering throughout the city.

Modern-day hackers perform similar ploys to get their insidious code for viruses and other hacking tools into the confines of your firewalls and servers. One method that works frequently is to have a user download an executable file that has been disguised as an update patch, new game, or animated graphic. When the user installs the program, he is also installing the hacker’s software. The hacker’s code is embedded in the program’s executable code.

Back Door Man

Very often, Trojan horses are used to install back door software. This software works on the same principle as popular communication software, like PCAnywhere. The basic code permits the user to take control of the monitor, keyboard and mouse services. The most popular of these underground programs is Back Orifice, which is free to download if you go to their site, as many hackers do. (If you’re interested in investigating these sites, or even downloading their software to become familiar with hacking methods, set up a separate “lab” network and use a different ISP than you use for your professional network.)

So how do you stop this action?

For one thing, back door programs can be detected by anti-virus software, so be sure to update your anti-virus on a regular basis.

Don’t download unknown programs from unknown vendors or from email messages.

Configure your browser not to allow Active-X programs to download. It’s very easy to add hacking modules to Active-X code.

If you’re a systems administrator, educate your users about the above methods for back door protection.

Attacking Web Sites and Web Applications

Web sites, especially those containing applications shared by several users on an intranet, or web sites with forms to fill out, or other data to be entered, can be vulnerable to hacking. If a visitor can enter the requested information, he can also learn how your web site collects data. Sometimes the web page information that appears in the URL bar (the information after the “?”) can reveal things about your software or server.

The solution? Don’t trust raw user input. Filter user input data. Numerical user input data should be only numbers, for example. All other characters should be filtered out.

Some General Defenses:

All of the hacking software mentioned above is extremely noisy, sending millions of packets to and from your server. This activity can be detected by IDS (Intrusion Detection System) software; at which point, the systems administrator can be warned by an email, pager or some other means. The IDS has a database of attacks signatures, which it matches with the packets it is receiving.

Never telnet to your firewall, routers, etc. This makes it easy for attackers to intercept your password.

Use switches instead of hubs to control flow of packets.

Use the latest patches provided by your OS vendor.

Copyright 2002 (c) Roy Troxel, All rights Reserved. Roy is webmaster of Cyber-Routes, an online newsletter for Internet professionals, specializing in issues about web design and web security.You can also receive Cyber-Routes weekly by email by subscribing from our home page at http://www.cyber-routes.com

How to Choose, Register or Transfer a Domain Name by Herman Drost

Every professional business should be keeping up with the demands and needs of its customers, if it is to survive. One of the essential tools of any business these days is to have a professional web site. This begins with choosing and registering a domain name that will clearly identify and brand your business online for many years to come, so you need to choose wisely.

How to choose a domain name:

1. If you want your web site to have an added advantage in the search engines, think of a domain name that includes keywords visitors would search for in the main search engines.

2. Make a list of all the possible names that would suit your business (i.e. isitebuild.com contains resources for building your own web site or getting one built). Use www.nameboy.com for researching domain names. NameBoy will generate domain names based on the keywords you enter. If the dotcom name you want is not available, create a longer name that describes your business or use names that include hyphens (i.e. ihost-websites.com)

3. If possible, keep your domain name short so it is easy to spell and easy to remember. Take into account someone may remember the name but forget there is a hyphen in it – you then miss out on those potential customers.

4. If the dotcom name is not available, try the other new abbreviations such as .BIZ .US,.INFO, .TV. These are not as popular as .COM, however you may get closer to the name you want.

How to register a domain name:

1. Any company that sells domain names must be registered and accredited with iCann – The Internet Corporation for Assigned Names and Numbers (http://www.icann.org). You can get a domain name for under $10 from Godaddy.com. Read carefully what’s on their site as you go through the registration process. It’s easy to inadvertently sign up for other services you don’t need.

2. Register your domain name in your own name, not someone else’s. Sometimes your host may do this for you. This could cause you problems in the future, should you decide to transfer your domain to another hosting company.

3. Renewal – you have had your site on the Web for a year, sales are pouring in when suddenly, your site disappears – it won’t show up anymore! What happened? Well, you forgot to renew your domain name. Hopefully this will never happen to you! When you sign up for a new domain name, make sure your domain name registrar will send a reminder when your domain name is about to expire.

4. When asked about DNS server (domain name system) or Name Server information, insert your Primary Name Server and Secondary Name Server information – ask your future Web Hosting service for this information, if you don’t have it handy. If you haven’t chosen a Web Host, then park your domain name with your domain name registrar (this is a temporary location to store your domain until you are ready to have it hosted).

How to transfer a domain name:

There may be couple of reasons why you would want to transfer:-You parked your domain name and have now found a Web Host to upload your site to.-You are not happy with the service or are paying too much for your current web host and want to switch to another.
For an in-depth discussion on how to transfer a domain name or transfer your web site to another Web Host, read my article “How to transfer your web site to another host without losing it” http://www.isitebuild.com/hosttransfer).

A Great Tip for registering several domain names. Since domain names are so cheap these days (they used to cost $35/year), you can afford to own several domains and host several web sites. Most small sites use less than 5MB of hosting space, so you can host several sites for a small price. (i.e. www.isitebuild.com/sitehosting.com)

What are the benefits of doing this? Linking each of these web sites together and submitting them to the search engines will increase your sites search engine rankings. It will also broaden the places visitors can access your business. Generating a continuous traffic flow leads to more sales. You have now implemented and solved one of your crucial marketing strategies.

Copyright 2002 Herman Drost. Herman Drost is a Certified Web Site Designer, owner and author of iSiteBuild.com Low Cost Hosting from $30/year http://www.isitebuild.com/sitehosting) Subscribe to his “Marketing Tips” newsletter for more original articles. mailto:subscribe@isitebuild.com. Read more of his in-depth articles at: www.isitebuild.com/articles

How to Create an Effective Web Site Navigation Structure – Part 1 by Herman Drost

A ship captain traversing the open seas without a good navigation system will surely get lost. Maybe he’ll strike sharp rocks and his ship will sink. A visitor who arrives at your site and can’t navigate it for the information they seek, will surely get lost also and leave in frustration. Your ship (your web site) will also sink if this continues to happen.

Good site design means a good navigation structure for your web site. This means the visitor can find the information with ease.Put yourself in the shoes of your Grandmother. Would she quickly and effortlessly be able to find the information she wants, or know what to click on to make the purchase? Don’t think that just because it is easy for you, it will be easy for others. Visitors should not need to click more than three times during their navigation, to find the information they are searching for.

1. Navigation Styles
These can range from navigation buttons, navigation bars,plain text links, fancy animated graphics or drop-down select menus. You can also use illustrations, photographs or graphic images to show your visitor around. For example, an image map contains one graphic with different “hot spots”(invisible buttons) that link to other pages.

2. Primary and Secondary Navigation
Primary navigation consists of the navigation elements that areaccessible from most locations within the site. Secondary navigation elements allow the user to navigate withina specific location. For example, many sites have a page thatoffers information about the company. The primary navigation element may be an About Us link.

Once the user arrives on the About Us page, there will be otherlinks (secondary links), which navigate within the About Uspage. These could be links to Press Releases, Corporate Locations,Investor Information and so on. These links are secondarynavigation elements because they are relevant to the About Us page but not the other pages of the site. Therefore, these links will not be found in other areas of the site.

3. Guided Navigation
This is a popular technique, in which you guide the visitorthrough your site. Links are provided for the next step and establishing links that keep the users on track continues the process. These links should supply the necessary information, as well as an alternate course clearly marked toallow the visitor to exit. For example, an online purchase should lead the user through shipping information, then onto payment information, then to receipt information.

4. Creating a Navigation Action Plan
Determine goals and needs of your audience. Decide what the purpose of your site is and who your target audience will be. For more in-depth information on this subject visit: “How to Target Your Customers and Put Them in a Buying Mood” (www.isitebuild.com/target.htm)

Learn from navigation that works. Visit several successful sites that show good navigation e.g., Fedex.com. These sites show good navigation planning. Generally, good navigation includes several characteristics:
Offers easy to learn elements
Remains consistent
Provides feedback
Appears in context
Offers alternatives
Provides clear visual messages
Offers clear and understandable labels
Remains appropriate to the site’s purpose
Supports visitors goals and behaviors

Providing feedback has the biggest impact on users. Navigation should tell people, where they are and if possible, where they have been. Visitors should also be able to easily determine linked or clickable material. They need to know whether they successfully made a purchase,conducted a search, or completed some other task.

Navigation that allows visitors to find information easily and quickly will contribute to your web site’s success. Ask your grandmother (or someone who is not familiar with the Web) to navigate your site. If they can find the information they want within 3 clicks, your navigation structure must be a success.

Congratulations! Part 2 of this article will show “How to Design Your Navigation Structure and Common Navigation Mistakes to Avoid”.

Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com Web Site Design and Low Cost Hosting(http://www.isitebuild.com) Subscribe to the “Marketing Tips” newsletter for more originalarticles. subscribe@isitebuild.com

How to Create an Effective Navigation Structure for Your Site Part 2 by Herman Drost

Searching for information on the Web has recently become like a mine field. You find the site you want, only to be greeted by pop-ups when you enter, pop-ups when you are on the site and pop-ups when you leave. Other sites use a flash introduction, make you wait several minutes (which feels like hours), until the page finishes loading. Heck, you just want to find the information as swiftly as possible without having to watch out for these mine fields.

A fast and simple navigation structure is essential for a successful web site. Visitors must have a good experience at your site, if you want them to return. How to design your navigation structure:

1. Sketching it out. Part 1 of this article, discussed the different navigation styles and a navigation action plan. Now let’s begin sketching out your site. Take one sheet of paper, draw a circle in the middle – this is the subject of your homepage. From there, draw branches, which have more ideas about your topic. If any topics are related in a more definitive way, create another branch off the current idea branch. Within minutes, you will see your web site develop into a dynamic sketch. You might find that a standard sheet of paper is not enough to contain all your thoughts. Use more paper, create more branches, and keep the ideas flowing.

Once you have sketched out your site, use separate sheets of paper for each web page. Make sure you define a heading for each page and decide how it links to the other pages. This exercise will help you to decide how you want visitors to navigate through your web site.

2. Which navigation style? This could be a navigation bar across the top, a navigation bar on the left (the two most common styles), or an image map (an image divided into separate links to other pages). If you use graphical icons or other graphics instead of text, then include the text links elsewhere on your site. This is because some people browse with their graphics turned off and this technique allows them to still see and use the links.

3. What colors should you use? If you have a dark background, with dark graphical icons or text, your links will be invisible. When using rollovers (links that change color when you move the mouse over them), be careful that the color of the changed link will not disappear, in case your visitor wishes to return to that link.

4. Navigation alignment. Some sites have the navigation icons or text links lined up against the side or top of the page. Leave an equal amount of space on either side of your navigational links and make sure they are aligned with each other.

5. Repetition and consistency. If the visitor has to search for the buttons on every page, or if the links have different words, techniques or icons, they get annoyed. Don’t you? Navigation elements from page to page should be repeated and consistent throughout your site. If a visitor sees a navigation system on every page, it will add to familiarity and orientation.

6. Check your links. Have you ever followed a navigation link, only to find you can’t get back to the home page? You may have clicked on a link, only to get a page error – the page does not exist! Particularly if you have linked to a web site outside of your own. With time that site may have disappeared or changed its address. Make it easy for your visitor to find their way around your site, by testing out where your links go and that each of them work. You should do this periodically to avoid the problem of dead or broken links.

7. Testing your navigation structure. You’re overjoyed that your site is finally finished, so you tell all your friends and family about it. They politely say it is great, but ask you what it is about and how can they find their way around. Once completed, you need to step back (go outside of the box you have been in) and get others to navigate your site – preferably your Grandmother or someone that has never been on the Net. This is called a usability test. If they have no problem to discern the purpose of your site and can navigate it with ease, you are ready to publish it for all the world to see.

Design your navigation structure with the visitor in mind. Eliminate any obstacles (minefields) that will annoy and frustrate them, causing them to leave and never wish to return. If you make it easy for them to find the information they seek, you will gain many happy customers.

Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com. FREE Web Site Designed, when combined with our Low Cost Hosting Plan(www.isitebuild.com/freedesign). Subscribe to the “Marketing Tips” newsletter for more original articles. mailto: subscribe@isitebuild.com

How to Prepare Images for Your Web Site by Herman Drost

You are staring at the your monitor waiting for the image to download. It finally appears but it has blurry edges. You go to the next page but can’t read the text because of the dark image in the background. The next page has animated images, that don’t seem to stop. The spinning globes keep spinning. The last page has a large graphic on it, which is a link. You click on it for more information but it goes nowhere. You leave the site in frustration.

Images are an essential ingredient for Web Site design. You want visitors to have an aesthetically pleasing experience. Properly preparing your images is necessary to enhance the appearance of your web site. In Part I of this article I will explain:

When to use images for your web site.
What image file formats should you use on the Web.
When to use images for your web site – Navigation Graphical buttons can link to other pages or resources.
Image Maps – this is a graphic that contains several links on it. It has several “hot spots” or invisible buttons, you can click on. For example you could have a photograph of your family and put a hot spot on each person’s face that links to that person’s web site.
Logos and Trademarks – your business or organization’s trademark are crucial for name recognition and branding.
Thumbnails – this is a small, “thumbnail-sized version of an image. When you click on it, you jump to another page with a larger version of the same image. The visitor can see many different, small images on the first page without having to wait for larger files of the larger images to load.

What are the different image file formats? Web graphics can be categorized into two file formats: bitmap and vector.

Bitmap – these are composed of individual values for each color displayed. The larger the dimensions of the image, the larger the associated file size will be for the same graphic. When viewed with magnification, a bitmap resembles a series of little squares, each of which has a color value that contributes to the overall shape. Bitmaps have a very rough appearance when viewed closely but form images when viewed from a distance. Bitmaps are best suited for photos, drop-shadow effects and soft, glowing or blurry edges.

Vector – these store information about the image in mathematical instructions that are then interpreted and displayed. Vector graphics are best suited for line art, shapes and illustrations.

Image File Formats : Graphic file formats used on the Web are GIF, JPEG and PNG

Graphics Interchange Format (GIF) – GIF is a platform-independent file format that is limited to a display of 256 colors. GIF has been adopted by most developers because of its small file size. GIF is considered a “lossless” format. This means that as the image is compressed, no information is lost.

Types of GIFs –

Animated GIF (89A) This 89a version of GIF allows storage and playback of a sequence of still images to create the illusion of animation. Animated GIF files consist of sequential frames that reload from a browser’s cache and replay in an infinite or predetermined loop to simulate motion.
Transparent GIF: An advantage that a GIF has over a JPEG image is that the designer can designate a color of the GIF image to be transparent. For example, you can create a circular logo in a square image by making the background color transparent. The image appears circular, when, in fact, it is square with information to appear transparent.
Interlaced GIF: Graphic interlacing (the progressive rendering of images) is unique to GIFS and is the preferred method for display of large graphic files. Many people find the “fuzzy-to-sharp” animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the reader a preview of the full area of the picture, while the picture downloads into the browser.

When to use a GIF: Buttons, bullets and navigational tools that accent your Web pages. Interlacing is best for larger GIF images such as illustrations and photographs.

Joint Photographic Experts Group (JPEG) – Graphics in the JPEG format are capable of much greater color depth than GIFs, but usually require more time to download. JPEG can contain up to 24 bits of color information (16.7 million colors). Remember though, that most users are only capable of displaying 8-bit color.

When to use a JPEG: JPEG enables you to use brilliant colors and provides support for complex images and digitized photographs but it is not designed for use with simple images. JPEG compression is not as effective as GIF compression and may distort images with few colors or large areas of the same color. JPEG compression is therefore not designed for low-resolution images.

Portable Network Graphics (PNG) – The PNG file format is emerging as the new format for Web graphics. PNG files are lossless and support transparency like GIFs, yet also support compression and high bit depth like JPEGs. In addition, PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must be 8-bit and 24-bit depth.

When to use a PNG : PNGs behave similarly to GIFs and work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best. They also support better interlacing than interlaced GIFs.

Knowing what types of graphics to use and when to use them for your website will help you avoid the many pitfalls of bad web design. Part 2 of this article will discuss how to optimize graphics for your website and factors that affect optimization.

Copyright 2002 Herman Drost Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com Low Cost Hosting and Site Design (http://www.isitebuild.com/sitehosting.htm) Subscribe to the “Marketing Tips” newsletter for more original articles. mailto: subscribe@isitebuild.com

How to Prepare Images for Your Web Site – Part 2 by Herman Drost

When surfing the Web, you will have noticed web sites where the images load very slowly whereas other images don’t match with the theme of the site or appear blurry. Presenting a professional image for your business means your web site design must be professional also. Part one of this article discussed when to use images for your web site and what image file formats to use on the Web (www.isitebuild.com/imageoptimization1). In this article (Part 2), we will discuss how to optimize your images for the Web.

Image optimization is the art of making your images suitable for the Web. There is a large difference in preparing your graphics for print compared to the Web. In print you have to have as much data as possible to get a good graphic. The main factors that influence the display of graphics for the Web, are the size of the file and the screen display quality of the graphic.

Factors Affecting Web Graphics

1. File SizeWhen you design web pages you need to create a balance between visual appeal and page download time. If your page has too many images on it, it will take too long too load and visitors will not stay around to wait.

2. CroppingThis means cutting out unwanted areas of your image. It decreases the file size and helps visitors to focus on your image.

3. Anti-aliasing Jagged edges of an image can be prevented by anti-aliasing. This creates a blended edge around an image. Because of the extra colors necessary to create the blend, file sizes of anti-aliased GIF’s are a little larger. Use anti-aliased graphics in almost all cases, except when creating very small type as graphics.

4. Bit Depth and Screen Resolution Bit depth refers to the number of colors in an image or the number of colors a computer system is capable of displaying. To calculate bit depth, one bit equals 2 colors, then multiply 2 times 2 to arrive at each higher bit depth. Quality and file size decrease as bit-depth decreases. New computers support thousands or millions of colors (32-bit), but many older color systems can only show up to 256 (8-bit) colors at a time. This reality imposes limits on the size of files and number of colors that can be included in Web graphics.

Check how your image appears with a 256-color monitor and a true-color monitor. Do this on your PC using the Setting/Control Panel/Display option, then select the Settings tab/256 color option.

5. Image Resolution Monitors typically display data at 72 dpi (dots per inch). Therefore, always save your files on the Web at 72 dpi. Always resize your image in your graphics software before you insert it onto your web page. If you resize its dimensions when it’s already on your site, it will look distorted.

6. Browsers Someone viewing your site is subject to a completely different result depending on which browser he is using. Your images may appear harmonious in Internet Explorer (IE) but may be broken up in Netscape Navigator (NN). Therefore check your image for differences with Internet Explorer (IE) and Netscape Navigator (NN) browsers. Your images should appeal to all users. Unfortunately AOL has its own browser, which filters sites through its own AOL proxy system. This means all graphics are converted from JPEG and GIF to the ART format. Most AOL users also use their browsers with the default “compressed graphics” checked, so what normally looks good in IE or NN, will look blurry or distorted on AOL. To change this, AOL users need to go to preferences and check “never compress graphics”.

7. Caching This is a temporary storage area of your hard drive where browsers keep files while they display them. You can create a consistent look and feel to your Web Site, by reusing another graphic on another page. You will be retrieving it from the cache. The more graphics that you reuse, the faster your pages will load.

Testing

To test load times of your pages you need to first publish them and then clear the cache in your computer before loading them, and timing them, from the Internet. Put the url in your browser address box, start timing when you hit Go and stop when the word ‘Done’ appears in your status bar.

Images are the main factor that contributes to slow loading of your web pages. By implementing these techniques for optimizing your images, visitors will have a far more pleasing experience.

Part 3 of this article will discuss other methods for creating fast loading images when creating a professional web site.

Copyright 2002 Herman Drost Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com Low Cost Hosting and Site Design (http://www.isitebuild.com/sitehosting.htm) Subscribe to the “Marketing Tips” newsletter for more original articles. mailto: subscribe@isitebuild.com

Never Redesign Your Web Site by Chris Kalaboukis

“We want to completely redesign our web site”.

If I had a penny for every time I heard that, well you know the rest. In the web design business, that’s all I ever hear, with the additional comments of “the sites just not working”, “customers are having trouble finding things”. Many of these customers had web sites that they redesigned on a regular basis, some customers completely redesigning their sites from the ground up every few months (or even more often), especially back in the heyday of the internet.

I’m here to tell you how often you should completely redesign your web site: Never. Not even once. Why you ask? To illustrate, let me tell you a story about another famous interface re-design you may have heard of.

Back in 1995, a major software company was coming out with a new version of their operating systems software. It was a complete redesign of their software from the ground up, including interface. They spent countless millions promoting it and marketing it, including hiring the Rolling Stones to sing the theme song (Guessed the company yet?). While initial sales were good, the main market they were trying to hit, the corporate user, was slow to catch on. Why? It wasn’t that the software was pricey, its wasn’t that the software was hard to install, in fact the company had provided a number of tools to easily upgrade current users en masse to the new software version.

What’s was the problem? The technology was sound; the software was less buggy than the previous version, the tools for corporate deployment were there. The problem wasn’t the software. The problem was the wetware, or the humans who would be using the software. The training costs to re-train users on the new software far outstripped the costs of the software implementation, and therefore the total cost of the “redesign” was far more that originally expected. It took many years before the operating system was fully accepted into the marketplace.

Since then, that company has learned their lesson. They no longer completely redesign their user interface: it’s not revolution, its evolution. If you look at the interface they have just recently released, it’s the same basic interface, but its looks better. The major changes are under the hood, not in the user experience. Which comes back to the web: what is a web site but a user interface? Learn from the billions the aforementioned company spent in creating and promoting their software and don’t redesign your site.

But you say the interface isn’t working now: we have to redesign. Take a good long look at your site: hire someone else to analyze it, ask for feedback from your customers. Is it scalable and expandable as is? Does it really need a whole new look and feel? No one likes changes, your customers least of all. After all, they have been using your site for a while now and unless it’s completely unworkable, derive some value from it. So, unless the design is extremely bad, don’t start from scratch. But if you must start from scratch, remember this:

Users don’t want something new. They don’t want bells and whistles. They don’t want flash. They don’t want animated graphics that serve no purpose and distract them from the task at hand. Users want to hit a site, perform a task, and get out. Make it swift and easy. Most of all: don’t surprise the user. What you need is an initial new design: not a RE-design. Remember, never redesign your site.

Put some thought into building an initial design model that works, that’s scalable and expandable. Design an interface that you can add stuff to, since there is always more that you need to add. Design an interface which doesn’t force you into physical limitations (like using a horizontal navigation bar then running out of space when you want to add that last button). Start with a good design: then simply evolve it.

OK, you’re allowed one redesign, but that’s it. But before you write one HTML command or redesign that graphic, build out a map or task flow of what the users wants to do, or what you want the user to do when they visit your site. Look at the task flow and revise it so that the user can take the steps with the minimum amount of clicks. Make it easy and intuitive for the user.

Edit your task flow ruthlessly, removing any extraneous elements that distract from that flow. Run it past your customers, get feedback, revise until it’s as tight as it can get, then you can go ahead and built it. It might sound like a lot of work, but you will never need to redesign your site again, and that will save you time, money and headaches as your site evolves.

Chris Kalaboukis is the CTO of SwapSmarts.com – http://swapsmarts.com – an expert advice site where over a thousand experts sell answers or articles in thousands of categories from 10 cents apiece. Chris has over 17 years of experience in internet, information technology and business development roles, with web design, wireless, cable modem and entertainment companies.