Does Google Hate Web Standards?

Published Sunday, June 15, 2008 @ 8:59 am • 22 Responses

Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Google</title>
		<link href="http://www.google.com/google.css" type="text/css" rel="stylesheet" media="screen" />
		<script src="http://www.google.com/google.js" type="text/javascript"></script>
	</head>
	<body>
		<p><strong>Web</strong></p>
		<ul id="menu">
			<li><a href="http://images.google.com/imghp?hl=en&amp;tab=wi">Images</a></li>
			<li><a href="http://maps.google.com/maps?hl=en&amp;tab=wl">Maps</a></li>
			<li><a href="http://news.google.com/nwshp?hl=en&amp;tab=wn">News</a></li>
			<li><a href="http://www.google.com/prdhp?hl=en&amp;tab=wf">Shopping</a></li>
			<li><a href="http://mail.google.com/mail/?hl=en&amp;tab=wm">Gmail</a></li>
			<li>more
				<ul>
					<li><a href="http://video.google.com/?hl=en&amp;tab=wv">Video</a></li>
					<li><a href="http://groups.google.com/grphp?hl=en&amp;tab=wg">Groups</a></li>
					<li><a href="http://books.google.com/bkshp?hl=en&amp;tab=wp">Books</a></li>
					<li><a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws">Scholar</a></li>
					<li><a href="http://finance.google.com/finance?hl=en&amp;tab=we">Finance</a></li>
					<li><a href="http://blogsearch.google.com/?hl=en&amp;tab=wb">Blogs</a></li>
					<li><a href="http://www.youtube.com/?hl=en&amp;tab=w1">YouTube</a></li>
					<li><a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a></li>
					<li><a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq">Photos</a></li>
					<li><a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a></li>
					<li><a href="http://www.google.com/reader/view/?hl=en&amp;tab=wy">Reader</a></li>
					<li><a href="http://www.google.com/intl/en/options/">even more</a></li>
				</ul>
			</li>
		</ul>
		<ul id="login">
			<li><a href="http://www.google.com/url">iGoogle</a></li>
			<li><a href="https://www.google.com/accounts/Login">Sign in</a></li>
		</ul>
		<div id="logo">
			<a href="http://www.google.com/help/ig/art/index.html#name=koons">
				<img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242">
			</a>
		</div>
		<div id="search">
			<form action="/search" name="f">
				<input name="hl" value="en" type="hidden" />
				<input maxlength="2048" name="q" size="55" title="Google Search" value="" />
				<input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit" />
			</form>
		</div>
		<ul id="tools">
			<li><a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a></li>
			<li><a href="http://www.google.com/preferences?hl=en">Preferences</a></li>
			<li><a href="http://www.google.com/language_tools?hl=en">Language Tools</a></li>
		</ul>
		<p>What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/">iGoogle Artist Themes</a></p>
		<ul id="extra">
			<li><a href="http://www.google.com/intl/en/ads/">Advertising&nbsp;Programs</a></li>
			<li><a href="http://www.google.com/services/">Business Solutions</a></li>
			<li><a href="http://www.google.com/intl/en/about.html">About Google</a></li>
		</ul>
		<p><small>&copy; 2008 Google</small></p>
	</body>
</html>

See text version of this code

