Developing Flash websites using progressive enhancement

Although Adobe Flash Player is one of the most widely distributed web clients available, there is still a group of people who are hesitant to use Adobe Flash content. They often describe Flash as a wonderful tool that can make a real contribution to a website's audiovisual appeal and interactivity. But they also warn others not to overdo things because entire websites designed in Flash would both be opaque to search engines and lock out a certain group of potential visitors.

In this article I explain that this doesn't necessarily have to be the case. It is merely a matter of execution of how a website is created. With some small extra effort, you can easily avoid these types of problems and create great Flash experiences that are optimized for search engine indexing and contain content that is accessible to the biggest target audience possible.

Progressive Enhancement is a web development strategy that ensures that even a visitor with the lowest common denominator web browser technology can navigate through a website and read its content. It uses basic markup—or (X)HTML—as its foundation to keep both content and navigation accessible for everyone, even people using text browsers and simple mobile devices. It utilizes semantic markup to add meaning to this content, which is the basis for search engine–friendly content.

The main philosophy behind progressive enhancement is that you enhance the "basic version" of your content with additional presentation or behavior by using technologies like CSS, JavaScript, and Flash. These should be served only when the required browser technology support is available.

Progressive enhancement applied to a Flash project could look something like the following:

• An HTML page that includes content that is optimized for web crawlers and low-tech browsers
• Style sheets to professionally lay out and style this basic version, aimed at visitors that use CSS-enabled browsers but don't have the required Flash plug-in
• JavaScript to add behavior and improve the usability of the basic version—again aimed at visitors who don't have the appropriate Flash support
• Flash content aimed at the biggest part of the target audience, for the full-blown user experience

Here's why you should use this approach: because its benefits often outweigh its cost. Search engine–friendly content enables good rankings on search engines, while accessible content locks no one out and avoids blank home pages or page sections. These topics are likely to be of high importance to some of your clients.

At Refunk we have included progressive enhancement in our standard offering because we see it as a small, extra effort—but a worthwhile one—to do things the right way. We think it is an approach worthy of investing in for any design studio specializing in Flash content.

To complete this tutorial you will need to install the following software and files:

Flash Professional 8

Dreamweaver 8 (or any code editor)

Sample files:

• progressive_enhancement.zip (ZIP, 4.63 MB)

Prerequisite Knowledge

A basic knowledge of Flash, (X)HTML, CSS, and JavaScript is assumed.

Embedding Flash Video into a Web Page

In this exercise, you insert an FLV file with a controller into a supplied web page in several easy steps.

You have two options when you insert and display an FLV file in your HTML documents using the Flash Video component:

• Progressive Download Video: If you choose this video type, the video is downloaded to the user's hard drive, but starts playing the video before it finishes downloading. The video is downloaded from beginning to end, unless the user closes the connection before the download is complete. The user must have Flash Player 6 r65 (or greater) installed to see videos encoded with Sorensen Spark (included with Flash MX Professional 2004 and its standalone encoder). The user must have Flash Player 8 installed to see videos encoded with the On2 codec. For more information on which versions of Flash Player work with the different video codecs, search “on2 VP6 video codec”(with quotes) in Macromedia Flash 8 Help (F1).

  Note: The FLV video included with the article source files uses the Sorenson Spark codec, and can be viewed with Flash Player 6 r65 or greater.

• Streaming Video: If you choose this option, the video starts playing after a short buffer period, when a small amount of data downloads to the computer to ensure smooth playback. You must have Macromedia Flash Media Server available if you select this option. The user must have Flash Player 6 (or greater) installed to see your video, assuming it uses the Sorenson Spark codec.

Depending on which video type you select in the pop-up menu the following steps will vary slightly. For this tutorial you use the Progressive Download Video option to display your video files.

1. Launch Dreamweaver 8. Choose File > Open from the main menu and select the video01.html file within the chickens folder.
2. In either Design view or Split view, position your cursor within the editable content region and delete any existing text, such as "[insert video here] ."
3. Select Insert > Media > Flash Video from the main menu to launch the Flash Video Component.

