Line In Web Design

The Comment Link Suggest-O-Tron

Simon — Mon, 06 Sep 2010 16:00:55 +0000

If you run a blog and you’re anything like me, you have a huge ego that needs to be fed regularly and there is nothing more nourishing than a long list of comments and responses to something intelligent, useful or insightful that you’ve published.

So how do you get your visitors to leave you a nice ~~meal~~ message?

With my nifty new plugin, the Comment Link Suggest-O-Tron!

The Suggest-O-Tron sits under your Edit Posts box and reminds, nay DEMANDS that you post a question or prompt to get people to start a discussion.

Suggest-O-Tron Suggestions

And, in case you can’t think of anything to write, it comes with a built in list of pre-written sentences scientifically proven* to increase the number of comments on your blog posts.

Comment Link Suggest-O-Tron Suggestions!

Using my patented** Comment Tag Builder™, you decide which words or phrases appear as links and the Suggest-O-Tron takes care of the messy task of building links.

Cleverly, the links it builds lead directly to the Reply area, forcing folks to fill out the form before they have time to focus.

Devious, yes, but when you absolutely have to have those comments, sometimes drastic measures are necessary.

Finally, in a fit of fantasticness, it also works in RSS feeds. This is valuable stuff, because there are no comments lists or reply forms in feeds. With this plugin’s direct linkage, however, people reading in readers will not miss out on the opportunity to leave a response!

Quick Summary of All the Awesome Things:

List of pre-written comment prompts
Ability to add and delete oft-used comment prompts to your list, saving you seconds on every post!
Automatically adds a link right back to your comments form
Works in RSS feeds, prompting people to click through back to your site
Ability to add basic formatting – bold and italicise it so it metaphorically grabs people by the scruff of the neck and throws them towards the Leave a Reply form
Knows whether you’re using the tags or not and only shows if you’re not. It’s pretty smart like that.

Simon! Simon! I want it sooo bad! How do I get it?

This sterling example of WordPress engineering is available for your downloading pleasure direct from its own page on the WordPress repository.

If you have bug reports or feature suggestions, I’ve created a page under my new Plugins menu item where you can ask for help or suggest improvements.

Here’s to many happy comment-filled posts!

*This might be a lie.
**It might not be patented.

Create a Quick Grassy Hill in Illustrator with the Crystallize Tool

Simon — Mon, 30 Aug 2010 16:00:01 +0000

Illustrator offers some very powerful tools for doing damage to your designs. In this tutorial, I want to show you how to quickly create a grassy hill using the Crystallize tool.

1) Start with a new document (Cmd/Ctrl + N), and give it a name. In a fit of originality, I called mine ‘Quick Grassy Hill’. Set the dimensions to 600px wide and 400px high.

2) Using the Pen Tool (p), sketch out a rough hill shape.

3) Select the Stroke in the Tools palette, then set it to none (/).

4) With the hill shape still selected, click on the Gradients panel, then click on the default gradient swatch.

6) Using the Gradient Tool (G), click and drag in the direction of the arrow to set the gradient angle and length to something like this. This will give it some appearance of light and depth, but if you want to make the hill look even better, you could use the Gradient Mesh Tool to create some curves on the gradientto give it a real 3D feel.

If I did that, though, it wouldn’t be a Quick Grassy Hill (maybe I’ll come back to it in another tutorial).

5) With the hill still selected, go back to the gradient palette and set the colours of the gradient to R = 0, G = 120, B = 0 and R = 0, G = 69, B = 0.

7) Now to make us some grass! Select the Crystallize tool, which is kept under the Liquify Tools.

8) Double click the Crystallize Tool icon to open up the tool options dialog. Here are the settings I used, but you might want to experiment for different types of grass:

If you want finer blades of grass, set the complexity and detail higher and the size lower.

9) Zoom in to the bottom left hand corner of the hill, then simply click and drag to start making grass. Do short sections, stopping to see how it’s going and if it’s not looking good simply Undo (Cmd/Ctrl + z) and try again.

Tip: Keep the center of the cursor (the little plus) within the green to prevent the tool pushing the blades of grass into the hill.

10) Keep going around the top of the hill until you’ve covered it in grass. If you’ve crystallized the underneath of the corners of the hill, simply grab the Pen Tool (p) and click the tips of the spikes to delete them.

And there you have your grassy hill, ready to be dropped into your designs!

If you enjoyed this, you might also like my tutorial on creating a 3d pipe using Illustrator’s Revolve tool.

Optimize Your WordPress Database

Simon — Mon, 23 Aug 2010 16:00:55 +0000

WordPress is an amazing publishing platform. Part of its greatness is how user friendly it is, with Revisions being a particular case in point. I can’t count the number of times that I’ve had to load up a previous version of a post to reclaim some literary nugget that I accidentally deleted in a fit of writer’s angst.

