Case Project: Validating Google Site-Flavored

According to Google, Google Site-Flavored’s search delivers web search results that are customized to individual websites. The only problem with the output of their code is messy, very messy. Let’s fix this and make it more standards compliant. I will always hold Google’s algorithms and services very high. They offer many free searches and services that, by far, out-do other companies; not to mention that they have created standards that have brought other companies (Microsoft and Yahoo! to name a few) to “dub”. Please note: This is an an older piece of writing of mine, and is a little out-dated, but very useful information.

The Problem

The only problem with Google’s Site Flavored¹ service is the way it outputs code for you to cut and paste for use on your website. For many people, it’s great, but for web standards enthusiastics (like myself), we want it correct and validated. The errors in the validation project was very simple for the most part; they were all HTML 4.01 validated markup, meaning it was not valid using the XHTML 1.1 specification. So, the input tags were not closed, all attributes were not enclosed in quotes, a few deprecated attributes were used (border and align), non-tabular data was used in a table, not all attributes were lowercase, and the font tag was used. Is that all?! Yea, pretty much.

So, What Does It Look Like?

Ok, so what exactly is the default output of Google’s Site-Flavored program? Well, before I show you the code, please note that I changed the URL to the image that is included in the code to a related path instead of absolute to downsize on the amount of code shown. The output image is actually located on Google’s server, but I saved it to my computer instead of relying on Google to hold it for me (although I do trust them). So here’s the default code:

XHTML

<form method=GET action="http://www.google.com/search">
    <table bgcolor=#FFFFFF>
       <tr><td>
       <a href="http://www.google.com/services/siteflavored.html">
       <img src="google_flavored.gif" border=0 alt=Google align=absmiddle/></a>
       <input type=text name=q size=31 maxlength=255 value=''/>
       <input type=hidden name=site_flavored value=on/>
       <input type=hidden name=client value=site_flavored/>
       <input type=hidden name=hl value=en/>
       <input type=hidden name=interests value=62|61|55/>
       <span id=site_flavored_name></span>
       <script language=javascript>
            homeHTML = "<input type=hidden name=site_flavored_name value=" +
document.location +"/>";
            document.getElementById("site_flavored_name").innerHTML = homeHTML;
       </script>
       <input type=submit name=sa value='Custom Search'/>
       <font face=arial,sans-serif size=-1></font>
       </td></tr>
    </table>
</form>

So, like I said, to some, it may look perfect, but really it isn’t. It has plenty or markup errors. Well, why don’t we go check it out. Let’s see what the W3C says:

61 Errors says the W3C.

What Should We Do?

Fix it, of course! But how? Easy, all we have to do is make the markup XHTML compliant. Keep in regards that we must keep the same look to the form, in general, we do not want to recode to have it look different, that is called redesign. I am not redesigning the Google Site-Flavored search, I am validating it for the XHTML 1.1 specification. Let’s start with the obvious. In order to create a valid XHTML document, you must link to the DTD, so let’s do just that. Create a starting valid XHTML document. This should be known to all web designers, if you don’t know how to do this, give me a holler and I’ll go throught it will you.

Now we are off to a good start. Hey, at least you have no errors so far! Now we add content. Now we strip! no…the tables.

Strippin’ The Tables

With the W3C saying that we should design using standards compliant code and that tables are used for tabular data, we should do just that. Why use a table these days anyway, it’s just uncool! Seriously, using tables really does take more bandwidth and time to load that a single div tag does. You can create the same look with a div tag and a few CSS rules. So instead of having this chunk of table markup:

XHTML

<table bgcolor=#FFFFFF>
   <tr><td>
   <!-- markup goes here -->
   </td></tr>
</table>

Let’s just fix it up by replacing it with a single div tag replacement:

XHTML

<div>
  <!-- content goes here -->
</div>

Wow, what a difference! One single tag replacing about six other tags that we used before. Now let’s fix that capitalization.

Capitalization Is Disrespectful

The W3C requires that all XHTML documents are well-formed by using all lowercase in you markup. This does not include the values of attributes or the text you include in your document to display on the page; the only thing that is required to be lowercase is the individual tags and the attribute elements, not their values. This should be easy, especially if you have a program that takes the text and just converts all text to lowercase.

Close Em!

Closing each and every tag is a must, yes, even if it is an empty tag. So, make sure all tags are closed, especially the ones that where, prior to HTML 4.01, valid, such as the br (breaking tag) and the input tag. They should all close with the forward slash closing followed by the “greater than” sign, or just close like a regular non-empty markup (as you may know it, you just close the tag with a forward slash followed by the corresponding element).

Quote Please

In XHTML, you must put either single or double quotes around each and every attribute value; if you don’t you will recieve an error on your validation. This is a really easy concept and I really don’t think I need to go into this subject into detail. Just please, put quotes around any attribute values.

I Don’t Speak “Deprecation”

