If you’d like to read a bit more about the design and technical aspects of my site, you can find details in this blog post.

I’ll update this blog post with the results once the winner is announced.

Yeah, I know there are bucket loads of “The best however-many WordPress plugins” blog posts out there! But with that said, I think a round up of solid plugins from someone who uses them in live projects everyday would be useful – if not just as a resource to point clients to. I’ve broken this up into popular plugin categories so you can see what I’d suggest for each:

Search Engine Optimisation

During my earlier years with WordPress I used the All in One SEO Pack to optimise my sites. While there is nothing wrong with this plugin, I felt I outgrew its options and in recent times I have come to prefer Yoast’s WordPress SEO.

Features like XML sitemaps and breadcrumbs for internal linking have come increasingly more important to me, so having them bundled in with WordPress SEO is of huge benefit – especially when you put together as many WordPress sites as I do! Some people however may wish to use standalone plugins for sitemaps and breadcrumbs, suggestions below.

Recommended SEO plugins:

• WordPress SEO by Yoast – Packed with options and features.
• All in One SEO Pack – Less options but very simple to use.
• Google XML Sitemaps- Standalone plugin that generates a single tier XML sitemap and notifies all major search engines of new content.
• Yoast Breadcrumbs – Standalone version of the breadcrumbs feature that comes bundled with WordPress SEO.

Social Media

Promotion of your website and blog posts in particular via social media is a given for anyone these days. One of he most common scenarios I come across is a client wanting to add a multitude of sharing options to their individual blog posts. While I’m not a massive fan of plonking tens of these sharing options at the bottom of a blog post and I usually hard code in my preferred three (Twitter, Facebook, Google+), I have recently come across a non-intrusive plugin to recommend. Tweet, Like, Google+1 and Share simply places your selected sharing options at the top or bottom of your blog post content, without overbearing your content.

Other popular questions in this category are “how do I add a Facebook like box” and “how do I add a Twitter feed”. These are best served via widgets, which any WordPress theme worth its salt will support. Widgets are pretty much plugins that will always add something visual to a WordPress site’s sidebar (or other widgetised area) when active. You can find recommended widgets for Facebook and Twitter below.

Recommended social media plugins:

• Tweet, Like, Google+1 and Share - Simple, easy to set up and non-intrusive. Features sharing options for Twitter, Facebook, Google+ and LinkedIn.
• Facebook Like Box Widget – Place a Facebook like box in any area of your WordPress site that’s widgetised.
• Twitter Widget – Place your Twitter feed in any area of your WordPress site that’s widgetised.

Contact Forms

The majority of contact pages have a contact form of some sorts and my go to plugin for this is Contact Form 7. The form creation interface is clean and not too overwhelming, forms can be as complex or as simple as you wish, plus features such as AJAX submitting, CAPTCHA bot protection and Akismet spam filtering make for a really solid contact form plugin. I’ve never had to use an alternative as I’ve never come across a form I can’t build with it!

Recommended contact form plugin:

• Contact Form 7 – The business when it comes to WordPress contact forms in my opinion.

Content Sliders

Some, if not all premium WordPress themes it seems, come with a built in content slider. This could be featured posts of a WordPress blog or simply an array of images within a page. A lot of these themes implement Nivo Slider because of its great functionality, but if your theme doesn’t have a built in slider you can install the Nivo Slider WordPress plugin.

This is the first paid for plugin I have mentioned and I do so because I think it’s genuinely worth the $20 asking price. The Nivo Slider WordPress plugin is the easiest to configure, most feature rich and most client friendly slider plugin I have used in my time creating sites with WordPress. Free alternatives listed below.

Recommended content slider plugins:

• Nivo Slider for WordPress – $20 but worth it, the most simple to use slider plugin out there in my experience.
• AnythingSlider for WordPress – The WordPress version of Chris Coyier’s AnythingSlider. Does exactly what it says on the tin.
• Easing Slider – Good free plugin if you only need the one slider.

Photo Galleries

Sometimes a site will require a comprehensive gallery system, especially if the content is image heavy. I have used NextGen Gallery on a number of occasions to serve various purposes – from a freelancer’s photography portfolio to management of photos for a vehicle sales company. The plugin comes bundled with effects to bring up larger images in a modal window (lightbox to name the most popular) and the integrated short codes make it painless to add galleries in any page or post.

