Nick Jackson

I recently had a prod at the ever-dreaded MySpace to make a profile look vaguely appealing. What I saw made me almost physically sick. I knew MySpace profiles were notorious for being bad, but now I know why.

User Interface

I’m not sure who designed the user interface, but it is seriously in need of an overhaul.

Imagine that your CD player had four drives which may or may not work depending on if it’s a sunny Tuesday. The track skip buttons are located one on the top and one on the back of the unit, and the play button is only available after you’ve opened all four drives whilst holding down the shuffle button. That’s somewhere in the right area of how bad MySpace’s interface really is. It took me a full 10 minutes to find what I was trying to edit, hidden under the biography of all things. I was trying to edit the HTML to change the appearance of the profile to something you didn’t need to squint to understand.

Changing the Style

A logical thing to do to let users change the profile’s look and feel would be to introduce templates. Or possibly a page to edit basic colour values. This option was available for the blog, but was inexplicably absent from anywhere I could find in the profile options. It turned out I should have been looking in the biography of all places for an embedded stylesheet which ultimately ended up halfway down the page. A minor note to MySpace coders:

CSS goes in the header, dammit!

Now that’s out of the way, let’s take a look at the actual CSS responsible for the abomination. This includes masterpieces of coding such as the following:

table table {
border: 0px;
}

table table table {
border-color: 000000;
border-width: 1px;
border-style: dashed;
background-color: CCDDCC;
}

table table table table {
border: 0px;
}

What in God’s name is table table table table for? This is one place where features of CSS known as classes and ids come in handy. These little bits give people editing your CSS a clue what things are meant to do.

Eventually I dragged out my trusty Web Developer Toolbar for Firefox and used its tools to find which CSS classes affected headers in the irritating little boxes which are loved so much on MySpace. Apparently in place of HTML standard header tags, and possibly a couple of classes for special cases, there is now this:

.blacktext10 {
}

.blacktext12 {
}

.lightbluetext8 {
}

.orangetext15 {
}

.redtext {
}

.redbtext {
}

.text {
}

.whitetext12 {
}

.nametext {
}

This is a hopeless way of doing things, since .whitetext12 is associated with text which isn’t necessarily going to be white, or 12 points. I changed mine to be black and 1.6ems, yet it is still known as .whitetext12.

Aside from this bad practice (.whitetext12 would be better known as something like .headersmall) the CSS also reveals yet another problem.

Web Standards

For a modern website with a major following, MySpace’s homepage HTML is shockingly bad with (at the time of writing) 103 errors. If you add up all the errors and warnings the validator gives you there is a whopping 164 things wrong, and that’s just the homepage. Putting the profile through the validator throws up 210 errors. Again, adding all the errors and warnings produces a truly staggering 329 things wrong.
What do these errors mean? They mean that the page is only being displayed due to browsers (Software, not users) putting in a lot of effort to work out what on earth the markup means. The page won’t degrade sensibly on old browsers or small screens, makes search engines confused, and is a pain in the arse for visually impaired users. This is an excerpt from some software I use to see how a page renders to a screen reader:

… Table end Table end Table with one column and twenty-four rows Table with one column and one row Reunite Whitkirk’s Friend Space Table end Table with one column and twenty-two rows Reunite Whitkirk has fifty-four friends. Table with four columns and nineteen rows Table with one column and two rows Link Flux Capacitor Link Graphic slash seven hundred eighty-eight million four hundred fifty-seven thousand one hundred eighteen underline s.jpg Table end Table with one column and two rows Link Crimson Daydream Link Graphic slash two hundred ten million six hundred sixty-three thousand two hundred underline s.jpg Table end Table with one column and two rows Link Deceived Link Graphic slash five hundred sixty-eight million four hundred twenty-eight thousand five hundred twenty-one underline s.jpg Table end Table with one column and two rows Link Danti Link Graphic slash seven hundred sixty-seven million six hundred sixty-nine thousand seven hundred sixty-four underline s.jpg Table end Table with one column and two rows Link Father Jack Hackett Link Graphic slash five hundred fifty-one million one hundred seventy-one thousand one hundred twenty-five underline s.jpg Table end Table with one column and two rows Link Eggzibit Link Graphic slash …

To any visually impaired person, this is terrible. Images don’t have alt or title tags, and worst of all it’s a table based layout!

Table Layout

When designing web pages there is often a fundamental issue that HTML is for transferring text, not visual layout. The traditional (Wrong) solution is to use tables to position things since they can be easily stacked and have widths specified. This creates messes like that which you see above, since anything electronic assumes a table is trying to display information which is suited to a table (As in it has common headers and is a list or matrix). This breaks the flow of the page, since in the markup nothing comes in the expected order. This is generally a Bad Thing.

CSS provides a huge swathe of ways to position things, there is no excuse.

Conclusion

I meant this to be a brief rant, but there is just so much wrong with MySpace. Please, don’t use it. Save the internet for standards compliant, easy to use sites. Thank you for reading.

Tags: WTF?

This entry was posted on Wednesday June 7th 2006 at 6.47 pm and is filed under Rambling. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.