Beginning HTML5 & CSS3 For Dummies® (2013)

Part VI

The Part of Tens

21

Ten HTML Do’s and Don’ts

In This Chapter

Concentrating on content

Going easy on the graphics, bells, whistles, and roaring dinosaurs

Creating well-formulated HTML and then testing, testing, testing

Keeping it interesting after the building is over

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

If 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’d never say, “We told you so.” Would we?)

Don’t Lose Sight of Your Content

Any website lives or dies by its content. That a site is meaningful, that it delivers information directly, easily, and efficiently, and that a user can reasonably expect to find something new and interesting there with each new visit — all are pluses. But all those things (and more) rest on solid, useful content that gives visitors a reason to come (and return) to your site.

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 pages are content free. When that happens, they’ll be off to richer hunting grounds online, looking for content wherever it can be found.

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

Do Structure Your Documents and Your Site

For users, a clear roadmap 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 website, a roadmap 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. Start building your HTML document or documents using paper and pencil (or your modeling tool of choice). Sketch out relationships within the content and among your pages. Know what and where you’re building before rolling 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 over 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 your website’s content or focus.

Do Make the Most from the Least

Markup, scripting, and style sheets make much possible, but not all possibilities deserve implementation — websites can’t live by snazzy graphics, special effects, and blinking marquees alone. Let your design and content drive the markup, graphics, and interaction. With good design and content, your site will do its job without befuddling your visitors.

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 yowls dominate a page, the more they distract visitors from content. Use structure and graphics sparingly, wisely, and carefully. Anything more impedes content delivery. Go easy on animations, links, and layout tags, or risk having your message (even your page) devoured by a hungry T. Rex.

Do 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 overwhelm users with a surfeit of pictures and links. Making web pages pretty and easy to navigate adds to a site’s basic appeal and makes your cyber-campers 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).

When designing 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 visual appeal. After you build simple, consistent navigation tools, label them clearly and use them consistently. Your pages can be appealing and informative given enough time and effort.

Don’t Lose Track of Those Tags

If you start with solid markup and good content — and then plow through what you’ve built to make sure everything works the way it should (and communicates what it ought) — you’re on your way to a great website. But after construction is over, testing begins. And only when testing produces positive results should you open your virtual doors to the public.

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 <a>). When you're testing web pages, some browsers can compensate for such 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). Validation (using http://validator.w3.org) is always a good idea, too.

As for claims that some HTML authoring tool vendors make (“You don’t have to know any HTML!”), all we can say is, “Uh-huh, suuurre. . . .” HTML 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, whether you build them yourself or a program builds them for you.

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

Keep track of tags 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. Use these syntax checkers whether you build pages by hand or with software. The free W3C validator lives at http://validator.w3.org.

Test pages with as many browsers as you can. This not only alerts you to missing tags but can also reveal potential design flaws or browser issues (covered in the later section, “Do Avoid Browser Dependencies”). This exercise also emphasizes the need for alternate text. That’s why we check our pages with Lynx (a character-only browser). Ask friends, colleagues, and co-workers to check out your work, and tell them to use as many browsers as they can, too. Please!

Always follow HTML document syntax and layout rules. Just because browsers don't require elements such as html, head, and body doesn't mean you can omit them. It means browsers don't care whether or not you use them. But browsers are not your audience. Your users (and future browsers) may indeed care.

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

Do Avoid Browser Dependencies

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

During the design and writing phases, you’ll probably hop between HTML and a browser view of your work. At that point, you should switch among browsers and test your pages using different ones (including at least one text-only browser like Lynx). This helps you visualize your pages better and helps keep you focused on content. Using a text-only browser is also a great way to ensure that visually impaired visitors can still relate to your site.