Recommended gallery plugin:

• NextGen Gallery – The best fully integrated image gallery plugin for WordPress that I’ve come across. Packed with features.

e-Commerce

While some say WordPress isn’t the best platform for e-Commerce, I have built smaller scale shops with it using WP e-Commerce. During recent times there hasn’t been much competition in the WordPress e-Commerce market, but there has been a bit of movement with WooThemes releasing their WooCommerce plugin. I haven’t used WooCommerce so can’t comment on it or recommend it, but I thought it was worth a mention in this category.

If you’re selling digital products, a small-medium number of physical products or you’d like to tie a shopping cart facility onto your existing WordPress site – WP e-Commerce comes recommended. The free version comes with enough options to facilitate an online store similar to those mentioned, with payment gateways such as PayPal and Google Checkout available out of the box. You can however upgrade to the Gold Cart at a cost of $40, which unlocks additional payment gateways and extra layout options.

Recommended e-Commerce plugin:

• WP e-Commerce – Free e-Commerce plugin, with enough features to get up and running straight away. Additional features available via Premium Upgrades.

Other plugins of note

• W3 Total Cache – A really awesome caching plugin that improves the performance of your WordPress site.
• Google Analytics for WordPress - Adds custom variables specifically for WordPress sites that allow you to view analytics based on author, category, tag and more.
• Disqus Comment System – Replaces the built in WordPress comment system, enabling users to leave comments using their Twitter, Facebook and other accounts, encouraging user interaction.

That completes my roundup of recommended WordPress plugins for clients. If anyone has any alternative WordPress plugins to put forward, or has an experience using the ones I’ve suggested – feel free to leave a comment.

The blog section has also been neglected in the last year and this is something I really wanted to get back on track as I enjoy writing. Hopefully this new site will give me a kick up the backside on that front!

This also coincides nicely with my return to full time freelancing.

So what have I been up to?

In late 2010 I set up a cater-for-everything design agency with graphic designer and friend Ash Mellor. Whilst we are still looking after our existing clients we are not searching for new projects. There are a number of reasons for this, but the main one for me being – I missed freelancing. The diversity of projects, range of clients, plus the amount of flexibility freelancing offers being major factors.

Both Ash and myself learned a lot about the industry whilst running our agency and I personally place a lot of value on this time and the experience I gained. That said, I’m now looking forward to turning my focus back to what I feel I do best.

If you think I can help you on a freelance basis, feel free to get in touch.

A bit more about the new site

This is version 3 of my personal site. Initial ideas were to produce a simple, clean, type focused, monotone design and have a different accent colour each day. I realised this might be a bit bland, so went for a random accent colour on each page load.

The thoughts behind the page feature images were originally specifically for blog posts, so that I could add a relevant image within the overall design (see this blog post as an example). I also decided to make use of this space on the main pages to add a bit of personality and I think it works well (my mug on the home page aside!).

Note: I am aware the services photo is flipped! Damn that pesky Apple logo.

I started experimenting with fluid layouts and media queries after reading Responsive Web Design by Ethan Marcotte. The whole “target ÷ context = result” formula really stuck with me (as opposed to other responsive web design techniques) and this is the approach I decided to use for my new site.

The site uses HTML5, CSS3 and includes various fixes for older browsers. Internet Explorer 7 and 8 get their media query goodness from css3-mediaqueries.js and their HTML5 support from html5shiv. IE6 can do one! The percentage of visits to my old site from IE6 was incredibly minimal and I want to play my part in killing it.

It is of course using WordPress as it’s content management system. The starting point of the theme was Starkers HTML5 by Nathan Staines (Starkers originally by Elliot Jay Stocks), an incredibly useful bare bones WordPress theme that I use on a regular basis.

Fonts used are Droid Serif + Oswald and are served via Google Web Fonts.

That just about covers it. I pushed this live a bit quicker than originally planned so no doubt I’ll be making a few amendments over the coming weeks. Feedback always welcomed!

A while ago I found myself constantly using the same font for everything. I’m talking body copy, header tags and even logos. My Helvetica (with -1px letter-spacing) obsession was at its peak and I was struggling to mix up my font stacks to add more variation to my designs.

