Managing flash content and SEO

Flash really is a neat technology; it brought animation and dynamic content to the web years before the W3 standard enabled such feats. Now, on its ninth version, Flash is an ubiquitous part of the web. However, there’s always been a significant drawback to Flash, and that is its content’s invisibility to search engines. Way back in the Flash 5 days, the plugin was used exclusively for vector content and cartoon animation, and it certainly wasn’t used by any worthwhile web pages for any kind of serious content. However, as websites became increasingly desperate to stand out during the .com-boom, form was chosen over function, and now there are many sites that use Flash exclusively for all content. Let’s look at some of the downsides to this approach:

1. Text loaded into Flash is not accessible by search engines
2. Text in Flash is not browser-resizable, reducing accessibility
3. Text in Flash is harder to print
4. Graphics displayed in Flash can take longer to show up
5. Links in Flash aren’t followed by web crawlers

It’s true that the html template for Flash does include the static text used in the movie as a html comment, but the interpretation of this information is entirely up to the web crawler; there is no guarantee it will be used for anything. Furthermore, if you’re using Flash’s ability to load either plain text or XML, and using that for content, this information will be 100% invisible to search engines. Accessibility is another major problem for Flash content. A typical Flash file is designed around a set size, and as such the content doesn’t resize with the fluidity of intelligently designed CSS. If a movie is 700×400, it will appear quite large on old-fashioned 800×600 monitors, quite small on 1920×1200 displays, and invisible on most portable devices (read: no plugin support). Resizing and accessibility features in Flash are primary opt-in. Either way, it doesn’t do you any favors in terms of search engine visibility.

Now let’s talk about some solutions.

The Flash route: If SEO isn’t important to you, feel free to ignore the shortcomings of Flash. That’s right — if your site is targeted to people who already know where they’re going, feel free to use as much Flash as you want. That said, I would still recommend putting in some clues for search engines: plain HTML describing your site, meta tags, etc. But what if you need Flash and really want to preserve search engine visibility? A great technique is to provide Flash and non-Flash versions of your site. Particularly if the content is dynamic or server-driven, creating a PHP page to render content out to regular HTML is a great idea. You can create the content once, and publish twice. Also consider that it’s probable that only web crawlers, outdated browsers and non-desktop devices will be viewing this version. In other words, feel free to use a recent version of Flash to provide the best experience when you have a HTML version to fall back on. If you expect a lot of users to use search engines as a portal, make switching over to the Flash version a one-click affair. It is also possible to overwrite the HTML content with a Flash file using JavaScript, although this process may unnecessarily increase load times.

The AJAX route: With very few exceptions, what was once only possible in Flash is now doable with AJAX. There are a variety of free AJAX libraries out there to take the headache out of cross-browser compatibility. Check out script.aculo.us which combines a cross-browser foundation (prototype) with eye-catching animations and effects. Instead of using complex parsing schemes to handle XML data and convert it into HTML using javascript, try just outputting regular HTML from your AJAX server script. Ruby on Rails features this ability natively with its partial template system: the same code that renders part of the initial page can be reused to output an updated version as per an AJAX request. It’s so easy in fact, that one line of code will be sufficient to add this functionality. PNG graphics also help bridge the gap between Flash and HTML. With alpha channels in images and CSS absolute positioning, a lot of what is popular to do in Flash can now be done with regular web technologies. Internet Explorer has PNG rendering issues, so check out this site to see a solution for this.

That said, there are times when Flash is the best tool for the job. Currently it’s by far the best way to get vector content to animate in a web page. It’s also more installed than any other plugin, so it makes a good choice for presentations and movies. It’s also more supported than AJAX may be, so depending on your target audience, you may reach more users with Flash than AJAX. However, any major browser released in the last three years can handle both with aplomb.

