Here I am on my lunch break at Barefoot Coffee Roasters, where I do a lot of my blogging. Yep, you read that title correctly: I’ll be writing about the site everyone loves to hate, MySpace.

More Popular Than Google

Even if you hate it, you have to concede that with over 75 million + users and growing, de-throning Google and Yahoo as the #1 most visited site in the U.S. on a given day last month, MySpace really is a web phenomenon. It’s great for getting in touch with long lost friends from your past, and keeping in touch with their lives. I have family and friends whose MySpace is central to their web presence–it’s their social headquarters–their blog, profile, friends all in one place.

A Site Design Nightmare

This is starting to sound like I love MySpace, so I better get ranting. It’s a horribly designed website with garish colors, non-standards code, and a general look that gives one the creepy feeling of being back on the 90’s internet. It’s nice to reminisce, but with “Web 2.0″ movement in full swing for some time now, MySpace can at least put out an effort to update the site. At least to something in the early 2000’s. Sorry, being a web designer, I have a lower threshold for tolerating bad site design than most people.

A Bear to Hack

Shortly after signing up, I vowed to make my profile something that I wouldn’t be embarrassed (as a web designer) to display. I tried once, to work some designer’s magic on my profile, to decipher the code monstrosity that is MySpace–and failed, miserably. I was so frustrated and baffled by the site’s coding structure that gave up in 10 minutes, curled up in a ball and had nightmares that night.

Here’s an example for ya…

In a normal web design workflow, you have something like this:

.modules {
background-color: #fff;
padding: 15px;
}

.modules p {
color: #aaa;
line-height: 150%;
}

In MySpace’s world, it’s more like this:

table table table table td, table table table table tbody td {
background-color: transparent !important;
padding: 15px !important;
}

table table table table td font, table table table table tbody td font {
color: aaaaaa !important;
line-height: 150% !important;
}

Nightmares, I tell you. Ones with vampires. And snakes even.

My MySpace Profile
Yay. MySpace.

Mike Davidson, Web Standards Celebrity, Does the Hard Work

I recently read Mike Davidson’s old “Hacking a More Tasteful MySpace” article from which the above example came from. Within an hour of reading the post (it would’ve been 2 minutes if I didn’t create my own graphics), using his tutorial, I had my brand-spankin’ new profile. It’s simple, I know, but at least the elements are consistent. Maybe I’ll make improvements in the future.

Ideas to Save the World

I can tell even without looking at the code carefully, that if MySpace would just hire a good web standards staff, they could clean up the code by as much as 70-80% (maybe more…hmmmm…testing this would be an interesting post). Ok, let’s be more conservative and say 50%. A code cleanup like this would make pages that much lighter, that much faster to download, and the whole site that much cheaper to run. Companies do have to pay for bandwidth costs, and with over 75-freakin’ million users, a 50% cost savings is easily something in the millions of dollars. And it would look better. Case in point: what Bryan Vesolo did for Facebook.

If you haven’t already, add me to your friends, so I can catch up to my brother-in-law, who has something like 200* friends.

*Oh, I’m sorry, Shawn has 300 friends, not 200.