Since then, as advances in web typography have become more readily available, I’ve found it much easier to use type as a key design element in my work, as opposed to being creatively restricted by “web-safe” fonts. The aim of this post is to briefly round up our options (along with my views) when using custom fonts in web design. So let’s take a look!

CSS3 @font-face

With CSS3 standards right around the corner, most browsers supporting CSS3 features and more websites taking advantage of them – @font-face is a custom web font option to consider.

I use the @font-face method for this website and I feel it works well. ChunkFive Regular is an example of a free font that’s license allows us to embed it into our CSS, as I have done with header tags on this site. I would strongly suggest you make sure that by using @font-face you are not breaking the terms of any font you intend on embedding.

Whilst on the subject of @font-face, I must mention the incredibly useful Font Face Kits by Font Squirrel. There are 100s of pre-made @font-face kits that include multiple type formats for all browsers, including Internet Explorer! You can even make your own kits by uploading other fonts with the Font Face Generator but again, check those licenses.

CSS

@font-face
{
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('‚ò?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

h2
{
	font-family: ChunkFiveRegular, Georgia, serif;
}

Pros

• Endless available fonts (providing you are adhering to the relevant licenses when using them!).
• Works in all browsers (including iPhone and iPad) when all the right font formats are used.
• Is not dependant on JavaScript being enabled in the users browser.

Cons

• It takes slightly longer to implement than Google Font API (more code).
• Quality of font rendering may differ browser to browser.
• @font-face is a CSS3 property, so will not pass current W3C CSS 2.1 validation.

Google Font API

Recently, my first stop when working out typography for new projects has been the Google Font API. Although a relatively new service, I find it incredibly simple to use and more importantly painless to set up. The speed of which I can quickly browse the Font Directory, choose a suitable font and have it live on a website is incredible. This is definitely the most hassle free option when using custom web fonts, in my opinion.

The only let down with the Google Font API currently (the service is still in beta) is the fairly small amount of fonts available, although there are variants (bold, italic, etc.) included with some fonts in the directory.

HTML

<head>
        <link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
</head>

CSS

h2
{
        font-family: 'Cantarell', arial, serif;
}

Pros

• It’s a free service.
• Extremely quick set up time (small amount of code).
• Is not dependant on JavaScript being enabled in the users browser.
• No need to worry about license legalities.

Cons

• Small number of fonts to choose from.
• Quality of font rendering may differ browser to browser.
• No support for iPhone or iPad.

Typekit

I first heard about Typekit when I received an invitation to try it out a year or so ago. The first thing I noticed is the huge font library – you will definitely find a typeface to fit your designs there. The second thing I discovered was that to use the service to its full extent you have to pay a yearly fee. The “Portfolio” package, which gives you unlimited websites, unlimited fonts per site and access to the full library is by no means expensive at $49.99 per year – but this cost may still be off-putting, especially for designers who are just starting out.

I had used the free trail account to test out Typekit’s functionality, although the limitation of 1 website and 2 fonts is kind of low in my opinion. Coupled with the lack of access to the full font library and the requirement of a Typekit badge in a fixed position on my page, I wasn’t won over enough to upgrade to a paid account.

HTML

<head>
        <script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

CSS

h2
{
        font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Pros

• Large array of available fonts.
• Good support articles and help section.

Cons

• Whilst not overly expensive, Typekit is a paid for service (if you want all features).
• Browsers may render your page content before the custom font, usually meaning a web-safe fallback will be shown for a couple of seconds beforehand.
• Is dependant on JavaScript being enabled in the users browser.
• No support for iPhone or iPad.

In conclusion

The custom web font method you use with any given project will be decided by both personal preference and the requirements of each design/build. For instance, if you require your custom font to work with Mobile Safari you would choose @font-face over Google Font API or Typekit. This was the clincher for me personally due to two main reasons – #1 My analytics show a high percentage of visits are from this browser and #2 I like to browse the internet using my iPad. Therefore giving visitors of my site (including myself) the best possible user experience is of high priority to me and using @font-face delivers this.

I hope you found this article interesting. If you have anything to add, whether you agree or disagree with my points – please feel free to leave a comment.

The bonus with iOS4 is we can now use two different wallpapers – one for the lock screen and one for the main menu and everything else. This means you can use two of these wallpapers in tandem! It certainly helped me as I couldn’t pick between my favourite pair and I feel it gives the iPhone more of a “theme” to it, rather than using just a single wallpaper.

The wallpapers are created from photographs I took from a recent trip to NYC, edited in Lightroom and re-sized in Photoshop. They are free to use how and where you want, although if you want to link to them – please use the URL of this post (not the direct download).

To download the iPhone 4 wallpapers (file size 1.4MB), click the button below – I hope you enjoy them!

I have always described myself as a web designer and since I work for myself, a freelancer – but does this best reflect firstly, my abilities as a designer and secondly, what I have to offer my clients?

Like many freelancers, word of mouth recommendations are a large part of my work flow. This is all well and good until I realise I’ve been mis-sold. For instance, an existing client recommends my services to a potential client describing me as the “website designer guy”. The potential client then gets in touch expecting me to write them a custom CMS, or re-create Facebook from scratch. Sure I have some development skills, but the time it takes me to educate the client about the differences between designer and developer is cringe-worthy; usually ending with said potential client disappointed that I can’t develop their application for the same price the recommender’s WordPress design and build cost.

On the flip side of the initial cringe-worthy situation, this is still a lead that I would not have had. With a bit of project management, outsourcing and explanation to the client on my part I could still get these requirements fulfilled – budget and time frame dependant of course.

Upon reflection and relating this back to giving yourself the appropriate title, I think the client’s vague perception of a “web designer” is actually a plus point in getting new work. Granted some people will leave the initial discussion disappointed but sometimes things don’t work out and you won’t win a project, it’s just part of the industry.

The importance of the right title is again highlighted when dealing with design agencies. Obviously a company looking for freelance creatives will know the difference between someone describing themselves as a “web designer”, “web developer”, “illustrator”, “photographer”, etc. Assigning yourself the most relevant job title will more than likely make it easier for them to find you, thus leading to potential new work.

Tangent alert!

But then this got me thinking. Is giving myself the “freelance” title and using my own name the best way to advertise my services as a whole? Should I consider creating a brand for my business and work under the guise of “we” rather than “I”? I think this might be an option as in my experience, people like to think they are working with an orchestra and not just a one man band.

More on this from me a little further down the line.

In conclusion

As creatives it’s pretty much impossible to summarise our entire skill set with a single title. Most designers will at some point have strayed away from their bread and butter. For example, I’ve delved into print design on a few occasions, with web design being my day to day job.

I think the most effective strategy is to create a company identity but not forget the importance of your name and title as a brand in it’s own right. By running both in parallel, you are casting the net over a larger number of potential clients and jobs. The smaller (project, budget and personnel) clients who prefer to work one to one and larger companies who like to think they’re dealing with a 10-strong design house.

On a personal level, I have spent the last year building up my personal brand. Thus, starting to look at the bigger marketing picture is my next step to gaining more clients and ultimately growing my business.

Additional reading

• Explain Yourself
• GRAPHIC DESIGNER VS. WEB DESIGNER OR NEITHER?
• What’s in a Name

I always (like, literally always) do this first:

This particular permalink structure has proven successful for me in terms of SEO, although my main reason for using it is I can’t stand the default WordPress suggestions. For instance, what does http://tomhirst.co.uk/?p=123 mean to anybody? It’s in no way descriptive enough.

I’m not sure why this is my first port of call, but it’s just one of those things my mind goes on autopilot to do. I guess it’s like driving to work everyday – something you do without thinking, as you know the route by heart.

So, what’s your first step when configuring a clean install of WordPress? Leave a comment and let me know.

After far, far too long with the standard one page site – I’ve finally had the time to give my portfolio a brand new look.

For reference and to anyone who didn’t see the previous design, click the screenshot to the left. It’s come a long way don’t you think?

I’m really happy with it and it’s great to finally see the finished product live. A fair amount of time has been spent on attention to detail; getting everything exactly how I want it without cutting any corners. Hopefully everyone will enjoy using it and reading my blog posts!

Let me know what you think! Constructive criticism is always welcome – so if you’ve got any suggestions, feel free to comment.