Muschamp Rd

New 404 Error Page, what do you think?

September 16th, 2012
My recreation of the sad mac icon

Back in 2005 when I created the WordPress theme for what became Muskblog, I didn’t spend much time on a custom 404 Error Page. Once again an upgrade to the newest version of WordPress busted either my theme or someone’s plugin or both. I got rid of the offending plugin and used some newer built into WordPress pagination code but while testing it I realized my 404 Error Page looked pretty plain.

Since I have time on my hands, some PHP skillz, and years of experience messing around with WordPress I decided to copy an idea from my sidebar and add it to my 404 Error Page. Basically I just use  wp_list_bookmarks to display five random blog posts from a carefully selected subset of the posts on Muskblog. This is my super simple recommendation algorithm. Having seen YARPP, DISQUS, and Facebook’s recommendation algorithms in action, I have new found respect for my original super simple solution.

Once that was working and despite adding in some silly text, the 404 Error Page still looked too plain so I decided to add an image. What image says error? New 404 Error Page complete with Sad Mac

The Sad Mac

I did some Googling and I found a few images but not the actual original icon file so I decided to just draw it pixel by pixel. I found an article about Susan Kare and using GraphicsConverter I redrew the icon pixel by pixel. I originally thought I need 28 pixels for the width, but it turned out 27 was the absolute minimum width. For unknown reasons I saved it as a PNG file, perhaps because you don’t need to license that algorithm in order to use it, plus I know a thing or two about data compression. I uploaded and positioned the image, but I wasn’t sure how large to make it. I decided to let the browser resize it, to see how fast that rendered, but also how it looked. I decided to make it what I thought at first was 10 times larger or 280 pixels. The result was a happy accident, 280 pixels is about the size I was aiming for, but because the actual image was 27 pixels wide, the PNG algorithm made several guesses and approximations, the resulting blurred out image works pretty well.

I’ve tested it in several browsers, even on my iPhone. I suspect they all might use the same royalty free PNG library. I thought about using some fancy JavaScript to resize the image, but for now I’m going to leave it rendering blurry. There is already too much JavaScript being loaded by too many plugins. I may revisit my sidebar next, but eventually I may reduce and replace some of the plugins I use in an attempt to simplify my WordPress install and increase page load speed.

If I switched to a vector based image file format it would render near perfectly at any size, but PNG, along with GIF and JPG are supported by just about every browser and device built since I first joined the World Wide Web plus PNG is technically superior to GIF and JPG in many ways. Drawing the sad mac icon on the fly should be possible given how simple it is…


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Posts on Muskblog © Andrew "Muskie" McKay.
CFA Institute does not endorse, promote or warrant the accuracy or quality of Muskblog. CFA® and Chartered Financial Analyst® are registered trademarks owned by CFA Institute.