Personally, I find it challenging to design a unique Myspace page; especially one that doesn’t look like a typical Myspace page. I don’t think that the people who design those “stand-out” pages get quite enough recognition for what they do. That is why I asked you all to help me compile a list of Amazing Myspace Pages but you failed me miserably, so I decided just to do it myself. It was quite a challenge. No matter what I Google’d, all I came up with were tons of “Pimp My Profile” type-sites. Eventually, I did happen come across some pretty awesome Myspace pages that didn’t look like Tom’s.

Although people like to belittle Myspace, the fact of the matter is that Myspace.com is still one of the most visited sites on the internet. No matter if you are an organization, corporation, company, band, or just a regular person, it’s pretty much expected that you have a Myspace page.

As Dana from BandSpaces points out “Myspace is one of the most highly recognized websites on the internet targeted towards young adults. If you want to get the word out about your company or band, Myspace is the way to do it. A custom Myspace page is one that will draw attention and get you noticed! It can be a visitor’s first impression of you, so it is key to make it an impression that will last. An attractive page can also increase your potential customers or fans. It is something that will keep them coming back”.

Band Spaces

Here are some of the amazing Myspace pages designed by BandSpaces:

(more…)

Personally, I find it challenging to design a unique Myspace page; especially one that doesn’t look like a typical Myspace page. I don’t think that the people who design those “stand-out” Myspace pages get quite enough recognition for what they do. This is why I am compiling a list of amazing Myspace pages.

If you know of any amazing Myspace pages that should be included on the list, please send me the URL with a brief description of what makes it stand out, along with your name (and your website URL if you want it included) to myspace@6bdesign.com before December 8, 2008.

Continued from Part One:

Web Forms - using web forms adds professionalism, function, and a splash of flair to your site. Many webmasters and (especially bloggers) still use a simple “mailto:whoever@whateverdomain.com” instead of using a contact web form page. This isn’t a good idea for a lot of reasons. When you display your email address on your page, you are more setting yourself up to receive lots of spam. Spambots crawl the internet and collect email addresses from websites so that you get lots of junk in your inbox. When you use mail forms you have the option to use CAPTCHAs. The use of CAPTCHAs will not stop all spammers from sending you junk, but it will significantly reduce the amount. If you aren’t “tech-savvy” enough to write your own contact form, there are services such as Icebrrg that can do it for you. For Wordpress users, I recommend the cformsII plugin. Using cformsII allows you to easily create, manage, customize, and style forms for your Wordpress blog.

Unobtrusive Advertisements - No one likes advertisements on websites, but I think that most people understand that they are a necessary evil. Ads keep a lot of free services free. They can also make bloggers and webmasters a little money to help keep their sites afloat. Advertisements are usually placed in areas of high visibility: in the header, sidebar, before and after posts – and that’s fine. What isn’t fine, in my opinion, are ads that are obtrusive and annoying. I’ve said it before and I’ll say it again: your message and content should be the main focus of your site. Pop-ups, those talking ads (ie – You’ve won a free iPod!), and ads that expand across the width of the page aren’t just annoying, they really detract from your page! Anything that diverts your visitors’ attention away from your content is just plain bad. So in summary, advertisements are fine, as long as they are tasteful and noninvasive.

Add Social Bookmarking & Sharing - Most blogs these days include links to sites such as Digg, Reddit, Technorati, Mixx, Del.icio.us, Stumble Upon, etc. at the end of their posts. But believe it or not, I still see a number of blogs without any sharing links. Adding social bookmarking to your blog is a must if you want to increase traffic. You shouldn’t rely on your visitors to go to these sites and “manually” submit your posts – you have to do the first step for them. It’s relatively easy to add the links to your posts, but if you’d rather, you can always use sharing buttons such as ShareThis or AddThis.

Encourage Comments On Your Blog – Visitors who leave comments will often return to your blog to check for replies. Getting return visits is always a good thing! One way to encourage people to leave comments is by using a “Recent Comments” plugin / widget. People are more likely to leave a comment if they can see their name, usually linked to their own website, on the main page or sidebar of your blog. Also, keep in mind that requiring visitors to be logged in discourages a lot of people from commenting.

If you have anything to add or tips of your own, please feel free to leave a comment and share!

So, you want to design a MySpace that doesn’t look like your typical Tom-approved page. Well, be prepared to enter a fun-filled journey that will involve weird coding, browser incompatibility, and my personal favorite – constant MySpace code changes that will likely ruin your page.

How do you combat this? In some cases, you can’t – if MySpace changes something significant, there is a possibility that no matter how well designed your page is, it will still throw it off. But your best bet to avoid as much of this as possible is to keep your coding simple. You can still make a very intricate looking page with fairly simple code – and the less convoluted your coding is, the less likely it is to not work tomorrow. Here’s five tips that should help you create a MySpace page that doesn’t look like this: http://www.myspace.com/ffrreedd

1. Use layout creator sites for what they’re good for – the basics.

There’s loads of layout sites out there that’ll let you enter exactly the layout you want and promise to give you the code to make your page look just like that. The problem is, most of these sites aren’t exactly up to date, and your page won’t look right when you actually put the code into MySpace. Or, it’ll work in one browser, but look like a hot mess in all the others. However, some of these sites are good for the basics. I highly recommend using the Katamari Layout Generator to get the code to hide everything on your page. The coding on here is solid, and it won’t hide things MySpace does not allow you to hide. Which brings me to my next point…

2. Don’t hide stuff you’re not supposed to hide.

