Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign
First of all, congratulations if you are geeky enough to understand the title of this article. Many would be like, "CSS, MS.. IE, error ..what..?" Whatever. If you get the title, you will get the point of this utterly pointless exercise. If that is the case, prepare for a delightful romp through geekland. Otherwise, save your precious time and stop reading here (exit strategy).
We hates them, precious..
Well, okay, for the seriously unenlightened, let us explain the object of our present focus:
The default "DNS Error" page for Internet Explorer unfortunately remains a familiar sight for millions of Microsoft users. Typically, the default MS DNS Error page loads whenever a browser is unable to connect to the internet or other networked resource. Once loaded, the error page announces itself with a message that reads "The page cannot be displayed." The page then presents several options: refresh browser, retype address, check connection, check configuration, etc. — Monzilla Media (i.e., me)
Still interested? Well, okay. Actually, it’s no big deal. Just a nice, standards-compliant, CSS-based redesign of that old, nappy Internet Explorer 404 Error page. You know the one. Whenever you can’t connect to the internet, it jumps up at you, sticks out it’s tongue and mocks you. Yes, we hate it, too. But alas, with the release of Internet Explorer 7 comes a ‘brand new’ 404 error page. Surely, it’s just a matter of time before that dumpy old 404 error page circa IE5/6 disappears forever. So, before that tragedy unfolds..
Coding at grandma’s house..
Recently, while trapped at a relative’s house for a ‘special’ occasion, we found myself checking out the family computer. Not much to look at or play with, so we decided to jump online. After several attempts, the default IE6 404 Error page finally convinced us of two sad realities: (1) there was no internet connection, and (2) we were in for a dreadfully long evening at Grandma’s house. After a few moments staring at that hideous error page, we were all like, "Oh yeah? Well who are you to tell me that ‘The page cannot be displayed’?" Getting tough, we began pushing the snotty little page around a bit, you know, resizing the window real fast, examining the source code..
Ahh, the source code. The page in question no doubt was written by Microsoft programmers during the barbaric browser wars of the late-1990’s. I mean, just take a look at the thing — haphazardly designed and about as user-friendly as a bitch-slap. And the source code is just a mess — bloated, table-based markup replete with font tags, missing attributes, and obtrusive JavaScript. Seriously, the code itself looks like somebody ran it through a garbage grinder — complete overkill for such a simple page. It’s almost as if Microsoft never expected anybody to see it..
The error page we deserve right now..
And then suddenly, as if possessed by the ghost of standards-compliance past, we obsessively began clicking around the source code and rewriting the (ahem) markup. Soon, content emerged separate from presentation. Table-based layout was transformed into standards-compliant markup. The HTML 3-point-whatever DOCTYPE had evolved into XHTML 1.0 Strict. On and on, until finally, after several hours of hiding from the relatives, we had completely redesigned that sad, old 404 Error page into a standards-compliant, near-perfect replicate of the original. Best of all, we killed three hours of pointless small talk and boring conversation in the blink of an eye. — Okay, time to go!
Before & After
Check out before and after versions of the old IE error page.
| Before | After |
|---|---|
| Microsoft old & busted version | Monzilla new & improved version |
| view source code | view source code |
3 responses to “Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign”
Must agree that it’s good practice – but what about the appearance factor? IE7 benefited from a nicer-looking page – any idea if it’s compliant?
The IE7 error page is a step in the right direction. It does look a little less hideous (i.e., more "user-friendly"), but still pretty weak, in my opinion. And no, it is not compliant according to modern design standards — the markup is loosely defined HTML 4.01 Transitional, which employs a giant table for layout. Some of the style rules have been relocated to an external CSS file, but much remains inline. Hmm.. perhaps the layout-table helps to ensure cross-browser compatibility? ;)
So you created a custom error page. I want to do the same, i can create one. but how can it be displyed when IE cannot find the server or the page. The default error messages by IE are generated by dll. How can i get in there to make it display my page isntead?