Designing a site is easy. Designing a good site is a painstaking process with a lot of error potential. Every beginner makes lots of mistakes, so we asked some of the NetMechanic staff what their biggest goofs were - or what bizarre demands they've had private clients make. Here are the top ten things we wish we had known when we started designing Web sites and dealing with clients.
1. Visitors aren't mind readers.
One staffer created a beautiful site that used a candelabra image as the navigation menu. It looked good, but visitors had a big problem: they didn't understand the navigation system. That's because the links were invisible until the mouse moved over each candle. Then, individual flames would appear as links using the onMouseOver effect. The flames didn't have any text, so visitors just had to guess at each link's destination.
"Hmmm. Is this flame the home page? What about this? Is it the shopping cart?"
This is an extreme - but true - example what happens when visitors can't read your mind. You have to spell things out for them. Don't assume that people will automatically understand the purpose of your site and it's navigation structure.
Spell it out, keep it simple, and always conduct usability tests during the design and before your expected launch date.
2. Search engine spiders are stupid.
I personally was part of a team that created a Web site for a local nonprofit group that worked with children in foster care. We loaded up the site with all the great stuff we had learned in our Advanced Web Design class the semester before:
Frames
JavaScript-dependent navigation
Pop-up JavaScript windows that contained important information.
The organization loved the site, but the search engines hated it. We couldn't even get the home page indexed because the spiders at that time couldn't read the framed content and we hadn't included a "NOFRAMES" tag. Even if the spiders had made it through the frame to the navigation system, they were still stuck. The navigation system didn't work unless the visitor selected the individual page from a JavaScript select-and-go menu that called a function contained in the container frame.
At the time, we didn't understand about search engines and unfortunately that wasn't part of our university training! We learned the hard way that the best design in the world is useless if you can't promote the site to searchers.
Always test your Web site with text browser like Lynx (try this Lynx viewer for a quick check). It will give you a good idea of what a spider sees when it reads and indexes your Web site.
3. Visitors are an impatient bunch.
A few years ago, background music on Web sites was all the rage. Visitors were subjected to tinny repetitions of the same few bars for as long as they could stand to remain at the site. Now, Flash animations and videos are a popular addition to many sites.
Page load time is more important as a great design, but designers tend to forget that. If visitors click away before the page finishes loading, they'll never see your design or buy your products.
Also, be careful with multimedia files. Although some search engines are beginning to index Flash files and alternative search engines index image, music, and other files, these multimedia files do increase download time and aren't nearly as search-friendly as plain text.
It's a fact. You lose visitors when our pages take too long to load.
4. Browser manufactures are out to get me!
Imagine designing the following Web site for a paying client. It used an all-CSS layout (no tables), all-CSS formatting (no FONT or other deprecated tags), and contained a CSS navigation menu to create rollover effects without JavaScript. Sounds great, doesn't it? And it looked great - but only when viewed in Internet Explorer.
Naturally, what was the first thing the client did? Open it in Netscape and make an extensive list of the layout and formatting problems.
One of the more bizarre client stories we heard involves the client who so loathed Netscape that he demanded a site that would not display at all in that browser! How did the designer pull that one off? Check out our online browser display tutorial. It demonstrates how some design techniques and coding errors can break your page in some browsers while having no effect on others. Hint: it involved a table layout.
Always test your pages in as many browsers as possible. You just never know what your clients or visitors will be using!
5. How to code.
WYSIWYG editors like FrontPage and Dreamweaver make it easy for virtually anyone to put together a Web site that contains JavaScript, Flash, forms, and other interactive elements without knowing how to read or write basic HTML.
Busy beginning webmasters think that's great - until there's a problem that requires them to edit the actual code. It's the difference between knowing how to drive a car and how to repair one. Nobody expects you to be able to rebuild your own engine, but you should at least recognize major engine components when you open the hood.
There's absolutely nothing wrong with using HTML editors to create Web pages. Most experienced coders use them because they make it easier to code and quickly find errors.
But don't rely on your editor too much. Remember: coding knowledge makes search engine promotion easier. When you read articles about the importance of header tags, ALT text, and other techniques, you'll understand the content and be able to easily apply the recommendations to make your own site better.
6. The name is everything!
There once was a client who insisted that it was a "waste of money" to purchase his own top-level domain name when the Web host gave him one for free. Imagine trying to promote a name like this:
We changed the actual name, but you get the idea. The Web address was almost too long to fit on the man's business card! Imagine trying to read it to someone over the phone!
Any online business or brick and mortar business that promotes its products online needs its own domain name. Ideally, the name should:
Finally, once you select and register your domain name, remember to renew it! The process to reclaim an expired domain name is time-consuming, costly, and unreliable.
7. How to hide from email spiders.
Unlike search engine spiders, email spiders are not your friends. Fiends maybe, but not friends. Spammers turn them lose to crawl the Web and scan Web pages for email addresses which the owner then uses for his own spamming pleasure or sells them to another spammer.
We've found that email spiders find you far quicker than search engine spiders. Some webmasters start receiving spam email just days after posting their Web sites.
The safest way to protect your email address is to use feedback forms on your Web site. Spiders can't access the CGI script that controls the form processing, so your email address is secure. Another option is to use this simple JavaScript technique to hide your email address inside the page's HTML code. It isn't quite as reliable, but will thwart the majority of email spiders that come crawling your way.
8. Tracking visitors is as important as attracting them.
Never sign up with a Web hosting company who doesn't give you access to your server logs! That information tells you a lot more about visitors than you - or they - may realize. For instance:
What is the most common entry page into the site?
What are the most popular pages on the site?
What search terms do visitors use?
Which browsers and browser versions do visitors use?
Many webmasters can't even answer one of these questions even though the information is vital to design and promotion efforts.
Why not? Usually because they've selected a low-cost Web hosting company who doesn't give them access to raw server log data. It is important to control costs, but make sure you're getting all the services you need from your hosting company.
Learn more about selecting a Web hosting company from these previous NetMechanic articles:
Very few of us understood the importance of reusable code and templates when we started Web design and promotion work. It's depressing to think just how much coding and debugging time we could have saved if we had only known about:
Server-side includes save coding time. Use SSIs to add page common page elements like headers, footers, and navigation systems to every page in your site. Since an SSI is a separate file that gets included in other files, it only takes one change to the SSI file to update every page in your Web site.
External files make your file size smaller, move important content farther up inside your HTML code, and expand your ability to change all pages of the site by updating just one file. Transfer your Cascading Style Sheet rules and JavaScript functions to external .css and .js files.
Web page templates keep the same look and feel on each page. Combine your page template with SSIs and external files. The combination will greatly decrease your coding, debugging, and maintenance time.
Every extra keystroke, every extra HTML tag, any extra character you have to manually type is an opportunity to make an error that could break your page layout.
10. About NetMechanic tools!
You know we just couldn't resist, right?
NetMechanic's tools help both beginning and experienced webmasters create Web pages that download quickly, look good, function properly, are easy to promote to search engines, and display accurately across different browsers and operating systems.
GIFBot: Use this free tool to optimize your images for the Web. Depending on the image, it's possible to reduce file size up to 70% with no visible reduction in quality. I reduced the download time of my first Web page by 30 seconds just by optimizing the images using GIFBot.
HTML Toolbox: Find HTML coding errors, browser-specific code, broken links, and identify slow-loading pages using this Web-based, user-friendly tool. The subscription version even repairs your errors and creates a "clean" page you can upload to your server.
Browser Photo: Don't have the time or money to set up your own testing lab? Don't worry. Browser Photo shows you actual screen shots of your Web page in
21 different browsers, browser versions, and operating system combinations.
Search Engine Power Pack: It really doesn't matter how your page looks to humans - if they can't find it using a search engine. Search Engine Power Pack guides you through the complex process of optimizing your pages for search engine and submitting those pages to the most popular engines.