Mmmm, nice and clean, or at least pretty close to it. Semantic markup, separation of structure, presentation, and behavior — you know, all the stuff that makes Web Standards so great. Unfortunately, the world’s most popular web page looks nothing like this. Instead of acknowledging, embracing, and supporting Web Standards, the Google home page is as abominable as Microsoft’s IE 404 Error Page. From inline styles and obtrusive JavaScript to non-semantic markup and table-based layout, the fun and simple Google home page is actually a big stinking bowl of tag soup in disguise:

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title><style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;height:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}.pgtab:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px}.pgtabside{width:3px;background-position:-404px 0}.ptr{cursor:pointer;cursor:hand}.iconl{background:url() no-repeat;overflow:hidden;height:px;width:px}#gbar{float:left;height:22px;padding-left:2px}.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#guser{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:absolute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style><script>window.google={kEI:"tuMYSLXoO6T-gwPi3oz5Cw",kEXPI:"17259,17735,17866",kHL:"en"};
function sf(){document.f.q.focus()}
window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=tuMYSLXoO6T-gwPi3oz5Cw"+g}return true};
window.gbar={};(function(){var c=window.gbar,e,g,h;c.qs=function(a){var d=window.encodeURIComponent&&(document.forms[0].q||"").value;if(d)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(f,b){return(b||"&")+"q="+encodeURIComponent(d)})};function l(a,d,f){a.display=h?"none":"block";a.left=d+"px";a.top=f+"px"}c.tg=function(a){var d=0,f=0,b,m=0,n,j=window.navExtra,k,i=document;g=g||i.getElementById("gbar").getElementsByTagName("span");(a||window.event).cancelBubble=!m;if(!e){e=i.createElement(Array.every||window.createPopup?"iframe":"DIV");e.frameBorder="0";e.scrolling="no";e.src="#";g[7].parentNode.appendChild(e).id="gbi";if(j&&g[7])for(n in j){k=i.createElement("span");k.appendChild(j[n]);g[7].parentNode.insertBefore(k,g[7]).className="gb2"}i.onclick=c.close}while(b=g[++m]){if(f){l(b.style,f+1,d+25);d+=b.firstChild.tagName=="DIV"?9:20}if(b.className=="gb3"){do f+=b.offsetLeft;while(b=b.offsetParent)}}e.style.height=d+"px";l(e.style,f,24);h=!h};c.close=function(a){h&&c.tg(a)}})();</script></head><body onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin="3" alink="#ff0000" bgcolor="#ffffff" link="#0000cc" marginheight="3" text="#000000" vlink="#551a8b"><div id="gbar"><nobr><span class="gb1"><b>Web</b></span> <span class="gb1"><a href="http://images.google.com/imghp?hl=en&amp;tab=wi" onclick="gbar.qs(this)">Images</a></span> <span class="gb1"><a href="http://maps.google.com/maps?hl=en&amp;tab=wl" onclick="gbar.qs(this)">Maps</a></span> <span class="gb1"><a href="http://news.google.com/nwshp?hl=en&amp;tab=wn" onclick="gbar.qs(this)">News</a></span> <span class="gb1"><a href="http://www.google.com/prdhp?hl=en&amp;tab=wf" onclick="gbar.qs(this)">Shopping</a></span> <span class="gb1"><a href="http://mail.google.com/mail/?hl=en&amp;tab=wm">Gmail</a></span> <span class="gb3"><a href="http://www.google.com/intl/en/options/" onclick="this.blur();gbar.tg(event);return !1"><u>more</u> <small>&#9660;</small></a></span> <span class="gb2"><a href="http://video.google.com/?hl=en&amp;tab=wv" onclick="gbar.qs(this)">Video</a></span> <span class="gb2"><a href="http://groups.google.com/grphp?hl=en&amp;tab=wg" onclick="gbar.qs(this)">Groups</a></span> <span class="gb2"><a href="http://books.google.com/bkshp?hl=en&amp;tab=wp" onclick="gbar.qs(this)">Books</a></span> <span class="gb2"><a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws" onclick="gbar.qs(this)">Scholar</a></span> <span class="gb2"><a href="http://finance.google.com/finance?hl=en&amp;tab=we" onclick="gbar.qs(this)">Finance</a></span> <span class="gb2"><a href="http://blogsearch.google.com/?hl=en&amp;tab=wb" onclick="gbar.qs(this)">Blogs</a></span> <span class="gb2"><div></div></span> <span class="gb2"><a href="http://www.youtube.com/?hl=en&amp;tab=w1" onclick="gbar.qs(this)">YouTube</a></span> <span class="gb2"><a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a></span> <span class="gb2"><a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq" onclick="gbar.qs(this)">Photos</a></span> <span class="gb2"><a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a></span> <span class="gb2"><a href="http://www.google.com/reader/view/?hl=en&amp;tab=wy">Reader</a></span> <span class="gb2"><div></div></span> <span class="gb2"><a href="http://www.google.com/intl/en/options/">even more &raquo;</a></span> </nobr></div><div class="gbh" style="left: 0pt;"></div><div class="gbh" style="right: 0pt;"></div><div id="guser" style="padding: 0pt 0pt 4px; font-size: 84%;" width="100%" align="right"><nobr><a href="http://www.google.com/url?sa=p&amp;pref=ig&amp;pval=3&amp;q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&amp;usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&amp;hl=en">Sign in</a></nobr></div><center><br id="lgpd" clear="all"><a href="http://www.google.com/help/ig/art/index.html#name=koons"><img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242"></a><br><br><form action="/search" name="f"><table cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="25%">&nbsp;</td><td align="center" nowrap="nowrap"><input name="hl" value="en" type="hidden"><input maxlength="2048" name="q" size="55" title="Google Search" value=""><br><input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit"></td><td nowrap="nowrap" width="25%"><font size="-2">&nbsp;&nbsp;<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a><br>&nbsp;&nbsp;<a href="http://www.google.com/preferences?hl=en">Preferences</a><br>&nbsp;&nbsp;<a href="http://www.google.com/language_tools?hl=en">Language Tools</a></font></td></tr></tbody></table></form><br><font size="-1">What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/" onmousedown="return clk(this.href,'promos','hppweb:en_us','pro','1','')">iGoogle Artist Themes</a></font><br><br><br><font size="-1"><a href="http://www.google.com/intl/en/ads/">Advertising&nbsp;Programs</a> - <a href="http://www.google.com/services/">Business Solutions</a> - <a href="http://www.google.com/intl/en/about.html">About Google</a></font><p><font size="-2">©2008 Google</font></p></center></body></html>

