Welcome to nested tables hell

If you have tried to skin your MySpace profile before, you have probably failed - and if not, I'm probably not going to tell you anything you don't already know. Alternatively, if you don't know what MySpace is: go away, don't read this - it's not for you.

What I have learned

Firstly, I'm not the only dude on the block to try and tame the tabled beast that is MySpace, others have come before me - and I have learned form their examples - and set forth to figure other things out on my own. Here are a few things that will come in handy:

• You cannot use the # sign anywhere in your CSS. So you must specify colors [color: ffffff;] and shorthand will not work either.
• You cannot change or specify style rules for iframes - so you don't ace the banners. If you manage it, be prepared to meet the Jack-boot of MySpace.
• Placing comments in your CSS file don't work, and in some cases they fatch up the CSS code in some other browsers. IE conditional comments work fetchingly well, and are used in a few of the styles I am working on.
• Make your life easy and do things the hard way. SInce you can't use the # sign, avoid shorthand for borders and such, and just write out the properties individually.
• It's not going to work like you expect, so don't be surprised when you have to break out the Excedrin Migraine.

You can see the last theme I concocted at my MySpace Profile, and download them here:

• Style Number 1
• Style Number 2

I will be posting a tutorial page in the tuts section as soon as I get about 6 or so of these babies done and ready to fire off to the world. We'll see how long that will take exactly....

Once you get past the fact that the poor markup of the site keeps kicking you in the nards, it's not really that bad. Okay, so maybe you just get numb and stop caring - but hey - if you don't know the difference on a conscious level, then there is no difference. Right?

Actually you can do quite a bit, as some of the more ambitious folks have shown us. The Yaris profile is nice, so is the Snakes on a Plane, Nip/Tuck,  Wendys and Burger King also have a spot too. There are some really swank profiles, and I have not even really looked too hard yet.

Check it out, and check back for more layouts soon....

I've seen a few people doing really great work with duplicating themselves photographically on Flickr, so I decided to give it a shot with the 2 crazies this morning. Dylan's shot turned a ton better than Donovan's, but he's smaller and fits better in the frame of the couch.

I will have to play this a bit more.....

This is a great site. It's a promo site for M&Ms Dark - and it's super-cool... In a spooky way....

It's a pretty original idea. Take a painting of suggestive images that represent horror movies, and makes folks guess which movie it is for. It's pretty damned immersive, and pretty frickin' hard. There are 50 movies represented here, and you are timed to how long it takes you to name them all. So far I have 30 +/-, but I am not a huge horror film buff.

Check it out - it's a kick.

The more and more I think about how Flash interfaces with the page and how things are changing in regards to how the SWF is presented within the mark-up, the more I think there has to be a better way of creating a unified experience that is reliable and simple.

How to Break it

Let's say, for the sake of argument, that you have just started using SWFObject, and you have been experimenting with sending the Flash file dynamic variables based on what preferences the user has set in their respective browser. So what happens to your well designed and implemented SWF file if it gets indexed and someone links directly to it? Well, unless you've thought it through and added defaults to those variables being passed to the Flash interface - it breaks. Then the user moves on. Not exactly what you want out of your website right? Unless you're a loon, you want people to actually view your website. So why make it so easy it for the site to be broken?

As a general rule, I think it's because most folks don't consider their website to be an application - which by nature, should be able to stand-alone. Right? Well, it is, and it should be considered as such. Furthermore, if you prefer that your Flash site be viewed at a specific size, within its designed environment, then why not just make it mandatory? Here's an example. Look at the Zippo Hot Tour site, it's a good, solid design that fits nicely in the page and screen. The graphics are tight, well optimized for its size, etc... And yes, I created this site, so I am partial. Now take a look at the SWF, opened in your browser. Exaggerate it by opening your browser full screen. Everything starts to fall apart. The graphics look like butt, and the only things that hold up are the vectors. Not at all what I have intended - right? That's exactly what I mean. This is only partially a good example, since the site still functions - but you get the gist.

The fix

This isn't anything mind-numbingly difficult either - but it is important. I use the SWFObject code exclusively on every Flash site I develop now. You should too - it rocks! So use it. The reason I mention this is because it is the best way to ensure your Flash site is accessibly in a seamless fashion to your viewers, and after all - that's the whole idea; to create a immersive experience online. here's the code from the Hot Tour site:

