Telling a customer about yourself can often be more tricky than you would expect. Recently, while researching a redesign I put together a roundup of websites which utilize their about page to best effect and the particular merits to different approaches of telling people about yourself.

Jay Hollywood – A freelance web designer.

Written in a very personable manner, this about page hits all the right notes, telling the audience a bit about Jays background, his skills, as well as little about him as a person. What really stands out within this page is the process chart which displays not only Jays abilities but the chart itself represents his level of skill and ability.

Squared Eye  – web design agency

Broken out into the team and the companies values the about page for Squared eye is easy on the eyes. More than this the page makes good use of recently completed client work to re-iterate the abilities of the company whilst not feeling too overwhelming. The content is also broken up into statements and sections which means a gentle glance can give you a good understanding of who Squared eye are and what they are about.

Meta lab – interface design agency

A striking design with a clear data flow, meta lab waste no time in cutting to the chase. Their About us page instantly tells you about the companies values, the team section of this page is also a unique approach with a good use of grids which flows through the design.

Squarespace – Software development house

One of my personal favourite about page designs squarespace makes excellent use of grids in its page layout. The design looks clean and crisp. the teams bios stand out and all the information you could need to know about the company is presented in a clean a clear way.

Forever Heavy – Freelance web designer

The about page (or brief Biography) of  Nicholas Coates really stands out as an imaginative way to talk to his audience. The minimalist design is really utilised by describing a short background accompanied by a more detailed look at his skill-sets with a great animation to show these off.

Ingredients for a successful about page

Depending on what you’re website is about there are several different criteria you should aim to achieve. Popular and successful design ingredients for this often include:

• Clear call to actions to a next step, for example – “Contact me” or “View the portfolio”
• A picture – be this of your team or the individual this helps the user feel more connected to designer or agency.
• What are your abilities / products. Don’t keep them to yourself
• Give a background, no matter how brief
• Try not to sound like  a robot. If you have personal interests, things that you enjoy, share them, but don’t get carried away remember to be professional.

Everlyn is a premium website template I have been developing. Designed for businesses such as PR & marketing agencies, this template takes a clean, modern approach. The design takes advantage of several CSS3 techniques implemented into an XHTML 1.0 strict W3C valid site, it also incorporates a lot of useful jQuery plugins and techniques to enhance the the user experience, with clear call to actions and SEO considerations.

Screenshots

This fresh, modern website takes a clean and focused approach, implementing call to action buttons and a highly readable 2 column content structure. This template comes packed with features including:

• 3 themes in one
• Includes jQuery image slider
• Full SEO
• PSD file included
• Complete documentation
• Clean and clear design
• Call to action buttons
• Ajax contact form
• @font-face implementation
• CSS3 integration
• Dynamic in-line javascript validation

Why a template?

I really enjoy working with clients on various projects. The thrill of getting a brief and seeing what I can create, but as with any process there are always compromises that have to be made and features that have to be left out, however with this template I wanted a chance to try out certain new techniques and experiment with design layouts and processes, what better way to achieve this than a website template which once finished could be used for practical application.

Purchase this template

If you like what you see and would interested in purchasing this template it is available with a live preview over at buyStockDesign.

Download the PSD

Alternatively please feel free to download the PSD file that accompanies the live download. It has been constructed using the 960 grid system.

I recently took purchase of the highly anticipated “HTML5 for web designers“. This book is aimed (if you have not guessed already) for web designers who wish to gain a better understanding of what HTML5 is, how it’s different and what it will do to change the way websites are constructed.

The book

I found myself struggling to put this book down, although lightweight (only 85 pages) everything about it is beautiful. They say you should never judge a book by its cover, but I think A book Apart would have to be a fine exception to this rule. The typography and content structure is perfect to a T.

The content

The book is laid out in a very straightforward manner, a bit of background, and then straight into all the different goodies that HTML5 has to offer. I was extremely impressed by the way that the book covers its subject matter. Jeremy Keith has a true talent for making even the most complex of affairs, clear and understandable for all. This really sets the theme for the whole book. whether you’re a designer looking for a quick reference guide, or a sweating mess who can’t sleep at night for fear of what HTML5 “really means” for your profession, then this book is for you. Very up-beat and very personal this book will leave you resonating with the excitement and hunger for creating your next HTML5 feature rich web project.

Summation

I would recommend this book for any web designer who really wants to keep up to date with what HTML5 can offer. It’s size is what makes it so appealing, and something that definitely makes it a worth a place on any web professionals bookshelf.

Many modern web designs are taking full advantage of social media integration by sharing their user base with their audience. In this tutorial we will look at some examples of websites which are implementing this effectively, as well as showing you how to create your own subscriber feed quickly and easily using PHP.

Subscriber feeds are generally, but not always RSS and Twitter. There are many reasons for wanting to display your subscriber and follower count, some of these can include:

• Giving confidence to new users who are viewing the website for the first time.
• Encouraging users to follow and/or subscribe themselves.
• Giving faith to potential clients or advertisers viewing the site.

Sites that do it well

There are a number of very successful websites that already share their subscriber counts to great success.

Lee Munroe’s blog uses an understated font and icon set to give precedence to his blog, whilst maintaining a controlled and professional tone.

One extra pixel is a great example of using imagery and colours to integrate the statistics into its website without feeling overworked.

Smashing magazine has pretty much been at the forefront in embracing social media and subscription stats on its site. in new and informative means.

web designer dev combines its subscribers to display an overview of the subscriptions. another a smart way of informing users without information overload.

