Who should web developers vote for? Pt 1.
So, there is an election going on. As a public service to my fellow webdevs, I decided to look at the candidates and judge them based on the only metric that matters: the quality of their frontend code.Because tomorrow will (maybe) decide which democrat will be the nominee, I will wait for part 2 and make this post the McCain post.
So, if you search for McCain in google and click through you are redirected to a landing page (only in Google, not any other search engine, more on this below). Actually, thats not true. FIRST you actually have to load a bunch of crap on johnmccain.com, because this is not a 301 redirect, its a JAVASCRIPT redirect, called in a script tag some ways down the page:
if (document.referrer.indexOf('www.google.com') != -1)
{
window.location = 'http://www.johnmccain.com/landing/?sid=gorganic'
}
This wonderful script makes sure google searchers see a landing page instead of the normal home page. I don’t know why users of other search engines don’t get a landing page, but oh well.
Anyway, because this script happens in the body, after the header which contains some js and css files, before I get sent to this handy splash page, I have to load:
1 107k html file
One 25k css file
and five javascript files, plus one js file that returned a 404 error.
NONE of which I even see, because the JS redirects the page. People: never do this. Never, ever do this. Making people load a bunch of files for no reason is not a good idea.If you are going to make a landing page and you have to do a redirect do it in the headers, not in javascript. (in fact, why don’t you not use javascript for redirects at all?) I this case they seem to be using a clever “plain html” homepage, presumably as an optimizing strategy to take load of the asp.net app that runs johnmccain.com. Maybe, I don’t know.
Anyway, here is the landing page (as seen in firefox on mac):
Hmmm. Beautiful. I won’t comment on those oh-so-cool 3d buttons. But I do want to draw you attention to this:
This is why you test in multiple browsers people. Maybe I am being too harsh, but having your page appear this broken in Firefox is unacceptable. Now, to be fair, css is hard to make work across multiple browsers, which must be why for this page they chose to not use css. That’s right, this page comes to you straight from 1997. Check out this flashback snippet of code:
<td><font size="2" face="Arial, Verdana, Geneva" color="#ffffff">
<center>Paid for by John McCain 2008<br><a href="http://www.johnmccain.com">www.JohnMcCain.com</a>
</center>
</span>
</td>
In case you were wondering: no, there was no start tag for the span. Now, this would be a very serious web dev crime: tables, sliced images, font tags and the dreaded “center” tag. But this is not the biggest problem with this page. No, the biggest problem with this page is the fact that the very top of the file looks like this:
<span id="FlexSpaceControl1"><body bgcolor="#000000"
Hmmm…I am reasonably sure that you cannot wrap a body tag with a span. Maybe this is some exotic doctype I have not yet encountered. Hard to tell without a DTD. And of course, I am only assuming this page is html. You can tell by the name of the span that this page comes from asp.net/VisualStudio, but I really thought that asp.net wouldn’t let you make a page this horrid.
Well, I need to wrap this up because its late and I am tired, perhaps I will get more energy to complain about this horror tomorrow.
I leave you with this link, the w3c validator barfing all over this splash page.