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.
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.
XHTML Transitional?
Weak.
http://artlung.com/temp/xhtml-strict-mas/
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.
Awesome man! I removed your Google Analytics code though, so you probably have to put that back in. Sorry about that.
It is back in. Thanks again!
Well played, well played!
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.
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!
1- Just added the HOVER images as 1×1 pixels. You can’t even see them. No more flicker.
Thanks!