Embed Flash or Die Trying

Published Tuesday, April 17, 2007 @ 9:39 am • 15 Responses

[ Keywords: Flash, embed, object, nested, cooked, satay, SWFObject, UFO, methods, standards ]

[ Image: 50 Cent ]
Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content.

 

Nine Ways to Embed Flash Content

embed Element [ ^ ]

The quickest, easiest method for including Flash content in web pages requires only the embed tag. The embed tag is currently supported by all major browsers and does a fine job of displaying Flash content. The (major) downside is that the W3C does not support the proprietary embed tag, ultimately resulting in invalid (X)HTML markup that is not standards-compliant. Also, this method fails to detect if the required version of Flash is installed before rendering content, possibly resulting in errors or broken pages. Further, as virtually all browsers support the embed tag, alternative content provided via the noembed tag fails to appear when the required Flash plugin is not installed. In such a case, the Flash content is replaced by an image-link of a broken puzzle piece that enables manual plugin installation.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<embed type="application/x-shockwave-flash" 
   pluginspage="http://www.adobe.com/go/getflashplayer" 
   width="333" height="333" src="path/flash_movie.swf" />
<noembed><p>Alternative content</p></noembed>

object Element [ ^ ]

The W3C recommends using the standards-compliant object element to include Flash content on a web page. The non-proprietary object element validates as XHTML-strict and is compatible with all modern browsers. Further, the object element graciously supports alternative content, which may be included within the element itself (see example).

Every major, modern browser except Internet Explorer correctly interprets and utilizes the object tag and attributed MIME-type to include Flash content. In a perfect world, this would be all that one would need to properly embed Flash:

<object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333"> 
   <p>Alternative content</p> 
</object>

Unfortunately, it’s not a perfect world. Thus, we once again must reach out and coddle IE with its proprietary classid attribute, which equips the browser to load the requisite ActiveX control. Thus, this is the markup we must use for Flash presentation within Internet Explorer:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />    
   <p>Alternative content</p>
</object>

Combining the two different object methods, we get something resembling the following:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />
   <object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333">
      <p>Alternative content</p>
   </object>
</object>

..which may appear to be a reasonable solution, but falls short of satisfactory along several fronts1. So, while we strive for standards-compliance Flash-support via a single, unified implementation of the object element, such idealism unfortunately remains just beyond our present reality. Fortunately, there are plenty of alternative solutions. For example, the next method explains how the use of IE conditional comments successfully enables us to embed Flash using only the object tag.

Nested Objects (Dual Objects / object tags only) [ ^ ]

The "Nested Objects" method of embedding Flash content exchanges the invalid <embed> tag for a nested set of <object> tags. Using IE-specific conditional comments, this method delivers the parent object tag to Internet Explorer, while delivering the nested object tag to all "non-IE" browsers. Ignoring the unrecognized attributes of the parent object tag, non-IE browsers will correctly utilize the recognized attributes of the nested object tag.

This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. The code itself, although valid (X)HTML, is relatively bulky and provides no plugin detection, possibly resulting in broken content. Further, thanks to the Eolas patent dispute2, this method requires IE users to "click-activate" the movie before it will play.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="movie" value="path/flash_movie.swf" />
   <param name="quality" value="high">
   <param name="bgcolor" value="#fff">
   <!--[if !IE]>-->
   <object data="path/flash_movie.swf" type="application/x-shockwave-flash" 
         width="333" height="333"  id="unique_id" align="middle">
      <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
      <param name="quality" value="high">
      <param name="bgcolor" value="#fff">
   <!--<![endif]-->
      <p>Alternate content goes here..</p>
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
</object>

Twice Cooked Method (default Adobe Flash method) [ ^ ]

The "Twice Cooked" method is the default method used by the Adobe Flash IDE to embed Flash movies. This is by far the most popular and widely supported method for including .swf content into (X)HTML web pages. This method is not standards-compliant, provides no alternate content, and provides no plugin detection, possibly resulting in broken content. Further, this method requires IE users to "click-activate" the movie before it will play. Nonetheless, this method remains popular and is relatively simple to implement, requiring no additional JavaScript to function properly.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="path/flash_movie.swf" />
   <param name="wmode" value="transparent" />
   <param name="scale" value="exactfit" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#333" />
   <param name="menu" value="true" />
   <embed src="path/flash_movie.swf" name="unique_id" allowScriptAccess="sameDomain" 
      type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" 
      quality="high" bgcolor="#333" width="333" height="333" align="middle" />