Deprecated tags, tags that are no longer supported by the W3C as valid markup, are always considered bad. You should never use deprecated tags or elements. Deprecated tags are deprecated for a reason, do not use them. Sooner or later, those deprecated tags that you think should not be deprecated, will no longer be supported by browsers; so just stick with the standards and smile. The font tag was used in the Google Site-Flavored program, and was a surprise to me, but with a little deletion we can all be happy again, you really don’t even need to code to even make it render correctly; so just delete it. The align and border attribute used in the img tag are deprecated, among other tags that use these attributes as well. Just do not use then; let CSS help out. What you should do is just delete them out of the img tag and insert some positive CSS:

CSS

img { border:0; float:left; }

The CSS specified takes the image (well any image that is used) and makes all text appear to the right of the image (the image is “floating” to the left of the text) and has a default border of zero, making the border not show when an anchor (link) is applied to the image.

Analysis So Far

Ok, so far we have completed all the HTML problems and have recoded it in XHTML. So let’s see what we have now. If we take the code so far and look at it in a browser, what appears? Oh no! The input box is way too high! That is not good, but of course CSS is here to help. We can fix this with a bit of CSS. Take the first input field box and give it a class reference of search; we will name it search because it is the search box. Then apply the very simple, yet effective CSS. So here is the code you need. The CSS:

CSS

.search { margin-top:12px; }

The XHTML for the input field (notice the reference to the class “search” used in the CSS):

XHTML

<input type="text" name="q" size="31" maxlength="255" value="" class="search" />

It’s fixed! Great job! Now, on to the other problem.

Stay Snug

Since we are coding in XHTML, we must has properly nested documents in order to survive the brutal process of validation. So, we must keep all the input tags in a paragraph, or div tag, or something block-level, as a paragraph tag is inline. So what I did in this example is just put a p tag around it all and it’s fixed. But wait, it’s not fixed, the paragraph has made it a little uneven. It’s ok, just take some CSS and fix it, and we will all be saved! Before posting the fix, I will explain. The reasoning behind the offset of adding a paragraph tag (p) in the document is the fact that it has a few pixels of default padding. So, in order to fix this is to pre-define that there is no default padding/margins. So here is the CSS:

CSS

p { margin:0; padding:0; }

Great, it’s fixed…again!

We Might Be Done…

So, now we are done. It has been fixed. So let’s validate it. And the results are in…

WHAT!? That isn’t valid! Wait a second, this should be valid right? All my XHTML code is valid, so why isn’t it renedering as valid XHTML? Gotta love JavaScript…

Fixin’ Some JS

So, ok we have a problem with the JavaScript. The main question on your mind is, “How do we fix it?”. It’s easier than you think, yes even if you don’t even know JavaScript. All we have to do is create a function and call it from the document from an external JavaScript file, in which I will be calling functions.js in this example. Here is the function that we are going to write:

JavaScript

function insertHTML() {
   homeHTML = "<input type='hidden' +
   name='site_flavored_name' value=' +
   document.location + ' />";
   document.getElementById("site_flavored_name") +
   .innerHTML = homeHTML;
}

Now we have to reference the JavaScript document as an external file (functions.js):

XHTML

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

Now let’s call the function in the XHTML document:

XHTML

<script type="text/javascript">
   insertHTML();
</script>

Ok, so now let’s see if this has fixed the problem…don’t get your hopes up…the results are…

YES! It worked.

We are now finished with the recoding of the Google Site-Flavored Search.

The Final Version

Now, here is what we have for the final. This will include the JavaScript file, the CSS, and the body portion of the document (where the main editing was done). So here is the body portion:

XHTML

<!-- Site-Flavored Google Search >
<form method="get" action="http://www.google.com/search">
<div>
  <a href="http://www.google.com/services/siteflavored.html">
    <img src="google_flavored.gif" title="Google" alt="Google" /></a>
  <input type="text" name="q" size="31" maxlength="255" value="" class="search" />
  <input type="hidden" name="site_flavored" value="on" />
  <input type="hidden" name="client" value="site_flavored" />
  <input type="hidden" name="hl" value="en" />
  <input type="hidden" name="interests" value="62|61|55" />
  <span id="site_flavored_name"></span>
  <script type="text/javascript">
     insertHTML();
  </script>
  <input type="submit" name="sa" value="Custom Search" />
</div>
</form>
<!-- Site-Flavored Google Search -->

The CSS is as follows:

CSS

img { border:0; float:left; }
.search { margin-top:12px; }
p { margin:0; padding:0; }

Finally, the JavaScript:

JavaScript

function insertHTML() {
    homeHTML = "<input type='hidden' +
    name='site_flavored_name' value=' +
    document.location + ' />";
    document.getElementById("site_flavored_name") +
    .innerHTML = homeHTML;
}

Conclusion

Just because corporations are not always the best in giving the best standards-based design does not always mean they are incapable. There can be a lot of good in a company, even if not all the rules are followed. When people see mistakes, they can be fixed by giving insight. So, here is my insight, go ahead and look for something out there that might not be totally correct, and try your best in making it correct and share with the whole world. Helping others can really make a difference.

1. Google Site-Flavored is, in whole, relative to Google, Inc., and I have no reflection on Google’s decision making »