Monday, March 31, 2008

It's called HTML and it's not hard

In 1998, when I was a junior in high school, my friend Dan made a website. It was on geocities or something like that. He showed it to me and I thought it was the coolest thing ever, with links to his favorite sites and some text about him and stuff like that. Wow. So I asked him to teach me how he did that and so he fired up notepad and we started typing out HTML. It took me quite some time to understand tables, but eventually I had my own geocities page and it was awesome. I have been writing HTML in text editors ever since. My point is that it's not hard to write HTML that can be rendered by a browser.

It's even possible to write HTML that is rendered correctly by multiple browsers. I have Firefox and IE on my machine and I test in each of them. Even though IE is the only one that I'm required to support, I still test in Firefox to make sure that it at least looks similar and functions similarly to the way it does in IE. You know what it takes to test your html in both IE and Firefox? Five minutes. Here's how:

  1. Open IE
  2. Navigate to your website
  3. Look at it
  4. Open Firefox
  5. Navigate to your website (optional: 5a. Copy and paste the URL from IE to save time)
  6. Look at it
If in step 3 and step 6 you find that something is significantly different, you might have a problem. With that said, let's move on to:

My HTML Wall of Shame

So here's a blog that's written by someone that I won't identify but his initials are Jeremy Miller. Let's now run steps 1-3
Results:


Now, let's do the same steps in Firefox (that's 4-6 in case you've forgotten, and yes I ran step 5a and saved at least three seconds).
Results:



And now, our comparison. Do these look the same, similar, or different?

It turns out that they are similar, but not the same, in that for reasons unknown (but they're crappy HTML) the firefox version obscures part of the post, mostly the part in which the punchline of the cartoon is visible, which is more than a little annoying. And because of the nice fluid interface, no amount of expanding the browser window fixes this.

So who to blame?


Well, I don't blame Jeremy for this, it's most likely an issue with codebetter.com and it sounds like they need to "code better" when they're writing their web interface for blogging. But there are a few other blogs out there that have been guilty of this in the past (and two of them are on codebetter, coincidence? Must be. . .) and been impossible to read at various times (I would have liked to have provided a direct link to the offending posts but I don't feel like searching through past posts to find them. I just copied from my IE history because that's the only time I'd open these blogs in IE).

And this isn't limited to bloggers

No, I can only wish that it was only a few bloggers that have this issue. Unfortunately, a good chunk of the internet suffers from it. I've seen websites that cut off the sides, top, and even bottom (that's hard to do) of the page due to crappy HTML formatting in order to try to make the site look all "Web 2.0" or whatever. In order to try to help fix the problem, here are some guidelines:

  1. Test your site using the steps I outline above
  2. If it doesn't work, fix it.

If you follow these simple steps, you can't possibly fail (at least not in this way). Remember, if a high school junior could make a good web page in 1998, so can you. It's not that hard

2 comments:

ulu said...

It's called Telligent Community Server and it doesn't render correctly even in IE7..

pop said...

... and it clearly doesn't render correctly in Firefox either.