Of course, this is obviously the compressed/optimized version of the document, shared here mostly for the shock value. How bad is the uncompressed version? After taking the time to tab it all out, I almost cried. Check out the sadness for yourself:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Google</title>

		<style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;height:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}.pgtab:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px}.pgtabside{width:3px;background-position:-404px 0}.ptr{cursor:pointer;cursor:hand}.iconl{background:url() no-repeat;overflow:hidden;height:px;width:px}#gbar{float:left;height:22px;padding-left:2px}.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#guser{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:absolute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style>

		<script>window.google={kEI:"tuMYSLXoO6T-gwPi3oz5Cw",kEXPI:"17259,17735,17866",kHL:"en"};
function sf(){document.f.q.focus()}
window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=tuMYSLXoO6T-gwPi3oz5Cw"+g}return true};
window.gbar={};(function(){var c=window.gbar,e,g,h;c.qs=function(a){var d=window.encodeURIComponent&&(document.forms[0].q||"").value;if(d)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(f,b){return(b||"&")+"q="+encodeURIComponent(d)})};function l(a,d,f){a.display=h?"none":"block";a.left=d+"px";a.top=f+"px"}c.tg=function(a){var d=0,f=0,b,m=0,n,j=window.navExtra,k,i=document;g=g||i.getElementById("gbar").getElementsByTagName("span");(a||window.event).cancelBubble=!m;if(!e){e=i.createElement(Array.every||window.createPopup?"iframe":"DIV");e.frameBorder="0";e.scrolling="no";e.src="#";g[7].parentNode.appendChild(e).id="gbi";if(j&&g[7])for(n in j){k=i.createElement("span");k.appendChild(j[n]);g[7].parentNode.insertBefore(k,g[7]).className="gb2"}i.onclick=c.close}while(b=g[++m]){if(f){l(b.style,f+1,d+25);d+=b.firstChild.tagName=="DIV"?9:20}if(b.className=="gb3"){do f+=b.offsetLeft;while(b=b.offsetParent)}}e.style.height=d+"px";l(e.style,f,24);h=!h};c.close=function(a){h&&c.tg(a)}})();</script>

	</head>
	<body onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin="3" alink="#ff0000" bgcolor="#ffffff" link="#0000cc" marginheight="3" text="#000000" vlink="#551a8b">

		<div id="gbar">
			<nobr>
				<span class="gb1">
					<b>Web</b>
				</span>
				<span class="gb1">
					<a href="http://images.google.com/imghp?hl=en&amp;tab=wi" onclick="gbar.qs(this)">Images</a>
				</span>
				<span class="gb1">
					<a href="http://maps.google.com/maps?hl=en&amp;tab=wl" onclick="gbar.qs(this)">Maps</a>
				</span>
				<span class="gb1">
					<a href="http://news.google.com/nwshp?hl=en&amp;tab=wn" onclick="gbar.qs(this)">News</a>
				</span>
				<span class="gb1">
					<a href="http://www.google.com/prdhp?hl=en&amp;tab=wf" onclick="gbar.qs(this)">Shopping</a>
				</span>
				<span class="gb1">
					<a href="http://mail.google.com/mail/?hl=en&amp;tab=wm">Gmail</a>
				</span>
				<span class="gb3">
					<a href="http://www.google.com/intl/en/options/" onclick="this.blur();gbar.tg(event);return !1"><u>more</u> <small>&#9660;</small></a>
				</span> 
				<span class="gb2">
					<a href="http://video.google.com/?hl=en&amp;tab=wv" onclick="gbar.qs(this)">Video</a>
				</span>
				<span class="gb2">
					<a href="http://groups.google.com/grphp?hl=en&amp;tab=wg" onclick="gbar.qs(this)">Groups</a>
				</span>
				<span class="gb2">
					<a href="http://books.google.com/bkshp?hl=en&amp;tab=wp" onclick="gbar.qs(this)">Books</a>
				</span>
				<span class="gb2">
					<a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws" onclick="gbar.qs(this)">Scholar</a>
				</span>
				<span class="gb2">
					<a href="http://finance.google.com/finance?hl=en&amp;tab=we" onclick="gbar.qs(this)">Finance</a>
				</span>
				<span class="gb2">
					<a href="http://blogsearch.google.com/?hl=en&amp;tab=wb" onclick="gbar.qs(this)">Blogs</a>
				</span>
				<span class="gb2">
					<div></div>
				</span>
				<span class="gb2">
					<a href="http://www.youtube.com/?hl=en&amp;tab=w1" onclick="gbar.qs(this)">YouTube</a>
				</span>
				<span class="gb2">
					<a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a>
				</span>
				<span class="gb2">
					<a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq" onclick="gbar.qs(this)">Photos</a>
				</span>
				<span class="gb2">
					<a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a>
				</span>
				<span class="gb2">
					<a href="http://www.google.com/reader/view/?hl=en&amp;tab=wy">Reader</a>
				</span>
				<span class="gb2">
					<div></div>
				</span>
				<span class="gb2">
					<a href="http://www.google.com/intl/en/options/">even more &raquo;</a>
				</span>
			</nobr>
		</div>
		<div class="gbh" style="left: 0pt;"></div>
		<div class="gbh" style="right: 0pt;"></div>
		<div id="guser" style="padding: 0pt 0pt 4px; font-size: 84%;" width="100%" align="right">
			<nobr>
				<a href="http://www.google.com/url?sa=p&amp;pref=ig&amp;pval=3&amp;q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&amp;usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | 
				<a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&amp;hl=en">Sign in</a>
			</nobr>
		</div>
		<center>
			<br id="lgpd" clear="all">
			<a href="http://www.google.com/help/ig/art/index.html#name=koons">
				<img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242">
			</a>
			<br>
			<br>
			<form action="/search" name="f">
				<table cellpadding="0" cellspacing="0">
					<tbody>
						<tr valign="top">
							<td width="25%">&nbsp;</td>
							<td align="center" nowrap="nowrap">
								<input name="hl" value="en" type="hidden"><input maxlength="2048" name="q" size="55" title="Google Search" value="">
								<br>
								<input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit">
							</td>
							<td nowrap="nowrap" width="25%">
								<font size="-2">
									&nbsp;&nbsp;
									<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a>
									<br>
									&nbsp;&nbsp;
									<a href="http://www.google.com/preferences?hl=en">Preferences</a>
									<br>&nbsp;&nbsp;
									<a href="http://www.google.com/language_tools?hl=en">Language Tools</a>
								</font>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			<br>
			<font size="-1">
				What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/" onmousedown="return clk(this.href,'promos','hppweb:en_us','pro','1','')">iGoogle Artist Themes</a>
			</font>
			<br>
			<br>
			<br>
			<font size="-1">
				<a href="http://www.google.com/intl/en/ads/">Advertising&nbsp;Programs</a> - 
				<a href="http://www.google.com/services/">Business Solutions</a> - 
				<a href="http://www.google.com/intl/en/about.html">About Google</a>
			</font>
			<p>
				<font size="-2">
					©2008 Google
				</font>
			</p>
		</center>
	</body>