</object>

This method provides support for the passing of variables to the Flash movie. Simply include the following parameters:

<param name="flashvars" value="variable=value&autostart=true" />
<embed ... flashvars="variable=value&autostart=true" ... />

Flash Satay [ ^ ]

Based on the generic object implementation, the "Flash Satay" method drops the invalid <embed> tag, manipulates various <object> tag parameters, and implements the use of a small container movie to load target Flash content. Any number of Flash movies may use the same container file, which may also receive and pass variables to the various target movies. This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. Keep in mind, however, that this method includes no innate Flash plug-in detection, which may result in broken and/or missing content. Further, this method requires IE users to "click-activate" the movie before it will play.

Usage (2 steps)

1. Open a new Flash movie, place the following ActionScript into the first frame, and save the file as c.swf1:

_root.loadMovie(_root.path,0);

2. Customize2 this code and insert it into the <body> of your document:

<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="333" height="333">
   <param name="movie" value="c.swf?path=movie.swf" />
   <img src="noflash.gif" alt="Alternate Image" />
   <p>Alternative content description</p>
</object>

Replace "movie.swf" with the name of your movie. The movie parameter will then pass the name of your target movie as a variable to the container file, which will then load and play the target movie itself. The container movie may be modified for additional functionality, but its file size must be kept small (within a few kilobytes).

Small Movie Satay (even easier)

For small Flash movies (e.g., small ads, decorative graphics, etc.), there is no need for the container movie. Simply customize and use this:

<object type="application/x-shockwave-flash" data="movie.swf" width="333" height="333">
   <param name="movie" value="movie.swf" />
</object>

FlashReplace [ ^ ]

FlashReplace by Robert Nyman is a JavaScript solution for including Flash content into a web page. FlashReplace works by replacing specified block-level placeholders with predefined Flash content. The script is extremely lightweight, weighing in at a mere 2.1 KB, and requires only one line of code to implement. FlashReplace also works fine with streaming Flash movies, and does not require users of Internet Explorer to "click-activate" Flash content. To ensure maximum browser support, FlashReplace employs the forbidden <embed> element, which unfortunately results in code that is not standards-compliant. Also, to keep the script as lightweight as possible, FlashReplace contains no support for Adobe Express Install. Overall, a very lightweight and flexible solution for delivering Flash content to the widest audience possible. Well done!

Usage (1 step)

1. Download 1 the FlashReplace script and copy to desired directory.

2. Customize this code with the correct file path and insert it into the <head> of your document:

<script type="text/javascript" src="FlashReplace.js"></script>

3. Customize this block-element placeholder according to the variables listed below and place into the <body> of your document. The code may be placed in its target location within the document, at the bottom of the page, or even in an external JavaScript file:

<script type="text/javascript">
   FlashReplace.replace("elmToReplace", "src", "id", width, height, version, params);
</script>

FlashReplace parameters:

  • elmToReplace — the id of the element to be replaced with the movie
  • src — the path to the Flash movie (e.g., flash/my-movie.swf)
  • id — the id to be used for the Flash-movie element
  • width — the width of the Flash movie
  • height — the height of the Flash movie
  • version — (optional) specifies a required Flash version
  • params — (optional) open parameter for customization

It is also possible to include multiple Flash movies within the same JavaScript placeholder. This is useful if you are consolidating code in an external .js file. Here is an example that also demonstrates usage of the two optional parameters (version and params):

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   FlashReplace.replace("header", "/flash/header-movie.swf", "flash-header", 777, 333);
   FlashReplace.replace("article", "/flash/article-movie.swf", "flash-article", 555, 333, 7, { wmode : "transparent" });
   FlashReplace.replace("footer", "/flash/footer-movie.swf", "flash-footer", 777, 333, 7, 
      {
         wmode : "transparent", 
         quality : "high", 
         bgcolor : "#fff" 
      }
   );

//--><!]]>
</script>

SWFObject [ ^ ]

