Vol. 2, No. 14
TODAY'S LESSON: Design Tricks for Explorer

Big-league, heavy-hitting Web developers such as yourself know how hard it is to design a site that everyone can enjoy because we all experience theWeb through different browsers running on different operating systems. Why, just LOOK at how spotty and erratic browser coverage can be:

Browser Chart

As we wait, toes tapping, for the arrival of Browser Utopia (i.e., complete standards compliance), we're left with a difficult decision. Either we, 1) go the lowest-common-denominator route and strip both the whiz and the bang from our sites, 2) make two different versions of our sites and rely on browser-sniffing code to serve up the right pages to the right people, or 3) build the site of our wildest dreams and simply leave the poor saps who can't see the magic out in the cold.

Well today we're going to see what's behind curtain number 3. Specifically, we'll be adding three new features to our site that are tailored for people running Internet Explorer on Windows machines. One of the features (iframes) will run on early versions of IE and even some other browsers, but the other two require far more recent versions of IE: The Favorites Icon needs IE5 or better, and SMIL needs at least IE5.5.

Sounds crazy like a plum, no? But with close to 75% of Internet users riding the Web with just such a setup (IE5+ for Windows), it isn't as nuts as it first seems -- after all, if three out of four people can see your site, that ain't half bad.

So let's start with a smile!

>>> SMIL and the World Smiles with You <<<

Want to fancify your site with graphics that shrink or blush or race across the screen when users click on them? Sure you do! One way to accomplish all that is to build a bulky, plug-in-required Flash animation. OR you could simply use a few lines of SMIL, a markup language that has a lot in common with XML and HTML, so it shouldn't be too much of a leap for you to learn (think picking up Italian after mastering Spanish).

Want to find out for yourself how easy it is to turn that frown upside-down? Join Webmonkey Rodney as he walks you through the basics of the language, time lines, and color transitions:

SMIL 2.0: Codeless Animation in HTML (IE5.5 or better)

>>> Playing Favorites <<<

Has this happened to you? You find a site you'd like to see more of and you click "Add to Favorites." The next time you pull down your Favorite menu, it's there, as expected. But, much to your surprise, it's accompanied by a cute little icon -- so cute in fact, it's all you can do to keep from click-click-clicking on it all the livelong day, right?

Once you get over the giddy rush of your first Favorites Icon, the next logical step is to create one for your own site -- after all, your users deserve to have their days brightened with a splash of color, don't they? Something to collect, like Girl Scout merit badges or gold star stickers on a report card? Here, let Webmonkey Emily show you how it's done:

All About the Favorites Icon

>>> iFrame, You Frame, We All Frame! <<<

Two lessons back we learned all about frames. Remember how we used them to split up the browser window? How we could link and load from one frame to the next? After playing around with them, however, I'm sure you discovered their tragic limitation: Unlike Elsa the lion, frames are not born free. No, they're bound to the side of the browser window.

Enter iframes (or "floating frames), the more flexible and liberated cousin of frames. Iframes behave just like an image and can sit anywhere on the page. They go where they want to go and pull in whatever content they want to -- so liberated! So are you sold? For details on the implemention of iframes, check out Webmonkey Zach's treatise on the matter:

The IFrames Lowdown

1. Calling off the Border Patrol

Floating frames come with borders by default. You can alter border thickness by invoking the almighty frameborder attribute.

<iframe width=150 height=200 src="blah.html" align=left frameborder=10>

Or go totally stealth and set the frameborder to zero:

<iframe width=150 height=200 src="blah.html" align=left frameborder=0>

2. Color Me Badd

I know you may feel tempted to use a rainbow of fruit flavors when you create the Favorites Icon for your site, but when it comes to creating a graphic that small, less is more -- too much detail or too many colors only serve to muddy your icon and up its file size.

3. Burn, Baby, Burn

Never fall asleep at the beach unless you're absolutely sure you'll wake up if, say, your friends place a stencil that spells out "I heart plankton" on your rapidly pinkening back.

1. Learning to Crawl

To make sure search engines can find all the pages on your site (or the pages you want to be found, at least), make a "crawler page" that contains nothing but links to the pages you'd like search engines to crawl. Don't include any text or tags, just the links. Then add a link to the crawler page from your site's home page and search engine spiders will find it as soon as they get to your site and suck down all the pages on it. For more details, and to see an example crawler page, check out: Get Crawled

2. Size Matters

TITLE tags seem to work best if they're under 40 characters in length, and META descriptions should be kept under 50 words. Keep your crawler pages small: Anything over 100 KB can choke spiders or cause them to pass on the pages altogether.

3. Chapstuck

Chapstick, while an excellent way to keep your lips moisturized and conditioned, can be less than beneficial for your favorite shirt, pants, duvet cover, and towels -- especially after your dryer melts the balm down to a hot, greasy wax.

Handcrafted Archive