(Flickr image from mar00ned)

You know how there are those blogs that are updated regularly, and they have wonderful tutorials on everything? They keep you up to date with the latest trends. They have lots of regular commenters and a community of followers and evangelists?

Yeah. This isn’t one of those blogs. I barely have time to brush my teeth in the morning, and I certainly don’t have time to log in every evening and write something mega-awesome and valuable. Besides, there are plenty of those blogs out there and I encourage you to find them.

No, this is just a sporadic catch up with what’s going on with me. If I stumble across something I find useful then I’ll drop in a piece about it, and if you leave a comment or a question I’ll try to get back to you.

For a current run down on my brain, check out my Tumblog.

If you want a stream of my nonsense, I’m on Twitter.

If you want to read something useful, check out my articles for Think Vitamin.

And if you’re wondering about this lovely theme, it’s from WooThemes.

So hang around and enjoy yourself, but if this place is pointless then don’t blame me :)

rich

Here’s a sneak peak :)

“I would love to know how you do those header custom fonts …!!”

Well, without wanting to turn this blog into an episode of Why Don’t You I thought I should really answer this question on the blog so that others could have a read.

Custom Fonts, different options and the pros and cons

First of all, there has always been some debate on the pros and cons of using custom fonts. In the old days, when people used to use IE6… What? They still do? Oh. Okay, well a few years ago the only way to use custom fonts on your site was using images. Image replacement has got more sophisticated with CSS techniques, and there’s a comprehensive round-up of these techniques over at the marvelous CSS Tricks. However, this is still image replacement – in other words, you’re looking at a graphical representation of the text and not the text itself.

Another popular way to use custom fonts is the flash replacement technique, and sIFR is one of the heavyweights in this area. Until relatively recently this was the most popular way to get ‘real’ fonts on your page with only a couple of drawbacks – the (slight) increase in page load time, and the fact that some browsers are set up to block flash (adverts).

There is some truth that not everyone has Flash installed but to be honest I’m not that interested in supporting them. We’re talking about a handful of visitors a year and, like the 1% (or less) that have JavaScript turned off I simply can’t justify penalising the other 99%. Sure, make your site IE6 compatible, but don’t lose any sleep over supporting Flash or Javascript.

Which brings us nicely on to Cufon, which uses Javascript to display custom fonts.

Javascript? Fonts? How does THAT work?!?!

The special headings on this site (which is an open-source font called Chunk Five) are rendered using Cufon. For the techinically minded amongst you (and I don’t count myself in that illustrious bunch ) Cufon converts font paths to VML paths, stores this information as JSON (JavaScript Object Notation) and then renders the fonts using JavaScript. This is clever stuff, but we need not worry about the complex jiggery-pokery.

There are three (fairly) easy steps to WordPress custom font heaven with Cufon:

1. Choose a font, and upload it to the Cufon Generator
2. Let Cufon work it’s magic, and then download the new font .js file
3. Upload this file, and add a couple of bits of javascript to the of your page

Step One

Choose your font

Step one is easy enough; just place the TrueType/OpenType/Printer Font Binary/PostScript file(s) somewhere handy, like on your desktop. Now you may have downloaded these files from an free font library, or you may be copying them from your fonts directory, but you must consider the legal implications of using the font.

A word on the law

Do you own the right to use the font? If it’s a commercial font, have you paid for it? If you downloaded it from somewhere like DaFont you must check the licensing that accompanies the font. In short: keep it legal, kids.

If you’re not sure if you have permission to use your font then you might want to look at a service like TypeKit which I talk about below!

If you’re happy with your font then it’s time to upload it to Cufon, which you do over at http://cufon.shoqolate.com/generate/.

Step Two

Let Cufon work it’s magic

There are a few things to fill in, but they’re fairly straightforward. Let’s look at some of the common options…

To save space, and therefore page load time, only choose the styles that you know you’re going to use. For example, I didn’t use the Italic or Bold Italic typefaces for  this site which makes the font.js file that little bit smaller (and so load that little bit quicker).

Take your pick really. You may adopt a ‘kitchen sink’ approach and go for the lot (as above) or again just choose those glyphs you know you’ll need. There are further options such as ‘Latin Extended’ and ‘Russian’ but you probably won’t need these. Unless you Russian. Or Roman.