Unfortunately, in order to save me from myself, it has to use quite a lot of database space. Each revision means one more row in the Posts table, on top of the canonical version that you create every time you hit the Update or Draft versions. If you are like me and painfully obsessive about every single word, or you write epic 5,000 word posts, then that one post could have 20 or 30 revisions saved in addition to your working copy.

Multiply that by the number of posts on your blog, and it could quickly run up to the hundreds or thousands of rows.

Now, this isn’t a major problem because MySQL (the database that WordPress uses) is lightning quick and WordPress’ tables are very well structured. However, during the loading of a page WP has to run some pretty complex queries on these tables – cross-referencing posts, post meta, options and authors – and the speed of these queries is dependent on the size of the tables.

Larger tables means a longer wait for the results. On smaller blogs we’re talking milliseconds but as your blog grows it might start turning into a noticeable amount of time. If you have thousands of posts, then it could take a second or more to process.

Add this to the PHP code WP has to process, transmission of files, JavaScript to process and so on and suddenly your blog can seem sluggish and unresponsive.

So, as part of your maintenance and tweaking efforts, it’s worth considering doing a little bit of database optimization now and again to see if you can’t speed things up a little on the server side and, if you’re above 500 posts and have never done it, I’m pretty certain you’ll notice a significant increase.

Backing Up Your Database

Before we do any work on the database, it’s absolutely essential that we take a backup of it just in case. Remember, every time someone skips this step, somewhere a fairy dies.

1) Log into your CPanel account, browse down to PHPMyAdmin and click the icon to open it up

2) Once you’re in, select your blog’s database by clicking on the database name in the right hand panel (note: you might have more databases listed – make sure you choose the right one!)

3) Click on ‘Export’ along the top menu bar

4) Make sure that all of the tables are highlighted here (click Select All if you’re not sure) :

5) Check the box that says Save As File and then give it a name.

6) Click Go, and the browser ‘Save as…’ dialog will pop up. Save this file somewhere safe – I usually put it on the desktop while I’m working with it.

Deleting Your Revisions

Now that you have a copy of your DB saved somewhere safe in case of catastrophe, we can get on to the good stuff.

Step one is to delete all of your revisions from your wp_posts table. Note, I’m assuming that your table prefix is wp_. If it’s not, make sure you replace the wp_ with your table prefix in the following code (if you have no clue what I’m talking about, you can probably safely ignore this).

1) Still in PHPMyAdmin, click on the ‘SQL’ tab at the top.

Enter the following code in the text box:



DELETE FROM `wp_posts` WHERE `post_type` = 'revision'

WARNING: This will delete ALL of your post revisions and there is NO undo. Make super sure you want to do this (you have taken a backup right? I do worry).

Click Go

It may ask you if you’re sure. If you are sure, click OK.

Optimizing The Tables

Now that you’ve emptied the wp_posts table of all those excess rows, it’s time to let MySQL do its thing to optimize the table.

1) Click the big blue database name in the top left hand corner to go back to the list of your database tables.

On the right hand side of the list, there is a column called Overhead. This tells you roughly how much space in your DB you’ll save once you’ve optimized your tables. On some of my blogs, it was into the tens of megabytes. Not in this one, though. This one’s just for show.

2) Under the list, click on Check All

3) Select Optimize Table from the With Selected: dropdown list.

MySQL will think about this for a second, then give you the results of the optimization. The standard WordPress tables will all be optimized. If you’ve installed some plugins that have created their own tables, these may not have been optimized so don’t worry if you see messages saying that it wasn’t possible.

And that’s it! Wanted more steps? Sorry to disappoint.

All that’s left is to go back and reload your website to see if you notice a bit of a speed increase (results may vary).

For Kamikaze Bloggers

If you find that you never use the Revisions functionality, then you can choose to turn it off entirely to stop WP bulking up your database unnecessarily (I would also recommend setting this option if your site has more than 750 posts and pages).

To do this, simply open up your wp_config.php file and add the following line to the top of the file.



define('WP_POST_REVISIONS', false);

From now on, WordPress will stop keeping Post Revisions. That means no backups, sunshine. You delete the contents of a post by accident, you’re on your own.

Bonus Easter Egg Fun!

Since we’re talking about Revisions, check this fun little Easter egg out (if you’ve just followed the above instructions, you’ll need to wait until you’ve got some more revisions before this will work – simply leave a post open for a few minutes, then hit Update and you should have some to work with).

1) Select any post, then go down to the Revisions meta box and click on any of the links to open up the Revisions page.

2) Set the Old and New revisions to the same post.

Then click the Compare Revisions button…

Why I Love My Clients

Simon — Wed, 18 Aug 2010 16:00:47 +0000

