Web Page Repair

Designing for Multiple Browsers Without Being Bland


THE FIRST PRIORITY of any Web page/site should be that it has a purpose and then has copy/content that will advance that purpose. If you are not offering something uniquely interesting or useful then don't bother starting up your text or HTML editor.

After you've got that, then begin your page or site and markup the content according to the basic logical structure using HTML 2.0 standard level tags and techniques (which can be found at: http://www.w3.org/MarkUp/
html-spec/html-spec_toc.html) with paragraphs <P>; lists <UL>, <OL>, <MENU>, <DIR>; <BLOCKQUOTE>; <EM>; <STRONG>; <I>; <CODE>; <CITE>; entities &xxx; ; <HR>; <BR>; etc. Also, add header tags <Hn> (where n = 1, 2, 3, 4, 5, or 6 ) if they are appropriate to the material. Then validate the page using a HTML validator at the HTML 2.0 level and do a spell and grammar check.

Now you actually have a page with a purpose and content that even has all or nearly all of its words spelled correctly. It also should work as intended with all Web browsers. So you are one step ahead of 95% of all other pages/sites on the Web.

Okay, so now you want to spice it up. So add images. Make them as small (in H X W, and number of colors or compression) as aesthetically possible (preferably less than 20K), and make sure you provide descriptive alternate ALT=" " text with the images <IMG SRC=" " >. Also, add in any links <A HREF=" ">.

Then validate your pages again at the HTML 2.0 level and check your pages links.

Now you've got a page that not only has a purpose and unique content, but also looks pretty good and can be accessed by everyone.

[Piece of Cake] Adding Icing

But, you still may want to add icing, so now you can very carefully and selectively add recommended HTML 4.0 features (available at http://www.w3.org/
TR/REC-html40/). Begin by adding the <!DOCTYPE> declaration as the first line on your document. It must be placed before the <TITLE> (and the <HEAD> and <HTML> tags, if included). The current HTML 4.0 Transitional <!DOCTYPE> declaration is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/
REC-html40/loose.dtd">

Once you add the <!DOCTYPE>, now you can add centering where appropriate using <P ALIGN=CENTER> for paragraphs or images </P> or <Hn ALIGN=CENTER> for headers </Hn> where n = 1, 2, 3, 4, 5, or 6.

