Wednesday, August 30, 2006

The Old Way

In HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide, I was faced with a quandary. Should I continue to talk about old, deprecated tags that had fallen out of favor? I've never been much of an extremist and don't like to dictate gospel. At the same time, I don't want new Web page designers to come across really old-fashioned tags like font and unwittingly use them in a professional setting. On the other, other hand, it feels like the book isn't complete if it doesn't cover the entire specifications, and whether the W3C likes it or not, the font tag is still perfectly valid HTML and XHTML (as long as you're using a Transitional Doctype). Perhaps more importantly, there are still sites that use these tags and it's helpful to know what they mean.

So, I decided to take the chapters out of the printed book and offer them to my readers on my Web site. The chapters included appear exactly as they did in the Fifth Edition, including page references and black and white illustrations. While I did consider updating these chapters, I'd rather spend my energy going forward with some new ideas. (I've got lots of stuff planned!)

Here's a brief explanation of why none of these chapters were included in the print edition:

I thought frames were the cat's pajamas back when they were introduced. (The example page that I created as I was exploring frames continues to be one of the most popular areas of my entire Web site.) Frames seemed like the ideal way to combine static navigation and branding areas with dynamic content areas. Frames have several disadvantages, however. First, their scroll bars take up a lot of space in the browser window. Second, they take all the power away from the visitor, since the size of the various frames is all up to the designer. Third, browsers don't navigate them that well, dealing with only the main frameset's URL instead of each individual frame's URL. If a visitor attempts to bookmark the page that's showing, they often don't get what they expect.

The death knell came from search indexes. Because a frameset is made up of several files, and each of these files may be indexed individually, it was entirely possible that the navigation area or a content area might appear by itself in search results—with no supporting frames.

The standard way to achieve static and dynamic areas in a Web page is to repeat a portion of the page—generally the navigation or branding areas—and then change just the part that is different. Use CSS to position the static areas in precisely the same position. My Web site is set up in that way. Note how the navigation areas to the left and top remain (relatively) static while the lower right content area changes.


Back in 2002, when I wrote the Fifth Edition of this book, it looked like WML might win the day with mobile Web sites. There were few phones that could read XHTML and fewer still that could use CSS. Today, that has all shifted. While most phones still understand WML, most phones also can understand XHTML and CSS. And not only is it easier to learn a single technology instead of two, it's much easier to write one set of Web pages and leverage them for two (or more) purposes by creating a CSS style sheet just for mobile visitors.

Formatting: The Old Way

The HTML tags in the first Old Way chapter were already on their way out when I relegated them to the back of the Fifth Edition. There are the basefont and font elements for controlling size, color, and font face, the text, link, vlink, alink attributes of the body element for changing the color of text and links, the strike and u elements which have been replaced by the logical elements del and ins, and the completely non-standard blink element which was one of Netscape's more popular and most hated extensions.

Of those tags, only strike and u are remotely acceptable by today’s standards. Nevertheless, I continue to see the font element used and generated by Web page programs so you may want to know how it works.

I do not recommend using any of the elements explained in this chapter.

Layout: The Old Way

If the elements in the Formatting: The Old Way chapter are unfashionable, many of the elements in this chapter are downright illegal, never having made it into the official specifications at all. There is one element, however, that I decided could not be removed from the book altogether. That is center. The center tag is an abbreviation for the slightly more standard but equally deprecated combination of <div align="center">, yet it is blissfully straightforward and simple. I brought it back to the Basic (X)HTML Formatting chapter on page 79 of the Sixth Edition. The rest of the stuff in the Layout: The Old Way chapter should probably best be forgotten. I offer it to you on the site for historical purposes only.
If you are still interested in looking at these chapters, see the Old Way Chapters section of the Extras part of my Web site.


Anonymous said...

Hi Liz! I just bought your book, the new 6th edition. I'm really looking forward to digging in. I'm not a newbie but I've learned on my own and there are so many things I hope to still learn and fill in some gaps on. I always like your books, but now I can give away my old 4th ed. :) Best wishes and thanks.

Anonymous said...

Just bought your book for my Web Application Development module at uni. So far so good. I'm not relly a beginner, just need to know how to do things right! I'm finding the CSS and Form sections very useful. Thanks for the great book!


Michael Martinez said...

There are many good reasons to get away from frame-based design, but search engines are not one of them. Search engines have become very good at figuring out which is the most important section of a frame-based "page". The idea that search engines cannot handle frames is very outdated, circa 2003.

I still have some framed content that I have been slowly replacing. The search engines index the correct pages and display the correct pages in their results. I've been working with search engine optimization since 1998. Today's search technology is extremely sophisticated compared to what we had to work with just a few years ago.

Anonymous said...

One very important reason why frames are evil:

A lot of people not only bookmark pages they want to come back to but also pass those links to their friends via IMs, email, networking sites, etc. If the site uses frames, the person in question needs to provide not only a link to the site, but instructions for navigating to the desired page. A substantial number of people won't bother, and a substantial number of the recipients of those "links with instructions" won't bother to follow the instructions, which can cost you a lot of word-of-mouth (or word-of-blog, etc.) traffic.

Most of the time frames are used out of sheer laziness on the part of the site creator. They're used to provide, for example, a static menu, but instead of that menu being helpful to the user, more often it's just in the way anyway; some judicious internal jumps can provide access to that menu without the obtrusive frame. Or they're used to replicate content between pages, but SSI can do that just as well. In nearly every case, there is a frameless way to produce the same effect without all of the drawbacks of actual frames.

I should point out, by the way, that the bottom few lines of your nav menu are cut off in my current browser window (Firefox, 1024x768, with tabs and the Web Developer Toolbar), and you don't provide a scroll bar to allow me to access them. Which goes to show, I suppose, that CSS can be used for anything -- even to replicate some of the evil aspects of frames.

My Books