Ten HTML Do’s and Don’ts for increasing Website Traffic

Ten HTML Do’s and Don’ts for increasing Website Traffic

By itself, HTML is neither too complex nor overwhelmingly difficult. As some high-tech wags (including a few rocket scientists) have put it, HTML ain’t rocket science! Nevertheless, important do’s and don’ts can make or break the Web pages you build with HTML. Consider these humble admonishments as guidelines to make the most of HTML without losing touch with your users or watching your page blow up on its launch pad.

If some points we make throughout this book seem to crop up here, too (especially regarding proper and improper use of HTML), it’s no accident. Heed ye well the prescriptions and avoid ye the maledictions. But hey, they’re your pages. You can do what you want. Your users will decide the ultimate outcome. (We never say, “We told you so.” Nope. Not us!)

Concentrate on Content

Any Web site lives or dies by its content. That a site is meaningful, that it delivers information directly, easily, and efficiently, and the reasonable expectations of finding something new and interesting on each new visit are all pluses. But all of those things (and more) rest on solid, useful content to give visitors a reason to come (and later, to return) to your site.

Never lose sight of your content

So we return to the crucial question of payload: page content. Why? Well, as Darrell Royal (legendary football coach of the University of Texas Longhorns in the ’60s and ’70s) is rumored to have said to his players, “Dance with who brung ya.” In normal English (as opposed to Texan), this means that you should stick with the people who’ve supported you all along and give your loyalty to those who’ve given it to you.

We’re not sure what this means for football, but for Web pages it means keeping faith with your users and keeping content paramount. If you don’t have strong, solid, informative content, users quickly get that empty feeling that hits when Web pages are content-free. Then they’ll be off to richer hunting grounds on the Web, looking for content somewhere else.

To satisfy user hunger, put your most important content on your site’s major pages. Save the frills and supplementary materials for secondary pages. The short statement of this principle for HTML is, “Tags are important, but what’s between the tags — the content — is what really counts.”

Structure your documents and your site

For users, a clear road map of your content is as important for a single home page as it is for an online encyclopedia. When longer or more complex documents grow into a full-fledged Web site, a road map becomes more important still. This map ideally takes the form of (you guessed it) a flow chart of page organization and links. If you like pictures with a purpose, the chart could appear in graphic form in an explicitly labeled site map.

We’re strong advocates of top-down page design: Don’t start writing content or placing tags until you understand what you want to say and how you want to organize your material. Then start building your HTML document or collection of documents with paper and pencil (or whatever modeling tool you like best). Sketch out relationships within the content and among your pages.

Know where you’re building before you roll out the heavy equipment. Good content flows from good organization. It helps you stay on track during page design, testing, delivery, and maintenance. Organization helps users find their way through your site. Need we say more? Well, yes: Don’t forget that organization changes with time. Revisit and critique your organization and structure on a regular basis, and don’t be afraid to change either one to keep up with changes in content or focus.

Go Easy on the Graphics, Bells, Whistles, and Hungry Dinosaurs

Markup, scripting, and style sheets make many things possible. But not all possibilities deserve implementation, nor can Web sites live by snazzy graphics, special effects, and blinking marquees alone. Let your design and your content drive the markup, the graphics, and interaction, and your site will do its job without dazzling visitors so they lose sight of same.

Make the most from the least

More is not always better, especially when it comes to Web pages. Try to design and build your pages using minimal ornaments and simple layouts.

Don’t overload pages with graphics or add as many levels of headings as you can fit. Instead, do everything you can to make sure your content is easy to read and follow. To keep distractions and departures to a minimum, also make sure any hyperlinks you include add real value to your site.

Gratuitous links to useless information are nobody’s friend; if you’re tempted to link to a Webcam that shows a dripping faucet, resist, resist, resist!

Structure and images exist to highlight content. The more bells, whistles, and dinosaur growls dominate a page, the more distracted from your content visitors become. Use structure and graphics sparingly, wisely, and carefully. Anything more can be an obstacle to content delivery. Go easy on the animations, links, and layout tags, or risk having your message (even your page) devoured by a hungry T. Rex.

Build attractive pages

When users visit Web pages with a consistent framework that focuses on content, they’re likely to feel welcome. The important thing is to supplement content with graphics and links — don’t trample users with an onslaught of pictures and links. Making Web pages pretty and easy to navigate only adds to a site’s basic appeal and makes your cybercampers even happier.

If you need inspiration, cruise the Web and look for layouts and graphics that work for you. If you take the time to analyze what you like, you can work from other people’s design principles without having to steal details from their layouts or looks (which isn’t a good idea anyway).

