5 Tips For New MySpace Designers And Coders | Wednesday, November 11th, 2009


With the expanding amount of designers offering MySpace layout customization these days, I thought it would be helpful to list a few concepts and tools that I as a designer and web developer find useful and all together time saving when designing and coding for MySpace.

There seems to be a growing number of younger designers and coders who are getting a start with CSS and HTML while working with MySpace. The following tips, or suggestions, are concepts that have helped me along the way with making my layouts more cross-browser friendly, clean in code and styling, and easily implemented with the MySpace version 1.0 layout structure.

Hopefully this articles will be helpful to some beginners to MySpace…

1: Use a grid when designing

Grids can be amazingly helpful with MySpace layouts and the design of them. Keeping a systematic grid for margins, padding, and area widths and heights will keep your layouts consistent and easy for visitors to read information and browse them without being hassled with unneeded spacing.

More information on web layout grids: http://960.gs

2: Know your IE hacks

Thankfully, us web developers have been blessed with useful work-a-rounds to just about every little snag that Internet Explorer throws our way. IE work-a-rounds are especially essential when working with MySpace layouts.

For example, IE likes to display relative positioned elements differently than how Firefox or Safari displays relative positioned elements, usually when there other relative positioned elements near by.

When adjusting the left and right properties in CSS, you can throw an underscore before the selector and IE will read and render the command while Firefox and Safari will ignore it.

.element {
	position: relative;
	left: 50px;
	_left: 100px;}

A carefully place IE hacked CSS property placed after the regular property will have IE render the fix….such a life saver!

3: Understand the difference between absolute and relative position

A common error I see with buggy layouts is the coder making an elements relative in position, yet adding absolute position properties to the same element.

A rule I play by when placing elements and determining which scenarios to use relative or absolute position is as follows in code:

.rel-element {
	position: relative;
	margin: 5px; /* the elements outside margins */
	left: 5px; /* move the element left; can be negative */
	top: 5px;/ * move the element down; can be negative */

.abs-element {
	margin-left: 5px /* move the element left; can be negative */
	margin-top: 5px /*move the element down; cam be negative */
	top: 50px; /* moves the element the amount from the absolute top of its parent element */

Hopefully the examples will help explain the differences with aligning these types of elements a little more clearly.

Also, check out the W3Schools.com reference for CSS Positioning: http://www.w3schools.com/Css/css_positioning.asp

4: Use a DOM browsing/editing tool

Knowing your HTML DOM (Document Object Model) is absolutely essential to learning to hack and code a MySpace Layout. Using a DOM tool to for viewing and selecting HTML elements is something I use everyday…possibly ever hour.

Not only are they handy for MySpace layouts, but also for gathering quick info on CSS styling of objects, Javascript console errors, and even real-time editing.

Here are a few notable DOM Tools that I highly recommend:

5: Keep custom section structure simple

For all of my clients that I design layouts for, I do my very best to keep the editable sections simple and easy for them. Unfortunately, MySpace customization still requires that whoever adds more content to the layout will need to know a bit about HTML.

For my layouts, I usually use Span elements for sections. Span work almost the same as Div elements, with the exception of display:block styling.

I place all my editable span elements inside a main column span, usually classified as “sections-right” or “sections-left”. Again, you don’t have to do this, but keeping the names simple and easy for those who will make changes is the best practice.

Also, use the MySpace sections (Bio, Band Members, etc) to contain your different custom layout data. For instance, place your style sheet and static layout elements in the Band Members section in the profile Safe Mode editor. Place the editable custom sections in the Bio section as well, that way those who are editing wont have to scroll through lines of CSS and HTML to get to what they want.


As web sites become more and more customizable with open APIs and developer-friendly tools for easing extendability, MySpace always seems to be straight out of luck with its development framework.

Hopefully in the future this blog article will be useless and outdated. But until then, best of luck and hopefully this article can ease those debugging and hacking headaches that MySpace seems to over in abundance.

Post Author: Jordan Andree

Jordan Andree, from Atlanta, GA, is a designer and web developer who runs Noble Giant, a design and interactive studio. Jordan has worked with a growing list of music and small business related clients including Tooth and Nail Records, Warner Bros, and EMI. You can find Jordan on twitter (@jordanandree).

Tags: , , , , , ,

Author: Jordan Andree

Comments & Thoughts

  • http://jordanandree.com/33/recently Recently… « Jordan Andree

    [...] did a recent contribution blog post to the Blue Tide Productions Blog of which i discussed a few tips for MySpace Layout designers. [...]

  • http://jasonshipps.net/ Jason Shipps
  • http://jasonshipps.net/ Jason Shipps
blog comments powered by Disqus