</html>

See text version of this code

Eeeewww. Lots to discuss here, but I will try to summarize with a simple screenshot:

[ Thumbnail: Google W3C Invalidation ]
Google home-page (in)validation via W3C

Um, yeah, 64 validation errors. That’s worse than my very first site! As much as I love Google (cough), I hate to see their blatant, high-profile disregard for Web Standards. Does Google hate Web Standards? Probably not, but it obviously ranks mighty low on their list of priorities. What if everyone were to follow the leader and design their web pages like Google? Assuming Google knows what they’re doing, does this mean that Web Standards aren’t effective, useful, or practical? Does it all come down to money? What do you think? Should Google embrace Web Standards or continue with business as usual?


Dialogue

22 Responses Jump to comment form

1Louis

June 15, 2008 at 10:51 am

I assume that Google cryptic markup is responsible for the homepage surreal loading time performances.

There is very little interest for them to have semantic content, but speed is their very first priority (and search relevance, of course).

Altough, I would like Google to serve the markup you show, it’s gorgeous.

2Andy Mantell

June 15, 2008 at 10:51 am

I really like this bit:

class="ft t bb bt">

now tell me what that refers to when it comes to styling the page :-)

I’m guessing it was done in order to save a few precious characters worth of bandwidth. If they used markup more like your example they’d save a lot more though.

