MySpace, Finally!
So some of my friends have been asking me why I am not on MySpace. To be perfectly honest I really did not like MySpace. As a designer and sometimes web developer I felt it was a little too juvenile and trendy. Still I cannot ignore the fact that the site is a great social networking tool. So this past week I swallowed my pride and created a profile on MySpace.
This profile was not technically my first. For the past few months, I have been using MySpace under a pseudonym that I enact sometimes on the internet. The reason for setting up an alias profile was so I could do some research and figure out how to hack the most horrible interface on the web without being found by friends, and former classmates. For the amount of popularity the service has you would think the UI would look slightly better. Anyway, I got to work and started to research the possibilities of adjusting the design of my profile.
My research started with viewing MySpace theme sites. This lead to even more disappointment, as some of these themes were so poorly designed, that I could not understand how you could even read the information displayed on the profile. Most of the themes were reminiscent of old websites from the 90’s. Poorly tiled backgrounds, illegible typography, and horrible color schemes, lead me to dig a bit deeper.
After a specialized Google search I found a couple of sites that sent me on my way. The first was
this article on
www.mikeindustries.com. A very informative post, by a person that apparently did their homework. I learned from Mike that the interface is hard to customize, tastefully. There are so many restrictions that it represents a unique design challenge for any designer.
MySpace still uses an abundant amount of tables to construct their pages. Most of these do not have an “id” or a “class” that can be modified by the profile CSS. The profile CSS is activated by writing a CSS document and pasting the code into any of the fields you would use to write your profile. The MySpace system recognizes the code and embeds it into the HTML that makes up the page. With this knowledge I pressed on, and found some other restrictions….
In normal CSS programming you have to use the pound (#) character to identify
id’s and for color identifications like #CCCCCC (a light grey). When programming for the MySpace interface you need to omit all pound (#) characters. The MySpace system does not recognize them. I assume this is so you cannot change required
id’s that MySpace uses. No biggie, keep moving…
Your profile on MySpace uses nested tables which make it difficult to single out certain rows, columns and cells. Because of this, I tried not to get too carried away with raster graphics and concentrated on the basic HTML.
After I picked a color scheme, I started to program it in. Once I found borders I liked and type styles that worked, I concentrated on graphics. I wanted the interface to look organized and clean. Most of the tiled backgrounds I had seen in my research would have worked perfectly if there was some control to them. With this in mind I designed a background that would appear to wrap the content down the center of the page. This was accomplished by making an horizontally oversized background tile that would repeat only on the y-axis.
I guess this is a good a time as any to mention this… MySpace does not allow you to host images for your interface on their servers. You need to externally link the images from YOUR web server or another image hosting service on the net.
After designing the background I went and tackled the header. In the MySpace system this is called the “masthead”. It is one of the only classes you can identify with your profile CSS. I positioned it absolutely so it’s placement would be precise. If the header is too high and is not pushed down the page with some CSS code you tend to loose everything in the MySpace header except the banner ads.
As I was writing this article I was thinking I should enact a tutorial for hacking the MySpace layout, unfortunately I am not a technical writer, and I am very bad at explaining code and execution. Sorry folks. To make up for it I am starting a MySpace theme project that will start out with the development of three themes for MySpace which will be available for download. I am going to provide the hosting for the images and these themes will be available to all. I am hoping that others will climb on board and make MySpace look much better than it does at the moment.
Mohawke
- October 27th, 2006 at 4:46 pm
The no use of pounds rule really screws you if you want to do some basic cool things, as does the bubble down approach to table layout. It gets so messy and limiting it really just leaves you with using images and borders to dress up the page.
jojo
- November 8th, 2006 at 11:24 pm
You use the word ‘enact’ too much.
Johnny
- November 9th, 2006 at 10:49 am
I am not sure what you mean JoJo, since I only used it twice in the whole article.
Craig109
- November 14th, 2006 at 11:34 pm
Something I’ve noticed while re-building a myspace page that I had previously “tweaked’ bit via mostly cut-and-paste; there seem to be many different approaches to doing the same or a similar thing, and this can result in some really bloated CSS, as well as redundant information.
It’s good to see a resource like this on the web, as opposed to the myriad cut-n-paste websites.
Here’s a web page I found last night that may be worth book-marking:
http://www.myspace-layouts.org/tutorial.php
Mike
- January 29th, 2007 at 3:39 pm
You’re right, Myspace IS an unavoidable demon. I’m not sure what the appeal is but it works for some I guess
dkfinder
- March 11th, 2007 at 3:15 am
Well said m8! Im behind you..