Personalisation is a great way to improve a user’s visit to your site. Recently I have been really interested in the different ways of approaching this – the traditional and what I am calling ‘Soft Personalisation’ methods.

Traditional personalisation

For commercial applications of web personalisation the site needs to know who you are. This happens at several levels:

Most information – You have an account or profile with the site. They can then leverage this data to show you relevant information, based on your personal details, history on the site, or previous purchases.

Amazon pretty much pioneered this with recommendations and bundles, which they introduced in 1997. Not only do they use this information to tell you things you might like, but also use the information to tell other people with similar interests/purchase histories.

How you got there – How did you enter the site – PPC, natural search, a campaign? Custom landing pages for each channel, keyword or search term are easy ways to serve up highly relevant content.

Learning about you – Browsing history and prior behaviour. This works especially well on ecommerce sites as the site learns about you as you move around and view products.

Soft personalisation – working with what we have

What happens when you get a new user to your site and want to give them a personalised experience right away? They do not have an account and have not been to any other pages on your site. What are the options?

Just by entering your site each user actually tells you a lot about themselves. I am talking about the stuff that any web analytics package captures. Using this information for personalisation can be a potential gold-mine for adding features to your site as well as nice little touches which make things easier for the user.

A few examples:

1. The users’ location

Burton do this really well; they work out roughly where you are and use this to pull weather information relevant to you. They can then use this to show you useful information, but also to highlight suitable products for you at that exact moment.

Burton – http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default

Analog again find your approximate location and use it to add a nice personal touch to their site – they tell you how far you are away from each of their members.

Analog – http://analog.coop/

2. Their operating system

This Skype example is really simple. When you visit the download page it shows you the version you need for your computer. Most users’ probably won’t even notice this, and they do not have to. They have been saved a click or the task of searching for the version they need. Seamless and super helpful.

Skype – http://www.skype.com/intl/en/get-skype/on-your-computer/

3. Current time

The NOFRKS site changes styling to reflect the time of day the site is viewed. This example is really only adding a simple visual change. It’s not helpful like the Skype example or highly personalised like analog, but it is a nice subtle touch, and sometimes that is all you need.

NOFRKS – http://www.nofrks.com/

Doing even more

I hope that the examples above show that personalisation doesn’t have to be intrusive; it can be helpful, clever and subtle.

This is really only a bit of what can be done. Plunder your analytics account and see what user information you are collecting. Much of that data can be used in some way or another.

When we recruit I see a lot of CVs from web designers. Some are amazing, but unfortunately the majority suffer from one or all of a checklist of issues. A few improvements really could make all the difference.

The basics

Whoever receives your CV is likely to be staring at a large stack of them on their desk. They need to be whittled down to a few for interview and brutal decisions have to be made. Make it as easy as possible for the person reviewing those CVs:

• A killer first page – like a good book cover the first page needs to grab the attention and make me want to read the rest.
• Enough, but not too much – one page is too little, five too much. This, like a few of these points, is a balancing act, with a dose of personal preference thrown in for good measure! Work towards a layout and content you feel happy with then get other people to read it.
• Your CV shouldn’t raise too many questions – why is there a gap between jobs? You have a degree, but what classification did you get? Some people might take the time to go back, give feedback and ask questions to get all the information they need from a candidate. Others will be staring at that huge stack again and decide they will probably find other candidates in there and dismiss your CV.
• Tone of voice is key – be optimistic and confident, but don’t be too cocky.
• Be realistic – if you call yourself an expert in Photoshop, Illustrator, Indesign, Drupal, WordPress, Joomla, php, .net, python, etc you’re either a king among designers, you’re exaggerating or, more likely, you have dabbled in lots of things. Break this list up – list your core strengths and be honest about which you have less experience in.
• Tailor it – if you know web and print, but are applying for a web position then major on that – lead with your web experience.

Some CVs just flow. Others feel like you are eking out details and having to really search for what you are looking for as an employer. It’s not hard to guess which is more likely to hold attention for longer and get the interview.

Designing your CV

CVs generally all look the same – a black and white Word document set in Times. This is the norm if you want to be an accountant. As a designer would you want something which represents you to go out into the world looking like that?

This is your first opportunity to show something creative, and I am always surprised so few designers take it.

Saying this, it still needs to satisfy the first point – make it easy. As you would any clear piece of design work, pay attention to clarity. It needs to be very easy to read – look carefully at font choice, line spacing, sizing and line length.

Being ‘Freelance’

Freelancing is quite often code for being unemployed. If you don’t want an employer to think that then you need to back it up. List clients, some key achievements and maybe show some work examples. Also make sure there is enough to cover the timeframe – one website in three years – what have you been doing?!

