So, in keeping with things that I like (or happen to have bookmarked ;), I hit this one the other day. This is one of my hobbies and while I’m not currently a member, I hope to be one some day (or at least as good a player as some of the members I’ve met – they’re incredible).

In looking at the site, it’s not bad, but IMO could really use a make-over. I might toss something together and send it over… who knows. At any rate, judging by the look, I had a feeling that it was not up to snuff. I was right.

Originally written in HTML 4.01 Transitional (yay) and CSS, the validator claims the HTML has 34 errors, but the CSS is error-free. Imagine that. The only problem with the CSS then, should be file size. And once I convert the table based mark-up to semantic HTML 4.01 Strict, that becomes a non-issue. See the numbers.

It didn’t take long to work this one through. I’m having issues with the menu in IE6, but given I’ve done 2 or 3 similar menus that work fine, I should be able to figure out why this one is not being treated nicely. Methinks I’ve stared at it too long for the moment. Fresh eyes after the holiday.

Images:

theirs (some images are random):

mine:

Numbers:
Keeping with the same numbers as last time, here are the real results:

Theirs:

• HTML lines: 297
• HTML file size: 21,752 b
• CSS file size: 13,638 b
• CSS images: 0 b
• Total: 35,390 b

Mine:

• HTML lines: 213
• HTML file size: 16,949 b
• CSS file size: 2,168 b
• CSS images: 109 b
• Total: 19,226 b

Conclusions:
A grand savings of 16 kb on this one. And once again, ALL my code validates. The real conclusion from this site is that I’m really getting good with the code. Between work and this stuff, I’m able to crank out the HTML and CSS very fast with minimal initial errors. This is fun practice.

I like this guy’s music. A lot. The other day, I went to his site and lo and behold! there was a new version up. They had changed everything. I was happy as it was a better layout than the previous one, imo, and it looked like the code might be up to web standards. A quick “validate HTML” and I saw that I was quite mistaken.

Written in XHTML (why?) 1.0 Transitional, it supposedly had about 20 errors. I looked into the code. While it did have some similarities to CSS-styled code (it had lots of divs!), I quickly noticed that it was a table-based layout. Again! Apparently, the CSS was mainly for font-related stuffs, and some sizing, but not much. Not only was it table-based but it was in a “nested” hell. I can only assume that it was written with an “html editor.” I don’t like those things.

My version was written in semantic HTML 4.01 Strict and CSS that validate as such. The only table used on the page is for the tabular data located in the bottom right area. I think the screens and the speed reports speak for themselves:

Theirs:

Mine:

Numbers:
I just gleaned a few important ones from the speed report. Looking at only the html, css, and css images:

theirs

• html lines of code: 275 (after indenting to my way: 383!)
• html file size: 15,409 b
• css file size: 19,136 b
• css images: 144,512 b
• Total: 179,057 b

mine

• html lines of code: 269
• html file size: 14,010 b
• css file size: 4,262 b!
• css images: 142,886 b
• Total: 161,158 b

Almost 20 kb saved. Not too shabby, especially when one considers that ALL my code validates. One thing to consider: I could have shaved even more off had I wanted to play with images as some of the images on the page are actually 2 or 3 times the size that they’re displayed at.

Conclusions:
Once again, I had fun! I’m finding I enjoy doing this as I’m learning, I’m solving layout issues, and I’m doing something I enjoy. This time, all the images are from the source. I used none of my own. Also, while there are a few minor discrepancies regarding font sizes, it’s the overall layout I’m striving to duplicate, not the exact position of every last word. I use a base font-size in the body and then %’s of that in the various sections. The original used pixel based sizes and this is the main reason for the slight difference in the screen shots.

I also learned today that it is possible to embed YouTube videos in a page and still be valid Strict. In IE 6, there were a issue with spacing: between the black/blue area and the main section below, padding was about twice what it should have been. Sounds like ‘twould be time for an IE CSS hack.

Finally, my apologies to Adrian and especially to Rob and Scott who work on the site. No offense is intended by this; it’s just an exercise in coding for me.

This is the site that started this project. I did it for no other reason other than I was bored. I did it over a 4 hour block of time during which I also cooked dinner for the fam and ate it.

The original was written in html that the validater claimed had 20 errors, including no DOCYPE. The CSS was basic and only really covered font related styling. The main layout was table based.

When finished, I had copied the layout using semantic Strict HTML and CSS. Both were valid. I used original images where I could, but made some minor changes, mostly concerning drop shadows. In future Strikes, I will strive to use only the graphics provided by the original page. But this was my first so I wasn’t necessarily thinking that way, plus there was a lot going on with the tables and the drop shadows on images were actually separate images. Didn’t want to mess with it. But as you can see in the screen caps, my version really isn’t much different overall.

Screens of the site:

Theirs:

Mine:

The speed reports:

Theirs:

Global Statistics

Object Size Totals

External Objects

Download Times*

Mine:

Global Statistics

Object Size Totals

External Objects

Download Times*

Conclusion:
Well, just from looking at the numbers, it’s about 55% more efficient. Do the math and compare the numbers. Fun was had. He got the code.

I’m a web monkey. I write strict HTML 4.01 and CSS that validates (usually on the first try). I do this with TextPad. No fancy-pancy editors for me. I use them when I have to, but personally, I just need a basic text editor and TextPad is my preference in that arena.

Recently, I started working part-time for a local non-profit (that works globally) and quickly found myself needing to code when I wasn’t at work. Apparently, 3 days a week was just making me hungry for more code.

So in the interest of learning more and keeping my kung-fu sharp, I’ve started playing with other people’s web sites. No hacking or badness going on, just “massaging” the code for my edification and my pleasure. This is what I do on Friday nights.

The first site I did belonged to a friend. I ended up sending him the results and the code (HTML and CSS). That was a couple months back. I also redid the 3 sites that I maintain. Today I finished the front page of a site belonging to one of my favorite musicians. While I will post the results here anonymously (for him), I’m not sure if I’m going to send his web monkeys the code as they just put up a new version (the one I “massaged”) and I don’t want to embarrass them. Besides, by the time anyone finds this blog, I’ll be dead.

For each site I hit, I only do the front page or main page if the front is just a splash page. Once finished, I take screen captures of the pages in Firefox and screen captures of the results of the Speed Check*. I will post these here with other information about each one. I will not be posting my code here although snippets may appear in places. Also, even though I’m only posting screen caps of the pages in FF, I will mention any issues that arise in making IE behave.

I guess that’s about it. From here on out, the posts will mostly just be the pages I hit. So, stay tuned and enjoy!

Also, if you want to hire me, then feel free to contact me via my blog’s profile.

*I use the one in the Web Developer Toolbar for Firefox.