You know the feeling. You open your email and there are 8 messages from your client, with the last one having a subject of ‘One other thing…’. It’s going to take an hour of your morning just to respond to them all. You open the first and it’s yet another change to the layout – the eighth one this week.

You ask yourself: Why do they have to be so unreasonable/difficult/demanding?

Looking at freelancing forums and blogs, it seems that this is a very common response. The ability to jump on a site and bash out your frustrations anonymously is altogether too tempting – especially when so many others are doing it.

I’m not saying it’s necessarily wrong – especially when some of the creative outcomes of this frustration are so hilarious – because it can get frustrating when things change constantly. But this is the nature of the work and, personally, I never want to be Ungrateful Moany Internet Guy.

As soon as I start to blame someone for something, I stop taking responsibility for my part in it. I stop being able to see that the situation was as much of my own creation as it was anything else and that there were many, many things that I could have done along the way to prevent this feeling I’m now having. As soon as I stop seeing that and focus solely on who else to blame, I’m no longer learning.

This isn’t to say that say clients can’t be unreasonable or awkward at times – they, like all of us, are human – but focusing on their shortcomings prevents me from seeing my own. And, goodness knows, I have plenty.

In the 9 months that I’ve been freelancing, I’ve dealt with my fair share of disasters – for example I’ve had my hourly rate go below minimum wage having stayed up all night trying to get the new features they just asked for in before the launch – but every single time I’ve been able to pinpoint where I went wrong with the process and improve it as a result.

If hourly rate drops below minimum wage, it’s because I didn’t charge enough. If I’m adding new features for free, it’s because I wasn’t clear about what was included and what wasn’t. If I’m sweating because they’re slow to pay, it’s because I didn’t ask for a deposit up front. None of these were the client’s fault – they, rightly, want what they were promised.

Since starting up, my proposals have changed massively. I now ask for a deposit up front and I host everything on my server until the fees are paid in full.

I also provide incredibly detailed lists of exactly what I will do and have a warning that anything not covered therein will be subject to an additional charge (in reality, I’ll usually let small additional requests slide in the interests of good relations). My fees now include administration and contingency time – I am awful at estimation and everything always takes longer than I think it will – and I am very conservative with my deadlines.

For the client’s part, they get what I hope to be an impeccable service. I deliver on time and on budget, communicate regularly and run a password-protected testing server with regular updates so that they can track the progress of the site from day 1. Not only do they feel more involved and can actually see the return on their investment grow over time, but we also get to nip niggles in the bud before they become major bugs.

With these safeguards in place, I can focus on doing the very best work that I can and respond positively to their requests without feeling like they’re taking advantage of me or that they don’t understand my ‘art’.

Perhaps I’ve been very lucky. Not only do I love the work I’m doing, but I’ve enjoyed working with every single one of my clients and, according to some of the lovely testimonials they’ve provided, it seems they’ve been happy with what I’ve done.

I don’t think that it’s coincidence that each one has come back for additional work and that I have never felt the need to jump online and join the mass whinging session.

I’m not saying that clients are perfect and we as designers or developers are always in the wrong, but when things head South it’s our reaction that will define us not only as professionals, but as individuals.

If we choose to see the situation as a curse or a challenge, we’re probably right.

Case Study: John H Watson MD

Simon — Mon, 09 Aug 2010 16:00:53 +0000

The client for this site contacted me again after I had finished his business website and asked if I could redesign his entertainment site. This site was a homage to Sherlock Holmes, but with a very creative twist – it was written as if the writer were Dr Watson living in the present day.

I love having the opportunity to do sites like these because they offer a lot of creative freedom. The brief was bashed out over a few late night dinners – my favourite kinds of meetings because they are always a bit of a creative free-for-all (and generally involve copious amounts of wine). Plenty of great ideas were thrown around and we both left very excited about the possibilites.

We eventually decided that the site should reflect the author’s circumstances and, of course, that meant basing it around the famous 221b Baker Street. The client supplied some great illustrations of the interior of the flat which gave me some fantastic ideas for little details that would appeal to the hardcore Holmes fan.

We finally narrowed it down to the design looking as if it were Watson’s journal on his desk and I set to work.

Research

The first thing I did was hit the library. Although the site features Watson writing in the present day, I still felt that it was important to keep to the Victorian aesthetic as that is the time period where the stories are set and would therefore more likely appeal to the target audience.

I found some interesting books on Victorian furnishings, with one picture standing out above all the others – an old, dark wood desk with a padded, green leather writing surface. This desk struck me as being most obviously Victorian.

Design

Using both Photoshop and Illustrator, I begun by recreating the desk based on the image. I located some wood textures and an amazing leather texture and then applied some filters and some shading to give it a more realistic look. The texture was originally brown, but I had to have it green so some adjustment layers were used to get the exact effect I was looking for.