4. Select Progressive Download Video from the Select video type pop-up menu, and the appearance of the Flash Video dialog box changes to show the following options for this format:

• URL: Specifies the URL of the FLV file to embed in your HTML document.
• Skin: Specifies the URL of the skin to load.
• Width: Specifies the width of FLV display.
• Height: Specifies the height of FLV display.
• Constrain: Maintains the aspect ration of the video if the width or height text boxes change the corresponding value.
• Detect Size: Detects the dimensions of the FLV file and automatically populates the Width and Height text boxes.
• Auto play: Specifies whether you play the video when the web page opens.
• Auto rewind: Specifies whether the playback control returns to the starting position after the video finishes playing.
• Prompt users to download Flash Player if necessary: When selected, this option embeds the required JavaScript code to detect users' Flash Player version and prompts them to download a newer version, if necessary. If this option is not selected, the Message text box is disabled.
• Message: A message displays if a user's current Flash Player version isn't high enough to view the Flash content.


Figure 3. Specify your options in the Flash Video dialog box.

5. Click the Browse button next to the URL text box. Navigate to the farmsite directory on your hard drive, select chicken01.flv from the videos folder, and click OK.

6. Select a skin from the Skin pop-up menu. For this exercise, select Clear Skin 3. The area below the Skin pop-up menu shows you a small preview of the specified skin's controller. Click the Detect Size button so Dreamweaver calculates the width and height of the current FLV file automatically, and then populates the text boxes with the correct dimensions of the video.

   

   Figure 4. This video controller uses the Clear Skin 3 skin.

7. Select the Auto play check box if you want the video to play automatically after the page loads. You need to ensure the Auto rewind check box is enabled if you want the video to return to the first frame after it completes.

8. Click OK to apply your settings, and Dreamweaver generates and inserts code that you need to embed the selected video into this web page. Embedding an FLV file and a player adds 8 lines of HTML code (provided that the Prompt users to download Flash Player if necessary check box was not selected), which configures the Flash Video component based on your selections.

   Based on the settings that you chose for this exercise, Dreamweaver inserts the following code into your document:

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
     codebase="http://download.macromedia.com/pub/shockwave/
     cabs/flash/swflash.cab#version=7,0,0,0" width="320" 
     height="240" id="FLVPlayer"> 
     <param name="movie" value="FLVPlayer_Progressive.swf" />
      <param name="salign" value="lt" />
      <param name="quality" value="high" />
      <param name="scale" value="noscale" />
      <param name="FlashVars" 
       value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName
       =../videos/chicken01&autoPlay=false&autoRewind=false" />
      <embed src="FLVPlayer_Progressive.swf" 
      flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName
      =../videos/chicken01&autoPlay=false&autoRewind=false" 
      quality="high" scale="noscale" width="320" height="240" 
      name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object> 

   The parameters you specify in the wizard are inserted into the previous HTML snippet, and pass information to Flash using FlashVars. The skin Clear_Skin_3 is copied to the same folder as the current HTML file, although it omits the file extension (.swf) in the HTML code. The second parameter, streamName, points to the FLV file you defined in the URL text box. It is a relative path and again omits the FLV file extension (.flv).

   The next two parameters are Boolean (true/false) values, which are based on your selections in the wizard. If you want to modify the skin or path to the FLV file, then you can modify these values directly using Code view in Dreamweaver. You might need to edit the width and height parameters manually in both the param and embed tags. These values represent the width and height of the FLV document; however, if you use certain default or custom skins, then you might need to modify these values if your skin contains a border and is larger than the dimensions of the FLV file.

   You will also notice that the values are repeated twice. Due to cross-browser issues, you need to define the FlashVars values in both a param tag as well as the embed tag so that the code works with Internet Explorer– and Netscape-based browsers

   Note: The actual SWF file that you need to drive the Flash Video component is a mere 10–12K, depending on whether you select the progressive download or streaming option. Using one of the default skins adds approximately another 4–11K, depending on the skin that you choose.

Getting Started

In order to follow the steps in this tutorial, you must install Dreamweaver 8 and download the farm.zip sample file from this tutorial's introductory page.

