Does Google Hate Web Standards?
by Jeff Starr on Sunday, June 15, 2008 – 28 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&tab=wi">Images</a></li>
<li><a href="http://maps.google.com/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://news.google.com/nwshp?hl=en&tab=wn">News</a></li>
<li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Shopping</a></li>
<li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Gmail</a></li>
<li>more
<ul>
<li><a href="http://video.google.com/?hl=en&tab=wv">Video</a></li>
<li><a href="http://groups.google.com/grphp?hl=en&tab=wg">Groups</a></li>
<li><a href="http://books.google.com/bkshp?hl=en&tab=wp">Books</a></li>
<li><a href="http://scholar.google.com/schhp?hl=en&tab=ws">Scholar</a></li>
<li><a href="http://finance.google.com/finance?hl=en&tab=we">Finance</a></li>
<li><a href="http://blogsearch.google.com/?hl=en&tab=wb">Blogs</a></li>
<li><a href="http://www.youtube.com/?hl=en&tab=w1">YouTube</a></li>
<li><a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a></li>
<li><a href="http://picasaweb.google.com/home?hl=en&tab=wq">Photos</a></li>
<li><a href="http://docs.google.com/?hl=en&tab=wo">Documents</a></li>
<li><a href="http://www.google.com/reader/view/?hl=en&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 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>© 2008 Google</small></p>
</body>
</html>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&tab=wi" onclick="gbar.qs(this)">Images</a></span> <span class="gb1"><a href="http://maps.google.com/maps?hl=en&tab=wl" onclick="gbar.qs(this)">Maps</a></span> <span class="gb1"><a href="http://news.google.com/nwshp?hl=en&tab=wn" onclick="gbar.qs(this)">News</a></span> <span class="gb1"><a href="http://www.google.com/prdhp?hl=en&tab=wf" onclick="gbar.qs(this)">Shopping</a></span> <span class="gb1"><a href="http://mail.google.com/mail/?hl=en&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>▼</small></a></span> <span class="gb2"><a href="http://video.google.com/?hl=en&tab=wv" onclick="gbar.qs(this)">Video</a></span> <span class="gb2"><a href="http://groups.google.com/grphp?hl=en&tab=wg" onclick="gbar.qs(this)">Groups</a></span> <span class="gb2"><a href="http://books.google.com/bkshp?hl=en&tab=wp" onclick="gbar.qs(this)">Books</a></span> <span class="gb2"><a href="http://scholar.google.com/schhp?hl=en&tab=ws" onclick="gbar.qs(this)">Scholar</a></span> <span class="gb2"><a href="http://finance.google.com/finance?hl=en&tab=we" onclick="gbar.qs(this)">Finance</a></span> <span class="gb2"><a href="http://blogsearch.google.com/?hl=en&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&tab=w1" onclick="gbar.qs(this)">YouTube</a></span> <span class="gb2"><a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a></span> <span class="gb2"><a href="http://picasaweb.google.com/home?hl=en&tab=wq" onclick="gbar.qs(this)">Photos</a></span> <span class="gb2"><a href="http://docs.google.com/?hl=en&tab=wo">Documents</a></span> <span class="gb2"><a href="http://www.google.com/reader/view/?hl=en&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 »</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&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&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%"> </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"> <a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a><br> <a href="http://www.google.com/preferences?hl=en">Preferences</a><br> <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 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&tab=wi" onclick="gbar.qs(this)">Images</a>
</span>
<span class="gb1">
<a href="http://maps.google.com/maps?hl=en&tab=wl" onclick="gbar.qs(this)">Maps</a>
</span>
<span class="gb1">
<a href="http://news.google.com/nwshp?hl=en&tab=wn" onclick="gbar.qs(this)">News</a>
</span>
<span class="gb1">
<a href="http://www.google.com/prdhp?hl=en&tab=wf" onclick="gbar.qs(this)">Shopping</a>
</span>
<span class="gb1">
<a href="http://mail.google.com/mail/?hl=en&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>▼</small></a>
</span>
<span class="gb2">
<a href="http://video.google.com/?hl=en&tab=wv" onclick="gbar.qs(this)">Video</a>
</span>
<span class="gb2">
<a href="http://groups.google.com/grphp?hl=en&tab=wg" onclick="gbar.qs(this)">Groups</a>
</span>
<span class="gb2">
<a href="http://books.google.com/bkshp?hl=en&tab=wp" onclick="gbar.qs(this)">Books</a>
</span>
<span class="gb2">
<a href="http://scholar.google.com/schhp?hl=en&tab=ws" onclick="gbar.qs(this)">Scholar</a>
</span>
<span class="gb2">
<a href="http://finance.google.com/finance?hl=en&tab=we" onclick="gbar.qs(this)">Finance</a>
</span>
<span class="gb2">
<a href="http://blogsearch.google.com/?hl=en&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&tab=w1" onclick="gbar.qs(this)">YouTube</a>
</span>
<span class="gb2">
<a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a>
</span>
<span class="gb2">
<a href="http://picasaweb.google.com/home?hl=en&tab=wq" onclick="gbar.qs(this)">Photos</a>
</span>
<span class="gb2">
<a href="http://docs.google.com/?hl=en&tab=wo">Documents</a>
</span>
<span class="gb2">
<a href="http://www.google.com/reader/view/?hl=en&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 »</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&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> |
<a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&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%"> </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">
<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a>
<br>
<a href="http://www.google.com/preferences?hl=en">Preferences</a>
<br>
<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 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>Eeeewww. Lots to discuss here, but I will try to summarize with a simple screenshot:
![[ Thumbnail: Google W3C Invalidation ]](http://perishablepress.com/press/wp-content/images/2008/google-check/google-invalidation_mid.gif)
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?
Focused on clean code and quality content, Perishable Press is the online home of Jeff Starr, author, artist, designer, developer, and all-around swell guy. 
28 Responses
Add a comment
Louis – #1
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.
Andy Mantell – #2
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…
Max – #3
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?
Louis – #4
Interesting, as this comes right on time.
Jens Meiert – #5
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.
Mathieu Beausoleil (beausoleilm) – #6
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.
Don – #7
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.
Perishable – #8
@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?
Mathieu Beausoleil (beausoleilm) – #9
@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 ;)
Zemond – #10
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.
August Klotz – #11
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.
Perishable – #12
@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 — astext/html. Within this context, there is nothing “ironic” about compromising in order to accommodate those who have yet to comply with Web Standards.Zemond – #13
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.
Zemond – #14
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!
Sir Thomas – #15
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
Perishable – #16
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.
Zemond – #17
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.
Perishable – #18
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.
Zemond – #19
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.
Perishable – #20
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?
Jens Meiert – #21
Manual trackback: http://meiert.com/en/blog/20081002/web-standards-at-google/
Jeff M – #22
I think the point is that not one of us would even consider coding a page like Google’s, unless we were creating a spoof. It is such a mess.
ffp – #23
obeying standards will never hurt if ever void. but Google may think about supporting an ice-age browser or care about things i don’t care of its existence while those “giants” have to. something in future may emerge being highly sensitive to web standards, then Google and yahoo will work anything around while i will just regret being old fashioned few years ago (now).
it’s not wise fighting or just ignoring a standard of ANY kind!
for i would be living happier if IE6 was never there.
ffp – #24
me again, i do support reply#20 of Perishable
Zemond – #25
“How much proprietary suffering would have been alleviated if previous versions of IE actually behaved according to the principles of Web Standards?”
If both IE and Netscape adhered to the standards of the time, we would never of lived through the browser wars, and may still be paying $50 bucks just to surf the web. The competition that saw many popular advances to the HTML language and surrounding technologies might not of happened as they did not necessarily follow the standards.
Although this does not cover why browser fail to follow standards written prior the release of said browsers, browsers cannot wait until a standard is written before including new technologies. And once those standards are written browser X might of got it right (according to the consortium) and browser Y is left with a shit decision, write in the correct handling and maintain the current way for backwards compatibility, overloading what should be a simple application or simply break backwards compatibility, ship a new product and wear the flack from the developers… Or in Microsoft’s case “who the fuck thought this shit up”
Thats my 2 cents again guys and just in my style no questions answered but more have arisen.
– Zemond
Paul – #26
Yeah you have to remember if 1% of users who visit your site don’t use a modern browser, with googles scale of 750,000,000 unique visitors a day thats 7.5 million people who couldn’t see your site properly (thats equivalent the entire population of switzerland) . Even with the 0.5% who maybe use a text based browser thats 3.75 million people (thats almost the population of New Zealand).
Jeff Starr – #27
Hi Paul, yes that is an understood point, but on the other side of the coin it is the same as saying that Web Standards are only advised for smaller, low-traffic sites. Personally, I think Google could embrace standards and still accomplish their goals. The two are not mutually exclusive.
Trackbacks / Pingbacks