Nobody really likes having MySpace ads on their page. And absolutely everybody hates how any links you put on your page get turned into that msplinks crap. My advice to you regarding these issues? Get over it. Sure, you can do a quick search on Google and find the code to hide that top ad bar, but guess what? MySpace knows about that code. And that other one. And that other one you just thought up now. And if they find that code in your profile (which they will because they run periodic checks) they will take all the coding out of your page altogether, thus ruining it. Yes, it sucks. But in my opinion getting rid of the ads is not worth taking that chance. You can still make a beautiful page that leaves all those things in tact.

3. Design first – then start coding.

MySpace coding is difficult enough without trying to do it before you really know what you want your page to look like. I suggest making a version of your ideal page in Photoshop and then starting the process of making your MySpace page look like that. You may realize that not everything you wanted to do is possible in MySpace, but at least you’re starting with a general idea.

4. My Divs: let me show you them.

Once you have your Photoshop version made, divide every individual piece into divs. A “div” is essentially a section of your page. I recommend any time you would like there to be a space between two parts, you make a new div. For example, this is what my page looks like in its finished form:

.
And this is how I divided it into divs:

.
To give you an idea of what the coding looks like, I’ll show you my code for Div 1, which is my photo:

<style>
.Div1 {width:430; height:370;_height:380}
.Div1 {z-index:5; position:absolute; left:50%; top:185px; margin-left:-375px;}
.Div1 {background-color:none ;}
</style>
<div class=”Div1″>
<img src=”http://img.photobucket.com/albums/v703/mirablue/mepicture.jpg” border=”0″ alt=”Photobucket” />
</div>

The top half of your div – the parts between <style> and </style> contains your instructions for where the div should sit on your page. The second half of your div – the parts between <div class> and </div> contains the pictures and text you want to go in that section.

5. Internet Explorer hates you.

Anyone with any sort of web design experience knows that IE is a pile. But, for some inexplicable reason, a lot of people still use it. So, you need to make your page compatible. I can tell you right now that your biggest issue will be with spacing. IE does not read line heights the same way good browsers do, so you won’t be able to simply use the <br> html tag to create your spacing.

You should instead create your spacing through the position of your divs. However, you will still run into a problem with the size of your divs being different in IE – which is where the underscore hack comes in. You can see this in the above code here:

{width:430; height:370;_height:380}

I’m not going to go into how exactly this works – mostly because it’s already been covered by many other people who can explain it far better than me. I’d suggest reading this post from mdibb.net, for a very simple explanation.

- Amirah / blendetta.com

Over the next while, I will be compiling a list of little tips that can improve the appearance, visibility, and function of your website. Here are the first five:

Favicons - Now-a-days, mosts sites use favicons:

Favicons (or favorite icons) are a good way to “brand” your site. Especially with tabbed browsing and bookmark toolbars, they help to visually distinguish your site from others. A favicon is nothing more than a 16×16 pixel .ico file. You can make your own using your favorite graphic editing software or you can use one of the many free online favicon generators.

Tutorials to check out:
How To Create a Favicon (using Gimp) from publisheraid.com
How To Create A Favicon In Photoshop from photoshopsupport.com

Online favicon Generators:
Favicon.cc - www.favicon.cc
FavIcon Generator from dynamicdrive.com - http://tools.dynamicdrive.com/favicon/
Favicon generator from degraeve.com - http://www.degraeve.com/favicon/

CSS Navigation Lists - In my opinion, site navigation should be written in HTML as a list – its just good structure. The use of lists make it possible for visitors to navigate your site if they are using a text-only browser or if their browser don’t support CSS. Plus, well-structured HTML is essential for web crawlers to index your site accurately. In this example from blendetta.com, you will see how the navigation structure stays intact with or without CSS support:

Since most of your visitors aren’t using text-only, non-CSS supporting browsers, you can make a big difference to your sites appearance by styling your navigation lists! As stated in my 10 Awesome Free Resources… article, “Listamatic is the place to go if you are looking for tutorials on CSS based navigation lists”. For a good example of how to make a list like the one seen on blendetta.com, check out Listamatic’s Bulleted Rollover List tutorial.

Get Rid of the Music - Let me restate that: don’t have music on your page that automatically plays when the page is loaded. A lot of people find it to be annoying. You don’t want people to leave your site over something silly like a music player.

Use PNG Images Whenever Possible - Let’s say that your web page has a blue background. You used JPEG images, also with blue backgrounds for your design. What happens when you decide to revise your page and change the background color? Yup. You’d have to change the background color of all of your images. Hopefully you still have the layered PSD file stored somewhere on your computer or you’d have to start over.

If you keep in mind that you may want to make some simple changes to your site one day (ie – change the background!), you should probably save your images as PNGs with transparent backgrounds. Displayed on different CSS styled background colors, here is a PNG of a cat that I drew in Photoshop many years ago:

All I had to do was change the background color of the page from #FF9900 to #990099 - I never had to edit the image. Whatever you do, don’t open that JPEG with the blue background in Photoshop and simply select and delete the background color - it leaves all of those ugly extra colored pixels behind!!

Don’t Junk it Up - It looks nice when a page has a minimal amount of buttons, banners and link images as long as they are well organized. I see way too many blogs with hundreds of link images, “latest visitor” type widgets, and other items that slow down and clutter the page. The content of the site should always be the main focus. All of the items that link to other pages should definitely be a secondary concern. Other things to avoid: adding too many colors, lots of scrolling text and excessive amounts animated anything. You don’t want your page to end up looking like HavenWorks.com!

Part two of the list will be coming soon! And as always - comments are welcomed.