Display your own subscriber stats

You can display your own subscriber stats quickly and easily with these simple PHP functions. Firstly you will need to know your feedburner ID, if you are not sure what this is or where to find it, why not read a my PHP feedburner function tutorial for detailed instructions.

Both functions displayed below make use of API’s which enable you to quickly and easily access publicly available information.

<?php
/**
 * @name subscriber stats
 * @author Philip Beel
 * @description Display your feedburner and twitter stats anywhere on your page
**/
 function feedburner_stats($feed, $attribute) {
 if ( !$feed ) { echo('[No Feed]'); } //user must pass in their URI
 if ( !$attribute ) { echo('[No Attribute]'); }//user must pass in their attribute
 $xmlobj = simplexml_load_file("http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feed);
 if($xmlobj) {    //check we got back a response
 echo($xmlobj->feed->entry->attributes()->$attribute);
 } else {
 echo("0"); //else fall back on a static value
 }
 }
 function twitter_stats($id) {
 if ( !$id ) { echo('[No Feed]'); } //user must pass in their username
 $xmltwitter = simplexml_load_file("http://twitter.com/statuses/user_timeline/".$id.".xml");
 if($xmltwitter) {    //check we got back a response
 echo($xmltwitter->status->user->followers_count);
 } else {
 echo("0"); //else fall back on a static value
 }
 }
?>

As you can see the functions are not that dissimilar, I have broken them out into separate calls for the sake of this tutorial, but it would be simple to convert this into 1 single function call, with a set of params depending on what you wanted to pull out. I have added a simple catch to make sure something is returned, and in the eventuality that the API cannot be contacted, you can have a fallback, in this case 0, but you can change it to any static value you like.

When displaying the feed on your page, simply call the functions like so:

<ul>
 <li><a href="http://feeds.feedburner.com/co/VazT" title="feed"><?php feedburner_stats('co/VazT', 'circulation'); ?></a><br /> Subscribers</li>
 <li><a href="http://twitter.com/philipbeel" title="twitter"><?php twitter_stats('philipbeel'); ?></a><br /> Followers</li>
</ul>

This makes life much easier when you want to call only one value at a time, by simply making the function call where you want the stat to appear. Check out the full demo in action, or download the source code from the links below.

Im always looking to improve the code, so if you have any suggestions, or spot any bugs, please let me know. Happy coding!

In this tutorial I’ll talk you through the process of hosting a twitter competition using PHP and MySQL in conjunction with the twitter API, as well as giving you some points to consider. This all started a while back when I decided to dabble in social media marketing using twitter. The idea was simple; win a prize by following me(@philipbeel) and tweeting or re-tweeting #theodin within a set time period. This worked extremely well and I gained around 200 followers, so I thought I would share the process with you.

Getting started

In order to run a twitter competition you will need a couple of things. Firstly, and most importantly make sure you have set up a twitter account.

You will also need a term or hash tag ‘#’ that is not already in use. This can be anything you like, but remember tweets are limited to 140 characters, so the shorter the better.

What are the rules

In order to run a competition fairly you will need to outline your rules clearly and adhere to them. Although you can specify any rules you like, here is a general guide:

• the competition will be run for a defined period of time.
• entrants must follow a nominated twitter account.
• entrants may only be counted once.

Issues for consideration

A common issue with using any API is that you can never rely on it 100%. Twitter is no exception. Unfortunately at the time of writing twitter does not enable you to publicly search for tweets beyond a certain date. They have not been deleted, they are simply not available at present. This may change in future, but as we are dealing with the present a simple solution is to use a MySQL database to store your entrants in.

Storing your entrants

You will need a way to store our entrants. for the sake of simplicity I have layed out a basic table structure in MySQL, in which we can store an ID and the twitter username. The table should look something like this:

CREATE TABLE IF NOT EXISTS `twitter_comp` (
  `ID` int(115) NOT NULL auto_increment,
  `username` text NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

In order to get the entrants into the database you will need to use PHP and the twitter API. The process is outlined below:

• Use the twitter API to collect all your followers and store them in an array.
• Search the twitter API for all the # tags which you have specified, then store the @username into another array.
• Use the array_unique() function on the entrants array to ensure that no matter how many times a user tweeted your # tag, they are only stored once.
• Then do a compare on the entrants array to keep only @usernames of your confirmed followers. Ideally create a new array from this.
• At this point you can then store the entrants in the database.

Updating your entrants

Over time, as more entrants tweet the # tag the the steps above should be repeated. Ideally this should be wrapped into a function which runs when the page is triggered, automating this with a daily CRON job will make life a lot easier.

Drawing a winner

Once the competition has drawn to a close, you will have a database full of legitimate entrants to the competition. Now the fun part drawing a winner, you can do this following the steps below:

• Connect to the database and pull out all of the @usernames.
• Store the @usernames in an array.
• Ensure no duplication has taken place by running another array_unique on the entrants.
• Mix it up a bit using PHPs shuffle() and array_rand() functions.
• Finally draw out the winner and present it on screen.

Announcing the winner

Once you have closed the competition and drawn the winner you should first DM the @username privately before telling the world. This ensures that you have a real person and you can go further by exchanging contact details and arranging delivery of the prize. Then you are free to tell the world who won and publicize the event.

I hope this post is helpful to anyone looking to start their own competition. If this post gets a lot of interest I would be happy to share the code which I wrote when I ran my own competition. Thoughts, considerations and comments are all welcome. Good luck!