I have developed with both DHTML/AJAX technologies and with Flash. Flash has great potential as the programming abilities of the platform are now so robust. Flash’s rendering is also reliably fast and accurate, which cannot be said of all web browsers’ CSS support (IE I’m looking at you). Additionally Flash’s code is compressed, so in my experience it is actually possible to use Flash to save space instead of wasting it. For these reasons, a lot of artistic projects get the Flash treatment: the combination of client-side dynamic coding and complex cascading vector animations are a great duo. I really love web pages that are intelligent enough to lay out their own content based on data context. On the other hand, for corporate use, text-heavy and “serious” web sites, I tend to develop using traditional means. The vast compatibility, search engine optimization and predictable load times are the win in that case. Of note, it’s much easier to change designs using CSS than it is in Flash. For proof, check out CSS Zen Garden.

That’s all for now. Happy coding.

Nick Saretzky is a summer intern for Image Cog. He is a Senior at The College of New Jersey, and majors in Interactive Multimedia. His website can be accessed here.

Your Site In Comparison

Simply having a site is not enough. You need to consider how your site measures up to all the others who are scrambling to cement their brand credibility before you do. The fact is that most often a new visitor not already familiar with your company — in other words, a potential customer will look at your site along with several of your competitors. The winner is typically the one with the “best” site. What makes the best site is a subject for a future entry.

Let’s look at why this is the case.

First we need to accept that the Internet is now the first place people turn for information. With over half of US households subscribed to broadband in June 2007, it is safe to say that people are accessing the Net quicker than ever before for hundreds of reasons that all point to some form of information. Not to mention, users who did not grow up with the Internet are becoming increasingly more savvy at using this information medium of choice. The user base is widening every day. These millions of users find most of what they are looking for (including your site) through a search engines.

Next, it is important to know that most users look at several sites in a sitting. The average user looks at about five sites in one sweep and may spend a measurable amount of time at only one or two. During this process, she/he is subconsciously forming a base line of comparison for the sites being viewed while simultaneously each new site seen has the potential to raise the standard. Around one or two sites will get through this process leaving a positive impression. Despite some having aesthetic appeal, the leftovers will leave a negative impression solely by comparison.

Unfortunately, for some, it doesn’t stop there. Most users repeat this process at least 2 times with 3 being about average over the course of a couple days. Anne Holland writes for Marketing Sherpa about a ScanAllert report that states that consumers delay on average 34+ hours from the time they first click to an ecommerce site and when they finally make a purchase.

What are they doing? I’ll tell you — they are running the gambit of search engines for newer, more reliable, stronger, and more appealing options. During this process, they may or may not come back to one of the original sites. At some point, the user will make up their mind and submit to a company brand that stood up to the test of their meticulous comparison. The investigation process is a grueling one, and your site better be ready for it.

How do you get ready? You do it the same way you get ready for any competition in which your presentation and performance will be weighed against others.

Many have probably heard the popular martial arts disciplinary saying that goes: “Know your enemy, know yourself”. This is highly applicable to determining just how you need to prepare yourself to combat other sites so that users that happen upon your site will immediately see a positive distinction between you and your competition. There are a few ways to go about doing just that.

• Run keyword searches on big-name search engines: This is “knowing your enemy.” Find out which sites are killing the competition under the keywords you would use for your company, and which ones pose no threat whatsoever in comparison to your own knowledge of digital design. Make a hit list of the sites that matter, and watch them with a keen eye.
• Design for distinction: After “knowing your enemy,” you can “know yourself” through the steps taken to craft your site to take on your hit list and not make the same mistakes. Have your site’s purpose in the palm of your hand, and your creative edge clear as day.
• Make sure that your site is SEO-ready: Obtaining even a basic knowledge about Search Engine Optimization (SEO) techniques is an asset to anyone looking to make an impression in search queries. Brett Poole touches on the bare basics of SEO for web developers, but delving deeper is always recommended to increase your chances of being a primary click.

The typical user considering an online purchase, or researching a company with which to do business, will see about 15 sites (some for just milliseconds). That user will only remember one or two businesses and is more than likely to make contact with the one that impressed them the most and disregard the other one without a second thought. While appearing high in a given search engine listing is important, the real trick is creating the site that will make the best impression. Make darn sure that site is yours.

Five Necessities To Creating An Effective Website Banner

