Today I got the silly idea to hand draw a web page using a marker. So I took out a piece of paper, grabbed a Sharpie and scribbled out a redesign for MichaelAllenSmith.com. Then I scanned the ditto, chopped it up and added mouseover images with just a splash of color.

I give you The Sharpie Redesign.

michael-allen-smith-SS

Believe it or not, it validates to XHTML 1.0 Transitional.

UPDATE (4/16/2009): It now validates XHTML 1.0 Strict thanks to Joe at ArtLung.com.

Comments

Joe

April 14 at 2009 at 6:38 PM

XHTML Transitional?

Weak.

(temp link removed)

MAS

April 14 at 2009 at 7:14 PM

Very nice JOE! Thanks!

I like how the hover work is done in the CSS. Much cleaner code. I copied it over to my server and it now validates XHTML 1.0 Strict. :)

I’ll use this as a template for some future redesign. I have an idea that involves crayons. ;)

Joe

April 14 at 2009 at 8:50 PM

Awesome man! I removed your Google Analytics code though, so you probably have to put that back in. Sorry about that. :-)

MAS

April 14 at 2009 at 9:42 PM

It is back in. Thanks again!

Ryan

April 15 at 2009 at 12:32 PM

Well played, well played!

Joe

April 15 at 2009 at 1:27 PM

Two critiques of my work now: 1. There’s a flicker when the images first load. Preloading the mouseover/hover images would be nice at this point. Maybe JS, or maybe just by loading them in-page as single pixel images. 2. Looks not great in IE6 — there’s a little extra margin between the top two hovers which makes a little ugly. If that matters you may need a little hackery.

Otherwise, I’m pretty pleased with my 30 minutes of xhtmling. :-)

MAS

April 15 at 2009 at 1:31 PM

1- I actually like that flicker, it draws attention to the image. I will experiment with pre-loading though.

2-If you have IE6, the web shouldn’t look good. Your surfing experience should be painful. :)

thanks again!

MAS

April 15 at 2009 at 1:42 PM

1- Just added the HOVER images as 1x1 pixels. You can’t even see them. No more flicker.

Thanks!