Check out the Spoon Browser Sandbox page at www.spoon.net/browsers. It lets you emulate numerous browsers on a Windows PC, including multiple versions of IE, Firefox, Chrome, Safari, and Opera. Additionally, you can use free public Telnet servers with Lynx (a character-mode browser) installed. Also, visit http://brainstormsandraves.com/articles/browsers/lynx for a good discussion of using Lynx when testing web pages. (You can also find pointers to Lynx downloads for Windows, DOS, Mac OS, and other platforms there.) There's even a free Firefox plug-in for Lynx previews inside a pop-up window available at https://addons.mozilla.org/en-US/firefox/addon/1944.

During testing and maintenance, browse your pages from many points of view. Work from multiple platforms; try both graphical and character-mode browsers on each page. Testing takes time but repays that effort with pages that are easy for everyone to read and follow. It also helps viewers who come at your materials from many platforms 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 a template for those pages (include both an HTML skeleton and one or more external CSS style sheets). Test that 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 every page look good, regardless of the browser that visitors use, and moves you closer to real HTML enlightenment.

Don’t Make It Hard to Navigate 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 website. A navigation bar requires a consistent placement and use of controls to help users get from A to B. To help users minimize (or even avoid) scrolling, use links judiciously and be careful to observe what constitutes a complete screen (or screenful) of text. Text anchors make it easy to move to previous and next screens, as well as to the top, index, and bottom of any document. Just that easy, just that simple — or so it appears to the user.

We believe in low-scroll pages: Users should have to scroll no more than one screenful from a point of focus or entry to find a navigation aid that lets them jump (not scroll) to their next point of interest. If users must scroll, vertical scrolling is okay, but horizontal scrolling is an absolute no-no!

We don’t believe 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 browsing, the better they like it. The longer a document gets, the more important controls become; they work best if they occur about every 30 lines (or with a set of always-visible page controls).

Don’t Think Revolution, Think Evolution

The tendency to sit on one’s fundament, if not rest on one’s laurels, after launching a website 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 from 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 expiration 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!

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. (You might know this term better as complacency or even indifference.)

This concept is best explained by the analogy of your face in the mirror: You see it every day; you know it too well, 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 daily 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 onscreen 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, solicit some from your users. If you’re not sure how you’re doing, consider this: If you don’t ask for feedback, how can you tell?

Don’t Get Stuck in the Two-Dimensional-Text Trap

Because of centuries of printed material and the linear nature of books, our mindsets also need adjustment. The text trap is of our own making, and comes from a lifetime of experience in reading printed materials. But the nonlinear potentials of hypermedia give new meaning to the termdocument, especially on the web. (Hypermedia is digital content that includes text, images, video, sound, and so forth, along with hyperlinks, and it provides many ways to escape the text trap.) It can be tempting to pack pages full of capabilities until they resemble a Pony Express dynamite shipment that gallops off in several directions at once. Be safe: Judge hypermedia by whether it

Adds interest

Expands on your content

Makes a serious — and relevant — impact on users

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

Stepping intelligently outside old-fashioned linear thinking about text can improve your users’ experience with your site and make your information more accessible. That’s why we encourage careful use of document indexes, cross-references, links to related documents, and other tools to help users navigate your site.

Keep thinking about the impact of links as you look at other people’s web materials; it’s the quickest way to escape the linear-text trap. If you’re seeking a model for website behavior, don’t use your new trifold four-color brochure, however eye-popping it may be. Instead, think about how customer-service talks to new customers on the phone: “How can I help you today?”

Don’t Let Inertia Overcome You

When dealing with web materials post-publication, it’s only human to goof off after finishing a big job. Site maintenance isn’t as heroic or inspiring as creation, but it involves most of the activity required to keep things functioning — that is, ensure links still work, images still appear, interactive materials work as they should, and so forth. Sites that aren’t maintained often become ghost sites; users stop visiting when developers stop working on them. Never fear — a little work and attention to detail keep pages working and current. If you start with something valuable and keep adding value, a site’s value appreciates over time — just like any other property. Start with something valuable and leave it alone, and it loses function and 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 website, as a vehicle for important information, deserves regular attention; maintaining a website requires discipline and respect.

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 get 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 things working — just as they should be. This keeps visitors coming back for more!