As you design Web documents, start with a basic, standard page layout. Pick a small, interesting set of graphical symbols or icons and adopt a consistent navigation style. Use graphics sparingly (yes, you’ve heard this before); make them as small as possible — limit size, number of colors, shading, and so on, while retaining eye appeal. When you build simple, consistent navigation tools, label them clearly and use them everywhere. Your pages can be appealing and informative if you invest the time and effort.

Create Well-Formulated HTML and Test

If you start with solid markup and good content and then work through what you’ve wrought to make sure everything works like it’s supposed to (and communicates what it ought to), you’re on your way to a great Web site. But once the construction is over, the testing begins. And only when the testing returns positive results should you open your virtual doors to the public.

Keep track of those tags

Although you’re building documents, it’s easy to forget to use closing tags, even when they’re required (for example, the </a> that closes the opening anchor tag   ). When you’re testing Web pages, some browsers can compensate for your errors, leaving you with a false sense of security.

The Web is no place to depend on the kindness of strangers. Scrutinize your tags to head off possible problems from browsers that might not be quite so understanding (or lax, as the case may be). As for the claims that some vendors of HTML authoring tools make (“You don’t even have to know any HTML!”), all we can say is, “Uh-huh, suuurre.” HTML itself is a big part of what makes Web pages work; if you understand it, you can troubleshoot with minimal fuss. Also, only you can ensure that your pages’ inner workings are correct and complete for your documents, whether you build them yourself or a program builds them for you.

We could go on ad infinitum about this, but we’ll exercise some mercy and confine our remarks to the most pertinent items:

ü  Keep track of tags yourself while you write or edit HTML by hand. If you open a tag — be it an anchor, a text area, or whatever — create the closing tag for it right then and there, even if you have content to add. Most HTML editors do this for you.

ü  Use a syntax checker to validate your work during the testing process. Syntax checkers are automatic tools that find missing tags or errors — and other ways to drive you crazy! Use these whether you build pages by hand or with software. The W3C’s (free) HTML Validator lives at http://validator.w3.org.

ü  Obtain and use as many browsers as you can when testing pages. This not only alerts you to missing tags, but it can also reveal potential design flaws or browser dependencies (covered in the “Avoid browser dependencies” section later in this article). This exercise also emphasizes the importance of alternate text information. That’s why we also check our pages with Lynx (a character-only browser).

ü  Always follow HTML document syntax and layout rules. Just because most browsers don’t require elements such as <html>, <head>, and <body> doesn’t mean you can omit them. It means that browsers don’t give a hoot whether you use them or not. But browsers per se are not your audience. Your users (and future browsers) may indeed care.

Although HTML isn’t exactly a programming language, it still makes sense to treat it like one. Following formats and syntax helps you avoid trouble, and careful testing and rechecking of your work ensures a high degree of quality, compliance with standards, and a relatively trouble-free Web site.

Avoid browser dependencies

When you’re building Web pages, the temptation to view the Web in terms of your favorite browser is hard to avoid. That’s why you should always remember that users view the Web in general (and your pages in particular) from many perspectives — through many different browsers.

During the design and writing phases, you’ll probably hop between HTML and a browser’s-eye view of your work. At this point in the process, you should switch from one browser to another and test your pages among several browsers (including at least one character-mode browser). This helps balance how you visualize your pages and helps keep you focused on content.

You can use public Telnet servers with Lynx (a character-mode browser) installed for free and that don’t require software installation. Visit www.brainstormsandraves.com/articles/browsers/lynx for a good discussion of using Lynx when testing Web pages.

During testing and maintenance, you must browse your pages from many different points of view. Work from multiple platforms; try both graphical and character-mode browsers on each page. Testing takes time but repays your investment with pages that are easy for everyone to read and follow. It also helps viewers who come at your materials from platforms other than your own and helps your pages achieve true independence from any single viewpoint. Why limit your options?

If several pages on your site use the same basic HTML, create one template for those pages. Test the template with as many browsers as you can. When you’re sure the template is browser-independent, use it to create other pages. This helps ensure that every page looks good, regardless of which browser a visitor might use, and puts you on your way to real HTML enlightenment.

Navigating your wild and woolly Web

Users who view the splendor of your site don’t want to be told you can’t get there from here. Aids to navigation are vital amenities on a quality Web site. A navigation bar is a consistent graphical place to put buttons that help users get from A to B. By judicious use of links and careful observation of what constitutes a complete screen (or screenful) of text, you can help your users minimize (or even avoid) scrolling. Text anchors make it easy to move to the previous and or next screens, as well as to the top, index, and bottom in any document. Just that easy, just that simple — or so it appears to the user.