At the other end of the scale some applicants put so much focus on their freelance work/website that you question how interested they would be in their day job. Doing some freelance work on the side is cool, but not when it impacts your 9-5.

Recruitment agencies

If you are planning to use a recruitment agency to find work, or apply to a job advertised by one, there a few things worth noting.

A lot of recruitment agencies will send your CV out in their own template, adding their logos and styling and stripping out any formatting and styling you have added. To make sure all the effort you have put in to stand out is not lost, ask your agency to send out the CV you want a potential employer to see.

Another recruitment agency trick is to remove any and all clues to your identity. They do this to protect themselves and it does make a certain amount of business sense for them – clients then cannot approach candidates directly to avoid paying fees. But really, if I am looking to employ someone, I want to see their website, Linkedin profile, Twitter account – everything! If a CV drops onto my desk without it – they will be the first thing I will ask for. No work, no interview.

Different versions

When I was looking for my first full time job I didn’t know what kind of gig I was looking for – agency or in house. I was also quite open to the type of business – I really just wanted to get experience designing and working on websites. This meant I applied to some quite corporate companies and some smaller, edgier agencies.

The same CV for both places would have had to tread a very careful line. One CV would have to get past the vetting of a possibly stuffy HR department. The same CV could then be too formal for an agency role. My solution was to have two versions – one traditional and formal and a second with its top button undone.

Risky tactics

Are you desperate to get a job, or really looking only to move if your dream job is on offer?

If it is the latter then you can almost start to interview employers with your CV. If you have some key viewpoints you feel very strongly about – list them in your CV. Only want to work somewhere that believes strongly in web standards? Put that! If the company you have applied for doesn’t agree with you then maybe it’s not the right place for you to work.

This is definitely a risky tactic, and certainly not for everyone…!

Disclaimer

These are obviously my own personal opinions, based on recruiting in-house designers in the UK, but I think a lot of these suggestions are broad enough to be useful for most people, but go with your gut – at the end of the day your CV needs to represent you.

In the previous article I covered the history, design, branding and the aims of this new site. I also want to talk about the technical work that went into it, as well as recommending some great resources I used.

The plan

The first stage of planning the site build was choosing a platform. After dismissing some of the more lightweight blog platforms I was left with WordPress or plain HTML to choose from. I wanted to create a site that was so clean and flat that putting it on WordPress could be overkill, especially if I plan on writing sporadic articles which could possibly be easier to just build as a flat page.

The decision came down to a few key features I wanted (mainly categorisation and an RSS feed), and after looking into generating an RSS feed from static content and not really finding an ideal solution I decided to go with WordPress.

The next stage was to set about bending it to fit the site structure and style I wanted. My key aims were:

• Having a clean URL structure – no p=22? nonsense going on at the end of each link you see on some WordPress sites. I wanted tidy, meaningful URLs.
• To use WordPress but not let the user know – it should feel like a flat html site. I wanted to remove all unnecessary features and bloat.
• Start using at least the basics of HTML5. I don’t build too many sites anymore so this was a good opportunity for a first proper HTML5 project. I am going to start with the basics for now, hopefully adding to this later – this will be an agile site which evolves over time.
• Remove as much unnecessary code as possible.
• Make a CMS based site work as well for SEO as a flat site.

Tech resources

Some of my requirements were just a case of stripping back code and adding my own, while others required some extra scripts to help. Here’s a breakdown of everything I used:

• Latest version of WordPress – the platform behind the site.
• HTML5 Starkers theme – the basis for the sites theme. A great starting point but a little too extensive for what I needed, so quite a lot was deleted!
• HTML5 shiv – This gives older browsers a helping hand to understand the new HTML5 coding.
• #grid – Very useful if you are building a site with a strong grid/column based layout. Hit g to see it in action.
• Tool tips – These are used on the category icons at the start of each post.
• jQuery – If you have got this far I will assume you know what jQuery is! The HTML5 shiv, #grid and the tooltips all use the framework.

WordPress Plugins

Adding extra functionality into WordPress:

• Category Icons – This is creating the icons you can see above the title of this post. It uses your list of categories in WordPress and enables you to assign an icon to each.
• Custom Permalinks – Pretty self explanatory – custom URLs. Allows you to create a friendly link for any page, category or post on the site.
• Google XML Sitemaps – This is great, I pretty much set it up and can now forget about it – my XML sitemap is taken care of and updates automatically.
• Headspace2 – Great plugin for having custom title, description and keywords for each post or page on the site.
• iRobots.txt SEO – Along the same lines as the sitemap this can be setup and left and sits in the background doing its thing – maintaining a robots.txt file for the site.
• WordPress Database Backup – Automatically sends me a backup of my WordPress database each week by email.
• WP Super Cache – Speeds up page load times A LOT.