One of the biggest problems I initially had was with the fact that there was no way of knowing how long the page would be. This meant that the majority of the page would have to use a repeating background. The problem with heavily textured backgrounds is that it becomes quite obvoious when it’s being repeated – especially if there are variations in brightness.

One solution is to have the repeating part so large (i.e. longer than the height of the average screen) so that it’s not obvious. However, this is totally impractical for the web as the file size for the image would be too much, taking the load time of the site to unacceptable levels.

It took a lot of experimentation to find the balance between repetition and file size, but I finally reached a compromise that I was happy with.

The Details

I couldn’t resist creating a magnifying glass for the search box – it was just too perfect an opportunity to pass up – some ideas just fit so naturally that it just had to be done.

The pipe was another obvious Holmes reference – I’ve written a tutorial on how to design a pipe that explains the exact steps used to create it.

The letters with the knife stuck through them was the most subtle element. Of course, in the novels the pile of correspondence is on the mantelpiece but, for this site, it has moved to Watson’s desk.

Hopefully the real fans will forgive the move and enjoy the reference.

The Launch

The client was very pleased with the final design. Ultimately, though, it is the users that decide whether or not it’s any good but, thankfully, this one seems to have passed the test.

Shortly after the launch, we noticed a 200% spike in visitors. Further investigation led us to a Sherlock Holmes discussion group where they had found this site and shared the link, along with some very nice messages, including this one:

It is lovely isn’t it? Someone has obviously taken alot [sic] of time in putting the site together. And it has paid off really well I think.

As a designer with the typical fragile ego, it’s very reassuring to have the approval of random strangers.

The Lesson

Ego stroking aside, it also shows how much of a draw a good design can be. The design led to nice things being said about the design which led to the spike in visitors.

However, it’s the content that keeps some of those visitors coming back. The design might draw people in, but if the content isn’t there to back it up then they’re not likely to return. Luckily, thanks to my client’s unique writing style and the clever twist, the content on the site was good enough to keep many of those initial visitors coming back.

Vist John H Watson MD.

Creating a 3D Pipe with Illustrator and Photoshop

Simon — Mon, 26 Jul 2010 16:00:42 +0000

We’ll be building the shape in Illustrator using the 3D Revolve tool before going into Photoshop to texture it all up using clipping masks and blend modes and layer styles and all that modern doohickory.

1) Before I start trying to create anything based on the material world, I always spend at least five minutes gathering some reference materials – especially for things that I don’t come in contact with every day. I’m not a pipe smoker, so I don’t have a real one lying around the house that I can use so I grabbed this photo from Stock Exchange instead. My memory is so rubbish that I don’t trust it to recall the important details of anything (anniversaries, birthdays, modern smoking pipe construction), so I always use a reference.

Instantly, I start to see little details that will help our design read better. The features that jump out at me from this image are the two different materials and the little lip at the smoking end.

2) In order to accurately recreate the pipe, we’re going to have to divide it into two parts. This is because we’re going to need to revolve the pipe around two different axis. Hopefully this screenshot will make the things a little clearer.

3) Got it? No? Me either. Not to worry, when in doubt, just start – trial and error are your friends.

Let’s grab our pen tool (p) and start roughing out the shape of the stem. You need to imagine that you’re cutting a slice out of the tube, then cutting that slice down the middle. To help you understand that nonsense sentence, an example: If I was going to make a sphere, I’d draw out a half moon and revolve it around the straight edge. Play with the revolve tool until you figure it out – don’t worry, it took me a while too.

Here is the shape of my stem – I used no stroke and a fill of #919191. I used this neutral grey because it will react better with the texture when we apply the blending mode in Photoshop. It doesn’t have to be perfect, as the 3D Revolve is an applied effect that can be edited or deleted later from the ‘appearances’ panel.

4) Using the pen tool again, we start on the bowl, again using no stroke and a fill of #919191. I made something like this. Hopefully you can see the half-bowl shape. I’m going to be revolving it around the small edge, if that helps you understand it any better.

5) Once you’ve created your shapes, select the stem and go to Effect -> 3D -> Revolve. Here are the settings I used for the stem:

6) And here are the settings for the bowl:

7) You’ll probably have to move the stem around so that it looks like it’s coming out of the bowl and not totally detached. This really is just trial and error (unless you smart folks know of a better way – leave a comment if you do). You have to click and drag with your mouse, then let go of the button so that Illustrator can re-render the object. Repeat until it looks something like this:

8) That’s looking pretty pipe-shaped! All right, go get a coffee before we move on to the Photoshop stage – you’ve earned it.