Pretty straight forward, nothing fancy. Now what I will add to create the feature to keep the display of the file limited to within its designed page is this:

After adding that to the SWFObject code, all you have to do is create a small function to check if that is true or false:

That's the easiest way to do it. And then your SWF file will always be displayed how you designed it be displayed. I know there are far more complex ways, and maybe even better ways to accomplish this - but this is a start. The nice thing about this feature is that the user doesn't even really know what is going on behind the scenes. No new browser is opened, it doesn't throw an error - all they know is that the site works and looks great.

Exactly.

It's the little details that really make a site great. This is one of those details that is overlooked, and can go a long way to making the site feel complete.

As many folks already know, Google can index Flash files (.swf) extracting text and links thus allowing the files to be included in search results. But does anyone really care? No, not really. If you Google Flash indexing you will find people that were angry that no one did this for such a long time, then euphorically announcing their undying allegiance when it finally came to turn, yada yada yada....

So why is it then, if you search just results where you are looking at the information indexed from the swf files (using filetype:swf), the results are generally unusable and provide poor information? Developers don't care, and managers care even less. I bet most people figure that just having a meta description and keywords in the HTML is enough, but it's really not, especially if your entire site is developed in Flash. Unless of course this looks like a good title to you:  loading loading . loading . . loading . . . loading . . loading . . . . .

Get the results you want

The solution? Simple: just place a couple of text fields in the first frame (or frames) of your main timeline (either in your main content file or preloader), and let Google do its indexing goodness. The same rules apply here as in web pages, the first text should be able to be read as a title, the following should be a description, and then maybe some keywords. Be careful not to duplicate the same word over and over though, one you will get the same penalty for spamming the index.

Keep in mind how you order the text on the page, and I don't mean top to bottom, or left to right. Order can be determined by which text field is created or the pasted first. It doesn't matter if you are creating new text fields or pasting the text text in from somewhere else in the movie, what you create first will show up first - so if you create the title last, it will show up last, even if you place it visually before the others. The easiest way around this is to simply paste the text in the order you want it. Place it off the stage, or make it transparent - whatever makes you happy.

I also noticed some strange results(text not being read by the SDK) when using text fields and embedded fonts, so just use device fonts - it will make your life easier, plus it adds no overhead to the file by embedding fonts that aren't seen anyway.

Search Engine SDK

So by now you are wondering how to check your files. It's easy, and Adobe makes it a pure joy. In fact, I personally guarantee that you will have so much fun checking your swf results, that you will want to go through all of the main Flash files for your projects and clean them all up - I know I did.

Adobe makes the Flash Search Engine SDK readily available on their site, and gives you the tools in a simple app that works well. The SDK code supports SWF files created for Flash Player 3, 4, 5, 6, 7, and 8, so you won't have any issues checking, even all of your old stuff too. It spits out an HTML file so you can easily read your text results, and also gives you the ability to specify some other parameters. So there's really no reason not to put at least a little time into getting it right.

If you are going to put the effort into developing a kick-arse Flash site or interactive content, take the 5 or 10 extra minutes to make sure your swf gets indexed the way it should. And if you really want a chuckle, do some searches in Google for something - be sure to place filetype:swf in there too - and let fun begin.....

This just goes to show you, some folks have more money than they know what to do with. Woz was on The Colbert Report the other night, and had the pictured business card with him. I first saw this on Digg, and then found the card on ebay.

Not too terribly surprising that after the dust settled, some 85 bids and $560 duckettes later, a large amount of money is separated from yet another left-coaster with (obviously) too much of it to be bothered with the absurdity of his purchase.

It's a really cool card, and Woz is a celebrity, so I guess it makes sense right? Nope. I woulda paid like $25 bucks for it - why? Because I have never had a metal business card before, plus it has his phone number on it - prank calls are fun..... Okay, so I wouldn't prank him either - but the card is cool. Not $560 bags of Doritoes cool; but cool.

I hope the dude buys him more than a Double Whopper with fries.

***Loose Translation:
I'm just jealous because my business cards are Laser Printed on perforated paper from Staples.