SWFObject is a Javascript Flash-Player detection and embed script that detects Flash Player versions 3 and up on all major modern browsers. SWFObject is search-engine friendly, degrades gracefully, generates valid (X)HTML markup, and is forward compatible. SWFObject includes an Adobe Express Install feature and provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. There is even a SWFObject extension available for Flash MX 2004 and Flash 8 1. SWFObject works great in both HTML and (X)HTML documents, but only when pages are sent as "text/html" (not "application/xhtml+xml").

Usage (4 steps)

1. Download SWFObject from the SWFObject Home Page2 and copy to desired directory.

2. Insert this function call into the document <head>:

<script type="text/javascript" src="swfobject.js"></script>

3. For each movie object, customize2 and insert this code into the <body> of your document:

<div id="unique_element_id">
   <p>This is the alternate content that will be replaced by the Flash content.</p>
   <p>Include a link to <a href="path/doc.html?detectflash=false">bypass the detection</a>.</p>
   <p>This alternate content is for users without the Flash plugin or without Javascript enabled.</p>
   <p><strong><a href="http://www.adobe.com/go/getflashplayer">Upgrade your Flash Player<a/>.</strong></p>
   <p><noscript> content is not required unless you want to support users with the Flash plugin but without JavaScript.</p>
</div>

4. For each movie object, customize2 and insert this code directly below the previous code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var so = new SWFObject("path/movie.swf", "unique_movie_id", "333", "333", "7", "#777");
   so.write("unique_element_id");
//--><!]]>
</script>

Here are some additional, optional variables (for additional variables and complete details, visit the SWFObject Home Page2):

   so.addParam("salign", "t");            // alignment parameter
   so.addParam("quality", "high");        // movie quality setting
   so.addParam("scale", "noscale");       // used for full-screen movies
   so.addParam("wmode", "transparent");   // player transparency setting
   so.addVariable("variable1", "value1"); // pass variable to Flash movie
   so.addVariable("variable2", "value2"); // pass variable to Flash movie
   so.useExpressInstall('path/expressinstall.swf'); // Adobe Express Install - requires "expressinstall.swf" file
   so.setAttribute('xiRedirectUrl', 'http://example.com/upgrade-finished.html'); // redirect after express install - must be abs url
   so.addVariable("variable1", getQueryParamValue("variable1")); // to pass "http://example.com/page.html?variable1=value1"

UFO [ ^ ]

UFO (Unobtrusive Flash Object) employs JavaScript to detect the Flash plug-in and embed Flash movies. UFO is free to use and supports virtually all major modern browsers. UFO produces valid (X)HTML code and compliments accessible, seo-friendly websites. Highly customizable, UFO supports multiple, differently configured Flash movies and provides excellent support for Adobe Express Install functionality1. UFO also provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. Plus, UFO works great in both HTML and (X)HTML documents when pages are sent as either "text/html" or "application/xhtml+xml". Nice. :)

Usage (3 steps)

1. Download the UFO JavaScript from the UFO Home Page1 and copy to desired directory.

2. Customize1 and insert this code into the <head> of your document:

<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var FO = { movie:"movie.swf", width:"333", height:"333", majorversion:"8", build:"0" };
   UFO.create(FO, "unique_id");
//--><!]]>
</script>

3. Customize this block-element placeholder with alternate content and place into the <body> of your document:

<div id="unique_id">
 <p>Replacement content goes here.</p>
 <p>
  <a href="http://www.macromedia.com/go/getflashplayer">
   <img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Flash Player" />    
  </a>
 </p>
</div>

To prevent undesirable or unusual presentational behavior during page/movie download, add the following CSS styles to the document <head> and placeholder element, respectively:

<style type="text/css">
    #ufoDemo { visibility: hidden; }
</style>
<div id="ufoDemo" style="visibility:visible;">
 <p>Replacement content goes here.</p>
</div>

Here are some additional, optional general parameters (for additional parameters and complete details, visit the UFO Home Page1):

id, base, play, loop, name, menu, scale, align, salign, quality, wmode, bgcolor, flashvars, devicefont, swliveconnect, allowscriptaccess, seamlesstabbing, allowfullscreen

Here are some additional, optional UFO-specific parameters (for additional parameters and complete details, visit the UFO Home Page1):

xi:"true" - enable Adobe Express Install support
ximovie:"[URL of express install Flash movie, ufo.swf]" 
xiwidth:"[width of customized express install Flash movie]" 
xiheight:"[height of customized express install Flash movie]" 
xiurlcancel:"[URL of cancel page]" 
xiurlfailed:"[URL of failed page]" 
setcontainercss:"true" - use for full-screen Flash content