Got one? Great, now let’s make it look more real. Shift + click both paths to select them within Illustrator and then hit Ctrl/Cmd + C. Start up Photoshop and open a new document. The size of the clipboard image will already be set, but because it’s going in as a vector, you can have it as large as you want. My document size was 700px x 400px (increase the size/DPI if you’re planning to use it for print). Go to Edit -> Paste (or hit Ctrl/Cmd + V) and Photoshop will ask you how you want to import it. Select Smart Object and then OK and it’ll come in with a bounding box around it.

I made mine a little smaller (remember to hold shift to constrain ratios) because I like to have a little breathing room around my images, and then I confirm the transformation.

9) Name this layer ‘Pipe Original’, then duplicate it, lock it and hide it (I like to use non-destructive editing techniques – including keeping originals intact – wherever possible. This is just in case we decide to go back and edit the original pipe in future. Rename the duplicate ‘Pipe’, then right/ctrl + click this layer and select ‘rasterize layer’.

10) Grab your favourite wood texture (I used the 4th one of these free wooden textures) and place it on a layer above the rasterized pipe. Call this ‘wood’ and resize it so that the texture’s scale matches that of the pipe. I also rotated mine slightly so that the grain is parallel to the stem. Alt + click the line between the two layers to apply a clipping mask. Finally, change the ‘Wood’ layer’s blending mode to Multiply. Boom! 3D wood.

11) Select the Wood layer and click on the layer mask icon. Make sure your foreground colour is set to black, then get a big, hard brush – make it big enough that the edge of it follows the curve of the wood nicely. Ctrl/Cmd + click the small image on the Pipe layer within the layers panel to select it, then line it up between roughly half way between the bowl and the tip of the stem and click once. Finally, paint away all the wood between the tip of the stem and edge you just made, like so:

12) Ctrl/cmd+click the Pipe layer icon, then Ctrl/Cmd+click the LAYER MASK image on the on the Wood layer, then press Ctrl/Cmd+shift+i to invert the selection. Create a new layer, then select the fill tool and click once within the selection – it doesn’t matter what color you use. Rename this layer ‘Plastic’.

13) Drop the ‘plastic’ layer’s fill to 0, then double-click the layer to fire up the layer styles. Select gradient overlay and make something similar to this:

Make sure that you set the Blending Mode within the gradient style layer style, NOT on the layer itself, or else it won’t work right.

And there you have it! A realistic, 3D pipe to use anywhere in your illustrations

How To Use Dreamweaver CS5′s New Site-Specific Code Hinting

Simon — Mon, 19 Jul 2010 16:00:12 +0000

The new version of Adobe’s successful CS series of creative products has just recently launched and Dreamweaver has received an extensive upgrade full of exciting new features for WordPress developers. For a long while, I was content using Notepad++ to do all of my development but, after switching to a Mac, I thought I’d give DreamWeaver another go and this new version has been well worth it.

About Site Specific Code Hinting

This has to be my current favourite new feature. Often times, I’ll find myself developing away from the internet on a local server. The WordPress Codex is a fantastic resource but, unfortunately, it’s all online. Site specific code hints have been a lifesaver. Not only do they save typing time, but they also remind you what arguments a function takes and tell you where in your site tree that function is located.

WordPress’ code is well commented, so sometimes looking up the function in its original file can provide all of the information I need to continue developing (and it sometimes has a lot more information than the Codex). Of course, you could use the site-wide search that has been available in DreamWeaver for many years, but that doesn’t tell me whether or not a function actually exists or whether I’ve just made it up (it happens more than you’d think).

These code hints aren’t limited to WordPress, either. There are defaults available for Joomla and Drupal as well but, better than that, you can actually have it search recursively through your programs and create code hinting from your own functions!

Using Code Hints

Using Site Specific Code Hinting is easy. If you’re looking to use one of the default sets (currently Wordprss, Joomla and Drupal), you first need to set up a site and add a PHP server.

I do all of my development offline on a local testing server using MAMP on the Mac. MAMP stands for Mac Apache MySQL PHP, and is basically an Apache web server in a box. It’s very easy to install, set up and use. Equivalents are available on other platforms – WAMP is available for Windows and you can just install a regular LAMP stack (using apt-get on Ubuntu or Debian, or simply install XAMPP) in Linux

Once that’s done, you’ll need to define your site.

