Flash with Standards

I hate Flash.

There, I said it. I’m glad I said it and I won’t take it back. Oh, there is nothing more loathsome than waiting ten hours for a web page to load only to have a Flash enabled splash page appear that says “Click here to enter the site”.

😡 Grrr! I just typed in the address up there and either clicked the “Go” button or hit “Return”! I don’t want to click there just to enter the site I thought I was already entering.

I also just LOVE when I get referred to this great hilarious web animation and I wait fifteen hours for it to load and then a “PLAY” button appears. Do you think I want to play the stupid show since I just waited twenty-two hours for it to load? Don’t make me click a button to do what I already want to do. By the way, here are some Flash monstrosities that are not funny (and never were):

  • End of the World
  • Anything from JibJab
  • Vulgar squirrel thing
  • Anything else you got in your email because I’ve already seen it from two hundred other people that thought they got it in their email first

Flash is evil! Flash is stinky! Flash’s mother is so stupid that she stared at a can of orange juice because it said “concentrate”. (Sorry Mr. T).

All that being said, I must admit my hatred of flash is mostly due to its misuse. A small and quickly loaded animation can make a nice header if it stops animating and lets me read the page and its powerful scripting can be useful (even though I’ve never had a use for it).

Here’s the trouble with it: The code that Flash outputs is not standards compliant and embed tags do not validate because they are not part of the XHTML standard.

Some standards compiant techniques have popped up including Flash Satay (which causes you to create a pre-loader flash file that loads the main Flash content or the user stares a an empty space until the Flash object loads completely), the Unobtrusive Flash Object (which relies on JavaScript being enabled) and Nested Objects with conditional comments to switch between IE and everyone else.

Nested objects is my favorite of the three and works like this:
<object classid="clsid:d27cdb6e–ae6d–11cf–96b8–444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="150" height="150">
<param name="movie" value="examplea.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<!––[if !IE]> <––>
<object data="exampleb.swf" width="150" height="150" type="application/x–shockwave–flash">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
This content is only available if both objects fail to load.
</object>
<!––> <![endif]––>
</object>

A chart with the results of all of the methods was posted by Andrew Kirkpatrick & Bob Regan here.

Dump the WYSIWYG

Let’s face it. You can either be a part of the problem or a part of the solution. If you are allowing an application to turn out your markup then, unfortunately, you are a part of the problem. Yes, this includes Dreamweaver and GoLive. I am thoroughly convinced that these “web page editors” are for amateurs and people that want to design a web page but don’t really know what they are doing. These apps are fine for designers that aren’t coders and don’t know XHTML as long as they don’t publish it to the world. Hire a coder to clean up your code or take the time to learn how to turn out proper markup.

Do not use markup for presentation

Tables are meant to be used for one thing and one thing only and that is the display of tabular data. Please, do not use tables for layout. It is much better left to CSS. Using tables for layout is a messy hack often used to “get pages to look the same in all browsers”. Unfortunately, it doesn’t always work. Using tables for layout causes issues with accessibility and makes updates labor intensive. It also increases the size of your web pages which increases load time and bandwidth use.
Font definitions should be included in the CSS file so please throw the FONT tags on the trash heap and let’s move on to the 21st century. Using FONT tags also increases the size of your web pages which increases load time and bandwidth use (déjà vu?).

Include a proper Doctype

You start your sentences with a capital letter; start your HTML with a DOCTYPE. It’s just basic grammar.Mark Pilgrim from Dive Into Accessibility

Using a complete doctype will switch your browser into standards mode. This will cause it to render the page exactly as you have instructed it (which may look awful but at least now you can point the finger at yourself and not the browser). Without a proper doctype your browser will switch to quirks mode or as I refer to it “amateur mode”. A proper doctype with an XML prolog will also cause some browsers (IE) to switch into quirks mode so do not add an XML prolog.

Validate

Developing a website without validating is like running around with a blindfold on. As soon as you ask for directions, don’t be surprised if the only answer you’ll get is “take your blindfold off”.some guy named Jim

Validate your markup here
Validate your CSS here

Ask for help

The steps before this one are necessary. Good clean code is hard enough to debug. Code with bunk markup and presentational hacks just throws more hay on top of your needle. Taking the steps above before asking for help shows that you are at least trying. To drive that point home here is one of Aesop’s fables:

Hercules and the Wagoneer

A delivery man was driving a wagon along a country lane, when the wheels sank down deep into a rut.

The old driver, dazed and confused, stood looking at the wagon. He did nothing but utter loud cries to Hercules to come and help him.

Hercules, it is said, appeared and thus addressed him: “Put your shoulders to the wheels, my man. Try with all your might to move the wagon back onto the road. Never pray to me for help, until you have done your best to help yourself, or depend upon it you will henceforth pray in vain.”

Moral: Self-help is the best help