7 Easy Steps to a Kick Ass MySpace Layout
Still with me?
Okay so let's do it to it...
- Paragraphs please
The bottom line is the attention span of the average web surfer is equal to that of a flea on jolt cola (myself included). If you love filling up your MySpace About Me section with lots of text then good on ya but may I kindly suggest that you please please please format it into paragraphs so you don't lose your reader after the first few lines.
Making paragraphs on web pages is easy. All you have to do is add<p>whenever you want to create a new paragraph. All text that you type into any text box on your MySpace Edit Profile screen can be set into paragraphs using the<p>tag.
Here's an example:
<p>This is the first paragraph. Today at lunchtime I made Billy laugh so hard that his milk came out of his nose. <p>This is the next paragraph. There once was a man from Nantucket who... (heh heh)...
That's it. That's all.
Simple, huh?
If you want a more verbose explanation on how to make paragraphs (and other block formats) then check out my page on Making Paragraphs.
- Make your text easy-to-read
Okay if someone gets to your kick ass MySpace page (or what you think is a kick ass MySpace page) and they end up going cross-eyed trying to read the text then dollars to doughnuts they'll be gone faster than you can say 'add me'.
Here's a quick tip:
When searching for a premade MySpace layout, select a low-contrast background image to make it easier to choose a contrasting text color. In other words, you want to select a background image that has mostly dark colors so that it will support a light colored text or a background image that has mostly light colors so that it will support a dark colored text. If you select a background image that has a myriad of dark and light colors then no matter what color you choose for your text, it's going to be hard to read. And presumably you want people to read what you have to say, right?
Below is an example of a high contrast background image with 16 standard web color names displayed on it. We can see that very few of the web color names are clearly legible (not to mention the eye-boggling effect).
Here's the same background image modified into a low contrast version so that most of the colors are dark. Now we can see that many of the color names are clearly legible.Black Green Silver Lime Gray Olive White Yellow Maroon Navy Red Blue Purple Teal Fuchsia Aqua
Now, you may ask, where can I find a collection of MySpace layouts in which the designer took care to combine low-contrast backgrounds with properly selected text colors?Black Green Silver Lime Gray Olive White Yellow Maroon Navy Red Blue Purple Teal Fuchsia Aqua
Right here. - Format your text to make it more appealing
Below is a rich text editor (much like you've seen using email applications, etc) that you can use to easily format your text into bold, italics, underlined and various other font styles, sizes and colors. This editor will also allow you to automatically output the corresponding HTML source code (the key point) which you can then copy-and-paste into any text box on your MySpace Edit Profile page and voilą! Formatted text in your MySpace layout.
Here are some tips:
- To format text, simply type in some text, select it and then click on a button to apply formatting
...OR
Click on any formatting button (except Text Color or Background Color) and begin typing. - To make paragraphs, simply press Enter on your keyboard.
- To make a single carriage return, hold down the Shift key and then press Enter.
- To make a list, click on the 'Ordered List' or the 'Unordered List' button and then just start typing. Every time you press Enter, a new list item will be created. To break out of the list, click on the 'Ordered List' or the 'Unordered List' button again (depending on which kind of list you created).
Here are some tips:
- To format text, simply type in some text, select it and then click on a button to apply formatting
...OR
Click on any formatting button (except Text Color or Background Color) and begin typing. - To make paragraphs, select text to be set in a paragraph and then open the [Style] dropdown list and click to select Paragraph.
- To make a list, type in the first list item and then select the text. Click on the 'Ordered List' or the 'Unordered List' button and then press the End key on your keyboard. Now every time you press Enter, a new list item will be created. To break out of the list, press Enter on your keyboard to create an empty list item and then click on the Ordered List or the Unordered List button again (depending on which kind of list you created).
Alternatively, if you want to learn how to write up HTML source code from scratch to create various web page formatting styles (and I sincerely hope some of you take this route) then you should start with my tutorial on How to make a web page. - To format text, simply type in some text, select it and then click on a button to apply formatting
- Think outside the box
Now that you have a means to easily create paragraphs and format text on your MySpace layout, you don't have to just list all the songs, movies, television shows, books and heroes you like in the respective Music, Movies, Television, Books and Heroes sections on your profile. The increased ability to modify your MySpace layout opens up new avenues of expression which you should thoroughly explore. For example, you could format song titles or movie titles into headings and then add a little blurb about what you think of each one. If you wish to create a memorable MySpace layout then you have to think outside the box. - A picture is worth a thousand words
You don't have to depend on your 'Pics' section to have images somewhere in your MySpace layout. You can put images anywhere you want directly on your profile page.
Here's how to do this.
- Upload your image to a free image host like ImageShack.
- Get the URL (for ImageShack, copy the 'Direct link to image' URL)
- Insert the URL here:
- Copy and paste the above generated image code into any text box on your Edit Profile page.
Presto.
Wanna know the whole nine yards about inserting graphics on web pages? Check out my tutorial on How to Insert Graphics... - Keep inside the box
My absolute biggest pet peeve with MySpace layouts is when the page gets spread out by some gargantuan image creating those horizontal scrollbars at the bottom of my web browser. Ever seen a page like that? Of course you have. They're all like that! (...okay not all but to say this is a serious problem on MySpace is no exaggeration...)
Sooooo... You wanna have a kick-ass MySpace layout?
Don't post images that will spread the page.
It's that simple. There's nothing worse than having to scroll back and forth horizontally to see an entire web page. It completely destroys the user experience and makes you feel like you can never get the 'whole story' in one view. The most popular screen size as of this writing is 1024 x 768. (According to the latest stats available from the W3C, in January 2007: 14% of users had a screen resolution of 800 x 600, 54% had a resolution of 1024 x 768 and 26% had a resolution higher than 1024 x 768.)
Basically what this means is that after you subtract the width of the vertical scrollbars on the right side of your web browser (which is most likely to be Internet Explorer) you have around 1000 pixels of horizontal screen space to work with. Hence, for a majority of internet users as of this writing, this is the maximum width of what is known as the browser viewport.
A QUICK PRIMER IN MYSPACE LAYOUT TABLE DIMENSIONS
All of the following are screenshots of a default MySpace page rendered in Internet Explorer at a display resolution of 1024 x 768. For demonstrational purposes, the web page background is colored black (instead of gray) and the scrollbars are colored red.
In the above example, a 400 pixel wide bright green test image is posted in the About Me section. The web browser behaves 'normally' and only renders vertical scrollbars on the right (red). No problems here.
In the above example, the green test image is rendered 600 pixels wide. We can see already that the main table (white background) has spread wider than its default dimensions.
In the above example, the green test image is rendered 800 pixels wide. In this situation, the main table is spread way out of proportion and has, in fact, exceeded the width of the browser viewport forcing horizontal scrollbars to appear at the bottom of the user's browser.
The user now has to scroll back and forth to see the entire page.
...(*buzzer sound*)... Game over.
Let's try the same thing again but this time we'll post our green test image in the Interests section.
In the above example, the green test image is 200 pixels wide.
No problems here.
In the above example, the green test image is only 300 pixels wide but already the main table (white background) is starting to spread out of its normal proportions.
In the above example, the green test image is 400 pixels wide and we can see that the main table is dangerously close to outsizing the browser viewport.
And finally, in the above example, the green test image is rendered only 500 pixels wide and already horizontal scrollbars have appeared. The user's browser is 'broken'.
...(*buzzer sound*)... Game over.
So there you have it. Those are your limitations regarding image widths in a MySpace layout.
TO SUM UP
About Me or Who I'd like to meet sections:
Image width Advisory 400 pixels wide Generally safe 600 pixels wide Warning 800 pixels wide TOO BIG
Interests section:
Image width Advisory 200 pixels wide Generally safe 300 pixels wide Warning 400 pixels wide Warning 500 pixels wide TOO BIG
Sooooo.......
How do you know how wide an image is? Easy. You can get the dimensions of any image displayed in a web browser by simply right-clicking on the image and then clicking on 'Properties'.
Need a free graphics editor to resize your images? ...(*chuckle*)... Check out my list of the best free graphics editors to be found on the net.
COMMENTS SECTION
Well then that takes care of you but what happens when your friends (well meaning, of course) post GINAMAGANTIC images to your Comments section?
Well you can do one of two things:
- Disable HTML in your Comments section.
Here's how to do this (I'm assuming you're already logged in):
- Go to your MySpace account home page
- Click on Account Settings
- Click on the Change Settings link beside Profile Settings
- Click to check Disable HTML Profile Comments
- Click on the Change Settings button.
All done.
- Alternatively, you can insert a special code that will limit the images in your Comments section to a certain width (while retaining its aspect ratio).
And here it is:
Copy-and-paste the above code anywhere into the About Me text box on your Edit Profile page. This code will automatically resize all images in your Comments section to a maximum width of 180 pixels (which is a nice safe size for this section).
HOWEVER be advised that if the image is posted inside a hyperlink (as sometimes is the case when people use comments images taken from a MySpace resource site), it will be resized to the same dimensions as your friends display photos in the Comments section. This is because in Internet Explorer there is no way to target comments images in hyperlinks using CSS without targetting your friends display photos.
- Disable HTML in your Comments section.
FINALLY... Here's a thought —
- Apply the KISS principle (Keep It Simple, Stupid).
Do something original with your MySpace page and KEEP IT SIMPLE. As in try to avoid all the cheesy cheap tricks that everyone else uses. Like puh-leeeeze, the<marquee>tag is soooooo last century. Really! Scrolling text was already way out of style as a web design effect years before MySpace even came into existence. Seriously!
Like uhhhhhh...
........
....
Okay so you wanna know how it's done anyway, eh? (*sigh*).
Alright then, here ya go...
Sheesh...
OTHER GREAT RESOURCES ON THIS SITE:
Did you find this page useful? Bookmark it at your favorite social bookmarking site!
EXTERNAL LINKS
MYSPACE BACKGROUND IMAGES ARE 100% ORIGINAL.
© COPYRIGHT 2006-2010 - ROBERT DARRELL
ANY UNAUTHORIZED USE AND/OR COPYRIGHT VIOLATIONS WILL RESULT IN LEGAL ACTION.
PLEASE NOTE: ironspider.ca is not affiliated with myspace.com in any way, shape or form.
| <~ BACK | TOP | NEXT ~> |