Exploring the Template Website

Download the farm_fl8 (ZIP, 13.6MB) sample file if you haven't done so already and extract the contents to a new folder on your desktop called farmsite. The ZIP file contains an entire Dreamweaver template website, including Flash Video (FLV) files.

The website template that you use for the following exercises has a distinct farm theme. The farm site consists of nine main folders, seven templates, a few dozen static HTML pages, and a cascading style sheet (see Figure 1). The purpose of the website is to display images and videos for six common farm animals. Each animal has its own sub-folder where you store HTML pages specific to that animal. For example, you store pages that display images or videos that relate to chickens in the chickens folder. You use the last three folders (called images, videos, and Templates) to organize the images, videos, and templates for the farm site.

Figure 1. The farm website uses an intuitive folder structure.

The site has a basic three-column design, where the left column contains the main site navigation, and the middle column displays content (text, images, and video). You nest templates in the right column to display thumbnail images for both videos and static images of animals (see Figure 2).

Figure 2. The page layout is simple and contains thumbnails for the video you embed later on.

Using nested templates enables you to add new pages easily to the site and automatically have the subnavigation added for you. Also, making changes to the animal-specific templates causes the changes to cascade to any file using that template. So if you need to modify the sub-navigation within the chicken template, all files based on that template are updated automatically.

Presenting Video with the Flash Video Component in Dreamweaver 8

The Macromedia Flash Video component in Dreamweaver 8 helps you easily insert and display Flash Video (FLV) files in your websites. It's great for Dreamweaver users who are not familiar with Flash, because you can insert FLV files into your web pages without using the Flash authoring tool. The Flash Video component enables you to select from several different playback controllers that visitors use to control the FLV file on your web page. You can choose also between two different options for delivering your video: progressive download or streaming.

The Flash Video component uses a wizard interface that enables you to choose display and delivery options and preview the skin before you insert it on a web page. Despite the automated way the code inserts onto a web page, you have a lot of control over the end result. Using the Flash Video component isn't the only way to display FLV files on the web, but it's fast and easy.

Customizing Video Controllers

To find out how to customize playback controllers using Flash, check out the companion piece to the article, Creating Custom Video Controller Skins for the Flash Video Component in Dreamweaver 8.

Requirements

To make the most of this tutorial, you need to install the following software and files:

Dreamweaver 8

Tutorials and sample files:

• farm_fl8.zip (ZIP, 13.6 MB)

Prerequisite Knowledge

A basic understanding of editing website templates in Dreamweaver 8.

Major Problem with Absolute Positioning

As I see it, the major problem with absolute positioning is this: You cannot clear an absolutely positioned element. This could cause problems and it's something you need to take into account when you consider the structure and layout of your designs. If you want a footer that expands the width of your wrapper, and you are unsure whether the navigation div might end up taller than the content div, then you have a problem.

Recall how you were able to ensure that your footer always appeared below your content when you floated your navigation column by using the clear property. Absolutely positioned elements do not respect this. They just push straight through the footer regardless of any attempts you might make to force the footer below the absolutely positioned element. This can make your page very ugly, as your navigation div pushes right through your footer and out through the bottom of your design.

Open withfooter.html in the Code view and preview the page in Firefox (see Figure 3).

Figure 3. Footer in place with the design still intact

Follow these steps to complete the next process:

1. In the Code view, locate the #nav selector.
2. Change the height value to 700px.
3. Preview your page. Note how the nav div pushes through the footer.
4. Locate the #footer selector
5. Place your cursor after background-color: #036; and press Enter.
6. Type: clear: left;
7. Save your work and preview the page in Firefox.
8. Notice that the nav div still pushes through the footer.

While there is nothing wrong in principle with using positioned divs to create columns, you do need to be 100% sure that any absolutely positioned element will not cause this type of problem. As you have seen in earlier tutorials, a floated layout does not suffer from this type of scenario because you can clear floats.

Surely Absolutely Positioned Elements Have Their Good Points Too?