This is a really good idea. Restrict use to your own domain to stop thieves, squatters, and copyright issues!

Finally click the Let’s do this! button to download your newly created .font.js file!

Step Three

Upload and add some script

This next bit is entirely down to you – you’ll need to upload the .js file to your site somewhere, and make a note of the path. Let’s assume you upload ChunkFive_400.font.js to the www.example.com/js/ folder. We could include this file in a page using the following:

You need to to do the same with the Cufon file, which you can download from http://cufon.shoqolate.com/js/cufon-yui.js. Again, you’ll need to include this in your page like so:

Of course, you could change that path to wherever your Cufon .js files are located. We now need to add them to your site, by placing them somewhere in the section. If you don’t know how to do this, the easiest way is to enter your WordPress admin area, and go to Appearance > Editor. In the editor, select the file called header.php where you’ll find the head section, and problem see some other javascript files that are included. Just drop your two lines of code in there!

One final thing. You need declare which bits of your page to change to the new custom font. Again this is pretty easy to do. If you want all your heading tags to take on this new font you might use something like this:

You could even describe specific areas on the page using jQuery, like so:

This would make all text in take on the custom font. Cool :)

If you wanted, just take a look at the source code for this page – that might help explain things a little better!

Wp-Cufon

If that sounds too much like hard work, and it really shouldn’t, you could take a look at a WordPress plugin which does some of the heavy lifting for you. You can find Wp-Cufon at http://wordpress.org/extend/plugins/wp-cufon/installation/ but, to be honest, I encourage you to do this yourself because you’ll learn so much more about how Cufon works. In fact, even if you use the plug-in you still have to create the .js font file yourself.

font-face, Typekit and others

This post is already quite long enough, so I’m going to postpone looking at @font-face and Typekit for a later post. I’m going to postpone. Geddit?! I’ll be here all week…

This is a tutorial for beginners, and we were all beginners once.

To a beginner I remember custom fields looking quite pointless. I couldn’t quite grasp what they were for.

Then, after building a few WordPress sites, I watched an excellent tutorial from Chris Coyier over at CSS Tricks and it really opened my eyes. There’s a link at the bottom of this post to Chris’s excellent video series. And that link was generated using a custom field.

To whet your appetite, here’s an example of a search function I built for THET using custom fields. You can select from three options and then WordPress will search through all the posts custom fields until it finds a match.

That’s a really powerful way to harness WordPress custom fields, but we’re going to start with something a little easier.

The project

In this tutorial, we’re going to stick with something simple. All you’ll need is some basic PHP, together with feeling comfortable working with some WordPress files; specifically single.php which you’ll find in http://your-wordpress-url.com/wp-content/themes/your-theme/single.php.

To keep things both easy and hopefully useful, we’re going to create a couple of custom fields which display a credit and a link to a flickr image. I’m using it in this post! The image at the top of the field (custom fields, gettit?!) came thanks to a flickr user called innoxiuss. And if you scroll to the bottom of this page you’ll see a credit that looks like this:

Well that credit is generated thanks to two custom fields and a little bit of php code.

What is a WordPress Custom Field?

Okay. So think of a custom field as a bit of data. It can be anything at all, as long as it’s an alpha numeric string that can be stored in the WordPress database. So a custom field is not an image, it’s the URL of the image.

A custom field has two properties, a name and a value.

For example, the name could be image and the value could be www.yoursite.com/image.jpg.

But here’s the thing: it doesn’t have to make that much sense. The name could be fruit and the value could be apple. And as pointless as that looks, there are instances where that information could come in useful.

Let’s take the real world example of the flickr credit on the bottom of this page. There are actually two custom fields in there. The first is the flickr user and the second is the URL of the photo.

Name: flickr_attribute_url
Value: http://www.flickr.com/photos/innoxiuss/2665404220/

Name: flickr_attribute_name
Value: innoxiuss

How to add a Custom Field

Custom fields are added on the Edit Post page, and it looks like this…

If you can’t see it, then scroll to the top and under ‘Screen Options’ make sure that ‘Custom Fields’ is ticked.

All you have to do is click on the ‘Enter new’ link (in blue) and enter a name for your data under ‘Name’.

