With great predictability, Google’s recent announcement about improved Flash indexing was rapidly followed by numerous client requests for clarification:

“What does this mean for SEO?”

“Do we still have to include HTML text on our Flash pages?”

“What do I need to do differently?”

In response to these and other requests, we’ve compiled the following summary and recommendations to assist our clients (and blog readers) in determining the best course of action relative to Flash, Google and SEO.

Google’s Improved Ability to Index Flash – In a Nutshell:

• Adobe recently developed an optimized Flash player for search engines to use and is collaborating with Google and Yahoo on implementation.
• This means Google can now explore Flash more like a website visitor does.
• This new technology only covers text and links, which is a small part of most Flash content.

Recent Updates Regarding JavaScript:

• Initially, Flash triggered by JavaScript was not going to be indexed because search engine robots typically do not execute JavaScript code (Google’s June 30th announcement).
• However, a recent update to the official Google announcement (circa mid-July) indicates an update has been rolled out to enable support for common JavaScript techniques for embedding Flash, including SWFObject and SWFObject2.
• This means that Flash triggered by JavaScript now has the potential to be crawled.

What Has NOT Changed:

• Images, videos, animations and graphic text in Flash are still NOT indexable.
• This change also does not yet take into account any Meta data or formatting markup in the Flash file.

Flash and SEO Best Practices are STILL Recommended:

• Even considering this announcement, SEO best practices prevail because the amount of text on a page (or in a Flash file) still contributes heavily to the relevance and value search engines ascribe to a page or file.
• In fact, the amount and type of relevant, indexable content on a page is even more important now. The greater the competition, the greater the need for relevance.
• It is still a best practice to follow the “tried and true” Top 3 SEO Strategies for ensuring pages containing Flash are search-engine friendly and accessible (see the “Additional Information” below for more detail).
• These best practice recommendations are based on the fundamental difference between being indexed and ranking well in search results.
• Indexation does not mean improved rankings. A really snazzy site with very little indexable content, is still a really snazzy site with little indexable content, regardless of whether the Flash component can be crawled.

What Developers Should Do Differently with Flash Files:

• Separate URLs for each set of content within the Flash experience is still the best way to ensure content gets indexed (see the “Additional Information” below).
• Separate URLs also contribute to increased link popularity and the opportunity to create optimized Title Tags and Meta Descriptions for each page.
• Because search engines are able to see text within Flash files, any text that is not important to search results (e.g. copyright information, “loading” messages) should be replaced by images to avoid indexation.
• Google’s response to questions regarding the concern over duplicate content is:

Serving the same content in Flash and an alternate HTML version could cause us to find duplicate content. This won’t cause a penalty — we don’t lower a site in ranking because of duplicate content. Be aware, though, that search results will most likely only show one version, not both.

Timing for Implementation:

• Google has acknowledged that the impact of this improved capability will take time to fully propagate through search results.
• There is no word on timing for Yahoo implementation, but Adobe is working with Yahoo on next steps.
• Adobe has not yet made the technology available to MSN, possibly as a result of MSN’s production of the competing Silverlight product.

ADDITIONAL INFORMATION ABOUT FLASH AND SEO:

A) Top 3 SEO Strategies for Flash:

1. Same Page HTML: The simplest search-friendly approach.

Include important text and links from the Flash movie elsewhere on the same page, as plain HTML.

2. Progressive Enhancement: The best future-proofing approach

Using a CSS ‘DIV’ tag, the page developer would define a certain area of the page for this display. Then, using JavaScript, test for whether the Flash plugin is present and (by default) whether JavaScript is enabled. If they are, the Flash code is written to the page with JavaScript.

With this approach, if the visitor does not have either JavaScript or the Flash plugin (like search engines do not), plain HTML will display. Otherwise, the Flash will display. The idea is to make the page friendly to all types of devices. This approach can be extended to encompass text readers, mobile devices, etc., helping to build flexibility into your page coding approach.

Potential drawbacks: possible layout issues with old browsers when the text is very long.

See Bobby van der Sluis’ article for Adobe on developing Flash sites using progressive enhancement for more information.

3. CSS Layers: The third best approach.

This uses CSS to define two layers, one above the other, positioned in the same space on the page. The Flash element is placed in the top layer, while the text and links are placed in the lower layer, hidden by the Flash.

Potential drawbacks: possible display issues with older browsers; does not add the flexibility of a full progressive enhancement approach; a slight chance that this may be viewed as an attempt to ’spam’ search engines - however, using this method in a conservative manner is unlikely to cause any penalty.

