If you’ve noticed that the web has recently gone wacky when using Internet Explorer, you can blame litigious companies, software patent lawyers, and even Microsoft for ruining a good portion of the web overnight.

I’ll explain what happened and why in a minute. It has a bearing on the design of your web site, and is one more reason to avoid using Flash and Flash-based navigation if possible.

A case against …

First, if you weren’t aware of several reasons for avoiding Flash on your site, let’s briefly review:

• Flash content requires a third-party plug-in that may not be available for all web browsers and devices (cell phones, PDAs, etc.)
• Pages with Flash objects initially take longer to load than their non-Flash counterparts.
• Flash introductions slow down entry into your site. (Which is why the necessary “Skip Intro” link is often clicked before the animation completes.)
• Navigation is difficult or impossible for handicapped users who rely on keystrokes or software that reads web pages aloud.
• You cannot use your browser’s controls to increase or decrease text size for easier reading.
• Right-clicking doesn’t work the way you expect it to.
• Your browser’s back button generally doesn’t work.
• You cannot bookmark individual pages in an all-Flash site.
• You cannot always select and copy text.
• You cannot search for text found in Flash items.
• You cannot automatically translate text to other languages.
• RSS readers cannot grab the text content within Flash pages.
• Content is generally constrained to a small area to accommodate low-resolution displays.
• Passages of text are relegated to small scrolling boxes that don’t adhere to common navigational controls (such as your mouse’s scroll wheel, arrow keys, etc.).
• Flash objects are not easily resizeable to make the best use of available space.
• Printing pages can be challenging.
• Search engines cannot read and index text, critical for including your site in search results.
• Flash sites tend to be noisier and become annoying when there is no mute option.
• It’s difficult to integrate a content management system for do-it-yourself updates.
• Revising content or design requires a Flash developer to make even simple changes for you.
• Changing Flash content yourself requires investing in an expensive authoring package.

OK, so that wasn’t so brief. I promise that the next section will be shorter.

A case for …

Flash looks cool and has applications for entertainment sites.

Pay up and wreck the web

But a high “cool factor” may no longer justify the latest strike against Flash navigation on any web site. As a web site owner, it’s important that you understand why.

In April 2006, under requirement of a $521M patent lawsuit leveled by Eolas Technologies, Microsoft released an automatic Windows update requiring Internet Explorer users to click once to activate Flash and other ActiveX controls before the usual interaction takes place. The update also visually changes the appearance of sites when the mouse is moved over these elements.  Items become bordered by a thick gray line and a tooltip appears asking users to click to activate the control.

The effect. The effect.

This is what causes web sites that use Flash navigation to seemingly misbehave in IE, making users click twice on buttons, menu items, embedded movies, and links before they take effect. Once activated, the Flash elements become usable until a new page is loaded, and then the activation clicks must be done again, and again, and again . . .

Whether the patent claim is right or wrong, Microsoft apparently felt it was better to pay damages and release a patch with annoying side-effects, rather than license the technology from Eolas. Unfortunately, this decision now changes the everyday behavior of countless web sites, negatively impacting their owners and developers, and more critically, affecting millions of web users.

Flashback: It seemed neat at the time

Flash web sites were the rage in the late 90s and early 2000s. They were the product of graphic designers who effortlessly used the Flash authoring software but lacked professional web development and programming skills. Using the off-the-shelf package, entire “all-Flash” sites could be built by an artist without having to dabble in any HTML programming.

The results absolutely wowed clients who enthusiastically, and perhaps ignorantly, whipped out their checkbooks. The growing list of reasons against Flash remained unknown to them until now.  Literally overnight, they discovered that their sites no longer work like before.

A patch for the patch

Thanks to an automatic Microsoft patch buried in a critical update that cannot be uninstalled, web sites laden with interactive Flash items have become frustrating to use. For some corporate applications that use Flash or ActiveX controls, the debilitating effects can prevent users from operating business-critical systems.

The backlash from corporate users prompted Microsoft to release a compatibility patch that temporarily restores Internet Explorer to its previous behavior. Unfortunately, the patch is good only until June 2006, giving Flash application developers and web site owners a frantic month to overhaul their sites with alternate technologies or workarounds.

So maybe this time they’ll listen

Good web developers regularly must educate clients against inappropriate and gratuitous use of Flash on web sites, a common mistake. And yet some customers use it anyway (because “it’s so cool”).

What’s cool now is when I get to rebuild someone’s old Flash web site into one that adheres to web standards, implements similar visual effects in something less problematic (like CSS or JavaScript), and is inherently highly optimized for search engines for increasing site visitors.  Building the site properly allows it to work faster, reach more people, become more usable, and achieve business objectives better which has a direct return on investment.

The point is that you can resist eye candy for coolness’s sake, avoid this can of worms, end up with a better web site all around, and take it to the bank.  Now that’s cool.

Switch browsers

It’s worth mentioning that this problem does not affect non-Microsoft web browsers (Firefox, Safari, Opera, etc.). At least not until Eolas eventually goes after them, too.

Ten performance-boosters you should use

1. Compression. By adding these lines to the .htaccess file in your web directory, you can save 50% to 80% of the time and bandwidth needed to deliver your pages:
   

   AddHandler application/x-httpd-php .html
   php_flag zlib.output_compression On

   This causes the server to compress HTML content as it is sent. Check your results using this compression tester.

