MCP4

The <EMBED> tag has been around since Netscape 2.0 days (circa 1995) As you may or may not know, the <EMBED> tag is amazingly not actually part of the HTML 4.0/XHTML 1.0 specification (if you want to know why, checkout John Dowdell blog post on <EMBED>’s dark history). This leaves us with a problem, if you try use the W3C validator on any page with an embedded YouTube video, you are going to get a lot of errors. How to fix this? Easy…

Step 1

You tube generates some code for you, it looks some thing like (YouTube compresses to 1 line),

  <object width="425" height="344">
     <param name="movie" value="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" />
     <param name="wmode" value="transparent" />
     <embed src="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344" />
  </object>

First thing to do is strip out the <EMBED> tag.

Step 2

Add a “data” and a “style” attribute to the <OBJECT> tag. This points to the flash file (YouTube video) and sets the size respectively. So the <OBJECT> tag will now look something like,

  <object width="425" height="344" data="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" style="width:425px; height:344px;" >

Step 3

Clean up the remaining <PARAM> tags. You can safely drop the following tag,

     <param name="wmode" value="transparent" />

You can optionally add “bgcolor” param if you wish,

     <param name="bgcolor" value="#FFFFFF" />

So the final result would look like this,

     <object id="charts" type"application/x-shockwave-flash" style"width:425px; height:344px;" data"http://www.youtube.com/v/3AdFA6WWJ7E">
        <param name"quality" value"high" />
        <param name="movie" value="http://www.youtube.com/v/3AdFA6WWJ7E" />
        <param name"bgcolor" value"#FFFFFF" />
      </object>

Note: If the YouTube url includes an ampersand symbol (&), make sure that you convert it to its HTML equivalent (&amp;),

i.e.
http://www.youtube.com/v/3AdFA6WWJ7E&hl=en changes to,
http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en

Conclusion

Converting YouTube generated HTML to XHTML (Strict) compliant and can be achieved with minimal fuss while still maintaining cross platform support. This solution is not just restricted to YouTube either, it can be used on other non compliant embedded flash, like the otherwise excellent maanil.us PHP/SWF Charts. The following example is a fully XHTML complaint YouTube video, and the original non compliant code.

Tested on,

Safari 3.1.1, Mac os-x
Safari 3.0.4, Mac os-x
Safari 3.0, Windows XP
Safari 3.1.1, Windows XP
Firefox 2.0.0.4, Windows 2000
Firefox 1.5, Windows 2000
Firefox 3.0, Windows XP
Opera 9.23, Windows XP
Internet Explorer 6 (SP2), Windows XP
Internet Explorer 7, Windows XP
Internet Explorer 8, Windows XP

This is the first in 3 part series on website optimization using Firebug and YSlow. It is aimed at Bluehost users, but should be applicable to any similarly setup host like Dreamhost, Host Monster, etc…

As many know, we are big fans of Bluehost here, but one feature that they really lack is GZip compression.

Q. What is GZip and why is it important?

A. Simply put, Gzip is a compression tool that reduces the size of files (like CSS or javascript files). It is important for two reasons,

1. Reduced file sizes means: faster downloads, quicker site and thus a happier end user.
2. Bandwidth, smaller files consume less bandwidth.

Fiftyfoureleven.com have a very good blog about this topic, however there are issues with both of its suggested methods. Method 1, requires changing filenames, big problem if you have a lot of pages. Method 2, does not work on Bluehost PHP 5.2.5/Apache 2 configuration -will give nothing but unhelpful Server 500 errors. The good news is that all is not lost! Instead, you can use PHP to GZip the components on the fly. There are 3 easy steps to compressing file output streams,

Step 1

In the folder where your CSS files are located (perhaps www.yoursite.com/css/) create a file called “.htaccess”, put the following line into it,

AddHandler application/x-httpd-php .css

Step 2

In the same directory as above, create a PHP file called “gzip-css.php” and put the following into it.

<?php
ob_start ('ob_gzhandler');
header('Content-type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');
 
header('Expires: '.gmdate('D, d M Y H:i:s',time() + 2629743) . ' GMT');
?>

Step 3

Again in the same directory, create a file “php.ini” (PHP configuration file) and into it put the following,

[PHP]
 
; Automatically add files before any PHP document.
auto_prepend_file = gzip-css.php

Done!

Now clear your browsers cache and load your main page again. If all worked, you should notice no difference (except maybe page is a bit faster!). If you have Yahoo’s YSlow installed, you can use it to verify that the files have been compressed.

Javascript

Repeat same steps as above, except change the line in gzip-css.php,

header('Content-type: text/css; charset: UTF-8');

to

header('Content-type: application/javascript; charset: UTF-8');

Also in the .htaccess file change the bit “…tpd-php .css” to “…tpd-php .js”. Lastly, If you rename gzip-css.php to gzip-js.php make sure that you update the php.ini file also.

Conclusion

Using this method, the CSS on this blog went from 13.8K to 4.4K and our javascript went from: 18.2K to 11.1K.

Overall, using GZip and the other optimizations our page size went from 131.5K to 38.9K, or a 340% reduction in file-size, not bad for half and hours work. If you run into problems leave a comment. Tune in for Part 2 next week to see what other optimizations we did.

In this new “Getting your hands dirty” series I hope to show people some handy work-arounds, hacks and oddities.

In this first instalment, we are going to be cover, how to style the <form> Submit Buttons. In comparison to styling input fields, there is very little information out there.

Doing a Google search returns 200K+ results, versus 126,000,00 for styling input fields! Even then, most of the methods involve,

• Using <a> or <span> and then form.submit();
• Using Javascript to do a dynamic image replacement.
• Using an <input> type “Image“

These method have advantages (images can look great), but also have serious disadvantages (usability problems, Javascript requirements, lots & lots of CSS, etc…)

So lets talk about an alternative method, using backgrounds and gradients. The big advantages of this method are,

• Requires very little CSS, very little images, thus faster to download.
• Works even if Javascript is disabled.
• Degrades gracefully in older browsers

Lets make a first stab at it in Example 1,

input[type=submit] /*apply to Submit buttons only */
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

In this example we are using an attribute selector, however as IE 6 doesn’t support this and we want cross platform support as much as possible, lets use the standard class method.

In Example 2, we have added a class attribute to the submit button. Looking good.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

Next, in Example 3, lets use the “hover” attribute to give a Rollover style effect.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

.button:hover
{ /* change background when mouse hovers over */
    background: url(img/basic_on.gif) repeat-x;
    height: 30px;
    border: 2px solid #000;
}

Note: IE6 (and below) do not support “hover” on anything but links, so no roll overs in IE 6.

Finally, in Example 4, lets put it all together and show a couple of variations. Go here to see how the buttons are rendered in IE 6.

Conclusion
Using simple CSS techniques you can achieve great looking Submit Buttons, without using heavy weight Javascript and without the usability problems of Image buttons. Kevin Hale also has a great blog an alternative approach using button elements instead.
Download: Examples

Hope you found this first “getting your hands dirty” tutorial useful.

Next Blog: MCP4: A S.E.O. exercise, part 1.

Robert