Styling your AIM Pages Home Page

by Jeremy Matzan
May 7, 2007

The the AOL Instant Messenger (AIM) Pages FAQ calls your AIM Page "your face and space on the Web." For AIM and AOL users, this is very much the case, since your AOL OpenID URL directs viewers to your AIM Page. The concept of having a "face and space on the Web" is by no means new; with AIM Pages, the "new" part is the interface by which it is created, and the method by which it is easily shared over the AOL network. A relatively new AIM Pages feature allows you to create a generic AIM Page through a simplified interface. If you've created your AIM Page with this simplified interface, or if you struggled to create your initial AIM Page and want to make it more "you"--expressive and sophisticated, of course--this article will teach to walk without your Quick Edit mode crutches.

Your First AIM Page

If you've gone through the default options on AIM Pages and created a basic page, it probably looks something like this:

Figure 1. Basic AIM Page

It works, in a Spartan sort of way, but it's not very exciting or easy to read. Some of the modules are centered, but too many of them are in the left column, which forces readers to scroll down. This is totally unnecessary when there's all that blank white space in the center to use. The information on the page is not well-organized. Some of it involves personal details--all that content should go together in one place--and some of it is other information, like photos and friends and such. This disorganization of information causes confusion among readers and makes it difficult to navigate your AIM Page--even for you, and you created it!

While it may have been convenient to set up your first AIM Page through Quick Edit mode, it's time to switch over to Advanced Mode so that you can make it easier to read and navigate. To do this, first log into your AIM Pages account through the start.aimpages.com page. Next, click the Page button in the Edit bar in the upper right corner of the window. This will bring you to the familiar Quick Edit screen for your AIM Page. To switch to Advanced Mode, click the Advanced Edit Mode link in the gray box at the bottom of the left column. A pop-up dialogue box will ask if you really want to switch to Advanced Mode; click OK.

Using Advanced Mode

The first and most useful feature of Advanced Mode is the ability to drag and drop modules from one position to another. Just mouse over a module to bring up its control handles, and then click and hold the four-way arrow symbol in the upper right corner of the module and drag it to whichever position appeals to you.

After you've played around with module positions and taken in the full degree of coolness that module repositioning represents, it's time to think like someone who might want to visit your page. The first question you should ask yourself is, "Does this page have all of the information that I want it to show?" If the answer is no, then you need to add some modules. Click the Add Modules tab near the top of the window, and then scroll down the list of module categories on the left. When you click on a category, all of the modules in it will be displayed horizontally across the top of the window in thumbnail pictures. Mouse over a thumbnail to see a brief description of the module's purpose. To add it to your page, drag and drop a thumbnail to the position you want the module to occupy on your AIM Page.

Lastly, click the Style Your Page tab and choose a theme that you like. If there isn't anything that particularly appeals to you, find one that comes close, and then click the Edit Style button in the top right corner of the window. This will allow you to modify specific style elements, such as the body text (the main text on your page), header text (the titles of your modules), link text, and background colors and images. You'll see all of the modifications take effect in real time.

No changes will be saved to your page until you click the Publish button. There are many ways that you can lose hours' worth of changes and customizations because you did not save them with the Publish button--a browser crash, using the Back or Forward buttons in your browser, or closing the tab or window your AIM Page is in are a few common ways to mess things up. Every time you click Publish you're making your changes live for the whole world to see, so if you you want to experiment with some options before making your page public, you can click the Settings option at the very top of the window, select "Keep my page private" in the pop-up dialogue box, and then click Save.

As you can see, just by moving things around and changing the active modules, your AIM Page can improve without you doing much work at all:

Figure 2. AIM Page after editing with Advanced Edit Mode

The Code-Snippet Module

To add functionality to your AIM Page that there isn't currently a module for, you will need to add it by hand through the code-snippet module, which is in the Default Modules category. Before you go stampeding toward a custom code block, though, you should understand your limitations. When you add a code-snippet module, and then click on it to edit it, you'll be shown the following warnings, which are explained in more depth here:

• If you don't know what you're pasting in, don't paste it. This warning is in place (and mentioned first) for several reasons. First of all, you could cause some embarrassing security problems if you enter in malicious code that allows others to modify your page, or steal your password, or post humiliating photos without your permission, or spread unwanted political messages, or worse. Secondly, badly formed code can harm the performance not just of your page, but of the AIM Pages server as well, if the code is dangerous enough and implemented on a wide enough scale. Third, bad code can crash your readers' web browsers, which does not endear you to them. So first and foremost: know what you are posting. Don't put up code that someone sent you; if you didn't write it yourself or get it from a trustworthy source (an established site like dev.aol.com or the API section of a reputable programming site), then don't put it on your page.

