MetaBlog

Customize Your MySpace Profile : Part One : Introduction

By Rubix ⋅ April 22, 2008 ⋅  Email This Post ⋅  Print This Post ⋅ Post a comment

Introduction
The social network that is MySpace [affectionately known as "The MySpace Dot Com" amongst my particular affinity group, due of course to its monstrous nature] is a cult phenomenon. Like all paranormal activity, I do not fully understand it but am forced to respect it and its 100 million plus user base. Despite all of the criticisms directed towards the giant any website that can boast that many users is here to stay. The site simply defies logic and is a success despite its design [Joshua Porter's "Ugliness, Social Design, and the MySpace Lesson" is an interesting article which discusses this topic in detail].

I’ve been on and off of the ‘Space for a couple of years now, leaving mainly due to the aesthetic which, unlike Facebook’s consistent [if not bland] design, has always left me cringing. The services biggest strength is also its biggest flaw, allowing the user base the freedom to hack away at the CSS/HTML in order to "personalize" their profile to match their own lack of style. Unlike my younger siblings, as of right now at least, I have no home on MySpace.

The network capabilities are unprecedented, however, and so a couple of weeks ago I decided to establish an account for The Chimera Project. Within seconds I was back inside the world of blue, orange, and hastily designed elements all working together in [un]cooperation. Though there have been some recent upgrades to the template selection since my last login I figured that enough was enough, it was time to look under the hood of the MySpace train wreck and see if we couldn’t own our new home rather than rent it.

Why do this you may ask? Well first of all, who doesn’t love a design challenge? Secondly the network is a good selling point for the collective’s web design services [MySpace profile design is a budding industry in and of itself] and finally, the act of documenting the process and sharing it serves as one more dart in the giant wooly mammoth. We all must do our part to rid the world of this.

Shudder. Note that after that beast goes down there still is nothing to be done about those confessional emails of years past and that picture from college after 4 shots too many. Such is the price we pay for decadence. The vacuum of the internet has simply made it impossible for anyone of our generation to ever run for public office. Deal with it. That said, and using our buddy SoyBuddha as inspiration, we know what not to do; no streaming audio [the Internet had enough of that in 1998, thank you], no tiled or animated GIFs and no comments with "e-vites" to bad parties and "e-cards" from people you hate.

Researching Good Design
With the ground rules established let’s take a look at some of the others who have paved the way with some really superb profile design. Mike Davidson crafted a tasteful restyled template utilizing MySpace’s existing architecture whereas Keegan Jones built a profile from scratch that unfortunately violated the terms of service and was promptly deleted. Eston Bond has probably the most in depth analysis of a redesign that I’ve encountered thus far [I rocked a heavily modified version of his amazing ElectroPunk Theme for a while when I had a personal profile] and let’s face it; the kid works for Facebook - he knows his social networking - so we’ll be using his Web Designer’s Guide to MySpace as a starting point. If you have 20 minutes go read his article now, I’ll wait – it will make my job easier as I expand upon it here.

If you’re lazy I’ll summarize for you; Eston basically shows us how to drop a div overlay on top of the existing content allowing us to design the HTML/CSS unfettered with only a brief glimpse of the underlying content upon loading [this is because the CSS can only be nested in the About Me section and as a result is in the middle of the HTML]. The div overlay provides us with the most freedom but also destroys all of MySpace’s underlying functionality so we’ll have to rebuild that in addition to our design.

Though Eston’s guide is thorough it relies heavily on 3rd party software [particularly the music player and the RSS feed reader]. His source files are largely subjective to his sample designs as well. In an effort to create a more unitarian guide we’ll be crafting all of this content ourselves through a step by step walkthrough over the course of the next week. The source file packets will contain the general "Profile Shell" which will be entirely customizable for those with an intermediate knowledge of HTML/CSS and Actionscript as well as a ready to go template designed for those users with only a basic understanding of Photoshop.

By the end we will have replaced MySpace’s blog with a live feed from The Chimera Project, imported friends from other social networks, and linked the pictures to an offsite photostream. All of this in an effort to centralize the established content of the collective within the context of MySpace’s social networking capabilities. By the end we will have an entirely custom profile page that still falls under MySpace’s terms of service and will look pretty damn sharp too.

Read Part Two : Social Networking 101

Tags: Tutorial