The answer to that question is yes. When you define an element as being absolutely positioned, it is taken out of the document flow. Unlike a floated element, an absolutely positioned div can be placed just about anywhere in your code. This can present some good search engine optimization opportunities. For example, you could move the nav div out of its current position in the source code and place it below the footer.

Follow these steps to complete the next process:

1. Open withfooter.html in the Code view.
2. Locate the #wrapper and #nav divs in the body of your page.
3. Switch the positions around in the code. Your content div should now be before your nav div in the source order.
4. Preview the page in Firefox. You will see that the nav div drops below the footer.
5. Locate the #nav selector.
6. Locate the left: 10px; property and value.
7. Place your cursor after the closing semicolon (;) and press Enter.
8. Type: top: 0;
9. Preview your page in Firefox again. You will now see that the nav div moves to where it should be.

You now have a position where your content is above your navigation in the source order. This can be a good method for pushing your content at a search engine's bots. The content that matters now appears higher in the code than it would be with a floated column scenario.

You have now seen two methods of creating a two-column layout. A bit of planning before you dive in will probably help you decide which method to use. Both have their strengths and weaknesses. The choice is yours.

I hope you enjoyed working through this series. I know I enjoyed writing it. I plan to write another series that looks at other aspects of CSS. Stay tuned for it.

Should I Float or Should I Position?

That is the question! You have already learned that to have two block-level elements, like divs, sitting side by side within your pages, you must remove one of them from the flow of the document. In this series, you have achieved that by floating the navigation div to the left. As I discussed in Part 2, floated content is removed from the document flow. You can refresh your memory if you need to by reviewing the float section of that tutorial.

So if you don't float the navigation div out of the document flow, how else can you achieve this? The answer is by positioning the div with an absolute value. Any element that is positioned absolutely is taken out of the document flow—and, as I've discussed, once you take your navigation div out of the document flow, you can have two divs sitting side by side in your document.

In the sample file linked to at the beginning of this article, you will find a page called positioned.html. The CSS for this page is embedded in the section of the page's code. I have discussed the merits of using an external style sheet in this series and it still holds true. I embedded the CSS in the head of the document for two reasons:

• The CSS you are using is minimal
• It's easier this way for the tutorial

When you use an absolutely positioned element, you need to be aware that the element containing it needs to be positioned. If the element that contains the absolutely positioned element is not positioned, you will get some rather unexpected results.

Let's begin by taking a look at the CSS in the positioned.html page:

Note: Regarding the use of the height property, I have discussed this property and its pitfalls in an earlier tutorial. View the movie below again on this subject or read about the pitfalls in Part 2. Internet Explorer implements the height property incorrectly and expands the div. Firefox implements the height property correctly and allows the contents of the div to spill outside the div when the contents exceed the given height.

The only property and value pairs that I have not covered yet in this series can be found in the #nav selector. These include the position: absolute; property and the value pairs that are used to position the div—namely, left: 10px and top: 0;. Notice in the previous code listing that I did not declare zero for the top value. Not declaring a position value is not the same as zero. If you do not specifically declare zero, your div is not truly out of the document flow. Taking a div out of the document flow opens up possibilities for search engine optimization, as you will see on the next page. For now, I have omitted the top property and value in order to show you that declaring zero is not the same as declaring nothing.

Open positioned.html in Dreamweaver and preview it in Firefox (see Figure 1).

Figure 1. Absolutely positioned nav div outside the wrapper div

See how the navigation div has moved outside the wrapper div, shown in gray. This is not what you want. The idea is that the left: 10px; property and value pair should position the navigation div 10 pixels inward from the left of the wrapper div. The fact that the wrapper div is not a positioned element allows the navigation div to move outside its defined boundaries. It will do this until it finds a positioned element or it meets the view port—meaning it flushes up against the left edge of the browser window.

I haven't declared a top position for the #nav selector because I want it at the top of the wrapper. Because zero is the default, I have no need to declare a value. You can see from Figure 1 that the navigation div has taken its position from the view port. It has the default top value of zero, which sets it tightly against the top of the view port, but the left: 10px; assignment is being taken from the left of the view port rather than the wrapper div. Don't worry; this is easily corrected.