Each result on the result page seems to be contained in a table with one row and one column too which seems massively overkill. There’s even an extra div inside the lone table cell performing no extra function whatsoever :-/

So yeah, pitiful…

3Max

June 15, 2008 at 4:58 pm

This the one I like best for validation errors:

http://www.adobe.com/products/dreamweaver/

22 XHTML validation errors
469 CSS validation errors (yes, four hundred and sixty nine!)

Now what’s their excuse?

4Louis

June 16, 2008 at 4:06 am

Interesting, as this comes right on time.

5Jens Meiert

June 16, 2008 at 5:19 am

Louis, I didn’t refer to Google in my post … however, expect something on Google and web standards soon. I am very well aware of the fact that people miss some explicit commitment to web standards from Google. Meanwhile please rest assured that people like Ian Hickson, Dustin Diaz, Mark Pilgrim, and me are not quite idling.

6Mathieu Beausoleil (beausoleilm)

June 16, 2008 at 7:34 am

Well, defenders of Google will say that the are using that way to save bandwidth, the site is 100% compatible with every browser. I personally think that bandwidth is not a real problem for Google, cause a lot of their development may be more optimized.

I just think that big companies like Google and IE don’t care. They probably think “We are the standard” and that’s bad. To be really honest, I don’t care about their standards, I am doing my job correctly and that’s it ;) I just hope that we are not penalized in SEO to have better standards.

7Don

June 16, 2008 at 8:32 am

LOL indeed that is an odd thing to see; considering google seem to setting the defacto in some parts of the net and failing in the older ones.

8Perishable

June 16, 2008 at 8:36 am

@Mathieu Beausoleil: If that’s true, then is the practice of Web Standards incompatible with bandwidth optimization and browser compatibility? I mean, you are right — Google has been raping the competition for years now, and they have been doing it without a hint of this thing that you and I refer to as “Web Standards”.. What do they know that we don’t?

9Mathieu Beausoleil (beausoleilm)