You can use the optional xiurlcancel and xiurlfailed parameters to route express install cancellations and failures to separate URLs. You also have the option customize the express install Flash movie (you can find the ufo.fla file in the ufo.zip file).

SWFFix [ ^ ]

SWFFix 1 is a recently released 2 JavaScript library featuring standards-compliant markup, Flash-version detection, and Express-Install support. SWFFix uses the nested-objects method to optimize cross-browser support, deliver alternate content, and facilitate graceful degradation. SWFFix “fixes” the issues commonly associated with the nested-objects method (e.g., the click-to-activate requirement of IE6 and Opera 9+), providing greater functionality and a richer user experience. SWFFix also features dynamic embedding of Flash content for (X)HTML documents. Best of all, the SWFFix library consists of a single, extremely lightweight JavaScript file — only 12KB (unzipped) or 3.4KB (gzipped)! This could be the one, folks!

As mentioned, there are two ways to include Flash content via SWFFix. The first method ensures delivery of Flash content even when JavaScript is unavailable. The second method requires JavaScript to dynamically embed Flash content via the DOM. First we will outline the “JavaScript-independent” method, and then proceed with the “dynamic-inclusion” method.

JavaScript-independent method — Usage (4 steps)

1. Download the SWFFix library 3 (and Express Install files, if needed) and copy to desired directory.

2. Embed both Flash content and alternative content using standards-compliant markup (edit as needed):

<body>
   <div>
      <object id="targetID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="movie" align="left" width="333" height="333">
         <param name="movie" value="movie.swf" />
         <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="movie.swf" width="780" height="420">
         <!--<![endif]-->
         <p>Alternative content (e.g., you can have a richer experience by downloading the Flash plugin)</p>
         <!--[if !IE]>-->
            </object>
         <!--<![endif]-->
      </object>
   </div>
</body>

3. Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>

4. Register your Flash content with the SWFFix library and add to the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript">
   SWFFix.registerObject("targetID", {swfversion:"9.0.0", expressinstall:"expressInstall.swf"});
</script>

In the previous code, we are using the following parameters:

  • The first parameter is the target id of the <object> element used for the movie.
  • The second parameter is an object that may contain two optional name:value pairs:
  • swfversion specifies the version of Flash Player required to display the content.
  • expressinstall specifies the URL of the Express Install file (if used).

Multiple Flash Movies using the JavaScript-independent method

To include multiple Flash movies using the previously described “JavaScript-independent” method, simply repeat steps 2 and 4 for each additional Flash movie.

Dynamic-inclusion method — Usage (4 steps)

Whereas the previous method of inserting Flash content requires a pre-coded <object> construct, the dynamic method of embedding Flash replaces a target-container block-element such as a <div> with the required <object> markup. Simply predefine the required object attributes and parameters and the code is inserted dynamically. Of course, because this method requires JavaScript, users without it will not see your Flash content. Having said that, here is how to do it:

1. Download the SWFFix library 3 and copy to desired directory.

2. Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>

3. Define the <object> attributes, <param> elements, and target id in the following code, and then copy to the <head> of your document:

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>
   <script type="text/javascript">
      if (SWFFix.hasFlashPlayerVersion("9.0.0")) {
         var fn = function() {
            var att = { data:"movie.swf", width:"333", height:"333" };
            var par = { flashvars:"foo=bar" };
            var el  = document.getElementById("targetID");
            SWFFix.createSWF(att, par, el);
         };
         SWFFix.addDomLoadEvent(fn);
      }
</script>

In the previous code, SWFFix.createSWF(attributeObj, paramObj, toBeReplacedElem) requires three arguments:

  1. attributeObj — contains the <object>’s attributes in name:value pairs
  2. paramObj — contains the <object>’s nested param elements in name:value pairs
  3. toBeReplacedElem — specifies the target id of the (X)HTML element that will be replaced with your Flash movie

4. Add to the <body> of your (X)HTML document (edit as needed):

<body>
   <div id="targetID"><p>Alternative content (e.g., you need both JavaScript and Flash..blah blah blah..)</p></div>
</body>

Multiple Flash Movies using the dynamic-inclusion method

To include multiple Flash movies using the previously described “dynamic-inclusion” method, simply repeat steps 3 and 4 for each additional Flash movie.

