Keith Devon

Menu

Category: articles

Thoughts on WordCamps

I’m feeling inspired, confident, connected, and very very tired.

I’m on the train home from WordCamp London 2019.

Recently, I’ve seen some tweets and heard people talking about how they don’t go to WordCamps anymore – or that giving talks at them is a waste of time.

Everyone has their own reasons and motivations for attending, or not attending. Everyone has their own unique experiences of an event. I’m not here to say that anyone is right or wrong.

WordCamp ROI

It can be hard to make a business case for attending – I get that. Unless you come away with a handful of strong leads then maybe the direct return on investment (ROI) doesn’t measure up well.

But WordCamps and other conferences are much more than what you can measure. The benefits are, in my experience, largely intangible.

I’ve had countless conversations this weekend. Some with people that I know well and see often. Some with people I met at events years ago. I also met a whole load of lovely new people.

Will any of these lead to more work? Possibly, maybe not – I don’t really care.

So what are some of the reasons that I would pay for travel, accommodation, sponsorship and be away from my family for a weekend?

Inspiration

It’s so easy to get stuck in a rut at work. You build up processes and get familiar with certain tools and technologies.

Events can be a great way to find new ways of working and thinking.

I’ve seen things that people are doing with WordPress and with their businesses that blow my mind.

I feel empowered and inspired to get back to work and build bigger and better things.

Confidence

Often, work can feel overwhelming. Running a small WordPress agency means that I’m (jointly) responsible for making important decisions about the direction and current function of our business.

One thing that nearly every event has taught me is that we’re doing a pretty good job.

Once the veil of social media is removed, you find out that other business owners and developers are often experiencing the same trials and tribulations as you are.

The people who appear to have it all figured out are just humans with fears and worries, and who sometimes make mistakes.

Connections

As a remote worker, it can be difficult to feel truly connected to the community, and even your own colleagues.

In an over-connected world, people are feeling more and more isolated.

Events like WordCamps are a great opportunity to build and maintain those real human connections that are so vital to our well-being.

It’s also a chance to talk shop without people’s gaze drifting and eyes glazing over. It’s a rare treat to get to talk to people as passionate about our industry as I am.

Fun

I’m a husband, a Dad and a business owner. Sometimes life is so busy and tiring that ‘fun’ is hard to come by.

Getting away for a couple of nights, having a few beers and not worrying about childcare, chores, etc. is a very special treat for me! It’s a chance to reset, recharge and let my hair down a bit.

But right now I’m tired and I can’t wait to go home.

Thanks to all of the organisers, volunteers, speakers, sponsors and attendees for creating such a wonderful event.

I’m not sure what the financial ROI will turn out to be but I know that emotionally it has paid for itself many times over.

See you all again next year?

Keith

This is my personal blog, which I’m going to try to use more. If you want to know more about my WordPress development work you can do so on the Highrise Digital site.

How (and why) to use Schema.org on your WordPress website

Search engines have a big problem. There is so much data out there and it’s hard to work out what is what.

Humans are great at inferring the context of web content, but this is much more difficult for Google, Bing, Yahoo!, etc..

That’s why the biggest search engines have come together to create a standard way to add structured data to your website. What they have created is called Schema.org. In their words:

Schema.org is a joint effort, in the spirit of sitemaps.org, to improve the web by creating a structured data markup schema supported by major search engines

https://schema.org/docs/faq.html#0

Why you should be using Schema.org markup

You’re probably still wondering why you should take the time to add Schema markup to your website. The simple answer is that it will probably improve your search traffic. Google, and other search engines, want to display the most relevant search results. If it’s clear what your web page is about, then it’ll have more confidence in it’s relevance. Here’s what they have to say on the topic:

These projects help you to surface your content more clearly or more prominently in search results.

https://schema.org/docs/faq.html#9

Google back this up on their website:

When your web pages include structured data markup, Google (and other search engines) can use that data to index your content better, present it more prominently in search results, and surface it in new experiences like voice answers, maps, and Google Now.

https://developers.google.com/structured-data/

