The Olden Days

I was asked recently about "the new way" of building Web pages, and someone overhearing asked "What was the old way?"

It's a fair question, but one I am always reluctant to answer. The old way was bad, very bad. Let's just leave it at that. But that's always like when the little kids start asking about where babies come from. Anyone with enough curiosity to ask is going to be able to pursue the story, so we might as well get our side out there at the same time, so they can see the benefit of doing it right.

I hope.

So, if we set the WayBack Machine to 1997 what would we find that we don't approve of, today? Things stand out immediately. First, there was widespread use of spacer .gif files to get things to line up, visually. When we wanted to change anything about the type on a page, we used the <font> tag. And when we wanted to restrict the layout of page, we used tables. This was new in the new version of HTML, v3.2.

HTML was evolving at a rapid pace back then. The original specification, HTML, only lasted a year or so before HTML v2 was born. From there, HTML v3 struggled to keep up with the competing titans of Netscape and Microsoft, who were releasing new versions of their browsers twice a year, often with support for proprietary tags, which gave rise to another annoying trend of the day, the dreaded "Best Viewed In…" badges. Whatever Web page you wanted, you would think you would have a 50:50 chance of having the right browser open at the time, but it never quite worked out that way.

Spacer .gif files were small, at least. Typically only a single pixel, colored as transparency. These 1×1 image files were then presented with height and width attributes as necessary to fill out some area of a page that would normally be given over to what we now know as block-level tags. In the days before we realized that paragraph text online looks better without indentation, people would use:

<p><img src="images/spacer.gif" height="10" width="25">Here the paragraph begins…

This would have the effect of scooching over the starting text by twenty-five pixels. Other more elaborate effects could be generated, but they all worked basically the same way—the transparent image took up space on the page and caused other elements to flow around it. It wasn't optimal, but it was all we had at the time.

The <font> tag was the driver for anything having to do with type on the page. If you wanted to make your text larger or change the font (which you did often, to prove you could and show off how cool you were), you did that with the <font> tag.

<font face=Verdana size=+1 color=blue>

This would, even without double-quoting the attributes, set the text on your page to appear in the Verdana font, just a little bigger than surrounding text, and color it all blue. When you were done, you issued a </font> and the text reverted to the last size and color and so on. This could get very confusing, very quickly, especially as you adjusted only the size or only the color or only the font face, leaving the other attributes as changed. And this of course is what made it all such a bear to edit and maintain.

And lastly, we used the <table> tag whenever we wanted to restrict a layout. We took the tool designed only to present tabular data and turned it into a framework for our pages, with <td>'s for navigation, headers, footers and even columns in our main content areas.

We didn't do all of these things because we were jerks. We did them because these were the only tools we had at the time. Today's CSS gives you much more control over margins, paddings, borders and colors than we ever had, using tables. And today we gain the benefit of smaller, faster-loading pages that are much, much easier to maintain. It's a good life. We've come a long way and I'm going to trust you now. Kids, don't try these things at home. I'm a trained professional and you could hurt someone you love if you adopt techniques like these.

Check Your Work

Are you still checking your work in as many browsers as you can?

For some reason, people tend to feel like if you are using the Templates, it means you no longer have to check your pages. This isn't as true as we would like it to be, yet.

The rules for how HTML tags are supposed to work were written many years ago. You can check them out for yourself today at the W3C. But, somehow, everyone managed to read them differently. In some cases, the differences were minor, but in other cases they are pretty major. The bottom line is that we are still a long way from the television model, where a TV program looks pretty much the same on a Sony or a Toshiba or a Panasonic television.

If you haven't checked your pages in several browsers, you may be surprised at how different they look in Internet Explorer, Safari, Firefox, Chrome or Netscape[!]. And even across platforms. Pages look different on PCs and Macs, too. Some of these differences are due to the size of the viewport, some are due to video resolution and others are differences in rendering.

Suppose you have an egg carton, and suppose you have thirteen eggs (for the bachelors in the audience, an egg carton is built to hold only an even dozen eggs). That's a situation a lot of Web browsers find themselves in from time to time, when a Web designer has stipulated limits on a box, but then come up with too much content to fill that box comfortably. Some browsers will honor the content, stretching the box as necessary to fit it all in—like an egg carton that suddenly has thirteen spaces for eggs in it. Other browsers will honor the container and cause any extra content to disappear. You end up having to scroll that box to see everything.

