Following on from my recent little ‘project’ to try understand MySpace, I am going to look into a handful of web design techniques to try make MySpace profiles look a little less cluttered.

By injecting CSS into the MySpace profile editor it is possible to manipulate the appearance of the page. For the less geeky CSS (Cascading Style Sheets) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to web pages. It is probably possible to write a whole book on this subject but I am only going to cover a couple of basics in this blog entry.

The background image can be changed by modifying the CSS ‘body’ element. The background image file has to be stored on another webserver and the following code placed in the MySpace profile in the ‘About Me’ section:

body {
   background-image: url(http://www.jlsnet.co.uk/image.jpg);
}

The next task is to tame the MySpace text, headings and fonts. Unlike a webpage which had been designed with good web design practices, the MySpace pages are a mish-mash of tables, random DIV’s and text classes. Each of the headings… Blog, Extended Network, Details, Friends is given a random bunch of class names ‘whitetext12′, ‘blacktext12′, ‘btext’, ‘orangetext15′, ‘redtext’. In order to modify each of these use the following CSS code in your profile:

.whitetext12 {
   color: 000000;
   font-size: 18px;
   font-family: Verdana, Tahoma, Arial, sans-serif;
   display: block;
}

At this point I want to sidetrack to one of my biggest bug-bears of some of the profiles you come across on MySpace… Crazy colour combinations and twinkley things! It is not rocket science that having certain colour text on a background of similar colour will make the text hard to read. I have even come across MySpace pages where in order for you to even read the profile you are forced to highlight the text, this goes against all the rules of Jakob Nielsen (a famous webpage usability expert)!

Finally it is really frustrating when friends deliberately add large images to the MySpace comments box which totally throw out layout and make the page look nasty, the following bit of CSS code will help limit the width of such images:

table tr td table tr td.text table tr td.text table tr td table tr td img {
   width: 75px;
}

Personally I would simply delete these comments for being so annoying, but some people may want to keep them.

I could go on forever trying to “polish a turd” but in my view MySpace is fundamentally flawed from the start and in order for it to look good Tom (the MySpace founder) really needs to read up on HTML standards and start over again.

“I’s kicks my’s brother owt’s of’s da house I’s do’s” –Portsmouth Youth