twitter facebook dribbble email

Making an about page not suck

Careful! This post is looking a little old and could be inaccurate in many, many ways

When building a website there’s always that one page you just can’t be bothered with but you know has to be done. So instead of putting in the time and effort required you just throw any old shit together, more often than not this becomes the About page.

The reason for this is because there are few people that like talking about themselves and even fewer that can write about themselves. People are concerned about finding that balance between writing enough to sound interesting but not so much that you appear bigheaded or even worse a complete prick.

What I did

When designing my new About page (yup another post about the new site) I was determined to put in the work required to make it one of the best pages of the website rather than an afterthought. I think a good About page starts with a good photo…

I hate having my photo taken

This is because I always look at photos of myself and think, in the most condescending voice possible, “Don’t I look special”. The last photo I used was blurry black and white photo that for once was a photo I didn’t really mind, but it was just too poor quality to keep using. In a perfect world I’d have no photo on my About page but I think it’s a good thing to be able to see the person your reading about.

Unfortunately for me there are a fair amount of photos of me on Facebook uploaded by friends, yet fortunately there was one photo where I’m both sober and not looking completely retarded. So I took this photo and spruced it up a little to make it look like a Polaroid and after playing with some Photoshop Actions one night actually ended up with an effect I was really pleased with.

What else does an About page need?

Like the photo I’d pass at writing the content for the About page too given half the chance. The problem is I would write them as if it was a job application, so straight and professional. This time I took a different approached and tried to write it with more personality, and I think it worked.

Writing this way seemed to stop me from going too deep into the details and just cover the general things such as who I am, why I have the website and the how, why and where of me as a web designer. This led to a rather conversational tone, reinforced by the headers being questions of which the content below attempted to answer.

That’s the boring stuff done, now to design it

There are a few exceptions but a lot of About pages are fairly plain; just simple paragraphs of content running down the page, slowly sending the reader to sleep. The problem is what else can you do with these pages, there’s not much stuff you can add design flourishes to that brighten up the page.

To liven things up and started playing with the positioning of the different paragraphs. I’d like to say this was done with advanced selectors and awesome new CSS techniques but it’s all a little dirty behind the scenes with classes for each paragraph and
tags added to break lines exactly where I need to. Usually I’d be so ashamed of my dirty code but I really love the outcome that I don’t care about how it was done I’d like to think it’s a little different and that it intrigues people enough to have a read and then maybe look around the rest of the website.

It still needed the cherry on the top

I’ve had my and Flickr feeds on my home page for a while but when redesigning the site it seemed they’d be better placed on the About page. Really these feeds show information that is a little more personal about me than any persona that the site my project so this page seemed like their natural home. This caused a problem though.

My website is a mix of WordPress and static PHP pages. The home page was always been within the WordPress CMS so before I used plugins to show these feeds. Moving them to the About page which is outside the CMS meant the plugins were useless and another solution was needed.

This solution was actually me really pushing my PHP skills and coding the feeds myself. This involved getting the feed, interrogating the data, getting the image and caching the images too. It took some time and the codes probably not perfect but I got them working, and with some nice design flourishes I think they really look good on the page.

Knowing how difficult it was to find a non WordPress solution I’ll be looking into releasing the code for the feeds for others to stumble across if they’re in a similar situation.

That’s it, now go read my about page.