June 16, 2008 at 9:08 am

@Perishable: Well, Web Standard is a good practice, but compatibility with very-old browser is impossible (for layout). But who use them ? Who use Netscape3 and don’t have the habit to stall on the first page ? The bottom line is: Yes to compatibility, but just keep accessibility guideline, and for others, have fun with a text version of pages ;)

10Zemond

July 8, 2008 at 2:57 am

Seriously who cares about google’s markup. they have no need for semantics enless they want to rank higher on yahoo?

As well (having never tested this) google would run on every imaginable browser under the sun. and when you think of it in terms of 1 percent do not use a standard or modern browser, we are looking at 100’s of millions of people trying to view this site. And it pains me to say it but table based layouts are reliable.

Then you have these alpha geeks that would argue this XHTML 1.1 complaint page I am currently posting on is not being served as application/xhtml+xml, and such this xhtml 1.1 page is infact not complaint to current web standards…. Ironic!

Further more to that, IE does not even understand that MIME type. Technically, according to the specs, it is impossible to serve a xhtml 1.1 page to IE.

Browser do no plan realases based on when the next standard comes out, and that 1 fact means you cannot realibly determine how your page will display. Its backwards, but the older standards you apply the more likely it will work. And since the search engine side of google have no real need for the latest css3 classes, why bother keeping up.

Any guys, I agree with you all. Just thought I would put some other ideas forward.

11August Klotz

July 12, 2008 at 7:16 am

Okay, how about something like this: Web Standards is a nice idea, but ultimately impractical and unrealistic, especially if you want your site to “run on every imaginable browser under the sun.” Use tables instead, because they are more reliable than standards-based (X)HTML/CSS designs. For the sake of the one-point-whatever percent of users without a modern browser, let’s build our sites to cater to the lowest common denominator and disregard the vast majority of people who actually care about Web Standards, technological progress, and other useless stuff like that.

Seriously, if the Google homepage is indeed the most popular, highly visited page on the Web, it certainly must be serving as an example to, and influencing the designs of many other sites, especially the ones that are doing everything they can to be like the “big players” and dominate the market. Why should any organization or individual bother with Web Standards if the most popular, highly successful sites seem to deliberately avoid it. Whether intentional or not, Google’s disregard for Web Standards conveys the message that standards-based design is not important — if not altogether detrimental — to be the best on the Web. In other words, Web Standards is a nice idea, but ultimately impractical and unrealistic.

12Perishable

July 13, 2008 at 7:23 am

@James: Some great points — thanks for sharing them with us! As for the XHTML 1.1 page that you are currently looking at, I have gone through great lengths to take seriously and implement properly the principles of modern, standards-based design. As you say, Internet Explorer does not deal well with content served as application/xhtml+xml. In a perfect world, standards-based design could be implemented on every site and rendered perfectly in every browser. However, as we know, certain browsers are somewhat less than perfect. How to deal with this discrepancy? Until I find the time to implement a content-negotiation technique, I have two choices for serving XHTML 1.1: compromise and accommodate IE users, or let them eat dust. As I would rather help people than ignore them, I chose to compromise my standards-based design by serving it — temporarily — as text/html. Within this context, there is nothing “ironic” about compromising in order to accommodate those who have yet to comply with Web Standards.

13Zemond

July 13, 2008 at 3:32 pm

Me again!

@August Klotz

“build our sites to cater to the lowest common denominator and disregard the vast majority of people who actually care about Web Standards”

By catering for the lowest common denominator you are infact also catering for every denominator above. And until XHTML 2.0 or another non-backwards compatible language comes out, this will sadly always be a fact.

I have never looked at google as an example for my coding practice, and for anyone who knows a thing or 2 about HTML would not either.
so your arguement that they should set the bar is unfair, A website that should set the bar is a website that talks about such things. eg:perishablepress.com and If you actually look at the code behind this site its outstanding.

When I want to build a search engine, then I’ll start looking at google

“Why should any organization or individual bother with Web Standards if the most popular successful sites seem to deliberately avoid it”