2. Optimize Images. Use a good graphics program like Adobe Photoshop or ImageReady. Size your images appropriately, then use the Save For Web feature. Depending on the image, certain image formats will yield better size vs. quality ratios, so try them all, reducing colors or quality levels as needed.
3. Use Text for Text. Avoid graphics for text information. Aside from slowing down your site, depicting text in images can have several negative effects: visually impaired users cannot scale type size or have graphics read aloud, search engines can’t index the text, copy and paste won’t work, and it can look poor when printed.
4. Style with Style Sheets. A cascading style sheet (CSS) can eliminate tons of old-school FONT tags and other unnecessary markup elements. The ability to precisely position items through CSS virtually eliminates inefficient and tedious TABLE tags.
5. Embrace XHTML. Once you’ve separated content from presentation using CSS, you might as well code your pages in standards-compliant XHTML. Sites that use the XHTML and CSS combo are about one third the size of ordinary HTML sites and enjoy many other benefits.
6. Link to Reusable Items. Style sheets and JavaScript code used throughout your site are best stored in separate files loaded from each page. This not only eliminates redundancy but greatly simplifies site management.
7. Trash Meta Tags. Long lists of keywords and descriptions are wasted as their META tags are no longer used by search engines. Include a rich mix of important keywords in the content of your pages and you’re far better off.
8. Don’t Be Wordy. Pages with loads of text are ignored in our short-attention-span world. Choose words sparingly so your pages will load faster and might even be read.
9. Optimize Links. Use relative references in hyperlinks (don’t include the “http://www.yoursite.com” part). When linking to index pages, link to the target file (e.g., “dir/index.html”) or to the directory (e.g., “dir/” and don’t omit the trailing slash). This eliminates extra transactions between the browser and server.
10. Simplify Effects and Navigation. Sites composed solely of Flash or large Flash objects can take a long time to load. Many Flash effects can be done more efficiently with JavaScript. Old-school navigation rollovers relied on heaps of JavaScript and multiple images. They can be done more easily with CSS sprites.

It’s easy to juice up your site with these powerful techniques. Before and after applying these tips to your site, check your pages using this speed analysis tool. Visitors with slow connections such as modems and mobile devices will notice significant gains. Users with faster connections will appreciate the increased responsiveness. Plus, if your site is heavily trafficked, you can avoid or reduce extra bandwidth fees. It’s all good!

A move in the right direction

Before we can talk about money, either initial production costs or, ultimately, web-generated sales revenue, we need to turn things around. Let’s start with your site’s purpose so we can select the right content and presentation methods to achieve worthy and measurable goals.

Understanding your web requirements, desired execution level, and budget, begins with a simple planning exercise . . .

Plan purposefully

The best way to start planning a successful web site is by thinking about these key areas (in order of importance):

1. Foundation: Your site has to be able to stand up today and stand the test of time.  To help customers ensure that they’re starting with a solid platform, we developed a proven web-standards framework called PageWorx.  It helps sites maximize compatibility with current and future web browsers and web-enabled devices.  It increases performance, reduces bandwidth, and improves ranking in search engine results.  It makes your site accessible to more people, even the physically impaired.  And PageWorx enables other capabilities, such as multilingual support, web-based content management, and more.
2. Objectives: Truly successful web sites are consistent with their purpose in serving their organizations. We start with a list of company goals, and then we meet them thorough precisely selected and organized content.  That drives everything else: functionality, navigation, visual design, and sound web marketing practices.
3. Functionality: It’s what makes web sites do, not just be.  We use technology to handle and route inquiries from your contact page, collect customer information digitally, present a portfolio or photo gallery, ease site management tasks, enable ecommerce, and integrate with back-office processes.  If your web site isn’t actively using dynamic functionality to help your customers or employees, it’s just sitting there.
4. Design: This is the time to creatively brainstorm design ideas that take full advantage of your site’s framework, content, and functionality.  Everyone wants to do this part first because it can be a lot of fun.  We’ll exercise restraint and patience.

Now, you know the right order of operations.  Steps 1 and 2 address the what question (determining your site’s purpose and potential for longevity).  Steps 3 and 4 address the how question (establishing an execution level).  So with all that in mind, you’re ready to ask the how much question.

What if your goals are greater than your finances will bear?  (As is the case 9 times out of 10.)  It’s perfectly reasonable to aim high and adjust your sights as needed.  Since you understand your site’s purpose, knowing the key areas to focus on becomes obvious.  You can reduce content, execution level, or build your site in manageable phases.  When you have a plan, you have choices.

Wise counsel makes it work

The best sites are built not by graphics designers, programmers, marketers, technologists, or MBAs alone, but by people with a healthy mix of these qualities. They take the time to educate and walk you through all the aspects of discovering your site’s purpose.  They can help you realize the best way to use effective web technologies and presentation techniques, and they can coach you on where to make adjustments in your plan to get the most value.

Bottom line: The more you know and plan properly, the more successful your site will be.  Seeing it come together based on a determined purpose is a process that all business owners can enjoy.

Their classy new site sports a light and easy to navigate style.  It wins a gold star for using standards-compliant XHTML (that improves its performance, accessibility, and search-engine friendliness).  And, unlike most “artsy” sites, it conservatively presents the Flash intro in a way that doesn’t make you wait before you can get to the main navigation links.  (I can’t fuss much about the non-optional Flash intro music.)

Easter Egg: If you have a 1600×1200 display, you might find a little something in the margin.

It’s rare to see a relatively small company launch an in-house designed website and hit all the right style and technical targets (because it’s really hard, I tell you!), so Wurts deserves accolades.