Friendster CSS Tips: Designing Your Profile Effectively
Monday, October 31st, 2005Where’s the grouper review? Sorry guys, since grouper file sharing is still in beta, I had encountered several bugs that makes me annoyed. It is slow but quite intuitive enough that can can lure anyone to use this application. I had explored the most part and functions of the software. For the mean time, I’ll wait for the final release, use it and then create a full review of it.
Tips for Designing Your Profile
The following tips are based on my design approach and opinions on how to effectively design your Friendster profile.
For proof of my Friendster designs, click here.
For the Friendster CSS Editor, click here.
Tip #1 : Sketch and Plan. Before you type your CSS codes or use the CSS editor in cuban council, make sure to have at least a sketch of your design plan on a piece of paper. That way, you can organize and plan what kind of theme you want to put on your Friendster profile. As well as graphics, videos, music to put on your profile.
for example: If your theme is kinda "anime" like naruto, normally you could sketch some details that the wallpaper you’re using will be related to naruto. Possibly, the text and background colors and pictures are related to your theme.
Tip #2 : Choosing your Wallpaper. Did you know that wallpapers are one of the reason why most profiles are slow to load if not well planned? Majority of Friendster users just link the wallpapers they find on the Internet and some upload them to a hosting site not knowing how large the file size of it. Yes, it is important that you know it’s file size of your wallpaper. Also the resolution of it.
Majority of Friendster users have a default resolution of 1024×768 on their monitors at home or at the cybercafes and Internet shops. So, typically, you select a wallpaper which has a size of 1024×768 so that the contents of the wallpaper will be shown on your profile and for those Friendster users with the same resolution as yours. If you want someone with a 1152×864 or more to view your background wallpaper, then it’s up to you if you want to enlarge your wallpaper using an image editor. Make sure that the contents of your wallpaper you intend to show to others can be easily be viewed by users with a 1024×768 resolution.
Another thing is the wallpaper’s file size. Make sure that your file size is let say not more than 50 kilobytes (that may took about 5 seconds to load on a 56kbps dial up speed). You can reduce your file size by using again your image editor.
Typical problems with larger file is it takes a longer time to load your wallpaper for those who use dial-up. That may create a negative impression for users who view your profile.
Tip #3: Text. You want your information on your profile to be easily readable by all? Then selecting the right colors and fonts can play a major role to an effective profile readability.
Example: If your background wallpaper is dark in color or dimmed, then you must color your text lighter in color like white, yellow… it’s up to you so that so that the text can be easily read. Same thing goes for lighter colored wallpaper, you must use dark colored for your text.
Some wallpapers contain different colors, brightness and contrast so picking up the right colors for your text can be a little bit difficult. A great way to solve that is to edit your wallpaper, increase/decrease it’s brightness and contrast so that colors can be equalized.
Tip #4: Graphics. Friendster CSS editor is not yet capable of putting a graphic image onto some of the parts of the Friendster profile. But if you are an experienced CSS programmer then you know how.
My only tip is that you use .gif image files so that users with a slower bandwidth can easily see your graphics. Also .gif supports transparency unlike other formats but .png also supports it but I haven’t tried it yet.
Tip #5: Putting Music, Videos and Flash Elements. It attracts someone if your profile has at least one of these. These could entertain your profile visitors as they read your profile. But inappropriately putting them can cause havoc in your profile.
Videos. Videos are fun, you can watch music videos on your friends profile. But it has it’s side effects. Not all can watch your video on your profile. Those users that have a faster Internet connection can and will. Sorry for the dial-ups because it could last forever to finish the video streaming. Also, it can cause your profile to load slowly if someone with a 56kbps download speed tried to view your page.
Music. You can put music into your profile by embedding a plug in. Usually the most popular is the Windows Media Player plug in. It can play many types of audio files. Again, if you want those users with a new Internet connection to hear your music, you must convert your audio files let say down to 64kbps and the format is ACC. That way, even if you convert your 192kbps MP3 to 64kbps AAC, it will still sound fine.
Flash. You can do almost anything in Flash. You can create an Mp3 player, video player, animations. But as I said awhile ago, having your flash files low in file size will make those dial up users happy.
NOTE: Friendster had stripped some CSS codes. Meaning the following codes below will not take effect.
- #logo - you cannot remove the Friendster logo
- display
- position - you cannot re-arrange the elements
- <iframe></iframe> - damn
- attributes and selectors for ads - duh