Next enter your data’s value under ‘Value’.

Finally, click on the ‘Add Custom Field’ button and you’re done. This is what it might look like…

You can add as many custom fields as you like, and on some posts I have over 20. Here you can see I’ve added two, making sure that the names are unique.

And that’s it. You now have two custom fields each containing a snippet of data.

But without rolling up our selves and getting our hands dirty with some PHP, this isn’t going to do a thing.

Adding the PHP

Here’s the code we’ll be using. Have a read through and see if it makes sense…

Okay, let’s take a moment to go through the code.

First of all, make sure you have created the custom fields in your WordPress post, and that you have the names of the fields exactly right. After all, if there’s no custom field data there’s nothing to do!

We check for the data in the first line:

We use the WordPress function get_post_meta to grab the value for ‘flickr_attribute_name’. If there’s no data there then this statement will be null and the if won’t run. If there is something in that custom field then the code will carry on executing.

But hold on a minute, what’s all that other stuff? Well, the get_post_meta function has the following parameters:

We set our $post_id as the current post using $post->ID. Our $key is the name of the custom field which is ‘flickr_attribute_name’. And finally we set $single to true.

What is single? If it’s set to true it returns a single result as a string. If it’s set to false it returns multiple results as an array. We’ll get on to arrays in later tutorials, but for now we’re going to keep it simple. We only have one value for our flickr credit so we leave it as true.

So now we know we have some data, let’s carry on with the code. We put our content in a DIV so we can style it to our liking

And we also create two variables with our custom field data in. The get_post_meta function works exactly as we described it above.

Again, note that we set the $single parameter to true, because we know there is only one bit of data. How do we know this? Well, in this instance it’s because we’ve set the custom field up ourselves in the WordPress backend.

Finally, we throw together the rest of the HTML, and close off the if statement.

Bringing it together

So we have our custom fields in WordPress and we’ve entered some data into them. We’ve also created the snippet of easy PHP which’ll read this data and display it on the page.

But where does it go?

Well, for this snippet I’ve chosen to put it on the bottom of the single.php page in the wp-content folder, as this is the page that displays single posts.

On my page it comes just before the section, which itself is just before the comments bit. But you could put it anywhere you want.

Just boot up your favourite PHP editor (I like Expresso on the Mac and, predictably, Dreamweaver on the PC) and type in the code.

Save your page, upload, and you should have a lovely flickr photo credit.

What next?

Don’t have flickr photos on your page? Well then this could be a bit pointless. But remember, this tutorial should just give you a basic idea of how custom fields work. Sure, you could have put this flickr information in the post itself but as we’ll see, we can do all kinds of funky things once we have the ability to search custom fields and display data based on their contents.

In the mean time there is some further reading below. Oh, and the further reading is displayed from data in custom fields!

Here’s a case in point. This is how the old search forms from one of the sites I work on (www.packyourbags.com) used to look:

(NB. The form on the left has the newer design icons, but the form elements themselves are the same as they were on the old site.)

The convention for search forms is to put text above or next to the form field, explaining what the field is for. So we have ‘Destination’ before the destination dropdowns and ‘Duration’ before the number of nights. It makes complete sense. It’s logical. It’s even usable. To an extent…

How the competition fares

But could it be better? I think so. So I went hunting for inspiration and, surprisingly, most other holiday websites follow this convention. In fact, many of the market leaders have awful search forms. Take these examples from Thomas Cook, On The Beach and Direct Line Holidays:

Yuk!

K.I.S.S.

How can we simplify this? How can we make it more usable. How can we encourage our users to search. If you look at any of the search forms in this post so far they do the opposite – they discourage casual browsing because they are, frankly, scary to look at. So many fiddly options. So much text. It’s worth noting that Direct Line do have a more options/less options toggle – which is a nice idea. I’m just not sure they’ve done it the best way possible.

The fundamental question then is: why do we need all the text?

If we’re on a holiday website, and a dropdown’s default value is ’7 nights’, isn’t it obvious that the dropdown is for the duration of the stay? If we’re on a holiday website and the dropdown says ‘Spain’ isn’t it obvious that it’s a dropdown for destination? And so on, and so on.

The ‘A-ha!’ moment