Copyright2008PerishablePress

About this article

This is article #344, posted by Jeff Starr on Tuesday, April 17, 2007 @ 9:39am. Categorized as Accessibility, Function, Websites & tagged with Accessibility, flash, javascript, markup, Video. Updated on May 18, 2008. Visited 35913 times. 15 Responses »

Related articles

Dialogue

15 Responses Jump to comment form

1 • Armand

May 1, 2008 at 10:17 am

Excellent article, it helped me a lot!
Thanks!

2 • Perishable

May 4, 2008 at 7:18 am

My pleasure — glad to be of service! :)

3 • Ken

May 16, 2008 at 12:26 pm

Amazing work! This must have taken forever to put together. Thanks!

4 • Perishable

May 18, 2008 at 7:07 am

Yes, it did, actually, but I certainly learned a lot in the process ;) Thank you for the positive feedback!

5 • hussam

May 25, 2008 at 5:06 am

Thanks a lot for this amazing effort

6 • Perishable

May 25, 2008 at 6:24 am

Absolutely my pleasure :)

7 • Don

May 31, 2008 at 7:48 pm

No doubt. I’ve been in the dark about a lot of this for some time now. Fantastic job, no kidding.

8 • Perishable

June 1, 2008 at 1:32 pm

Thanks, Don! Happy to help :)

9 • Robbo

June 16, 2008 at 10:22 am

Great stuff! Thanks - very helpful.

Being somewhat noobish about all this - which of the above examples would you recommend to achieve this final result:

A banner with a static logo - which plays a random selection of short Flash movies (converted from video).

I’m thinking Flash Replace is the way to go - but I’m unsure how to get it to randomly select from a collection of Flash movie files.

Hope you can help. Thanks again.

Cheers.

10 • Perishable

June 17, 2008 at 10:16 am

Hi Robbo, I’m not sure what your experience level is, but you could easily accomplish something like this with a little PHP and just about any of the above methods. Here is an article on easy image randomization via PHP. The method targets image files, but is easily adapted to just about any file type.

11 • aaron

October 2, 2008 at 2:11 pm

Thanks so much for this..

Trackbacks / Pingbacks

  1. eyedeas » Blog Archive » using flash as progressive enhancement
  2. graphiceyedea » Blog Archive » using flash as progressive enhancement
  3. Multimedia/Flash Screenreader Tango
  4. Just an ordinary blog

Subscribe to comments on this post

Share your thoughts..

Top • Read official comment policy

← Previous post • Next post →

« April 13, 2007 • Yes, I Took the Survey »

Contact Perishable Press

  • Contact Jeff via form

Search Perishable Press

About Perishable Press

Perishable Press is the virtual playground of Jeff Starr — visionary, founder and lead developer of Monzilla Media, a small web and graphic design company in the lush desert oasis of Moses Lake, Washington. Perishable Press features articles and tutorials on many aspects of digital design..

Read more..

Perishable on Twitter

“ automation is great: i've got photoshop batch processing 300+ images while FTP is simultaneously uploading them to the server.. ”

Perishable on Tumblr

Tons of Firewalls

Tuesday, 7 October 2008, 1:45 am

Recently overheard on conservative talk radio (instructing listeners how to obtain a free promotional video from their new website):

“This website has tons and tons of firewalls, so you have to use your real email address to download the video..”

The Quiet Search Revolution

Monday, 6 October 2008, 12:15 pm

Just a thought.. As awesome as Google is these days, it would suck if they ended up owning the entire search-engine business. When they get to the point where all competition is impossible (due to their sheer size, financial resources, media influence, etc.), how many alternate search engines will have the resources for continuous improvement and top-quality search results? When this happens, we will have no choice but to do exactly what Google tells us to do.

As deeply ingrained as it is for everyone to instinctively and unthinkingly turn to Google for their search activity, it is time to leave a few alternate search tabs open for as much use as possible. Instead of using Google just because that’s what you always do, try your search on MSN, Yahoo, Ask, or any of the other independent search engines instead. Sharing traffic with other search engines is a nice, quiet way to keep the competitive spirit alive and well in the search-engine business.

Disappearing WordPress Posts

Wednesday, 1 October 2008, 7:50 pm