Also you could add an appropriate GIF background (or background color) with both contrasting text and links colors and you may want to add <BIG> and <SMALL> tags to text where appropriate. Also, you may want to wrap text around your images for those browsers which are capable of rendering your page in this way by adding, align = left or, align = right within your image <IMG SRC> tags. Still no harm; no foul for everyone viewing your page (even if they can't wrap the text).

Validate your page again, this time at the 4.0 Transitional level and check your spelling again.

Now you should have a page and site that is both visually interesting and will look good even if one of the "less capable" browsers is used to access it. Also, those with low bandwidth and high bandwidth won't need separate pages, nor will text-only browsers because you've provided ALT text. All can use this page according to their browser's optimum capabilities or settings and options and you aren't getting in the way of a clear presentation for anyone using any of the features thus far.

Okay, so now at some point you may want to add forms, and nearly all browsers support these today. Also you may want to include an e-mail link adding a mailto: with a visible mailing address as an alternative for those with browsers that may have trouble with the mailto: or form feature.

So even up until this point, creating two separate pages for low and high bandwidth or for specific browsers is unnecessary.

More Icing

Now, if you still find you can't live without tables and you must have them try to build them so older non-table browser versions will get a reasonable presentation as well. Alan Flavell's Web Page on tables can be invaluable in this regard and can be found by searching Alta Vista or Lycos, etc.: Flavell tables.

[continue article]

Then again, validate your page at the appropriate HTML 4.0 level and spell check again.

So even with all this icing you still will have a page that everyone can use and again is both visually interesting and will look good even if one of the "less capable" browsers is used to access it.

If you have to go further, you may want to create a few small, efficient, and well-crafted animated GIFs that would spice up the presentation for those with browsers that support animated GIFs while still rendering the static first or last frame of the graphic for others: again no harm; no foul for everyone viewing the page (though it's a good idea to limit the number of loops, otherwise, infinite loops eventually could put a strain on user's resources who have browsers with animation capability).

[Stop] Knowing When Enough is Enough

Part of authoring a good Web page is knowing what to leave out and when to stop. Adding one-browser-only and cutting-edge features often can create a one-browser-only Web page and, therefore, not a "world-wide" Web page. Despite their inclusion in the HTML 4.0 recommendation, "frames" are one of the features that fits into this category. For example, many browsers do not support frames. In addition, for some individuals frames can be annoying. One annoying feature (bug) is that they often force a browser to render images even if it is set with the images off. So just for starters, you may be harming low bandwidth users and/or forcing images upon those who prefer the efficiency of browsing with images off.

Java, to a large extent is still in beta and support for a portion of the Web audience (e.g., Windows 3.1x users) is still not widespread or at least not consistent. And most that I've seen nets little real benefit to viewers yet in relation to all the extra work and bandwidth an application may consume. In other words, currently in most cases, its marginal cost is not yet worth its marginal benefit. That will change when most have an ISDN, T1, or cable line; more powerful computers; 32 bit operating systems; and/or the language matures. But at the moment, the "sweet spot" for this language has not yet been reached.

JavaScript also is not consistently supported across browsers and browser versions and security concerns have caused some to turn off this feature who have it available. If, however, you must use it to send a scrolling message across the bottom of someone's browser, make sure you borrow or write a version without the greater-than sign (>) in it, otherwise it will render the actual text of the script in the viewable portion of a page to quite a few people (many AOL users and others). Moreover, make sure the scrolling message you send is not crucial because many of your visitors will be incapable of seeing it.

And so far, other than perhaps adding a form confirmation message (for those without CGI capability), I've seen little else created via JavaScript that is so compelling that your viewers couldn't live without it. But if you do use it say to show people the time, or to provide them with a buggy calculator, do it sparingly, because the browsers that do support it are not entirely mature or stable in supporting this feature and unexpected results for your viewers will not be uncommon.

[Being Stylish] Doing It with Style

On a more positive note, one of the most promising newer features available (now available in MS Internet Explorer 3.x and 4.x and Netscape 4.x as well as a few less widely known browsers) to spice up your documents, while still keeping them portable, is Cascading Style Sheets (CSS-1). With a CSS-1, you can suggest a specific style for your documents.

:::: Made with Cascading Style Sheets :::::

With a CSS-1 template you can specify point sizes (relative and absolute), page margins, leading (spacing between lines), indents, and text background colors. This can be accomplished either by linking to a detached style sheet from your HTML document (Web page) or by embedding a style sheet in your page, or by adding inline styles to your page.

With a CSS-1, also you can create a number of formatting variations for a single HTML tag. Further CSS-1 information is available at http://www.w3.org/TR/REC-CSS1/.


The author, Stephen Traub, owner of Web Page Re<p>air, can be reached by e-mail at straub@shore.net, or by phone at 978-462-4347. Mr. Traub has a B.A. from Harvard University cum laude in Social Science, and is a member of The HTML Writers Guild.

We'd like to help you get the most from your Web page(s). If that's what you want as well, contact me, Stephen Traub at straub@shore.net. If you're undecided, see my articles, "Widen Your Web Site's Audience", and "What You See is Not What Others Get on the Web". Or see my background information or comments from those we've helped, then contact me. I guarantee that you will be satisfied with the results.

Steve
Stephen Traub

P.S. Thanks for stopping by. We appreciate your visit. While you're here, check out some On-Line Tools You Can Use, Free Web/Internet Software, The Mispelled Misspelled Word of the Week, or our Java and GIF Animation Test Page.

| Web Page Re<p>air (Front Page) | Widen Your Web Site's Audience | What You See is Not What Others Get | On-Line Tools You Can Use | Free Web/Internet Software | Comments From Those We've Helped | Resumé of Stephen Traub | Mispelled Misspelled Word of the Week | Java(Script) and GIF Animation Test Page |

Copyright © 1996-98 Web Page Re<p>air, Newburyport, MA. All rights reserved. Authored and HTML 4.0 Transitional checked by Stephen Traub (straub@shore.net) a member of The HTML Writers Guild. This document, located at: http://www.shore.net/~straub/wprmultb.htm, was last updated March 3, 1998.