B) The importance of having separate URLs for each phase of the Flash experience:

Excerpt below taken from the Search Engine Land post by Vanessa Fox:

…[T]he searcher experience is better served by Flash implementations that provide a unique URL for each set of content. Some Flash implementations dynamically load text as the user interacts with the application, but the URL remains the same. In this scenario, Googlebot can now follow those interactions (in a limited way) and if the URL doesn’t change, then all content that is dynamically loaded as the interactions progress is associated with a single URL.

…This means that if the content that is dynamically loaded into the Flash application from the fifth interaction matches a searcher query, that Flash application may be served in the search results. But when the searcher clicks over to that result, the content won’t be found on the page. The searcher will have to interact with the application until that content is loaded. Searchers may instead feel frustrated and abandon the page.

For the best user experience and higher conversion rates from search, Flash developers should be careful to avoid this situation by creating distinct URLs for each piece of content. This implementation helps the Flash site be more viral as well, as users can email, Digg, and otherwise share the content more easily.

Google acknowledges this scenario may not be an ideal searcher experience, but points out that other non-HTML file formats such as PDFs have the same limitations. When a searcher clicks through the Google search results to a PDF file, the content that matched the query may not be on the first page of that PDF and the searcher has to scroll through the file to find the desired content.

C) Further Reading about Google, Flash and SEO:

1. Official Google Webmaster Central Blog June 30 Announcement (now includes an update to the original announcement)
2. Summary and explanation of announcement from Search Engine Land by Vanessa Fox
3. Andy Beal’s post on Marketing Pilgrim cautioning against all-out Flash adoption
4. Erick Schonfeld’s post on TechCrunch includes a good point: “Becoming visible is one thing, actually ranking highly is another”
5. Adobe Developers resource web site – clearly covers the use of the “Progressive Enhancement” approach

Screen resolution.

No, I’m not talking about how Hi-Def your HDTV is. (Although I’m sure you’d be happy to tell me.)

Yes, I’m talking about your online audience’s display resolution. While the subject sounds much more stale than your HDTV, it just might help afford you an upgrade.

Don’t Design Outside of the Box

Many designers seem to design without giving any thought to the visible width and height of the end users’ display. Having dabbled in design myself, I have also been guilty as charged, many times over.

As technology advances, enabling screen resolutions to grow and costs to drop, the problem of designing sites too large to fit users’ screens seems to have lessened, but it is still a problem. As your users’ screens get larger, guess what? So does your designer’s, and probably at an even greater rate.

In fact, right now I am staring at a screen that takes up half of my desktop and has a resolution of 1920 x 1200. I’m pretty confident that mine is bigger than yours, and unfortunately there’s a decent chance my design will reflect that.

Of course if you are a true purist you will say that one should always design using a fluid layout, like Jakob Nielson points out. While I completely agree in theory, in practice, designers are too meticulous about their layouts to let them be stretched, squashed, poked and prodded at.

What Screen Resolution Should I Design For?

Note: The following statistics were taken from W3CSchools.

Display Resolution Statistics:

Yes, many more people are using high resolution monitors, but the majority of people are viewing web sites at 1024 x 768 resolution.

So, design for 1024 x 768, and remember the browser window takes up a lot of that real estate.

Personally I try to use 960 for the width. I attended a few Cameron Moll sessions last year at WDW Seattle, and his argument for using 960 was a good one. It’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 which means your grid options are endless, and of course it fits within the most popular 1024 width.

That’s all fine and good, and isn’t too shocking, but what is unfortunate is how many designers ignore the arguably even more important height dimension.

If you need to keep content above the fold, I would use 525 as your line of demarcation. This is especially important for landing pages where the call-to-action needs to be ‘in your face.’

Yes, You Should Give a Damn About Screen Resolution

Look at this example.

Using 1024 x 768 for my display resolution, I performed a search on Google for ‘kids toys’ and clicked on this recognizable brand in the Sponsored Links. This is what I saw above the fold:

No, the giant in-your-face area is not clickable.

If you were to scroll down you’d see a couple of smaller call-to-action areas that are, but you’ve already lost me.

First of all, that whole area should be clickable, but minimally the primary call-to-action NEEDS to be above the fold. If the designer had tested this on the most common screen resolution, I think they would have made some different decisions.

In contrast I did a search for Luxury Cars and every one I checked out worked well on my screen:

I would change a few things on this landing page, but the point is the designer got all of the pertinent information above the fold.

I will concede that it’s much safer now to design web pages and landing pages bigger, but look at the statistics, decide where your target audience most likely falls, and then be sure to test your designs before launch.

