The 8-bit PNG is an ideal format for Flash. Because they are small in file size, your Flash will be lighter and your website will download faster. Lighter file size also means graphics will move smoother and will be easier on the computer. You will get more wow from Flash.

Besides the size and gain in performance, the core feature of the 8-bit, is its alpha transparency. This is the only format that supports this type of transparency while also keeping a small file size. With this support, you can create visuals that would otherwise not be possible with an opaque image. For example, with the 8-bit version, you can have blurred drop-shadows multiplied over top other graphics.

How to Create the 8-bit PNG

Step 1: In Photoshop, make your alpha transparent 24-bit PNG.

Step 2: Bring your 24-bit into Fireworks, and now in the optimize panel set the optimization to 8-bit, with an alpha transparency.

Step 3: Import into Flash.

Things to Watch

Once you have the 8-bit, you should check its resolution. Depending on the version of the creative suite, and the platform you work on, there may be slight shifts in resolution. Check this in Fireworks, because once saved out as 8-bit, you will NOT be able to open the file in Photoshop.

Over the years browsers have become increasingly standardized with some key exceptions to the rule. In order to accommodate for these variants we’ve set up a standard process to check for browser compatibility. Right out of the gates we’ll identify, with our client, the necessary browser targets for a given project. This usually runs the typical gamut unless there is something unique about the project that explicitly requires additional browsers and devices.

One key thing to note – we will set up HTML code and content beforehand so that content is laid out correctly. We will rarely begin integrating CSS until we’ve identified and setup all elements on the page.

From Newest to Oldest

Fortunately the above rule about standardization has been pretty consistent. The groups pushing the latest browsers have worked very hard to meet the standards set forth by the W3C and development community. This makes it the best place for us to start since it will help us insure that our CSS is setup to meet those standards. Once we have met the proper display requirements in these newer browsers we’ll continue through the older versions until we reach our minimum requirement.

Our first step is to select a specific browser in which to develop. This will typically be Firefox 3, or Safari 3/4. With the recent launch of Internet Explorer 8, this browser also becomes a viable option, but since our production environment is run primarily on Macs, it’s easier for us to pick one of the cross-platform browsers over Internet Explorer.

After layout, styles and sprite functionality display correctly in the latest browsers we continue down to our next tier. This tier is usually closely related to the above tier in that they use similar browser frameworks, but we run tests nonetheless to guarantee consistency. This next tier usually consists of Google Chrome, Firefox 2, and Opera.

The first two tiers will typically consist of small rendering issues – independent browser correction of CSS mistakes; incorrect style declaration that gets too browser specific, or something else similar. From here we’ll move down into Internet Explorer 7. While IE 7 showed significant improvements over it’s predecessor it still contains several CSS rendering problems. For this reason we will address IE 7 in a separate tier. Corrections made at this level will usually live in a separate CSS file that overrides previous declarations. To avoid any conflicts we’ll incorporate this new CSS file using IE conditionals that check for IE 7.

After all the above browsers have been addressed, we’ll move to IE 6, which is commonly known for it’s severe problems with rendering standards-based CSS. Following the same method taken for IE 7, we’ll finally include a conditional for IE 6 browsers that address the specific problems inherent with this browser.

Browser Version Testing Order

To review, we would go through browsers in the following order to address cross-browser CSS:

1. Tier 1: Safari 3/4, Firefox 3, Internet Explorer 8
2. Tier 2: Safari 3, Firefox 2, Opera
3. Tier 3: Internet Explorer 7
4. Tier 4: Internet Explorer 6

This approach has proven to cut down significant amounts of development time because we will have:

• avoided using potentially harmful hacks in our core CSS,
• created clean standard-based code at the top level,
• progressively corrected any issues as moved forward with development without the need having to move back up the version ladder

Of course, other browsers can be added to or removed from your list, but the idea is to move down the chain so that you avoid including erroneous code in your more standards compliant browsers.