RacheltheGreat.com, a portal page designed to reinforce my personal brand

I’m a big believer in the personal brand. So when I redesigned my Twitter page’s background a few weeks ago, I was very careful to combine both my Pink Crow web site’s style with my web comic’s art.

But when I began to design my matching ultra tiny Moo cards, I wasn’t sure which website to put on the card, my web design business here at ThePinkCrow.com, or my award-winning web comics at SubcultureofOne.com?

The answer was simple. Make a portal page. A portal page serves as a point of entry to the Magical Land of You for people you’ve just met. It should have links to all your sites, professional and personal, with one or the other taking precedence based on the sort of people you give your cards to most frequently. It is important to keep your social networking sites on there. Many people you meet under professional circumstances will likely want to keep in touch with you via shared social networking sites like Twitter or LinkedIn.

Lastly, I designed the site to match my new business cards and my Twitter page so I would present a homogeonously branded image of myself. Whether visitors to RacheltheGreat.com want to learn about my comics, my web design, or my flickr pictures is up to them, but I’ve laid everything out in neat little rows, just in case.

A screenshot of RacheltheGreat.com, my personal portal page that I designed and built.

Now for the tech dirt.

I was very impatient with this project. Impatient with browsers for not supporting things I wanted, impatient for images to load, impatient with search engines for being slow to figure out what to make of canonical URLs.

I was so impatient that I did not even bother to check it in IE6 because, let’s face it, most if not all of my traffic will come from my handing out business cards. The people I give them to use Firefox and Safari. So I’ll go back and check IE6 when google’s analytics show that I’m getting traffic from search engines, where one or two IE6 users might slip through.

Featured techniques

1. CSS Sprites The hand-drawn icons for the social network links are all contained in a single PNG image, called a “sprite”. Using CSS, I can use different sections of that image over and over, making it look as though I have many small icons, while in reality there is only one image. Having to only download one image saves visitors time and cuts down on the resources my server uses in serving the page.
2. Rounded Corners with CSS Since I wasn’t expecting much Internet Explorer Traffic, I didn’t feel like slogging through Photoshop to make the rounded corners on the social links’ black box, either. Instead, I chose to use the (not to spec) CSS property border-radius. IE folks see just square corners. I don’t think they’ll notice.
3. Canonical URLs Search Engines hate repeat content. Some unscrupulous people like to copy other’s articles onto their own site to try to burst search engine rankings. So search engines now look out for pages they’ve seen before appearing with different URLs and penalize them for looking suspicious. But what if you’re twittering about you site using TinyURL? Or someone doesn’t put the “www” in a linking URL? Search engines might get confused and think you’re trying to pull a fast one. But! There’s a way around this, although still very fresh, and many major search engines are gearing up to support it better. Canonical URLs specify what the real URL of the page is supposed to be.