Well when a billion people can find your site without the use of a search engine, you can disregard standards too.

@Perishable

Fully Agree, retract my comment.

14Zemond

July 13, 2008 at 3:47 pm

1 more thing, If google served me a nice valid xhtml 1.1 document would the web world be a better place? Or would it simply promote the “hello world” self proclaimed web developer claiming they can code to standards because they put a sticker at the bottom of the document without even undstanding the underpinning knowledge of what xhtml is?

And for those of you who don’t know what I’m talking about. I mean the guy who does that website for 400 bucks, because they learnt frontpage in highschool. they also think marquee is cool!

15Sir Thomas

July 18, 2008 at 11:30 am

It is all about the money, short and simple. It is an interesting subject to ponder though, glad that you threw it out there for us to think about.
Sir Thomas

16Perishable

July 20, 2008 at 8:07 am

Sir Thomas, if it is indeed all about money, then what does that say about Web Standards? There seems to be a disconnect between standards and success, which seems clearly exemplified by Google. In other words, the trend seems to be something like this: the more popular and successful the site, the less likely it is that Web standards are involved. Conversely, there are many great standards-based sites out there that receive very little in terms of traffic and/or financial gain.

17Zemond

July 20, 2008 at 3:42 pm

Part1:
Although I agree that some of the big players have what we would class as a poorly coded front end. Saying you cant follow standards to be successful is wrong. For starters we haven’t defined ’success’, so for the rest of this post I will define ’success’ as reach and not revenue.

Then in your survey of 1 website which happens to have the 2nd highest reach in the world (according to alexa) we notice they have poor “standards”

so lets, look at a few other “successful” websites,
yahoo, blogger, facebook, myspace, msn and wikipedia.

Of those websites 1 passed validation > wikipedia.

So the argument of “success” or “standards” is gone, wikipedia has proven we can have both.

18Perishable

July 20, 2008 at 3:55 pm

Some good points, however, I am not declaring anything as fact, I am merely noting observed trends. In my experience, I agree that most of the “big players have … a poorly coded front end.” Rather than saying that you “cant follow standards to be successful,” I am merely suggesting that there seems to be a disconnect between embracing Web Standards and both reach and revenue. As you say, only one of the most highly visible sites passed validation. That goes to support the suggested notion, not disprove it. Further, according to your logic, it is impossible to disprove the idea just because one out of six sites managed to pass the test.

19Zemond

July 21, 2008 at 12:58 am

Moving on slightly while I think of a rebuttal.

I guess standards can also come down to awareness. Once you learn of them its hard to get away, all coders want to cut some fantastic code (even if it is just markup). and learning about standards opens up so many fun doors to tackle and quickly the developer join our pro standards club. BUT, when the awarness is not there the road is the opposite.

true story > I applied for a contract taking on overflow for a web development firm. Now its important to remember this is an actual web development firm, not some small time basement geek.
1 Requirement was “hand coding HTML”

Fair enough, I was rejected because they thought I used dreamweaver (which I do), but what is outstanding is how they came to that conclusion, they saw dreamweaver generated code in my sites. Guess what I’m referring to…. the doctype!!!

Now, Im sure google have awarness of standards, thats not my point. In fact there is no real point. Just a rant which sort of fits in to this topic.

20Perishable

July 21, 2008 at 10:56 am

I guess what I am trying to get at here is that, yes, obviously those of us who actually care about Web Standards can indeed enjoy the best of both worlds, however, when the largest, most successful sites on the Web seem to flagrantly disregard the entire concept (as demonstrated by this single case study of the world’s second most popular site), their examples serve to work against and even discredit the entire cause. Perhaps another way of communicating my concern is to imagine how much further the practice of Web Standards would be if Google, Microsoft, and other corporate giants were to show their support. For example, just imagine if Microsoft had embraced Web Standards right from the start.. How much proprietary suffering would have been alleviated if previous versions of IE actually behaved according to the principles of Web Standards?

21Jens Meiert

October 3, 2008 at 10:31 am

Subscribe to comments on this post


Share your thoughts..

TopRead official comment policy

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..