|
So you're thinking about setting up shop on the $580,000,000 medium we all know as MySpace. Why? To reach a younger audience? To broaden awareness? Because everyone else is doing it? Regardless, it stands to reason that you're missing the most important marketing opportunity of our generation if you don't.
In developing a MySpace page for our client -- the NRDC -- I came across a few stumbling blocks. Here are their solutions:
Hey User Interface Designers:
Some Format Rules To Keep in Mind
In order to utilize the Friends and
Comments functionality of a MySpace Profile you can not
use a complete div overlay layout. Since MySpace
profiles are a serious of tables embedded in tables embedded in tables embedded
in tables(you get the point). You need to identify the table that
contains the Friends section and insert a break that allows you style
everything below that point. That way you can have your custom content
above it, and the MySpace Friends and Comments features
below it.
Safari
and IE 7, Oh My
To avoid cross-browser compatibility
issues, start with a very clean div overlay layout (either taken from an
existing MySpace page whose design you like, or from one
of the online generators). Be sure that you have properly coded a clean
canvas that looks consistent across all browsers. You can be sure that if
it's not clean and consistent from the start, then it certainly won't be once
you enter all your flashy custom content. One un-customizable aspect of MySpace profiles is the left padding/indentation that both the
" Username's Friends Comments" and "Username's Friend
Space" text have. When these two sections are placed on top of one
another, you will see that the two text fields do not indent the same amount of
pixels.
To work around this issue you can cover the "Username's Friend Space"
text with your custom content overlay on the top. You can then insert that
exact text (or your own custom text replacement) at the footer of your top
content overlay, and the indentation will then be identical and the transition
from your custom content area to the MySpace
Friend/Comment area will be seamless.
Which Profile Boxes To Store Your
HTML/CSS
There is some flexibility provided to
developers in terms of where they place their code within the MySpace
profile, but not much. In terms of a best practice for maintaining
organization, it's best to limit your code to only 2 input fields within the
profile editor. The 'About Me' and the 'I'd Like To Meet' input fields
(note that these fields are different on MySpace Band
Profiles). In the 'About Me' you want to declare all the CSS you will be
using between <style type="text/css"> and </style> tags.
All your custom content is going to be placed in the 'I'd Like To Meet' input
field. It's best to place all your custom content within a div like
<div class="custom_content"> </div>. This way when
you are done with your custom content you can cap it off with the code you'll
need to break out your Friends section. That code is:
<div class="break">
<div class="friends">
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<style>
This code will allow you to bump your Friends/Comments section below all your
custom content with a margin-top declaration that is appropriate based on how
much height your custom content occupies.
 |
Subscribe to this comment's feed