And that’s when it dawned on me. Remove the text. Keep the label tags but hide them with CSS (we still want them there for accessibility). It’s implied what each form field does. It’s obvious.  So I removed all the text apart from the adults, infants, and children bit:

Each form field is still clear, you can still tell what it does. I changed some of the text in the form fields, so ‘+/- 3 days’ became ‘give or take 3 days’ for example. It’s plain English. It’s simple. It does what it says on the tin. And, I’d argue, it’s easier to use and will (we hope!) encourage our users to browse more. We’ll have to wait a few weeks to get some stats which have any meaning, but the feedback so far as been positive.

Other things I changed included:

• Adding padding to each element, so the text can breathe inside it’s little box;
• Justified the width of the controls. Although if the date control was the same width as the destination control it would look odd;
• Added a light yellow (in-keeping with our brands strong yellow) to ‘pop’ the form elements off the page;
• Gave the calendar much bigger and bolder icon; and
• Introduced plain English in the controls to make them simple and obvious.

BTW – The reason I left in adults, kids and babies is because we want a default setting for adults – 2 – and so it needs to say ‘adults’ somewhere else. And as soon as we put an ‘adults’ label above the control we need to do the same for kids and babies just to maintain some consistency. It’s not perfect, but it’s not bad either. I’d welcome suggestions on how to improve this further!

A breakable convention

This is a big step, because it bucks the convention set and adopted by most of the other holiday sites. Conventions often exist for a reason, but I think this one needs to be broken. It may not be rocket science, and there are some much better looking forms out there, but in the context of our market (package h0lidays) we hope this new approach to search forms helps our user find what they want in less time.

Our search form is a work in progress, and there are many other areas on the site which we’re updating. I’ll share those with you, and the design process behind them, very soon.

Compare the old and the new

All the credit goes to Paul Denya for the answer, and Elliot Jay Stocks for the question.

EJS asked:

Does anyone know of a way (with PHP) to add an ‘alt’ class to every other <li> in a list? Like how WP does with comments.