Go to Site -> New Site…
Fill in your site’s name and the location of the files on your hard drive
In ‘Servers’, click the ‘+’ sign to add a new server
Name it whatever you want, then change the Connect using: to ‘Local/Network’
The Server Folder is your web root – usually ‘htdocs’ or ‘www’ – and the installation of your local testing server should have told you where it is on your drive. Put that location in this box.
The Web URL is how you access your site through a browser. This usually defaults to ‘localhost’ (e.g. http://localhost/)

To use Site-Specific Code Hints for a WordPress site, simply go to the Site menu and click Site-Specific Code Hints....

Select WordPress from the Structure: drop-down list and hit OK. Now, open a file and start typing a WordPress function and you should get the hint from that function:

Defining Your Own Sites

It gets better, though. If you’re developing your own site or PHP application, then you can set up your own structure and have it scan through and create code hints for your functions! Let’s take a look.

Here’s a very basic folder structure:

index.php
- includes/functions.php

I’ve defined a nonsense function in the functions.php, and I want to be able to access the hinting while I’m coding away in index.php. Go to Site -> Site-Specific Code Hints... and select New from Blank from the drop-down menu.

Click the ‘+’ sign next to File(s): and then click the folder icon next to File/folder:

Choose the folders you want to include (in this case ‘includes’), and then click Add. If you have nested folders, then click on the folders in the window and make sure that you check ‘recursive’. It will then search through all of the subfolders.

Click OK and it’ll ask you if you want to save it as a custom structure. If it’s a structure you use a lot in different sites, then it’s probably worthwhile – otherwise, just hit cancel.

You should now have access to the defined function and if I go to index.php and start typing the name of the function, I get this:

Of course, there are a bunch of other great new features like Live Preview and the updated CSS panel, but the new code hinting feature is definitely the one I’m using the most. I hope you’ve found this useful – if you have, consider sharing it or subscribing to my RSS feed or to my mailing list.

How We Got Over 8,000 Visits In Less than Three Months

Simon — Mon, 12 Jul 2010 16:00:22 +0000

The launch of Never Ending Voyage was one of our most successful website launches to date, receiving over 8,000 visits and over 5,000 unique visitors in its first three months. Our site was launched on February 19th 2010 and the image above is a picture of our Analytics account for those initial months (until May 18th 2010).

We launched with one post and a posting schedule of 3 a week (which we managed to keep to until we ran out of internet in Paraguay!) and we’ve been fortunate to have over 470 comments in the four and something months we’ve been live. We’ve also managed to earn some income through affiliate sales which has paid for the hosting costs for all of our sites for the year. Not bad for such a young site!

There are many possible reasons why it has been so successful, but I’d like to share what I think are some of the major contributing factors.

1) Unique Design

Design matters, it’s as simple as that. Well-designed does not have to mean lots of fancy graphics and crazy animations, but it does mean something that is easy to read and navigate and that stands out from the crowd.

We’ve had a lot of very nice things said about the design of the site. I’m sure it gives us an advantage over other travel sites that use free (or even premium) themes on their blogs in that it’s unique and recognisable.

2) Quality Content

My partner wrote a number of very in depth, high quality articles about selling all of our possessions and about saving money for travelling. She provided lots of details on how we did it and what worked and what didn’t and they proved to be very popular, getting shared around the web and ReTweeted on Twitter.

Of course, now the bar has been set we have to maintain that quality!

3) Regular Posting Schedule

We have been religious about updating the blog and I think that it does make a difference in keeping the site talking about – especially in the early days. Perhaps after a certain tipping point, the site will have enough momentum that regular updates are no longer as important, but in the beginning I think it’s important to show your commitment.

4) Social Media

My partner was incredibly active on Twitter from the outset, asking and answering questions and getting involved in the travel community. She has built up a following of nearly 600 people through her constant engagement and, as a result, Twitter remains one of our top 5 traffic sources.

Note that the important part here is engagement. You absolutely have to get involved and it has to be inolvement beyond the spammy ‘come and look at my site’. Chat to people, help them out, ask questions, make conversation – give freely of your time and effort and you’ll get it back in spades.

We also have a Facebook page, a Flickr account, a YouTube account and a Vimeo account to make sure that we’re in as many relevant places as we can actively keep up with.

5) Unique Story

Although I don’t think you need to sell all of your stuff and travel indefinitely to have a successful blog, I do think that having a unique story has helped. Many people go travelling for 6 months or a year, but the longer the travel period the less people there are blogging about it.

It’s been a great start and our visitor numbers continue to grow and there have been many lessons learned from this launch which I’ll be applying to all future launches.

Why You Should Be Tracking Your Conversions

Simon — Mon, 05 Jul 2010 16:00:26 +0000

Ask me what the most important aspect of a website is and I’m likely to reply ‘Conversion Rate’. I believe it’s even more important than visitor numbers and I would rather have a high Conversion Rate than a high visitor count (of course, having both would be best of all!)

Of course, you need to have a certain number of visitors to begin with, but even 100 visits is enough for you to start to see which aspects of your site are working.

What Is a Conversion Rate

Basically, it’s a number – usually expressed as a percentage – that tells you how many people are doing what you want them to do when they land on your site.