I have seen many a website giving tips on how to create a winning banner ad campaign and/or how to properly design a banner ad in a way that will increase CTR (click-through rates). However, there are almost none that has placed a magnifying glass over regular website banners. I’m talking about the image at the head of most conventional websites that let immediately lets you know what the website is about. For the purposes of this conversation, I’ll be using the term “banner” to refer to the branding area for those particular sites. I do acknowledge unconventional websites that utilize various interface elements that come together to make one cohesive impression, and perhaps they will be the subject of a future entry.

What some might choose to ignore is that the web is not only a melting pot for competition, but also a massive conglomeration of varied interests stemming from thousands of users who want instant gratification. We, as users in this age of seemingly endless information, are extremely fickle in the attention we give hundreds of sites that we encounter every week, and only a few are going to draw us back. With the banner typically being the first thing a user sees when they enter a website, it is essentially the first, and quite possibly the last, thing that will help a user determine whether that site, from a purely objective point of view, is legit or a joke. Of course, exceptions do exist (e.g. blogs), but that does not defer the fact that a well-designed banner has a higher chance of garnering curiosity for more than five seconds if the banner’s message coincides even a little with the need of the user.

For anyone who is looking to keep users from writing-off their site from the get-go (which should be everyone who cares about their site), I have five simple necessities for those who really want to make an initial welcoming impression on the eyes of hungry, site-hopping users.

1) Use high quality images = Blurry, frayed, or pixely images have a tendency to set off an alarm in the minds of most experienced users and immediately gives off a negative image towards the entire site. Also, images that may have residual elements, such as text, that do not coincide with the desired image is another no-no. Make sure that whatever you use for your banner does not need to be stretched or enlarged beyond its original resolution. In addition, never reduce then increase the width and height of an image, as that will ruin the quality of your image. If your banner is crisp, then your message will be clear as well.

2) Establish a concise mood/expectation to your audience = If your website is meant to be for fans of Nirvana who want to find others like them, you want to at least have some element that is indicative of that band. Whether it’s a CD cover or a picture of the lead singer, you want to make it clear that the site is for those fans. If you’re a blogger who likes anime and enjoys writing, perhaps having a themed banner of your favorite character and an original quote from one of your stories would convey that better than simply the name of your blog on top of a color gradient. Whatever you do, make it as solid as possible because chances are, there are plenty others who like what you like, but users may have either preferred another banner’s ambiance, or have had their expectations fulfilled that made them want to browse the site content further, which is what you want.

3) Harmonize colors = Want to turn people off from your site real quick? Make their eyes hurt with either clashing colors or too much variance in color. They will leave, guaranteed. If you aren’t so good with imagery and want to use text, make sure that the text can be easily discerned through the color choices. There is a reason why word processors use black text on white backgrounds; they contrast each other the best. This actually took me a long time to get the hang of, but if you’re not sure if colors are working well together, just make sure that the color sitting on top is either lighter or darker than the color beneath, depending on the aesthetic of your site (e.g. light colors = relaxing, happy / dark colors = edgy, depressing). This applies to not only text, but to imagery as well. To sum this up:

“The blending of colors should be attractive, informative, comfortable for the eye and help to convince the viewer to stay on your site.” – Entheos

4) Whet their appetite for your content = #1 was geared mainly towards clarity of imagery, #2 honed in on hooking in a user’s interests, and #3 focused on working on aesthetics. This necessity is targeted more towards the use of text in your banner. Type-setting can make or break a banner, so take notice of not only where you are positioning your text around your imagery, but if the text is a compliment to the message that your banner aims to convey. The choosing of which font type you have on your banner is also essential to making #2 work for you. There really is no “best method” to go about doing this, but keep in mind that there is a difference between throwing text onto a banner just to fill space, and planning to ensure that your text is going to add a growing intrigue to the rest of your website.

5) Take a step back = Most things learned in life come with practice, and many things unseen come with patience. Make time to come back to it after a time and see if your banner’s message is still executed as sharply as you thought it was when you believed you were finished with it. As you continue to refine your technique and tighten #1-4, your ability to catch your own shortcomings or form new, stronger ideas will only lend itself to a more compelling and confident creation.

Doing any one of these can ultimately affect the others, as they are all intertwined in order to make a banner as effective and compelling to the rest of the site as possible. At the very least, random users that happen upon your site may be more convinced to take a tour inside your domain rather than simply turning away before they can even get a foot in the door.