• Publish content that is unique and relevant to your target audience.
• Write clean html. Use CSS to lay out your page.
• Get links to your site in other high ranking pages.
• Do not hide your content in images, Flash, Silverlight, Java, etc.

It’s this final rule which brings me to the subject of this post. From 2007 to 2009 I managed, and eventually rebuilt, the geographic information powerhouse for Prince George County, Maryland known as PG Atlas. When I inherited the site, it was built with ActiveX, worked only in Internet Explorer, and had an interface that made the original Mapquest look like the slickest thing ever. During my work on the site, I re-built it on an ajax framework, introduced it to the non-IE world and redesigned the mapping interface.

A natural side-effect of this web-standards based approach was a web site easily indexed by search engines. I left that job not long after the new site went live and it grew and prospered on google, with no active human intervention. Google was able to use the site map to index a sitelinks listing for PGAtlas. With some human intervention, this could have been further cultivated with their Webmaster Tools.

Earlier this year, I learned that PGAtlas had been redesigned once again. Soon it would be released as a Microsoft Silverlight site. The new site had no significant new features. It simply was the “old” site, redone in a Silverlight interface. This seemed like an odd choice as Silverlight would severely restrict the availability of the site. The ajax site ran on nearly any device with a browser, from IE6 to iPad. For users that don’t or can’t have Silverlight: mobile phones, tablets & Linux computers, what once looked like this:

Now looks like this:

So what does this mean for SEO?

I had the opportunity to observe the effect of this new web site on PG Atlas’ Google ranking. In the days following the release of the Silverlight site, I tracked the Google results for the query:

“prince george county gis”

Pre Launch

This screenshot was the search result for what is now the “old” site. There are prominent sitelinks for the three main sub-sections of the site: Mapping, Parks & Recreation, Development Activities. The page descriptions are appropriately taken from the introduction copy in the respective pages. The main page description was indexed from the “Announcements” section of the home page. Note the page snapshot feature of google gives a concise preview of the page.

5 Days After Launch

Google re-indexes the new Silverlight home page. The page description now says only “Get Microsoft Silverlight”. At this point the sub-pages return 404 errors. Google has already dropped the three main sub-sections from the listing and replaced them with other, less relevant, sub-pages which also return 404 errors. Note that the page snapshot now displays only a graphic about installing Silverlight.

7 Days After Launch

Nearly all of the sub-section links have been dropped. The remaining links point to a random blank page which is still live, and to a page which redirects to the pgatlas.com home.

11 Days After Launch

The site overall has dropped from first to third in the results. It has completely lost its sub-page sitelinks. The page title and a message to “Get Silverlight” are now the only information available when searching.

Conclusions

When maintaining a Flash/Silverlight only web site, the importance of the non-technology alternate page is critical to SEO. These technologies lock your content in a box ignored by all search engines. Equal attention must be paid to the non-Flash/non-Silverlight page as it becomes a guessing game of which elements in the site are most important. Every element which does not have a counterpart on the alternate page is one less search result for which the site qualifies.

If we play the above scenario in reverse, we get a detailed illustration of the advantages in replacing a Flash/Silverlight site. Following established web standards provides not only the benefits of SEO, but also expanded audience. Tablets and Smart Phones are becoming ubiquitous. Their limited support for Flash is waning and their support for Silverlight is non-existent. Even without HTML5, creative CSS and JavaScript can produce much in terms of animated intros and transitions and will be supported on any device with a browser.

If SEO is at all a concern for the current maintainers of PGAtlas, they have a long road ahead of them. The site’s ranking will only continue to drop until the non-Silverlight alternate page is re-designed. The deep linking which once existed in the site will never return. The growing tablet market it is now completely cut off from PGAtlas. It will be interesting to see what actions are taken to address these issues. For now, as far as search engines are concerned, the site remains locked inside a shiny silver box.

Paper.js has an impressive set of features. It begins by wrapping all of the canvas drawing commands into simple objects such as Rectangle, Circle, Arc, and even Star. All objects have a common set of properties that are easy to manipulate. Animating a shape across the screen is as simple as changing its position property. A Group object combines many simple shapes into complex artwork which can be manipulated as one.

More advanced features of Paper.js include event handling, shape debugging and collision detection. This brings it into the realm of game development. For decades Flash has been the dominant web-based gaming platform. There are many reasons to look at html5 for game development <cough>iOS</cough>. <canvas> has much of the capability of Flash and paper.js brings this out in a programming style very similar to Flash ActionScript.

Using one of the provided demos as a starting point, I was able to create this interactive flying saucer animation in less than an hour.

To render the orb, I used the most high tech web technology available to me at the time, animated gif. The effect worked, but limitations of the gif format did not allow me to have a soft glowing effect that I wanted. Flash was still very new at the time and was not a widely adopted plugin. I could have later redone it in Flash. But I wanted to keep it in a pure web format.

With CSS3 I finally have the ability to produce the glowing effect that I wanted. I’m in the process of redoing the entire cartoon with the CSS3 effect but for now I offer a sneak preview, panel 8:

The full source is available within the jsfiddle widget above. The effect has two parts:

Part 1: The Glow

The glowing effect starts with a CSS3 gradient. I alternate between white and transparent radial gradients to create the wavy effect.

The gradient is layered on top of a solid png of the scene.

Finally, a PNG24 with alpha transparency is used to mask the gradient to produce glowing rays.

Part 2: Animation

The solution isn’t perfect. As of version 9, Internet Explorer still doesn’t have any support for gradients. The differences in implementation between webkit and mozilla make for more complex code. And a flaw in Safari’s (including iPhone/iPad) implementation of webkit makes the animation impossible. Once the CSS3 gradient properties become standardized, the technique will be much easier to implement. For now, it works very well in Firefox and Chrome, as well as any android based device.

It’s not like that? It’s about stopping criminals? You’re right, the Christians in ancient Rome were criminals. They had something to hide. Escaped slaves are criminals. They have something to hide. Jews in Germany years ago had something to hide. They were criminals too. So is the homosexual man in many states. They are all criminals and they should have been easier to find.

That’s not a fair example? Those people are oppressed? What about the worker who has proof of his employer’s embezzlement. He doesn’t have anything to hide? The witness to the act of police brutality. Nothing to hide either? The battered wife running from her husband? She certainly has nothing to hide. They are not criminals, and and yet they have something to hide.

You still have nothing to hide? Then it’s not about you. It’s about all the people that do have something to hide.