Everyone who has a website wants the people visiting it to do something on it – even if that’s just reading some content. Most actions that users take on your website can be measured (although there is one key thing that can never be measured by Analytics – we’ll come back to that later) and anything that can be measured can have a goal assigned to it.

Your Conversion Rate tells you how successful you are at achieving your goals. The most obvious goals are for eCommerce sites – making sales.

An Example

Bill and Steve both have online shops selling Flaming Death Skull t-shirts. The black shirts, adorned with a fetching bloody skull on fire motif, retail at $30 each. Bill is receiving about 200 visits a month and has a Conversion Rate of 1%. Steve is receiving about 50 visits a month, but has a Conversion Rate of 10%. Who’s doing better?

In terms of traffic, Bill. No question. But basic math shows us that, financially, Steve is doing much, much better, earning $150 a month against Bill’s $60 despite Bill have four times the traffic.

Although I’ve used a financial example here, the priciples can be applied to almost anything. Here are a few other things that could work as goals:

Number of comments
Number of pages visited
Time spent on your site
Mailing list sign ups
Number of repeat visits
Brouchure requests
Number of visits from a particular keyword
Downloads
Uploads
Number of phone enquiries (a little harder to track, but still very possible – for example, by using a website specific phone number)

This Sounds Great – So How Do I Work It Out?

Of course, in order to know if you’re reaching your goals you need a way to measure all of this stuff. Thankfully, the benevolent Google (All Hail!) has bestowed on us humble netizens an incredibly powerful (yet totally free) tool to help us – Google Analytics.

Installing Analytics is straightforward – you need a Google account and, once you’ve signed up, you just drop a small chunk of JavaScript at the foot of every page you want to track (that’s all of them) and then you sit back and let it collect the data. It’s very easy and there are plenty of tutorials out there, but if you need a hand setting it up, feel free to get in touch and we’ll work something.

Now you have your goal and your data, working out your Conversion Rate is simple mathematics. Analytics actually includes quite comprehensive support for goals that works out your Conversion Rate automatically within the program itself, but since that’s a fairly advanced topic we’ll start by working it out for ourselves.

Note: I’ll be writing more in-depth articles about using Google Analytics in future, so sign up to my RSS feed or email mailing list to make sure that you don’t miss them.

Let’s suppose that your goal is to get comments. You can work out your overall Conversion Rate by simply dividing the number of comments (spam comments don’t count!) by the number of visits and multiplying it by a hundred. If you had 4,000 visits in one week (hurrah!) and 200 comments, then your Conversion Rate for comments is ( 200 / 4000 ) * 100 = 5%.

That’s actually a really great rate – figure on 1% being an average rate. Of course, this varies wildly depending on what you’re doing, but as an extremely rough starting point it’s not too bad.

Note that we have barely even scratched the surface of what Analytics is capable of in the right hands. It can tell you where people are coming from, how long they’re staying, what they’re looking at and even what they’re clicking on. You can also have it work out all of your Conversion Rates automatically for up to 20 different goals. The trick, however, is not to focus on the numbers (or metrics) but on what the data tells you (it’s all too easy to get hung up on visitor numbers when, as we’ve seen, that’s not really what counts).

OK, I Know My Conversion Rate – Now What

If it’s a good rate then now is the time to start increasing traffic! Use the methods you’ve been using but increase their effectiveness. For example, if Twitter is getting you good traffic that converts, then increase your Twitter activity. If commenting on other blogs is helping, do that more. If certain keywords are bringing you traffic, schedule a few more posts around those words.

If it’s a poor Conversion Rate, then you need to fix it first! Throwing traffic at a bad (or non-existent) rate is a waste of your time and your bandwidth because no one is engaging with what you’re doing. There are potentially many reasons for this.

We’ll assume that you’ve taken care of the basics – you have a great looking site that functions well and is full of top quality content – but, even still, users aren’t engaging. Unfortunately, we rarely know through Analytics the most important reason why users aren’t getting involved but this doesn’t mean that we can’t do anything about it.

That Important Reason

So what is this mysterious thing that all of this data cannot tell us?

User Intention.

We rarely know why a user is visiting a website. You can guess and conjecture all that you want but the fact is that, until you ask them, you’ll never be totally sure. Even if you ask them, they may not tell you the full story (‘I was on that porn site for research purposes! Honest!’).

There are ways to ask users why they visited your site, such as surveys, but even these won’t often give you the full picture because (apart from the innocent mistruths), the people that generally respond to surveys will be at the emotional extremes – incredibly happy or incredibly annoyed, for example – and may not be representitive of the majority.

So what can you do?

Test. Testing is the best way to find out what is engaging your users. Using your Conversion Rate as your baseline figure for measuring how successful your tests are, you can tweak and change to see what things will help you engage your users more.