Today I experienced difficulties while trying to publish or even save new posts in WordPress. I would compose the post as usual, add all of the keywords, tags, meta tags, and so on, but as soon as I clicked the “Publish” or “Save” button, the post would just disappear from existence.

The weird thing is that during the drafting process, WordPress’ default auto-save feature showed that the post had been saved at expected intervals. Unfortunately, after trying to publish several different posts, WordPress showed absolutely no record of the posts ever being created. They simply vanished into thin air.

Fortunately, a little investigation revealed the culprit. If you should find yourself dealing with this same issue, here are some different things that you should try. First, re-upload fresh copies of your entire WordPress installation. I don’t know why exactly, but apparently various files can either go stale or completely disappear from the server. Overwriting or writing fresh files may do the trick.

If that doesn’t work, check your WordPress database for errors. In my case, a little investigation revealed that something had caused a couple of fatal errors in the wp_posts table. Fortunately, checking and repairing the table solved the issue.

Tumblr Battles

Wednesday, 1 October 2008, 5:30 pm

Please excuse the duplicate Tumbr posts.. seems there is no way to ping Tumblr to refresh/rebuild the RSS feed according to changes in post content. So, to resolve the issue I have discussed now like two or three times regarding paragraph elements and proper feed formatting, I have no choice but to repost a majority of my text posts.

This is necessary for the proper import and display of my Tumblr feed into WordPress. Currently, there are five items displayed at once, each styled according to proper inclusion of paragraph tags. Thus, whenever the Tumblr feed “forgets” to enclose single-paragraph posts with the proper tags, the result is an unstyled post entry displayed on my site.

Assuming that makes sense, you will please excuse my dust while I repost a few older entries in an attempt to reconstruct (the hard way) a properly formatted Tumblr feed.

More Optimization Measures

Wednesday, 1 October 2008, 5:27 pm

Another important step in improving the performance of my recent redesign involves the optimization of both CSS and JavaScript content. During development there were around 15 server requests for these two types of files, 10 JavaScript files and 5 CSS files. This was okay for my own use, but would not work for production purposes.

Optimizing these file types involves consolidation, compression, and caching. Consolidation of 10 JavaScript files into three is huge improvement. Now I deliver one JS file for the functionality of the site, one for Mint, and another for Analytics. Likewise for the stylesheets; after consolidation, a single stylesheet is delivered to all modern browsers. There are two additional stylesheets as well, but they are targeted at IE6 and mobile browsers and will not load elsewhere.

Once the files were consolidated as much as possible, it was time to optimize or “crunch” them. Using the sexy Flumpcakes CSS optimizer, I was able to reduce my stylesheets by around 25%. Likewise for JavaScript, I used xtreeme.com’s optimizer to shave an additional 20% off the size of my JS content.

Finally, once I had consolidated and compressed my JS and CSS files as much as possible, I wanted to further my optimization efforts by ensuring that these files were cached by the browser. By setting far-future Expires headers for everything but the statistical files, my site gains an additional performance boost by eliminating the need to reload preexisting content.

Read more on Tumblr..

Subscribe to Comments Recent Dialogue

  • Adam Singer: Thanks for this. You're right, if it isn't broken, don't fix it. I was about to update my permalinks and install a plugin to redire...
  • Marilyn: It looks great on my browser! I wish I had that much creativity in my head! It's gorgeous!...
  • Randy: "Too girly?" It looks like a great design. Define "too girly!"...
  • Christopher Ross: .htaccess based redirects are wonderful. I'm always baffled by web professionals who don't take the time to learn more about them....
  • federico: Hi Jeff... tnx so much...it worked perfectly... c u Federico...
  • Cooltad: The skin seems (mostly) fine in my expert opinion. Your one of the few people able to make a design with a transparent table and a b...
  • Neal: The free Intro to Linux book is a great place to start http://www.ischool.utexas.edu/mirrors/LDP/LDP/intro-linux/html/index.html ...
  • Louis: @Jeff: Your “Archives” page is slick, although I would expect a cleaner implementation from such a vehement advoc...
  • Jeremy: Well I think that you may be over-critical, I don't see a darn thing wrong with it - I like it a lot!...
  • Jeff Starr: Alright, this is exactly the kind of information I was hoping to get. Lots of great ideas and recommendations here. I will be reading...

Read more recent comments..

Subscribe to Content Recent Activity

Explore the Archives..