I got an email from Dan this morning, wherein it seemed he was having a conversation with Tim about HTML, XHTML, CSS, and tableless sites. Tim was under the impression that sites utilizing valid markup, and adhering to the specifications, would wind up featureless, and devoid of creativity (I’m paraphrasing). I believe he also pointed to Dan’s minimalistic design as his example. Dan knows better, and so do I.
Dan pointed Tim to sites like glish, bluerobot and this here site right here as examples of interesting designs that take advantage of current techniques, and use valid markup as well as conforming to W3C specifications.
I decided to take things a step further. I feel people aren’t getting the message about how simple and efficient it is to use XHTML and CSS to design a site, and I wanted to be able to present Tim with irrefutable evidence that he was flat out WRONG, but in the nicest possible way you understand. I always feel it’s better to teach someone something by using things they know, and are familiar with, like Tim’s own site. So I set about redesigning Tim’s homepage using valid XHTML and CSS. All before my morning coffee.
The layout is a fairly straightforward 2 column layout with what is essentially a header and a footer. It didn’t take long before I had the skeleton of the layout prepared and went about massaging Tim’s content into XHTML validity. This is what took the majority of my time. Searching out all the spots that didn’t validate. I left a few oddball things in there just for the sake of time (I needed my coffee dammit!). All total, the redesign took me about 2 hours or so, the majority of which, as I said, was redoing Tim’s markup. Actual design time was minimal.
From the result, you should see that not only does the redesign look nearly identical to his original, but it also now validates as XHTML 1.0 transitional. Oh yeah, and the CSS validates too. The shame of it all!
Oh ye of little faith.
8 responses so far ↓
1 Some Guy // Dec 20, 2001 at 5:37 pm
Very impressive. Still doesn’t make me want to look at that pic in the corner with your shirt off.
2 michael // Dec 20, 2001 at 5:43 pm
oh you know you want me, Dan!
3 tim451 // Dec 20, 2001 at 11:45 pm
holy horsecrap. i had planned to convert my site to xhtml over the course of next semester, but it seems that michael has done most everything in the course of a couple of hours. all before coffee, even. crap on a stick.
anyway, grateful as i am at the enlightenment, i have a couple questions:
1. is it better to have the css integrated into the page rather than with a relative link?
2. what were some of the oddball things you left in? the danger of your samaritanism (satan!) is that i have not learned for myself. something about a man and a fish.
3. for the sake of vanity, how about some feedback on my site itself, in addition to the marky-markup?
your site is indeed clean, with lots of javascript bells and whistles. i too once had a photo section up but sacrificed it to allow more time for blogging. even thought the layout is intriguing, i can’t get past the half-naked rock star thing. put on a shirt. =)
–tim451
4 michael // Dec 21, 2001 at 1:05 am
Flying in the face of danger, my point is that not only can you see that your site can be easily redesigned to be compliant and without tables, you will need to get your hands dirty with the code to figure out what I did so that you can make use of it, or create your own designs in the future.
In answer to your questions:
1. The only reason I left the CSS integrated in the page was for ease of viewing. I prefer to create a global stylesheet and link it. There are other reasons for this as well, and there is discussion as to the benefits of using the @import attribute to link it. I suggest checking out A List Apart for more info.
2. Oddball things I left in consisted of things like the ’small’ tag, and the ‘byline’ class which you use but don’t define in your CSS. They’re leftovers from Blogger templates, as is the use of the ‘blockquote’ tag, which I’m not a fan of, but that’s a choice YOU need to make not me. Blockquote is used more as a design effect instead of it’s intended purpose. The same effect can be achieved using margins in CSS.
Another detail I didn’t get into was that your nav links are slightly offset from their headers. I simply didn’t bother to get into it. It was just a bit of detail and had little bearing on the overall effect of the redesign.
3. Your site looks good. Layout is simple and effective. I like the logo, and the overall color scheme. I’m not completely fond of the gradients, but they work nicely to break up the different sections of the nav area.
If you have any other questions feel free to email me.
As for my shirt, I’m not getting into it.
Rock!
5 brandy // Dec 21, 2001 at 10:40 pm
egads, that’s YOU in that pic? for some reason i assumed it to be someone else….like your hair-metal rocker next-door neighbor or something.
6 brandy // Dec 21, 2001 at 10:40 pm
er, not that hair metal is a bad thing.
7 michael // Dec 21, 2001 at 11:48 pm
Does hair-metal rocker make me go up in your estimation or down? hehe Obviously you haven’t been through the ‘about me’ section here yet Brandy. That’s where the real hair pics are. I have one I’m saving for a special occasion.
While I haven’t touched a can of hairspray since the late 80’s, a rocker I will always be. Jazz frowns on barechested guitar players, and I itch too much if I have to wear a suit. Ugh, I’m itchy just thinking about it.
8 tim451 // Dec 22, 2001 at 2:19 am
michael, do me a favor and recommend me a retard xhtml book. price is not really an object but retard-friendly is a must. i’m cruising thru bn.com (there’s a b&m near me) and want some reading for between semesters.
You must log in to post a comment.