While Google won’t come out and say that using Schema.org will definitely have a positive impact on your search rankings, they don’t deny it either (see their ambiguous answer here: https://www.youtube.com/watch?t=57&v=OolDzztYwtQ). But what they do say is that it’s likely to help your content to be presented more prominently, which is often as part of rich snippets (I’ll explain these below).

While using Schema.org markup may not improve your search rankings (yet!) it will help to give your content more prominence on search results pages.

Is everyone using Schema.org markup?

In my experience Schema.org markup is still underused. There are clear benefits, yet adoption seems to be slow. In fact a study by searchmetrics in 2014 found that only 0.03% of domains tested had Schema.org integration.

THIS IS A GOOD THING! It means that you can easily get ahead of your competitors instead of always playing catch-up.

Don’t just take my word for it. The SEO experts over at Moz agree…

If someone told you that there was a quick and easy way that many of you could improve your SERP CTR for minimal effort, you’d all stop in your tracks and give them full attention. Yet, Schema.org and rich snippets are still horribly under-utilized.

http://moz.com/blog/schema-examples.

Schema.org and rich snippets

Let’s have a look at how the search engines are using Schema.org data today. The most visible examples are reviews. Search for “cube agree gtc reviews” (it’s a bike) in Google and you’ll get something like this:

Search results page for bike review

See all of those stars? These are what’s known as “rich snippets”. That content is being pulled from Schema.org data. How do I know? Let’s have a look at the code.

The top result is from cyclingweekly.co.uk (a site I worked on). If we click on that link and inspect the code we can see this:

Cycling weekly review code

Can you see the itemtype="http://schema.org/Rating"? That’s the markup that has been added to give context to the content. The rating itself is defined by the meta tags below, also with Schema.org markup.

Let’s look at the BikeRadar code (the third search result) to see if they are using it too.

Bike Radar review code

Yep! There it is again. I don’t think there’s any coincidence that these two websites are at the top of the search rankings. Don’t get me wrong, there are other factors at play, but clearly Google is making use of this data to provide relevant search results.

I’m sure you don’t all have review based websites, so let’s look at another example. Here are the top search results for “Kawehi tickets”:

Search results for Kawehi tickets

Google knows the date, and venue of the next three events near me. Again, these sites are using Schema.org markup.

Reviews and events are just two common uses. Some of the other prominent uses are:

I bet some of you are thinking “none of those apply to my business”. You might be right, but there are other Schema.org ‘properties’ that you can use.

LocalBusiness

https://schema.org/LocalBusiness

You can add markup that explains your business. This is perfect for smaller local businesses, or local branches of larger organisations. Some of the data that you can pass include (but not limited to):

Blog and BlogPosting

If you’re using WordPress there’s a good chance you have a blog on your website. Schema.org provides Blog and BlogPosting properties that you can use to add structured data to your posts. You can add:

  • Headline
  • Text
  • Date published
  • Author
  • and a lot more

Adding Schema.org markup to your WordPress website

Because Schema.org markup is so closely integrated with your site content and code, it’s not always an easy addition to your site.

There seem to be some plugins that claim to help, https://wordpress.org/plugins/tags/schemaorg, but I don’t have any experience with those, and I’d question how exactly they can know where that data is within your theme code.

Another option is themes with Schema.org baked in. These are most commonly directory style themes.

Finally you could ask your developer to add some schema markup to your theme where you think it will be appropriate and useful. It actually doesn’t take long to add the appropriate markup, so shouldn’t be too costly, and it will avoid having to add yet another plugin.

Schema.org markup for a blog post

Let’s have a look at one of the most useful implementations of Schema.org markup – blog posts.

If you visit https://schema.org/BlogPosting you’ll see a long list of potential properties to add. I’m going to focus on the basics here, you can always add more depending on your content.

The first thing to do is to define the scope of your blog post as a ‘BlogPosting’. Your post might start like this:

<article itemscope itemtype="https://schema.org/BlogPosting">

Now let’s start adding some of the basic properties. Firstly, let’s add the ‘headline’. You can do so like this:

<h1 itemprop="headline"><?php the_title(); ?></h1>

Next we’ll add some of the post meta data, starting with the published date.

<time pubdate itemprop="datePublished" datetime="<?php the_time( 'c' ); ?>" content="<?php the_time( 'c' ); ?>">

<?php the_time( get_option( 'date_format' ) ); ?>

</time>

We could add more microdata here, like ‘pubdate’, but I’ve left that out for the sake of simplicity.

Tags and categories can also be given the Schema.org treatment:

<div>Categories: <span itemprop="about"><?php the_category(', '); ?></span></div>
<div>Tags: <span itemprop="keywords"><?php the_tags(''); ?></span></div>

We can also mark up the author information. Google has recently removed it’s ‘authorship’ rich snippets, but this data could still be used in the future.

<div itemprop="author" itemscope itemtype="https://schema.org/Person"><img itemprop="image" src="<?php echo get_avatar_url( get_avatar( get_the_author_meta( 'ID' ), 150 ) ); ?>" />
<span itemprop="name"><?php the_author();?></span>
</div>

I’ve used a custom function to get the author avatar URL. The code is from this WordPress Development question.

The last bit of Schema.org markup that we’ll add for now is the actual content of the blog post. This one is easy:

<div itemprop="text"><?php the_content(); ?></div>

The complete code would look something like this:

<article itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline"><?php the_title(); ?></h1>
<time pubdate itemprop="datePublished" datetime="<?php the_time( 'c' ); ?>" content="<?php the_time( 'c' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>

<div>Categories: <span itemprop="about"><?php the_category(', '); ?></span></div>
<div>Tags: <span itemprop="keywords"><?php the_tags(''); ?></span></div>

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<img itemprop="image" src="<?php echo get_avatar_url( get_avatar( get_the_author_meta( 'ID' ), 150 ) ); ?>" />
<span itemprop="name"><?php the_author();?></span>
</div>

</header>

<div itemprop="text">
<?php the_content(); ?>
</div>

</article>

Does your site already use Schema.org?

If you’re wondering if your theme already has Schema.org (or other structured data) this is a brilliant tool: https://developers.google.com/structured-data/testing-tool/.

Closing thoughts

In my opinion structured data, including Schema.org is going to become more and more important. As the internet gets bigger search engines will have more content to sift through, and will have to deliver it in new ways. If your content is well structured, you’ll be at an advantage over your competition.

If you have any questions about Schema.org markup I’d love to hear from you.

Keith

Useful links

Full screen background images

I’m putting this here for my own sanity. If I had £1 for every time I’ve tried to solve this issue!

The goal here is to have a background image that covers the whole of the browser window. Ideally we want it to scale, stay centred, and keep it’s correct proportions.

My go-to article on this is Chris Coyier’s Perfect Full Page Background Images. I was trying the “Awesome, Easy, Progressive CSS3 Way”, but was having difficulty on IOS.

A bit more Googling brought me back to CSS-Tricks and to this thread where a solution is posted by k00ka. Here’s the CSS:

html {
background: url('http://placebear.com/1200/800') no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}

body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

Website Budget Calculator

This morning I built the Website Budget Calculator. This tool is meant to be used as a way for potential clients to work out how much they should invest in their website – based on the value based pricing approach.

I’m interested in, but sceptical of, value based pricing. I’ve listened to talks and podcasts, read books, and generally given it lots of thought. The Website Budget Calculator is a way of explaining the idea to myself as well as my clients.

I hope that the website can generate some discussion and solidify some ideas and best practices around the subjects of web budgets and value based pricing.

Please comment below or tweet me @keithdevon.

First Contact – How to pitch to developers

This post is based on a talk I gave at the “Finding a developer” event, by Enterprise Nation on 13th March 2014.

The current state of play

There are a lot of great developers out there looking for work, and a lot of great clients looking for developers. Using tools like Elance, Coding Cupboard, Google, oDesk, meetup.com, LinkedIn, etc. makes it easier than ever to find developers.

But things aren’t that simple. I feel that so many potentially great partnerships are thwarted at the first contact.

I receive anywhere between 3-10 enquiry emails per week. Most of these emails make really basic mistakes that make either the client, or the project, seem unappealing. I wonder how many great projects, and clients, have fallen through the cracks as a result.

Where we want to get to

I want to help great clients avoid making those basic mistakes, and find a great developer to work with. I want to give potential clients a framework to use that will pique a developer’s interest, and start a long and successful relationship.

How we’re going to get there

I’m going to give 7 tips covering the most common mistakes. I’ll show you what you need to include and what you should leave out.

Before that, I’m going to run through some advice for the stages before you send out your enquiries. This will probably take a change in your thinking, but it will provide a solid platform for future discussions and a healthy relationship.

A change in thinking

Possibly the most important bit of advice I can give is to change the way you think about the client-developer relationship.

Trust is key

Firstly, I believe that most clients are somewhat sceptical of developers, and there are good reasons for this. It’s a largely unregulated industry, and there are plenty of unscrupulous characters out there. Your short-list of developers should be people that you trust.

How do you trust a stranger? Do your research. Follow up on references, follow them on Twitter, LinkedIn, or at meetups. By the time you contact them, you need to trust them.

A relationship of equals

Secondly, hiring a developer isn’t like hiring an employee. This is a relationship of equals. Think of it like hiring any other professional – an accountant, or a lawyer for example. Yes, you are paying them, you are the client and this is your project.

Each party needs to have respect for the skills, knowledge, and experience of the other.

Good developers are in demand, and in control

If you think of these enquiry emails like you would if you were applying for a job, you’ll get it right. Good developers aren’t desperate for work, but the chances are you’re desperate to find a good developer. You need to pitch to them.

Before you send the first email

Give yourself time

Finding a capable developer, who you trust, will take longer than you think. First, you have to go through the process of finding one. Once you do you’ll probably have to wait for a month or so – good developers are in demand and are busy. Get started as soon as you can and make your deadlines realistic. A rushed project won’t be a good project, no matter how good the team.

Understand the process

The best clients are the ones that have invested some time in understanding what the design and development processes looks like. Not only will you be able to understand what the developers are talking about, it will also give you a better understanding of the timescales and budgets involved.

Know your project

The most important part of all. Have a deep understanding of what you’re trying to build. You need to know your project inside out. It needs to be well thought out and well documented.

What developers need to know

Is the project real?

Is this something that you thought of this morning while walking the dog, or is there research and planning behind it? Developers aren’t going to want to spend their time fleshing out your idea for you.

Do they have the skills and the time?

You need to give enough information so that the developer knows whether or not they’re capable of delivering the project. Deadlines will determine if they have the time.

Will you be good to work with?

How does the client come across in this initial email? Bossy, pushy, organised, friendly? The personal relationship is one of the most important factors (for me anyway!).

Do you have the money?

Is there money set aside for this? Is it a realistic amount? No developer wants to spend half a day writing a brief just to find out that there isn’t enough money available. More on this later.

My 7 tips for a killer enquiry email

1. The right length

Nobody wants to read an essay on your company history, and all of the project specifics, in the first email. Keep the initial email short, succinct, and relevant.

However, it’s important to have enough detail to:

  1. Show that you’ve done your research and planning.
  2. Let the developer decide if they have the skills.

Think of it like a marketing funnel. A little teaser at the top, and gradually revealing more information as you read down. To make it more palatable, I prefer a short email introduction and then a development brief attached as a PDF.

2. Spelling and Grammar

English might not be your first language. However, it doesn’t take long to spell-check something. If possible, you should run it by a friend or colleague who does speak English.

Poor spelling and grammar show bad communication skills, and suggest that the enquiry was rushed.

3. Be polite

Use a basic greeting like “Hello Keith” at the start of the email. I know that this email is probably going out to 5 other developers – but don’t make it obvious!

Saying ‘please’ and ‘thank you’ also goes a long way. Being polite is so easy, why not do it?

4. Flattery will get you everywhere

This one is optional – but believe me, it helps. You should have already done a bit of research about the developer (to build up trust, remember?), so why not let the developer know what has impressed you? Is it something in their portfolio? A talk they gave? A blog post that you like?

Make them feel a bit special. Flattery will get you everywhere!

5. Don’t talk about your ex

Just like on a first date, don’t mention your ex. Tales of previous, or current, bad developer relationships are red flags. They indicate that you’re difficult to work with. Just don’t do it. We don’t need to know.

6. Have a deadline

Deadlines are positive. They help things get done and again they show that the project is real.

Without a deadline it looks like you might just be quote fishing and not serious about the project yet.

7. Show me the money!

I’ve saved the hardest one until last. It’s important that you have an idea of your budget, and that you disclose this to your developer. I’ve gone so far as to include a field on my enquiry form that asks for your budget. You can’t send the form without selecting a budget.

Why is it so important? Think of it like buying a house. You walk into the estate agent, and she’s going to ask you where you want to live, and what your budget is. Your budget will determine the type of house and the area that you can buy in.

There are 100 ways to build a site/app, and your budget will determine the process and approach taken. Be honest, disclosing your budget shows trust. Are you worried that the developer will just use all of the budget available? They might. You could even argue that they should.

Also, developers don’t want to go through the lengthy process of putting together a proposal, just to find out that there is nowhere near enough budget to do the job. The budget discussion will have to happen at some point, it’s much better to address it early.

A better way

Something tells me there is a better way to help clients find the right developer. At the Finding a developer event by Enterprise Nation, online consultancy was discussed as a possible gap in the market. I love this idea. Clients could pay for a short amount of a consultant’s time, where they will advise on things like MVP, recruitment, process, etc.

I also think that there is potentially a better way to price web projects. I’m currently doing some research on this, and hopefully I can develop a system that works for both the client and developer.

Why I’ve set a minimum budget

Today I added a line to my contact page stating that my minimum budget for a new project was £2,000. I wanted to explain why I’ve done this.

I’m in the privileged position of getting lots of enquiries for new work. Some days I get up to five enquiry emails. I’m so grateful for this. I’ve worked hard to get to a point where this is the case, and I don’t take it for granted.

Defining a minimum budget might initially appear arrogant, but I have good reasons (I hope). Here are a few:

Good web design takes time

When I started out, I was building sites for hundreds of pounds. I thought, “how can these agencies be charging so much for these websites?” Over time I learnt why. Good web design takes time, and therefore money.

It is possible to put a website together in a matter of hours. Tools like WordPress make this possible, and I love it for that. However, I’ve chosen to take a different path, one where design decisions are based on research, planning, testing and collaboration. These things take time, and money (you get the point now!).

From a technological point of view, web design is getting more complex. Responsive web design (RWD) is the way forward, but it adds more steps to your process – more research, wireframes, mockups, development, iterations, testing, etc. I would estimate that a responsive site can (should?) easily double the cost of a website, if not more.

Cutting down on admin

I like to respond courteously to every enquiry that comes my way. You never know what being nice to someone might lead to. All those replies take time though, and that time is starting to build up.

If I give out that budget info up front, it saves them time not having to fill out the enquiry form, and it saves me time in responding to the email. Win-win.

The right people for the job

When a job comes in that I can’t take on, I send them to the WordPress London meetup group, where they can post the job on the discussion forum.

There are people there with different skills, experience and interests, who might love the chance to work on those jobs. Lower budget work can be very rewarding, if you’re working with the right people on the right projects.

 

Hopefully that helps to clarify why I’ve set a minimum budget. It might all backfire – who knows? – but for now it feels like the right thing to do.

 

10 tips from 4 years of freelancing (Part 1)

On 8th April I gave a talk at the Untangle the Web meetup at Google Campus in London.

As a freelancer there is a lot of advice out there, especially in the web industry. You’ll probably have heard some of these tips before, some might be new. They’re not necessarily the best, or most important, they are just the ones that have made a positive difference in my short career. I hope they can work for you too.

What is freelancing?

Going right back to the beginning, the term ‘freelance’ was first coined in 1820 by Sir Walter Scott. He used it to refer to a mercenary, literally a free lance, or a soldier that wasn’t allied to a particular monarch.

Today’s definition of freelancing is blurry. At it’s most simple, it means someone who has multiple employers.

The pros

Many of the advantages of freelancing are fairly obvious. Mostly it comes down to freedom. Freedom:

  • to work the hours that you want
  • of location and avoiding commutes
  • to do the type of work that you want to do
  • to choose who you work with

It can also be very rewarding. It’s very satisfying when the hard work, to find and do great work, pays off.

The cons

Freelancing doesn’t come without it’s drawbacks. For me there are three main disadvantages:

  1. Doing it all
  2. Financial insecurity
  3. Isolation

Doing it all

As a freelancer, you don’t just have to be skilled in your area of expertise, you also have to be competent at:

  • accounting
  • marketing
  • project management
  • pitching
  • and more!

I think that this is where most people struggle. They put all their time into improving their key skill set and forget about these auxilliary, but essential extras.

Financial insecurity

As a freelancer there is no monthly paycheque, unless you’re on a long term contract. This can make it very difficult to plan your business and personal finances. Also, try applying for a mortgage! Smoothing out the typical boom and bust payment structure is essential.

Isolation

I find this one really difficult to manage. Sometimes I love being able to sit at home, put my head down and put in a good day’s work. Often though, I really miss having people around me. People to share triumphs, frustrations, idle chat and ideas with. It can be a very lonely career path.

Let’s have a look at some ways that we can hopefully leverage the positives and reduce the cons.

1. Find a niche

I started my web career as a ‘web designer’. I knew some HTML and CSS and I wanted to build websites for people. Turns out that I wasn’t alone.

In an effort to find work I signed up to a few job boards and freelance directories. I used “People Per Hour” a lot. There were loads of jobs posted on there that I knew I had the skills for. But every time I submitted a bid for a job, so did 100 other ‘web designers’. My odds weren’t good. I was spending too much time writing proposals that weren’t going anywhere (mostly because I was being undercut, but we’ll get to that).

The turning point for me was when I started using WordPress. Once I’d built my first WordPress site, I was hooked. After a couple of sites I added ‘WordPress development’ to my list of skills. Suddenly, instead of looking for projects, people were approaching me. I changed my title to ‘WordPress developer and web designer’ and I received even more enquires. That trend has continued. So what happened?

As a ‘web designer’ I was competing with a huge number of people and companies, using a very generic skill. What is ‘web design’ anyway? Is it producing wireframes? Designing mockups? Front-end development? Building full websites?

As a ‘WordPress developer’ I had a much clearer skill. People that had, or wanted, a WordPress website would see that I knew how to work with the platform.

Finding a niche isn’t limited to niche skills. It could be a niche industry (‘web designer for bands’), a location (‘Camden front-end dev’), personality trait (‘friendly UX consultant’), style (‘I like building funky, colourful websites!), anything. If you can combine a few of these, then great. Just be careful of not being too niche. There might not be a huge market for “funky pet profile websites in Islington”.

2. Raise your rates

I once met a potential client who, after agreeing to hire me, said, “I nearly didn’t call you, you’re too cheap to be really good at what you do.” That bit of rare honesty had a big effect on me. How much potential business had I lost this way?

‘Raise your rates’ is advice that you’ll hear a lot, but it can be hard to put this into action. The understanable fear is that you’ll price yourself out of potential work. You will. But there are two things to consider here:

  1. Will raising your rates actually bring you more enquiries?
  2. Is the work that you’ll miss out on the type of work that you want?

I would suggest the answers are yes and no. In my experience, every time that I’ve raised my rates I’ve noticed a drop off in the total number of enquiries, but an increase in the number of higher quality leads. This means that I spend less time on the ‘can you build me Facebook for £500’ enquiries and more time on the serious projects with sensible budgets.

If you are competing on price alone, then everybody loses. You’ll end up being stressed and resentful of the tiny budget, and your client will be disappointed by the rushed job. Also, your portfolio will never have anything decent in it, therefore making it difficult to attract the better clients.

You’re now an expert in your niche, so your rates should reflect that. After all, people know that if you pay peanuts you’re probably eating horse.

Think about how much you should earn as an expert and work out your rates from there. Here’s a quick calculation:

  • Jeff is a middle-weight front-end developer. He might be able to attract a full-time salary of £35,000.
  • As a freelancer,his expenses for the year might be £5,000.
  • He probably does 30 billable hours per week (remember all that auxiliary stuff we talked about!)
  • He might work about 45 weeks in the year. Sometimes he’ll be between contracts.
  • That comes in at 1,350 hours of work in a year.
  • His hourly rate would have to be around £30. A daily rate of £240.
An expert in London should be charging at least this amount. Maybe more depending on your level of expertise, skill set and industry.

3. Don’t feed the monster

Crap, low-budget work leads to more crap, low-budget work. We touched on this vicious cycle earlier. There’s a bit more to it though.

I was inspired by Andy Budd when I went to see him talk at the London Web meetup. He was giving at talk called “7 tips from 7 years running Clearleft”. One of Andy’s tips was to have at least 6 months ‘in the bank’.

The idea behind this was that you would never get to the stage where you had to take on work. You’ll have been there before. The end of your current project is approaching and you have nothing lined up. A job appears in your inbox. The budget is tight and the project isn’t well thought out, but you have bills to pay so you accept it.

The job turns out to be worse than you imagined. It drags on and you have long since lost any kind of profit. To make matters worse, while you’re in the middle of it your dream client calls with a project starting next week. You have to turn it down.

If you could have held out for a week or two, with no work, you could have taken that dream job.

OK, so maybe your dream job wouldn’t have come along. The point is though that it pays to be picky. You won’t win great work with crap stuff in your portfolio.

4. Use a contract

This is one of the most common bits of advice, and for good reason. Contracts not only give you something to fall back on when things go wrong, they also help to make sure that things go right.

A good contract will set expectations and may raise important questions that are better to be resolved at this stage than during a project.

Using a contract will also make you appear more professional, because you will be more professional.

If you’re scared of contracts have a look at Andy Clarke’s Contract Killer. Another great resource for this area is ‘Design is a Job’ by Mike Monteiro.

5. The client isn’t always wrong

Have you seen the site Clients from Hell? It’s pretty funny. You’ll no doubt sympathise with some of the designers on there. We’ve all had ‘interesting’ requests.

However, this ‘clients are always wrong’ mindset is a dangerous one to fall into. The client blaming culture in our industry is getting out of control. I think that it’s time to take some responsibility for when projects go bad.

From my point of view, there are many more bad project managers than bad clients. There are bad clients out there, but using tips 2 and 3 should help you weed those guys out.

YOU are the web design (or other industry) expert. YOU need to be leading the process (see below). This includes structuring the project in a way that the client ‘buys in’ to the decisions, and controlling the type of feedback that you receive. That means no more emails like:

Hey Mike, Here’s the design I’ve been working on for three months. What do you think?

You tend to get the feedback that you ask for.

Part 2 to follow…

The Tools of the (WordPress Freelance Development) Trade

I’ve been freelancing for a while now. I’ve also been developing WordPress sites for a while. In that time I’ve used many different tools. Some have been great, and some less great. Here I share a list of the tools that I’m currently using:

Accounting

I use the excellent FreeAgent* to keep track of my estimates, invoices, expenses, bills, tax and more. FreeAgent actually makes filing expenses, dare I say, fun!

You can get valuable overviews of your business, so that you can finally feel in control. To check out FreeAgent click here*.

* Those are affiliate links, but guess what, if you follow those links, not only do I save some cash, you do too!

Time tracking

I’ve been using Toggl for years now. It’s a really simple time tracking tool with some clever features (here’s a good review: https://thefreelanceeffect.com/toggl-review/). It also integrates with my favourite project management tool…

Project management

The mighty Basecamp has been an industry standard for years now. I haven’t updated to the ‘new Basecamp’ yet, I find that Basecamp ‘classic’ still does everything that I need it to, with all the integrations that I need.

Design

Wireframing

I’ve faffed about for too long trying to keep up with free wireframing tools. So, I’ve just signed up to Mockingbird, which is an online wireframing tool. It’s not free, I pay $9/month for the ‘Personal’ plan. There might be better ones out there, but this does the trick for me.

Graphics

I’ve been using Adobe’s Photoshop for years. It’s probably time that I upgraded though, I’m still on CS3.

Web development

Text editor

Coda, by Panic, has been around for ages. I started using it because Chris Coyier did and I’ve stuck with it. There are some nice features beyond what you would expect (including a WordPress plugin for code completion and syntax highlighting). I hear that there is even more fun to be had with Coda2.

Local development environment

I’m on a Mac, so I started off using MAMP. MAMP makes it pretty easy to set up and run a local Apache, MySQL and PHP stack. This allows you to install websites on your machine, making development much quicker and safer. If you aren’t doing this already, do it now!

I’ve since upgraded to MAMP Pro, which allows me to easily create local domain names. So, instead of using localhost/mysite.com, I can use kdev.mysite.com (or anything else for that matter!). MAMP Pro also allows you to access your local server remotely, although I haven’t tried that yet.

FTP client

FileZilla is my FTP client of choice. I can’t compare it to others, but it’s always done the job for me. It’s free.

Browser

If you’re not using Google Chrome, chances are you should be. I’ve found it to be quicker than Firefox, and I prefer the developer tools to Firebug.

 

I hope that helps. If you have any thoughts or suggestions, I’d love to hear them in the comments.

WordPress Security

Since I listened to Kieran O’Shea’s talk at WordCampUK, I’ve been taking security much more seriously. Kieran had some pretty scary statistics regarding hacking. For example, 90% of all businesses have been hacking victims in the last 12 months, and, there is an average of 156 days before victims realise that hacking has taken place.

Having your site hacked is bad news. There are many ways in which a site can be hacked, and many outcomes, but be assured that none of them are pleasant.

Luckily there are things that you , as WordPress site owners, can do about it.

User names and passwords

This is my absolute number one tip, use strong username and password combinations.

I recently had my PayPal account hacked because I used the same username and password everywhere. Eventually, I either signed up to a fake site, or a site I registered with was hacked. Either way, once the hackers had my details they could access everything of mine online.

Here are some rules to follow:

  1. Don’t use ‘admin’ as a username.
  2. Use a strong password.
  3. Use a unique password.

If you have a user called ‘admin’ set up a new user with administration privileges and then go and delete the ‘admin’ user. Do it now!

WordPress will tell you if your password is strong or not. If it isn’t, think of another one.

Since my PayPal incident I’ve started to use unique passwords for nearly every site that I use. I know that it sounds daunting, but there are ways to manage passwords (check out 1Password).

WordPress updates

Keeping up to date with the latest version of WordPress and especially the security patches is my next biggest tip.

As of writing WordPress is at version 3.4.1. They are constantly releasing security patches and other major upgrades. Keep ahead of the hackers by having the latest version installed.

Warning: back up your site fully before installing updates, especially point releases, i.e. moving from 3.4.1 to 3.5.

Sometimes upgrades will break your themes or plugins. This is just the way it is. Nobody can predict the future, but the best themes and plugins should be more future proof.

If you run into problems with upgrades, revert to your backed up version and contact your WordPress professional. Ideally, have your pro do the upgrade, testing and bug fixing for you.

I will be offering my clients upgrade services. Please contact me to discuss upgrading your site.

Helpful plugins

There are some really helpful security plugins on the market:

Security

Backups

If you need help or advice regarding security please get in touch.

Affordable Web Design

What does “affordable web design” mean?

Affordable:

something that can be afforded

low-cost: that you have the financial means for;

that can be afforded; believed to be within one’s financial means

So, affordable web design means a web design that is within one’s financial means. Right?

I think that what people normally mean by affordable is “cheap”. After all, how can anyone else know what is affordable to potential customers. What is affordable to one business or individual could be out of reach for another.

What we really need to be offering as web designers is “value”. But this is tricky too. Value is subjective and people put value on different things.

Value is always a function of cost. A product loses value as it’s price is increased (over-priced art work excepted). Set against that cost are all the things that you do as a web designer. Customers will assign value to things like speed, communication, design, friendliness, proximity and many more factors.

It’s up to us as designers to try and discover what these values are and then deliver on them as best we can.

I try to deliver on “quality”. This means that I’m rarely the cheapest option. I try to work with customers who put a high value on good design and coding rather than price alone.

For me this means happier clients and a happier work life!

Web Design East London

As a web designer living in East London I recently decided to take a look around at the local scene. A Google search for ‘web design east london’ returns lots of hits and as always the style and quality of the sites varies dramatically. Just for fun I’ve decided to rate the first five entries on google.

  1. www.iamhuman.co.uk
  2. www.minttwist.com
  3. www.fraserwebdesign.com
  4. www.visualeze.net
  5. www.touchtaboo.com

I will rate the sites based on 5 categories: usability, portfolio, information, design and ranking.

Usability

Usability refers to how easy it is to find important information and navigate around the site. Good usability includes having a clear and intuitive navigation system, having text that is easy to read, and prominently displaying important contact information.

Portfolio

This is highly subjective. I will look at the sites displayed on their portfolio and quickly judge the quality. Although the quality of a site can’t be truly gauged from a quick glance, on the web that is all the time you are allowed.

Information

On the web content is king. A site is nothing without information, it is after all what your users are after. I will be looking for information about pricing, best practices, company history and employees, etc. I also believe that it is important to try to educate clients on web design best practices, and will look for evidence of this.

Design

Again this is highly subjective. I’m not just looking for pretty graphics, a strong layout that displays the content in an easy to digest way is more important. Deign principle such as layout, colour theory, unity, balance, typography, etc. will all be examined.

Ranking

Lastly I will allocate points to each site based on their Google ranking. This deserves to be rewarded as it is not easy to obtain high positions in search engines. Especially for competitive terms.

iamhuman.co.uk

This site is a real mixed bag. I’m not sure that the company still operates as the latest news story is from 2007.

The first impression isn’t great. The layout of the page is uncomfortable. It is aligned to the left of the screen and the background image doesn’t fill the viewport. The page content just falls off the bottom into white space. The strange Flash backgrounds I found distracting and a little amateurish.

The colour scheme doesn’t work well for me either, the green and red just don’t cooperate.

From a usability standpoint, the text is a little small but the main nav is clear and intuitive. Text is generally easy to read despite the size). Unfortunately, a couple of pages have broken navigation sections where there are clearly some coding issues.

There is plenty of information on the site. There are lots of examples of their work. Unfortunately, I felt that most of the web designs were a bit out dated and some sites don’t work at all. I only checked the web design section, as anyone searching ‘web design east london’ would be looking at this category.

Usability – 6/10

Portfolio – 5/10

Information – 7/10

Design – 3/10

Search Ranking – 10/10

Total – 31/50

www.minttwist.com

Although not actually based in east london, minttwist have done some clever SEO to get right up to the top for this search term. First impressions are good. The site is packed with information but it doesn’t feel too cluttered. the home page features core services, ‘why choose us?’ and ‘Our Goals’. The main navigation is detailed and well organised.

Usability on this site is great. It’s easy to get around, easy to read and there are few distracting graphics.

When I clicked on Web Portfolio I was taken to the Portfolio page. From here I clicked again on Web Portfolio and was then taken to an error page. When browsing the portfolio I was sometimes directed to the wrong website, or to an error page. Aside from that, these guys have some impressive clients on there. For my tastes the designs are a little generic.

minttwist has loads of information on the site. It is all easily accessed from the main nav bar and contains links to some useful external resources.

I touched on the site design earlier. It’s nice and clean and well organised and structured. However, I found it to be lacking any personality or creativity. It’s a bit too standard looking, with very little to set it apart.

Usability – 8/10

Portfolio – 6/10

Info – 8/10

Design – 7/10

Ranking – 9/10

Total – 38/50

www.fraserwebdesign.com

I’m not sure what to do about this one. The designer has re-branded and you are now asked to go through to the new site. How many people will do this? I’m not sure. Ok, I’ll be nice and review his new site, frishmedia.co.uk.

Usability is good. The site is simple and very easy to navigate. Despite being light on dark, I found the text easy to read.

The portfolio is ok. He has lots of designs to exhibit and I’m sure some will enjoy the scrolling mac style viewer. Again, I found the sites on there to be a little generic with lots of stock style imagery. This is potentially down to low budgets.

This site isn’t packed with info but all the necessary information is included. He has included his terms and conditions which I liked. It shows a degree of openness and transparency.

I like the design of the site. the colour scheme is really eye catching, the layout is simple and consistent and graphical elements are subtle and stylish.

Usability – 8/10

Portfolio – 6/10

Information – 6/10

Design – 7/10

Ranking – 8/10

Total – 35/50

www.visualeze.net

This site is a mystery to me. Firstly the name ‘visualeze’ suggests that things will be easy. They won’t.

The usability on this site is seriously lacking. What I thought was a difficult to read main nav, turned out to be tag lines and not navigation at all. There seems to be some effort to be highly accessible, which is commendable, but I was confused with the numbers and letters beside the nav items on the left.

The sections are very confusingly named. For example I eventually found the portfolio under ‘Creativity’. Once there, there were only four examples of websites and they were predictably poorly designed, with no information on the projects.

There is a fair amount of information on the site, from ‘Hosting’ to ‘Pay per Click Advertising’. Again though, these are listed under strange headings like ‘Productivity’ and ‘Communication’, instead of something like ‘Our Services’.

The site is really let down by the design. It looks like it could have been designed using MS Word. There is a loose colour scheme based around black and orange but then there are weird additional colours like the maroon and light blue. Layout is good and the style is generally consistent and there are no distracting visuals; so overall readability is good.

Usability – 4/10

Portfolio – 3/10

Information – 6/10

Design – 3/10

Ranking – 6/10

Total – 22/50

www.touchtaboo.com

We’re ending on a high here. Touch Taboo is a really good example of an agency site.

The site is easy to navigate with a simple and well positioned main nav. The white background and dark text makes sure the content is legible.

The portfolio is the best of the bunch. The image viewer looks great and the work that it displays is of a high quality. My only issues here are with the lack of any project information, and that the image browser arrows are hidden until rollover.

There isn’t much information on the site. Not necessarily a bad thing as it is straight to the point and people’s attention spans on the web are notoriously short. A bit more detail on the portfolio pieces would have been useful. The blog does contain some good articles for potential clients and social integration is obviously something the designer has embraced.

The design is very current. It is nicely structured, the colour scheme is strong, the images are bold and colourful and the typography is well executed. My only real criticism is that it is a little too ‘safe’ and unoriginal. Again, not necessarily a bad thing, many clients will be attracted by the corporate feel.

Usability – 8/10

Portfolio – 8/10

Information – 7/10

Design – 7/10

Ranking – 6/10

Total – 36/50

Conclusion

  1. www.minttwist.com – 38/50
  2. www.touchtaboo.com – 36/50
  3. www.fraserwebdesign.com – 35/50
  4. www.iamhuman.co.uk – 31/50
  5. www.visualeze.net – 22/50

It was a close run thing at the top. The top three sites were all good. Iamhuman was saved by it’s high ranking but I think that it and visualeze could really improve with not much effort.

I guess all this sounds a bit arrogant. What qualifies me to sit here judging my peers? Nothing really! However, I did find this to be a really useful exercise in critical analysis of websites. I’ll have to take another look at my own site and see where I can improve based on these criteria.

Fancy taking me down a peg or two?

I would really like to hear your feedback on this. Do you agree with me? Are you one of the site owners? What do you make of my site? Please use the comment form below.

All sites viewed in Firefox on Mac OSX.

These are the personal opinions of Keith Devon and are only a superficial and subjective view on the sites examined.