Some of the rules are written in a way that invites trouble. The standard does not limit sizes, weights or styles for headings, strong or emphasized text. It only states that the new text must be sufficiently different from the surrounding text that the reader understands there is something different about this word or phrase. This stems from the Olden Days, when we only had text, and only two of anything that looked like fonts, and only about sixteen colors. Today pretty much everyone renders an H1 heading at 200% of normal size, and in bold. But by the time you get all of the way down to the H6, there is little in common between Safari and Firefox and Internet Explorer and the others.

I routinely work on a Macintosh, and develop pages in Firefox. Then I check the pages in Safari on the Mac and switch over into Windows mode to check them again in Firefox for the PC and in Microsoft's Internet Explorer. When there are problems, I usually find them in IE. Most often it's a simple fix but there have been occasions when I have had to abandon something because I couldn't get it to work in all browsers.

We may one day get to a point where everyone is either using the same browser, or every browser is using the same interpretation of the rules. There was never a time when Milton Berle came on TV with a graphic saying "Best Viewed on Zenith Televisions" and Jack Benny came on with another graphic saying "Best Viewed on Admiral Televisions". All of the TV folks were able to read the published specifications and come up with cameras and receivers that worked, no matter what. Maybe one day we will get to that point on the Web, when pages will look the same on iPhones and iMacs and PCs. But I suspect we'll be fighting this battle for a long time to come.

Until that day, check your work in as many browsers as you can find.

Only a Quarter Remains

No, not a 25¢ Quarter. These are interesting financial times, but I refer to the Calendar, in this instance. And we'll take up the slack on a few other items that have been rattling around in the junk drawer for a while, too.

A while back we talked of the grand plans we had made for this year. Well, we have only these last three months now, to make a difference. If you were planning on learning a new language, or a new piece of software, or a new technique for doing something you have grown comfortable doing the old way, your sands are running out, now.

Adobe announced the coming of Creative Suite 4, recently. You should probably decide if you are going to upgrade, and when. I strongly dislike having to do anything important under deadline pressure for the first time, so I will want to get my copy installed right away, but there are good reasons to wait, too.

Think about the coming year, too, and not just the one that's ending. With the recent financial turmoil, are there things you may want or need that would be easier to get or accomplish this year than next? Maybe some priorities need to be shuffled or swapped, to make it all happen.

I'm always fascinated by how we use our time. There is a book, somewhere, that holds the dates for the academic calendar going out for years and years. You can go to that book and look up the first day of school for the fall of 2011, I'm sure. And I'm equally sure that someone, somewhere is going to be running around with their hair on fire in early August of 2011 when it suddenly hits them: the kids will be here any minute, now!

Designs On The Future

A committee is already meeting regularly, designing the next new page templates. We anticipate rolling out the new design and all of its supporting pages and materials in August of next year.

If there is some widget or gizmo on the current pages that you absolutely love, or hate, or if you have seen some widget or gizmo on one of the pages you regularly visit and you definitely do or definitely don't want to see it here, this is your time. Let someone know how important the weather is, to you, or the QuickLinks drop-down menu. Or, whatever. The designers are on their own schedule, but you can participate in the Web Developers' Network discussions every second Tuesday of the month, at 2pm, in the City Campus Student Union building. Note that this month's meeting is being held on October 21st at 2pm, due to scheduling conflicts that couldn't be avoided.

Your Papers Please?

Is all of your software legit? I mean all of your software. It's tempting, when you know how easy it is to go out on the interweb and find a "cracked" version of just about every program, to download the one you need for free. Quite a few of us are probably really good at justifying this kind of thing, too. "We buy so many copies, they won't miss this one" or "I only need this three times a year and can't justify the cost" or something similar. Some of the excuses are quite good, but they are each, potentially, career decisions. When the company finds out you've stolen a program and sues, it won't be you they sue, it'll be all of us. And it won't be you that gets the black eye. It'll be all of us. And it won't be you that gets the next paycheck, it'll be all of us. I am forever amazed at the upright (uptight?) citizens who sit in their lofty perches and make moral pronouncements on the fitness of all of the rest of us… while their hard drives are littered with stolen programs, movies and music. I always wonder what they teach their own kids about stealing, and how they resolve the two situations. Don't be That Guy. Cut the check and do it right.