For example, if you change the headline on your main sales page, does your Conversion Rate increase or decrease? How about if you change the main picture? What about floating it to the left or the right? Of course, the naysayers will say that they ‘know their users’ and that their users aren’t dumb enough to be swayed to change by the simple placement of a picture.

The savvy, however, will never be arrogant enough to assume and will test to find out for sure (and then they will, very often, be surprised at the results).

Obviously, this is a very brief introduction into the deep and wide world of Analytics and conversion. I’ll be exploring various topics in more detail in future posts, so sign up to my RSS feed or email mailing list to make sure that you don’t miss them!

How To Upgrade To WordPress 3 Safely

Simon — Mon, 28 Jun 2010 16:00:05 +0000

The recent release of the world’s most popular blogging platform has seen some huge additions, including the ability to add custom Post Types and custom Taxonomies, and support for multiple blogs.

Other improvements include support for custom stylesheets to style the post and page editors. What this means is that what you see in the editor more closely resembles the final product.

To take advantage of these amazing new features, you’ll need to upgrade. Upgrading your current version of WordPress to the new version is pretty easy and all of the core functionality should just continue to work as normal and you shouldn’t lose anything.

However, there have been reports of bugs in some plugins and themes after the new version has been installed, so some care should be taken.

WordPress recommends that you have a complete backup of your site before you attempt to upgrade, just in case the worst happens. In this post, I’m going to walk you through the steps of backing up your WordPress install before upgrading.

Prerequisites

There are a few thing that you should have to hand before starting:

Webhost control panel login details – note that I’m assuming that you’re using CPanel, but the steps should be similar on other providers like Plesk
Database name – this is the name you gave your database when you first setup WordPress. If you’re not sure you can use the CPanel file manager to browse to the root directory and open up the file named ‘wp-config.php’ – the database name is in there.

There are two main parts to a WordPress install, the files and the database. Both should be backed up prior to upgrading. The good news is that, if you’re host is using CPanel, both these jobs are relatively straightforward.

Backing Up Your Database

Note: There are plugins that handle database backups available as well, but I won’t be discussing them here.

1) Log into your CPanel account, browse down to PHPMyAdmin and click the icon to open it up

2) Once you’re in, select your blog’s database by clicking on the database name in the right hand panel (note: you might have more databases listed – make sure you choose the right one!)

3) Click on ‘Export’ along the top menu bar

4) Make sure that all of the tables are highlighted here (click Select All if you’re not sure) :

5) Check the box that says Save As File and then give it a name.

6) Click Go, and the browser ‘Save as…’ dialog will pop up. Save this file somewhere safe – I usually put it on the desktop while I’m working with it.

Backing Up Your Files

If you’re using CPanel, the quickest way to get a copy of all of your files is to backup your home directory.

1) Log into your CPanel account and browse to Backups.

2) Under Download a Home Directory Backup click Home Directory.

3) The browser ‘Save as…’ dialog will open. Again, save this file somewhere safe in case you need it. Note that it may be a very large file – perhaps hundreds of megabytes – depending on how many photos and things you’ve uploaded.

Upgrading WordPress

Now you have a backup of the database and files, you can get on with upgrading.

1) Log in to your WordPress Admin panel.

2) Go to Upgrade

3) click Upgrade Automatically. WordPress will download and install itself.

4) After installation, you might be asked to do a Database upgrade as well. Make sure that you do this.

5) Return to the Upgrade panel, and make sure that you upgrade all of your plugins.

6) You’re done! If everything’s gone smoothly, you should be running the latest version of WordPress. If something’s gone wrong, don’t panic. Go down to ‘Copying Your Upgraded Database’ below and follow the steps.

Disaster Recovery!

If something goes horribly wrong, don’t panic! All you need to do is restore your database and files and you should be all set. Once again, CPanel makes this easy.

Restore Your Files

1) Log into CPanel and click on Backups

2) Click on Restore A Home Directory Backup

3) Remember that entire home directory backup file you downloaded? The really huge one? Click Browse and go find it.

4) Click Upload, then go make yourself a cup of coffee – this might take a while

Restore Your Database

1) Log into CPanel and browse to PHPMyAdmin

2) Select your blog database

3) Check the Check All button to select all of the tables

4) Choose Drop from the drop-down menu labeled With Selected: . It’ll ask you if you’re sure you want to do that. You are (you DO have that backup, right? Triple check before you hit ‘Yes’)

5) Click Import along the top row, then click Browse...

6) Find the database file you downloaded earlier (it should have the file extension ‘.sql’), select it and then hit OK

7) Click Go and wait until you get the confirmation screen – if everything executed successfully, you can now close that down – that’s your database restored.

And that’s it! With any luck, your blog should be back to how it was before the upgrade!

If you still don’t feel very confident and would like some help in updating your WordPress Site, then please get in touch.