Follows these steps to complete the next process:

1. In Dreamweaver, locate the #wrapper selector in positioned.html.
2. Place your cursor after #wrapper{ and press Enter.
3. Type Position: relative;
4. Save your work and refresh the browser or preview the positioned.html page again.

You should now see the nav div respect the position setting on the wrapper and move correctly into place (see Figure 2).

Figure 2. Making the nav div respect the position property on the wrapper

Note: This is the Dreamweaver MX 2004 version of this article. It has been updated for Dreamweaver 8 and you can find the updated version of the article here. The CSS features in Dreamweaver have been vastly improved in Dreamweaver 8. You can learn about those changes in Julie Hallstrom's article, An Overview of CSS in Dreamweaver 8.

Welcome to the sixth part of this article series on CSS design concepts. If you missed the earlier tutorials in this series you can find them below.

Designing with CSS in Dreamweaver MX 2004 – Part 1: Understanding CSS Design Concepts

Designing with CSS in Dreamweaver MX 2004 – Part 2: Defining Style Properties and Working with Floats

Designing with CSS in Dreamweaver MX 2004 – Part 3: Creating Your First Design Without Tables

Designing with CSS in Dreamweaver MX 2004 – Part 4: Creating a Two-Column Layout

Designing with CSS in Dreamweaver MX 2004 – Part 5: Defining Columns and Vertical List Navigation

In this series, I am reviewing how you can use Dreamweaver MX 2004 to move towards using the CSS positioning technique of developing web pages.

In this, the final part in this series, I will review alternative methods to create a two-column layout. So far, I have used the float method (my preferred option), but I could also position the navigation div to achieve the same results. I will review the positioning method in this tutorial, and I'll explain why I prefer the float method over the positioning method. In this tutorial, you won't use the CSS and page layout you created in earlier parts of this tutorial series; you will be concentrating solely on the structure of the page. I'm sure you have a good grasp on styling your pages now, as I have covered that topic in depth earlier in the series.

You may find it advantageous to read an earlier tutorial I wrote for the Developer Center on relative, absolute, and static positioning, called Introduction to CSS Positioning in Dreamweaver MX 2004. It should give you a decent grounding in what you can achieve with each positioning value.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver MX 2004

Sample files:

• css6_samples_mx2004.zip (ZIP, 2K)

Adding a Background Image

Making two columns appear to be the same length is very easy to accomplish using background images. You will use Fireworks MX 2004 to accomplish this. Complete the following steps:

1. Launch Fireworks and click the New Image icon.
2. Make the image 200 pixels wide and 20 pixels high.
3. Select the Rectangle tool and drag it out over the canvas.
4. Give it the color value #D4DAD6.
5. Select the Line tool and hold down the Shift key to ensure your line remains straight.
6. Draw a line down the right side. It should be one pixel wide.
7. Give the line the color value #666666.
8. Select Modify > Canvas > Canvas Size.
9. In the Canvas Size dialog box type 1 in the height box and click OK.
10. Select File > Export Preview.
11. In the Export Preview dialog box select 4 for the color maximum and click the Export button.
12. Save the file in your images folder.

#wrapper{
 width: 770px;
 background-color: #ffffff;
 margin: 10px auto;
 border: 1px solid #000000; 
text-align: left;
 }

Listing 6. #wrapper selector code

Now complete the following steps:

1. Place your cursor after the text-align: left; property and press Enter.
2. Type background-image:.
3. When the Browse button appears, click it to open the Select File dialog box.
4. Navigate to your image, select it, and click OK to insert the code.
5. Type ; after the code and press Enter.
6. Type background-repeat:.
7. From the code hints, select repeat-y and then type ;.
8. Save your work.

The #wrapper selector should now resemble Listing 7.

#wrapper{
 width: 770px;
 background-color: #ffffff;
 margin: 10px auto;
 border: 1px solid #000000;
 text-align: left;
 background-image:url(../../tutorial_images/wrapper_bg.gif); 
     /*the path may vary according to your local site set up*/ 
 background-repeat: repeat-y;
 }