(He did this over at http://twitter.com/elliotjaystocks/status/2688884863)

http://twitter.com/elliotjaystocks

And the answer came back from Paul.

<li class=”<?php foreach((get_the_category()) as $category) { echo $category->category_nicename . ”; } ?>”></li>

Clever yet simple – the hallmark of genius!

You can follow them both at @pdenya and @elliotjaystocks.

Thanks guys!

You need to install WordPress on a Windows machine running IIS. I’d never normally do this, but sometimes you just don’t have a choice.

There are plenty of links out there about how to do this, and the one I referred to most was How To Install WordPress on IIS 6.0. It is, more or less, straightforward.

However, there’s an issue with IIS and permalinks.The issue is that if you want to take advantage of the WordPress pretty permalinks, you have to suffer a folder in the path called ‘index.php’. So, instead of the rather lovely:

http://www.yourblog.com/yourcategories/the-best-post-in-the-world/

you have to grit your teeth and accept:

http://www.yourblog.com/index.php/yourcategories/the-best-post-in-the-world/

I don’t know why, I really don’t. I’m not that smart. But I did work out how to fix it. It’s easy enough, but you have to put a couple of rules in the ISAPI ReWrite Engine to deal with the quirks.

First we need to head into our WordPress admin tool, and go to Settings > Permalinks. There, you’ll see the craft insertion of /index.php/ in the links. We need to create a custom permalink and delete the index.php bit. Just like this…

Now save that off and head over to your .htaccess file – we need to weave some magic!

At the bottom of this post is the whole file, but the two lines I particularly want to point out are:

The second line works the juju. It takes the URL from the browser, shoves an /index.php/ into it, and displays the contents. For more on how and why this works, check out http://www.workingwith.me.uk/articles/scripting/mod_rewrite for the basics.

Now the first line is really important, because it tells the server not to do this if we’re in the admin section. If we remove this line, there are all kinds of problems reaching /wp-admin/index.php. Trust me.

I have two other lines in the following code which get rid of index.php from URLS, which stops the google duplicate content issue. They’re always worth having.

Finally, make sure that wherever your site is hosted, that the correct permissions are set on the wp-admin and wp-content directories and their sub-directories. You must have read/write/modify permissions set for internal user accounts.

If you implement these small tweaks, then your WordPress IIS install should work like a charm.

Good luck!

Here’s the code:

Thanks for watching, kids…

Not long after the first support act had finished, the murmurs of a Mexican wave started around the stadium. It was awesome to watch. Each time it went around it grew, until by the third or fourth loop almost everyone was standing up. Watching 80,000 people synchronize themselves, spontaneously, is really quite phenomenal.

How did it start? Why did it start? And why did 80,000 strangers join in – creating a singularity. A wave.

We are, I think, compelled to join. Ultimately we all want inclusion, not because of any misdiagnosed lack of self confidence (although we all suffer to some degree from that – except politicians). No. I believe we are compelled to be included, it’s inherent in our being. We want to join in, to contribute, to be part of something bigger than ourselves.

Isn’t that what a Mexican wave is? An expression of joy. A chance to be part of something bigger, whilst still retaining our own sense of identity.

It made me think about social media, and it’s explosion over the last few years. When Michael Jackson dies and the news is broken across Twitter moments after it breaks on TMZ. When CNN, the BBC and others quote Twitter feeds because it’s the quickest way to get comment and feedback. When we all turn to the internet or our smartphones for confirmation, not from traditional news sources but from trusted bloggers and Twitter accounts, you know it’s big.

And we all want to be a part of it. We’re compelled to. Although most people sign up to Twitter, tweet once, and then bugger off, the important part is that they do sign up.

They want to know what Twitter is. They want to be a part of it.

But because social media is so new, because this is such a new way of communicating (if you think that communication began with the grunt of a caveman), most people don’t quite understand what to do. And so they leave.

Is this a problem with Twitter? Possibly. I think they could redesign their sign up process to single out and hand-hold people who have no idea what it’s about. Twitter is the medium through which we connect, but like strangers at a party we’re often dumbstruck when faced with talking to people we don’t know. Here’s a question whose answer might make you a millionaire: how can we bridge that gap? How can bridge the gap between the technology that allows us to say hello, and actually saying ‘hello’?

Or look at this another way. Why do we want a bunch of followers we don’t know to listen to what we’ve got to say? Is it because it allows us to touch our own version of celebrity? How arrogant are we?!?! I have enough trouble keeping up with the few ‘real’ friends I have, let alone telling my Twitter followers what I’ve been up to. Is Twitter, like Facebook, a substitute for lazy friendship?

Maybe. Twitter, Facebook, email and even texting allows us to engage in one way communication without worrying about what the other person has to say. The great thing about these forms of communication is that we can reply when we want to, and carefully craft what we want to say (and how it’ll be interpretted). And yet Twitter brings us, almost, full circle. All these forms of communicaiton are in some way instantaneous, but Twitter as a form of communication encourages conversation in real time. It’s like text messaging on acid, and allows us to join conversations with people that share our interests – not necessairily close friends.

Many many many years ago, I wrote a paper on how the internet segregates people not by gender, race, religion etc, but by interest, by values. It segregates us by who we really are. In fact, segregates is the wrong word. It does not segregate, it unites.

And perhaps that’s the point of Twitter. It brings us together, because we are compelled to join in, and it brings us together with those who share our interests and values. They may not be our real friends, but then maybe we can have different types of friends. One type is no better or more valued than the other – we just need them at different times of the day, week, month, and our life.

We can all let our followers know what we’re up to, and even forward on useful links to other sites to each other. Some business have been successfully experimenting. Dell, for example, have made over $2m tweeting special offers. The company I work for tweets holiday deals, and we can accurately track how many are clicked thanks to bit.ly.

However, I experienced something new last week and it blew me away, despite it being simple and – dare I say – basic customer care.

I was having all kinds of problems searching for images on iStock. I’d search all media for a generic term like ‘holidays’ and I’d get no results at all. I thought this was a problem at my end, so I cleared cookies an restarted my browser.

But still nothing. iStock was, as far as I could tell, broken.

I tweeted my frustration, and shortly afterwards a Twitter buddy replied…

So, it was working for rishil. Or was it? Moments later rishil added…

Wow. So maybe iStock was broken. You’ll spot the time on that last tweet was 13:49 – 1:49pm GMT.

Also, notice that rishil is helpfully suggesting another stock photography website (dreamstime.com). This is, of course, bad news for iStock.

Less than 30 minutes later, this popped up:

Wow. Technically I guess it’s not that impressive. Sure, they must monitor every mention of iStock in tweets. But still – they found the problem (perhaps due to my tweet, perhaps not), fixed it, and then told me about it.

That is GREAT customer service. Think about how difficult that would be to replicate in the real world. Or would it? I bet you could do something similar for your customers if they were able to contact you the instant there is a problem.

Or, better still, that they knew they should contact you instantly if there is a problem.

It gets better. I thank iStock for their speedy response and they get back to me with:

A money off coupon may well be self-serving, but it’s these gestures that help build brand loyalty. Like I’m ever going to go to dreamstime.com! Or Shutterstock!

I sent them another thank you tweet, mentioning their great customer service, and iStock replied with:

I rest my case.

There are opportunities for all of us to use Twitter to connect with our customers in an immediate and helpful way. iStock used the system well, and have retained a customer. Not only that, but I’ve written this post about them!

Imagine the good will you could create by reaching out to your customer base and offering them just a little bit more than your competitors.

Twitter is not just good fun. It’s good business too.

]]> http://www.richardshepherd.com/twitter-customer-service/feed/ 0 http://www.richardshepherd.com/seo-fishing-or-hunting/ http://www.richardshepherd.com/seo-fishing-or-hunting/#comments Tue, 16 Jun 2009 18:09:44 +0000 richardshepherd http://www.richardshepherd.com/?p=558 A quick thought:

Search Engine Optimisation, in the wrong hands, can turn into fishing.

I had a conversation recently about generating a keyword rich page in a highly competitive space. Even if we didn’t get page one, or two, or three of Google, some people might find the site and then, perhaps, might decide to buy some products.

Really? Would they? Sounds like fishing to me. We’re dropping our bait into an incredibly busy river (there are LOTS of fishermen here!) hoping that a fish might not only see our bait, but also like it. Like it more than all the other bait they’ve seen already.

The first problem with this approach is that it is almost infinite. You could create ‘keyword rich’ (ooh, I hate that phrase) pages for all of your products and services, and their related phrases, and hope that some of them get noticed.

There’s no denying that this can and does work. It’s a tried and trusted formula for limited success. My main problem with it, however, is that it is not user centric. We are not asking the question, “what do our users expect to find when they search for that phrase”.

For example, if we were a tennis ball manufacturer we could create a page for the phrase “Wimbledon 2009″. Granted, some people searching that phrase might want to buy tennis balls – but the chances are they want information on the tournament. We could even include some wonderful keyword rich paragraphs about Wimbledon but, unless we’re Slazenger, it’s unlikely this text will be of value for the user.

Another example might be a car insurance provider optimising for ‘Toyota Prius’, because the person searching either  has a car or is about to buy one. Surely they’ll need car insurance at some point too? Maybe, but that’s not what they’re searching for!

I guess that doesn’t stop car insurers sponsoring motor shows, but isn’t a point of the online marketing that we can accurately target people and their interests?

There is also a (please don’t run away here) moral issue. Google is, in many ways, a victim of it’s own success. As SEOs try to keep up with the algorithm, and websites vie for a page one ranking, all kinds of SEO’d content is being created which can be of no use to users. What use is a visitor to you and your site? Vanity? Ego? Would you rather have 1000 visitors who don’t convert or 10 visitors who do?

How many results on page one of Google are directly targeting your search phrase, and how many have been SEO’d to appear there?

This, my friends, is fishing. If you have the time, go nuts. But there are far better things to do. Seriously. You need to get out more.

Throw away your rod, get up off the riverbank, and go hunting.

You know who your prey are – people who want to buy tennis balls. Optimise for phrases like ‘tennis balls’ and ‘buy tennis balls’ (or whatever your keyword research suggests). It’ll be much easier to get a good result on Google, and it’s likely you’ll enjoy much higher conversion rates.

So sling your shotgun over your arm and spend your SEO time more effectively. Don’t waste time competing with the BBC’s coverage of Wimbledon and settling for a page 3 or page 4 result. Go deep and long with your phrases and links, and (last pun coming up) your conversion rates will be an ACE.

That was shocking, I know.