While at SXSW in March, I ran into Shannon McKarney from Jaded Pixel, the company behind the popular Shopify hosted e-commerce platform. Shannon asked if she could interview me for the Jaded Pixel blog and I agreed. I’m cross-posting the interview below. The original is here.

What inspired you to write the book?
We were struck by how many of the sites we worked with suffered from the same design and usability problems. But that was really a symptom of the way people think about and manage their sites. So in addition to providing some concrete design guidelines, we wanted to try to change the way people think about web design. Personally, I wanted more people to see the money they’re leaving on the table by not designing their sites well.

How the Book Was Born
I had just finished a presentation on Designing for Conversion at Web Design World in Seattle in July 2006 and was answering some audience questions in front of the stage afterward when a kind but serious-looking gentleman handed me his card and said “I really enjoyed your presentation. How’d you like to write a book about it?” A quick glance at his card identified him as Michael Nolan, Sr. Acquisitions Editor at Peachpit Press/New Riders. After a stunned silence while my mind fixated on the long-held perception that ‘I don’t write so good’, I smiled crookedly at him and said with all the gravitas and certainty I could muster “Ummmmm… Sure?”

(Read the full article…)

What if you could inject usability test results directly into your design process - and do it quickly and easily?

Web and interface designers are in a unique and powerful position to serve as user advocates. By incorporating usability and conversion principles into design from the beginning of the process, designers can help ensure the user-friendliness and effectiveness of the end product.

(Read the full article…)

When did the web site design process become a roadblock to launching a site, rather than helping it along?

When did the details of site design and function become a site owner obsession, more important than becoming visible, more compelling than getting a business online, spreading the word and making money?

And yes, before you say anything, we’re fully on board with the concept of details making a difference. We even wrote a book about it (Web Design for ROI). But there’s a point at which the details paralyze the process, preventing real action and forestalling any benefits.

Seth Godin wrote a post along these lines entitled “How to Create a Good Enough Web Site” in which he describes a simple””some web designers would even say heretical””process for quickly developing and launching a new site. Start with a design that’s “good enough,” Seth says, and focus on what’s important. By doing things in a practical order, not over-thinking the design, and getting signoffs at the right junctures, a web site can go from concept to launch in much less time and with much less trauma than usual. That’s the agile development approach.

From there, we’d add, it’s time to begin iterating and improving your site based on feedback and metrics. By making and testing small changes to design, copy, supportive advertising, and so forth, you can create an exceptional site that has incorporated valuable input””real, live, authentic input you had no access to during development. And you’ll be online a lot longer than otherwise.

What inputs matter?

To complement an agile web site launch, we recommend tracking and responding to your selected key metrics. That is, measurements that actually matter to your business goals. But most businesses are swamped with stats and measurements. Which ones matter, which metrics are “key?”

Here are a few to start with:

• Your ‘landing page’ conversion rate. This is the page or pages where you send marketing traffic, whether paid search, natural search, email blast, or offline advertising. Track and watch how effective this landing experience is for you over time. Consider doing A/B or multivariate testing to narrow down what works for your site, company, and audience.
• Your shopping cart completion rate (for e-commerce sites). It’s really not OK to have more than half your customers drop out of your checkout process, despite most sites averaging 60% dropoff. Check your analytics for trouble spots in your checkout, to pinpoint which steps are the worst offenders.
• Your RFQ / Registration process completion rate (for lead generation sites). As with a checkout process, there may be multiple steps, and a few of those steps may be bad apples as far as your prospective customers are concerned. Focus your update attention on those steps with the worst issues, and keep a constant, detailed eye on your stats.
• Your home page abandonment rate. If your home page is visible and receives traffic, then track how effective your home page is at drawing visitors deeper into your site. If your ‘bounce’ rates are very high, this may mean you need to clarify your identity, what you do, or improve your visual credibility. Or it may mean you’re using an advertising source that drives low-quality traffic. Either way, it’s important to know.
• Your end stats. By this we mean sales, contract signings, membership agreements, and so forth. Where things get real, in other words. Can you track your traffic, downloads, and lead through to what really matters? If not, you’re missing the full picture. You won’t know what traffic source is your most valuable, where to focus your iterative site improvements, or what’s actually delivering the best ROI for you, you’re working blind.

If you’ve found these tips valuable or at least intriguing, it’s not too late to register for the Voices that Matter conference in San Francisco (Oct 22-25) where Lance Loveday and I are lucky enough to be speaking alongside web greats such as Dan Brown, Jacob Nielsen, Kelly Goto, and many others. Hope to see you there!