Listing 7. Revised #wrapper selector code

You can now preview the page in your browser (see Figure 6).

Figure 6. Two distinct columns in the layout

I hope you have enjoyed this tutorial so far. There is still one more to come, so stay tuned for that.

Adding Hover and Focus Styling

With the hover and focus styles you are going to use a little border trickery to make the links act more like buttons. You can change the border color on hover and focus to make the links appear as if they really are buttons being depressed (see Listing 5).

#leftcol #nav a:hover, #leftcol #nav a:focus { 
 background-color: #003366;
 border-right: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff; 
color: #ffffff;
 }

Listing 5. Using hover and focus styles

Before you implement the changes shown above, take a quick look at the selector, which is set for both the hover and focus states. Each selector has been stated immediately before the opening { and each selector is separated by a comma. You saw this earlier when I discussed grouping selectors; that is all that's going on here. You are likely familiar with the hover state; this is the state the link changes to when the mouse or pointing device is positioned over the link. The focus state occurs when an alternative to a pointing device is used to navigate your pages, such as a keyboard.

First complete the selector; then you can see how the focus state works:

1. Locate the selector and change the background-color value to #003366;.
2. Add a property and value for the right border by typing border-right: 1px solid #ffffff;.
3. Add a property and value for the bottom border by typing border-bottom: 1px solid #ffffff;.
4. Make the color value #ffffff;.
5. Save your work.

Preview the page in your browser of choice (see Figure 4).

Figure 4. Hover section of the selector in action

Figure 5 shows how the light-colored—in this case, white—borders to the right and bottom enhance the depressed effect of the button when it is in the hover state.

Figure 5. Hover effect in detail

To see the focus side of the selector in action, press the Tab key on your keyboard to hop from link to link. You can determine the order of the links visited by using tabindex in each link. This provides an ordered navigation sequence.

Note: You know, this might make a good tutorial in the future. If this is something you would like to learn more about, click the Send Feedback link on this page and let Macromedia know so they can pass it on to me.

Now that you have the basis of your navigation system in place, you can use a background image to make the two columns look the same length at all times. This will help make the page look more structured.

Making Structural Changes in the HTML Document

Open basiclayout.html in the Code view of Dreamweaver. Because you need to make some precise selections within your code, the Design view really won't do. Code view shows you exactly what you are doing.

You need to perform the following tasks, which I have listed below. You can also view them in the presentation linked to below the list.

1. Locate the Start and End comments for the nav div.
2. Highlight them and all the code in between.
3. Select Edit > Cut (Control+X) to cut the code to the Clipboard.
4. Locate the leftcol div.
5. Place your cursor between the opening and closing div tag.
6. Select Edit > Paste (Control+V) to paste the code into the leftcol div.
7. Open the basiclayout.css file.
8. Select Edit > Find and Replace (Control+F) to open the Find and Replace dialog box.
9. Type #nav into the Find box.
10. Type #leftcol #nav into the Replace box.
11. Click the Replace All button.
12. Save your work.

Once you complete the changes above, you can preview the page in your browser of choice (see Figure 1).

Figure 1. Navigation now inside the leftcol div

As you can see from Figure 1, the navigation div now resides in the leftcol div. You still have some styling to do but I'm sure you would agree that making this big change was relatively painless in CSS. If you had been using tables to lay out your design, this alteration would have require a major redesign of the table structure. Notice how the other elements on the page simply moved up to fill the void left by by moving the nav div.

Let's embark on a little tidying up of the debugging colors:

1. Open basiclayout.css in Dreamweaver.
2. Locate the #content selector.
3. Delete the background-color property and its value.
4. Locate the .container class selector.
5. Delete the background-color property and its value.
6. Locate the #wrapper selector.
7. Change its background-color value to #ffffff (white).
8. Locate the #leftcol selector.
9. Delete the background-color property and its value.

Preview the page again in your browser of choice (see Figure 2).

Figure 2. Colors tidied up on the page

Leave the background color you set on the ul element for now. Next we will begin to restyle the unordered list to give it a completely new look.