We believe in the low scroll rule: Users should have to scroll no more than one screenful in either direction from a point of focus or entry to find a navigation aid that lets them jump (not scroll) to the next point of interest.

We don’t believe that navigation bars are mandatory or that names for controls should always be the same. But we do believe that the more control you give users over their reading, the better they like it. The longer a document gets, the more important such controls become; they work best if they occur about every 30 lines in longer documents (or in a separate, always-visible frame if you use HTML frames).

Keep It Interesting After It’s Built!

The tendency to sit on one’s fundament, if not rest on one’s laurels, after launching a Web site is nearly irresistible. It’s okay to sit down, but it isn’t okay to leave things alone for too long or to let them go stale for lack of attention and refreshment. If you stay interested in what’s on your site after it’s ready for prime time, your content probably won’t go past its freshness date. Do what you can (and what you must) to stay on top of things, and you’ll stay engaged — as should your site visitors!

Think evolution, not revolution

Over time, Web pages change and grow. Keep a fresh eye on your work and keep recruiting fresh eyes from the ranks of those who haven’t seen your work before to avoid what we call “organic acceptance.”

This concept is best explained by the analogy of your face in the mirror: You see it every day; you know it intimately, so you aren’t as sensitive as someone else to how your face changes over time. Then you see yourself on video, or in a photograph, or through the eyes of an old friend. At that point, changes obvious to the world reveal themselves to you as you exclaim, “I’ve gone completely gray!” or “My spare tire could mount on a semi!”

Changes to Web pages are usually evolutionary, not revolutionary. They proceed in small steps; big leaps are rare. Nevertheless, you must stay sensitive to the underlying infrastructure and readability of your content as pages evolve. Maybe the lack of on-screen links to each section of your Product Catalog didn’t matter when you had only three products — but now that you offer 25, they’re a must. You’ve heard that form follows function; in Web terms, the structure of your site needs to follow changes in its content. If you regularly evaluate your site’s effectiveness at communicating, you know when it’s

time to make changes, large or small.

This is why user feedback is crucial. If you don’t get feedback through forms or other means, aggressively solicit some from your users. If you’re not sure how you’re doing, consider: If you don’t ask for feedback, how can you tell?

Beating the two-dimensional text trap

Because of centuries of printed material and the linear nature of books, our mindsets can use an adjustment. The nonlinear potentials of hypermedia give the Web a new definition for the term document. But it’s tempting to pack pages full of hypercapabilities until they resemble a Pony Express dynamite shipment and gallop in many directions at once. Be safe: Judge hypermedia by whether it

ü  Adds interest

ü  Expands on your content

ü  Makes a serious — and relevant — impact on the user

Within these constraints, such material can vastly improve any user’s experience of your site.

Stepping intelligently outside old-fashioned linear thinking can improve your users’ experience of your site and make your information more accessible to your audience. That’s why we encourage careful use of document indexes, cross-references, links to related documents, and other tools to help users navigate within your site. Keep thinking about the impact of links as you look at other people’s Web materials; it’s the quickest way to shake free of the linear-text trap. (The printing press was high-tech for its day, but that was 500 years ago!) If you’re looking for a model for your site’s behavior, don’t think about your new trifold four-color brochure, however eye-popping it is; think about how your customer-service people interact with new customers on the telephone. (“What can I do to help you today?”)

Overcome inertia through vigilance

When you deal with your Web materials post-publication, it’s only human to goof off after finishing a big job. Maintenance isn’t as heroic or inspiring as creation, yet it represents most of the activity to keep any document alive and well. Sites that aren’t maintained often become ghost sites; users stop visiting sites when developers stop working on them. Never fear — a little work and attention to detail keeps your pages fresh. If you start with something valuable and keep adding value, a site’s value appreciates over time — just like any other artistic masterpiece. Start with something valuable and leave it alone, and it soon becomes stale and loses value.

Consider your site from the viewpoint of a master aircraft mechanic: Correct maintenance is a real, vital, and on-going accomplishment, without which you risk a crash. A Web site, as a vehicle for important information, deserves regular attention; maintaining a Web site requires discipline and respect. See www.disobey.com/ghostsites/index.shtml for a humorous look at ghost sites.

Keeping up with change translates into creating (and adhering to) a regular maintenance schedule. Make it somebody’s job to spend time on a site regularly; check to make sure the job’s getting done. If people are tagged to handle regular site updates, changes, and improvements, they flog other participants to give them tasks when scheduled site maintenance rolls around. Pretty soon, everybody’s involved in keeping information fresh — just as they should be. This keeps your visitors coming back for more!