So far I have been really pleased with all of these plugins. They have all worked flawlessly – no clashes or errors and they have done exactly what I wanted.

The big G

Some of the web services from Google used on the site.

• Google Analytics – Free analytics software from Google – I imagine most people reading this probably either know of or are using Google Analytics.
• Webmaster Tools – Fewer people seem to know about Webmaster Tools. It’s a great set of tools from Google, which tell you lots of interesting information about your site. This is also where you can submit a sitemap to Google.
• Excluding your own visits – If you do not have a static IP this tutorial shows you how to filter your own visits out of your Analytics data.

Most people will have heard of these services, but I thought it was worth mentioning WMT and the exclude script. The latter especially as it works with the latest asynchronous code snippet, whereas other solutions I found were for older snippets.

All done

Through a mix of coding, plugins, javascript and late nights I managed to meet all of my original criteria for version four. As I mentioned earlier though, I hope to refine, update and add new functionality to the site on a regular basis.

I am really pleased to be launching the fourth version of oldguard.co.uk and I want to use this first article to talk a bit about the old and new sites, as well as the design. There have been quite a few changes – the site has been re-platformed (onto WordPress), there’s new branding and the whole focus and purpose of the site has changed.

A potted history

There have been lots of changes and minor revisions along the way but these are the major versions of of the site:

- V1 – Version one was a full flash site with a few work examples – from an era long gone that is probably best forgotten!

- V2 – Version two was a portfolio with multiple pages, written in HTML this time.

- V3 – The previous generation of Old Guard, version three, was the first time the site was a single HTML page. The portfolio was removed and the site acted as a CV webpage, with bio and contact/social links. The site had some great feedback and I want to thank a few of the sites that featured or showcased it: Designer Daily, Specky Boy and Net tuts. Also a massive thanks go to Kyle Fiedler who used the site as an example in this talk about web typography he gave at Harvard!

- V4 – This is it, the fourth version of oldguard.co.uk and it has been completely rebuilt and redesigned. It also has a major addition to the previous version – articles.

Articles

Just what the internet needs, right? Another web design blog! Well, yes and no. I want the focus here to be on quality over quantity. No lists of the top 50 fluorescent pink WordPress themes!

I joined Twitter in January 2007 and started posting useful bits of information and links I found. Usually the 140 characters keeps these brief and snappy, but doesn’t give nearly enough room to tackle bigger subjects. With this in mind I want to start writing some short to mid length articles on subjects that really interest me.

I don’t expect to be updating the article section every day, perhaps only once or twice a month – I really want to write about things:

• Where I will go into more depth than I can find elsewhere.
• When I think a subject is not being talked about enough.
• I feel I have a new twist on a topic.

For random thoughts and links, Twitter is where I will still post everything else.

Trying to make reading easy

I find reading medium to long articles on a desktop computer pretty hard going and usually send most things to Instapaper for reading later on a smaller portable screen, which I find much easier. I wanted to do whatever I could to make the experience of reading on this site as easy as possible. This led me to look very carefully at the type, line length, font size and line height used, which then dictated the grid I have used for layout. I am pleased with the reading experience, although I will probably tweak it a bit over time.

New site, new logo

The new site has also given me the chance to rebrand, which started with a new logo. I have changed logo design a few times over the years and try not to be tied down to a particular design for too long. I wanted to look back and thought it would be fun to pull together a quick timeline of the previous generations of Old Guard logo.

Top row: Main logos used since 2005.
Bottom row: Supporting graphics.

Feedback from the previous generation was that it wasn’t hugely clear – I got a lot of people saying ‘what’s dg?’, or ‘is that og?!’. So clarity was key, which brought a change of font. The new logo uses Tungsten by Hoefler & Frere-Jones.

Colours and lines

I have been using the same colour palette of greys and greens since 2005 and wanted a change, so went with the blue and kept the greys. Also, for the first time ever I have started writing a style guide to keep up with all of the choices I have made – more on that in a later post!

Designing for myself

Updating this site has taken quite a while, it’s been more of a hobby than a project, so I did not set a deadline or run it like a normal job – I enjoy tinkering with it a bit too much! There are a few early design ideas for the site over on Dribbble, although not many of those details made the final site.

I was intending to write more about the design, but really all of the decisions I made and the direction I took stem from my initial aim – to make a site where reading is the priority, which led to the site you are looking at now.

Resources

• Brightmix icon set – Fantastic free icon set.
• Iconic icon set – More great icons. These and the Brightmix icons are being used for the category icons at the start of each post and on the articles page.
• Google font directory – Using Arimo by Steve Matteson and Arvo by Anton Koovit.