• The markup pasted in must be a valid XHTML snippet. Don't paste in the whole document, but the piece you paste in should follow XHTML's rules (all lowercase tags, all tags closed, all attributes quotes, etc). This means that you don't need to put in a document type definition (DTD), or <html>, <head>, or <body> tags. There are no published rules about linking to external cascading style sheets (CSS) or graphics, but unless these external resources are on a server that you own or rent, it's a bad idea to use them. XHTML standards are covered in a section below.

• Sometimes, Flash objects don't render in Edit mode, but they usually work fine when published. In other words, Flash animations or applets will only properly show in the finished page, so you are forced to test them "live." In general, it's not a good idea to embed Flash on your page. It increases your page's load time, may present plugin problems for some readers, and has been known to crash a browser on occasion. Then there's the annoyance factor--what you think is funny or cute is likely to be unbelievably annoying to others, especially if they visit your page frequently.

• If you're pasting in code for Flash, you need to make sure that the embed tag has the following attribute: wmode="transparent" and the object has the following parameter inside of it: <param name="wmode" value="transparent" /> See below for an example of this.

• Scripts that use document.write may act strangely. document.write is bad. The author of this piece of advice mistyped--he meant to say "JavaScript is bad." When programmed by an experienced software developer who has taken the time to carefully test it, a JavaScript applet can be a thing of beauty. Under almost all other circumstances, JavaScript is a browser-crashing, page load time-hogging, resource-intensive security hole. Since AIM Pages already make extensive use of JavaScript, you run a further risk of messing up your page's functionality if some rogue JavaScript interferes with the AIM Pages code. If you're JavaScript-savvy enough that you can write your own applets, then you probably don't need this article. If not, then try to avoid JavaScript, or stick to very simple scripts that are created by people who know what they are doing.

Theoretically you could remove all of the modules on your page and just use one big code-snippet module to display a lot of HTML, much like a traditional static website. You could also replace several modules with custom code blocks created using the code-snippet module, which can have multiple instances on your page, unlike most other modules. Before you proceed, though, you need to understand how to use XHTML tags.

XHTML Rules

If you're totally new to HTML tags, or if it's been so long since you used them that you can't remember what to do, you're best off taking the free online XHTML tutorial through the W3Schools website. If you have the time, you should also go through the CSS tutorial, which will help you understand how to use style tags.

If you are already familiar with "old school" HTML tags, making the transition to XHTML is not difficult. You just need to remember to make all of your tags lowercase (<p> instead of <P>) and every tag you open needs to close (<p> at the beginning, and </p> at the end). Some tags have been removed, such as <blink>, <applet>, and <center>. Others have been functionally replaced--<strong> replaces <b>, <em> replaces <i>, and all of the style-specific tags have been deprecated in favor of style sheets or inline style tags. So where you may have once declared a table like this:

<table width="100%" border="1px">

You now declare it in XHTML as such:

<table style="width: 100%; border: 1px;">

Notice the difference in how the style elements are declared--there are quotes around the entire style declaration, with each element separated by semicolons. Also, each element's value is defined with a colon instead of an equals sign. Other than these differences, the majority of old HTML style elements are directly transferable to XHTML inside of style tags.

The other way to style XHTML tags is with style sheets, but that's going a bit too far into the subject for this article. See the above link to the W3Schools CSS tutorial if you'd like to learn more.

The last HTML/XHTML difference worth mentioning is that all open-ended tags (those that don't have closing tags) need to have a space and a slash before the ending angle bracket. So <br> becomes <br /> and <img src="example.jpg"> becomes <img src="example.jpg" />.

The AIM Pages administrators have not published any limitations on XHTML tags, so go ahead and design your custom code block according to your needs. If you have a lot of XHTML markup to do, you will undoubtedly find it much easier to do most of the work offline in an HTML editor like Homesite, Bluefish, JEdit, or NoteTab, and then copy and paste your work into the code-snippet module in your AIM Page.

Example: Adding a Flash Object

There are several different ways to load and display a Flash animation or applet. The one that will work best with AIM Pages is:

<object type="application/x-shockwave-flash" 
data="http://www.example.com/flash_files/example.swf" width="250"
 height="250"><param name="movie" 
value="example.swf" /><param name="wmode" value="transparent" /></object>

The above method is quick, XHTML-compliant (or at least, as much as it can be), and compatible with the AIM Pages guidelines. If you want to change the display area, change the parameters from 250px to whatever you desire. Also make sure you put in the proper location of your animation, which has to be remotely hosted (AIM Pages does not host Flash files for you, as of this writing). You only have to put the complete address into the object tag; the param tag only needs the name of the file. There's no harm in putting the complete address into both tags, though.

Results and Conclusions

You now know all of the necessary details to create a standout AIM Page. Remember, though, to make it easy to read. If you don't, no one will want to look at your page, and all of your hard work will have been in vain.

References

• W3Schools CSS tutorial
• W3Schools XHTML tutorial
• The AIM Pages FAQ