Nobien » JavaScript

Pretty Pleased with the SWFAddress Apache, mod_rewrite, and PHP SEO Implementation

Matt — Fri, 11 Sep 2009 19:30:07 +0000

The latest project I've been working on at Rokkan has been umbro.com. When the project first came to us there was quite a bit of discussion over what technology to use, specifically HTML vs. Flash. The client, naturally, was concerned about SEO but also wanted a nice "rich" experience. Sure, there's been a little bit of talk lately over the fact that Google can now index certain types of content with regards to SWF files and the files which they load, but its still sketchy at best. Not to mention you have to pay close attention to how you setup your text fields 'n such. Hell, when is the last time you searched on Google for something significant and got a result that takes you to a specific page of a Flash site/app? I honestly can't think of that every happening to me.

At any rate, after much debate we decided that the experience was a bit more important to us so we would focus on the Flash front end. Regardless of that decision, we also would create a text-only/HTML/SEO friendly version of the site for search engines to crawl using SWFAddress's SEO setup that uses a little special JavaScript, Apache's mod_rewrite and PHP. If you haven't checked this out yet, I highly recommend it.

If you're too lazy to go check out the SWFAddress site, I'll summarize what it does for you. Essentially, with the combination of the aforementioned technologies, SWFAddress now ships with a simple rule-based URL rewriting engine to handle entry URLs that do not contain the SWFAddress hash mark (#). This allows us to display equivalent content under the same folder structure that the Flash site/app uses for users that do not have both JavaScript and the Flash Player. For example, if you have JavaScript enabled and the Flash Player installed and go to www.umbro.com/en_UK/about/ you will be redirected to the SWFAddress/Flash friendly URL www.umbro.com/en_UK/#/about/. If you don't have JavaScript enabled or the Flash Player installed at all, mod_rewrite sends the folder path as a string to a PHP script. In this script you setup rules that determine what HTML content to display. Thus, you can display equivalent textual/semantic/SEO friendly content to anything that doesn't use JavaScript and Flash, eg: search engine spiders.

The only drawback I can see with this implementation at this point is the way in which users share URLs with each other. I'm guessing most users are more apt to simply copy and paste the URL from their browser's address bar than anything else. In this case they're grabbing the SWFAddress/Flash friendly URL with the hash (#) mark in it. Unfortunately if this is the URL that gets posted around the internet and shared via blogs, twitter, facebook, etc, then these pages aren't really going to increase in page rank all that much. However, in order to facilitate the sharing of the non-hash-marked URL, we've placed a "Share This" tool on as many pages within the Flash app as possible. This button uses the link sharing API's for a few social networks and passes in the SEO friendly URLs (without the hash mark) instead of whats in the address bar.

One thing I will say if you do decide to use this approach is to be aware of the amount of extra work that it will entail. You're essentially creating two sites, one in HTML and one in Flash. This can become rather time consuming depending on the scope fo the project and the amount of content. In the case of umbro.com we didn't really have that many pages to duplicate but we did have four markets/languages. On top of this, we initially created very bare-bones and unstyled HTML content that we knew would get indexed as long as it was being spidered. However, once a few people checked out umbro.com on their mobile devices and noticed that the "mobile" version was different than the version they saw on the desktops or laptops, those people suddenly thought that they were indeed seeing THE "mobile" version, not the version that anyone or anything that doesn't have JavaScript and Flash will see. So suddenly we had to pretty up that content with some nice images and CSS styles which required a bit more work than we had anticipated from the start.

I'm pretty happy with how things turned out with umbro.com, if you do some obvious Google searches such as 'about umbro' or 'where to buy umbro' you can see that pages from umbro.com are appearing pretty high in the results right now and thats honestly good enough for me at this point as I've never built an entire site in Flash and had any sort of results show up in Google before. I'm also pretty curious as to who else out there has implemented this with good results, so if you or any other sites you know of that have gone with this solution please leave a comment and URL. Thanks in advance.

Just One of My Favorite Flash Tools: swffit

Matt — Mon, 17 Nov 2008 14:38:44 +0000

I just have to mention this really quickly. When working on tridentgum.com I was introduced to, what I thought might be, a little known JavaScript tool for Flash proejcts. We had to give the site a minimum height and width in the browser but still go 100% if the screen is larger than the minimum size. Something I've done before but just not so easily. At any rate, the lead developer at the other agency we were working with discovered swffit. It makes doing this sort of thing ridiculously easy. In most of my cases, I just need a minimum width and height, which is usually the width and height of my FLA's. Otherwise, the site can stretch to the size of the browser.

I recommend swffit to everyone!

SWFAddress 2.1 & SWFObject 2 Work Together.

Marc — Sat, 26 Apr 2008 12:24:48 +0000

I spent a good hour yesterday trying to get SWFAddress 2.1 and SWFObject 2 to work together. First off, they do work together. Second, there's nothing to it. Then why did it take me an hour? Because I'm a dummy and I had the order in which each JavaScript set was called. In hindsight, this is common sense, but the golden ticket here is calling SWFAddress javascript BEFORE declaring the SWFObject. This more applies to people using the dynamic way of embedding the SWFObject. ie:

 

    SWFObject v2.0 - step 3

Silly right? I saw a couple of posts out there of people having a hard time getting this going. Once I flipped the JS declaration, it worked. And I felt kinda dumb. But hey ... That's life.

BTW: both SWFAddress and SWFObject 2 are pretty amazing and should be worked into your site/app flow if they aren't already.

Flash Embed Tip: Minimum width and height for liquid layouts

Matt — Thu, 01 Nov 2007 20:20:12 +0000

Update: This post is old, and getting a decent amount of traffic, so I've decided to provide a link to a more recent post that handles this situation much better! Just One of My Favorite Flash Tools: swffit

Over the course of your career you often come up with solutions to such small problems that you completely forget about them. One instance for me is coming with a really simple way to ensure that a Flash site has a minimum height and/or width while using a liquid layout. When a designer gives you a comp and he or she says "I want this to be 'fullscreen'", you immediately think that you'll be setting the width and height of the embed code to 100%. However, you soon realize that you have to account for smaller screen sizes than the size at which the site was designed for.

You could create you're own horizontal and vertical scrollbars within your Flash piece to handle such a situation, but I much prefer the scrollbars within the browser, as a user is much more apt to recognize them and feel more comfortable using them. Here is my tip for handling this.

Say you have a piece of Flash content embedded in your page with SWFObject as such:

var so = new SWFObject("Home.swf", "myFlashContent", "100%", "100%", "8", "#000000");
so.write("flashcontent");

Straightforward, of course. Now start by adding this Javascript function up within the page's HEAD tag:

function adjustSWFHeight() {
    if(document.body.clientHeight <= 768)
        document.getElementById("myFlashContent").style.height = "680px";
    else
        document.getElementById("myFlashContent").style.height = "100%";
 
    if(document.body.clientWidth <= 1000)
        document.getElementById("myFlashContent").style.width= "1000px";
    else
        document.getElementById("myFlashContent").style.width= "100%";
}

Simple enough, right? The only thing you'll have to customize is the condition statement which defines the minimum height of the Flash content and the edge at which to use the minimum height over a 100% value. Next, set the onLoad and onResize properties of the page's BODY tag.

And thats it! o far it seems to work in Firefox, IE and Safari pretty well. Perhaps it will help you!

Not Bummed About AIR’s HTML Component: Javascript and Actionscript Integration

Matt — Fri, 06 Jul 2007 14:08:37 +0000

So I've had a change of heart. Big whoop! It happens to everyone at some point in there life. Its kind of like when your girlfriend starts to really get on your nerves but then out of no where she...oh nevermind, I think you know what I mean. At any rate, I've been working on an HTML/CSS editor program for the book and I have to say that the Javascript/Actionscript integration is simply amazing! Maybe I'm getting excited over nothing, but I can't begin to tell you how awesome it is to be able to loop through stylesheet and css related objects all inline with my actionscript. Sure, there's a few things you have to take into consideration, but it has allowed me to make this application in almost no time. I just have to brush up on my Javascript and bam! CSS editor! Needless to say, I'm stoked. Over and out.