In the past few evenings I've been building ... [cough] a MySpace profile. The profile is intended to be a social media promo companion to Pam's bookalicio.us which we're currently pimping like there's no tomorrow. This whole pimping endeavor is an interesting adventure of it's own about which I'll probably write later once we've gotten it to where we want it to be. I never thought I'd EVER blog about MySpace to be honest. However since I got a fair amount of attention for this profile on Twitter I figured it may be an idea to blog about this.

Traditionally MySpace is pretty much what I'd call 'the ghetto of web design'. Flashing text, pink glittery gif animations, loud music on auto-play, comment rendering that completely breaks an already FUBAR layout, the list goes on, and on, and on. Besides the complete lack of taste in design on MySpace, creating even a half decent looking profile used to be world of pain and needed the most horrific hacks I've ever seen in web development. Mike Davidson went where no man has gone before back in 2006 and managed to create a hack-kit that allows somewhat decent looking MySpace profiles. When I saw Mike's post I created a profile of my own using his voodoo magic groundwork. Now that Profile 2.0 is there I may redo it at some point. Or not, because I'm not all that much of a MySpace user. We'll see.

In the world of MySpace, hacks were the norm. One had to sneak CSS and markup into the 'About Me' field that would transform the page into something decent, after showing a FOBUC (Flash Of Butt Ugly Content) first. It would only work to a certain extent because a lot of things would get filtered out by the back end. Recently, this has changed. Enter MySpace Profile 2.0. This dramatic change has been rolled out at the end of 2008 so it hasn't been out there for very long yet. And apparently not many people have actually discovered it. The only nice 2.0 profile I've found so far is the one for Mashable's Pete Cashmore. So what is this thing all about?

Picking a grid layout

First of all, MySpace Profile 2.0 allows people to pick from a large amount of pre-defined page grids. One column, two columns, three columns, combinations of these, a lot is now possible by simply picking a layout of choice. In addition to that, modules such as friends, comments, about me, a music player and a truckload of others can be placed into the layout of choice by an easy to use drag and drop interface. In addition to that there's a plethora of customization options to pick backgrounds, colors, borders and a lot more that allows users to compete for the title of the ugliest MySpace profile on the planet. And finally, there's predefined ugly themes to choose from. Hurray!

CSS. What? Yes, CSS!

To me as a web designer, the most appealing theme is named 'No Theme'. This gives you a completely vanilla looking white MySpace profile, very similar to the way things used to be before MySpace Profile 2.0. And behold... there is an option to enter CSS. Coming with absolutely NO documentation or explanation of any kind, the Profile 2.0 interface has an option named 'CSS'.

CSS!

Clicking this option reveals a (way too small) textarea in which the user can start typing away. So what was I going to do here? Not much at first. It was time to look at the markup. To my completely unexpected surprise, MySpace's markup almost validates! Yes, it's a big DIV-soup indeed but this does have it's advantages when one wants to theme things. In addition to this there's a whole load of class attributes. Every module has it's own unique class name and it turned out that they can be targeted without having to create extremely specific CSS rules.

MySpace markup fragment

While not perfect I thought 'Not too shabby at all, MySpace!'. I also noticed that I could pretty much change whatever I wanted. I'm sure there are a few things that are off limits (such as hiding the ads for example) but I could do a whole lot. The default header section is blue. And I mean REALLY blue. This however turned out to be easy to change. I changed the header into a green one styled exactly like the original blue header. I'm not sure what MySpace would allow users to hide. Quite possibly one can hide everything except for the ad. I decided not to hide anything in order to not disturb the user experience. I'd personally find it annoying if someone would remove the entire menu for the sake of making things looking prettier.

So I went on my way and created a design that resembles the website we were going to promote through this profile. Writing the CSS for this didn't give me much headaches of any kind. All done in just a few evening hours! And it was pretty fun to do too. I actually enjoyed creating a MySpace profile. Who would have thought that would ever happen? I quite enjoyed the reactions I got on this bit of work as well. "That doesn't look anything like what I'm used to when it comes to MySpace pages!", someone told me. "Huh? Can you do that on MySpace?" someone else said. Yes, apparently you can, since Profile 2.0 has been rolled out. And I feel that with the bookalicio.us profile I haven't even scratched the surface of what's now possible since I kept things fairly simple.

Despite the uprising of Facebook (which I personally hate even more than MySpace) it seems MySpace is still a social network of importance, especially in the United States. Maybe a whole new market has now arrived. A market for web developers to do MySpace profiles for bands, products and other things. You know, the kind of clients that would actually pay money for a good looking MySpace profile. Now that it's possible to make MySpace profiles look pretty damn good, interesting things could happen. Some documentation on the markup structure would probably be helpful. Or maybe MySpace just wants to keep this for people who 'know what they are doing'? I don't know.

What I do know is that MySpace has managed to open the gates that lead out of the ghetto with the release of Profile 2.0. There is absolutely no excuse anymore now to have a crappy looking MySpace profile.

The finished result: the Bookalicio.us profile

Had to do my own as well: me on MySpace. Now add me! xoxoxo ;)

Update: This easter sunday I decided to upgrade my own profile to a proper CSS layout as well. This layout deviates a bit more from the default grids MySpace offers which is why it was a bit more of a (fun) challenge. Tom, I gotta give it to you. You guys did a pretty good job here for sure!

Further reading

• a nice tutorial showing the basics of customizing MySpace with CSS

If you have a useful link to either informational resources about MySpace Profile 2.0 or to beautifully designed profiles using Profile 2.0 feel free to post them in the comments! Note that I'll only allow helpful resources or really well designed profiles. This is not the place to promote any MySpace page!