Keith Devon

Menu

blog

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.

Building 10rituals.com

WordPress as an app engine

I recently read “The Monk Who Sold his Ferrari” and loved it. Part of the book suggests 10 daily rituals, which, if practiced for 21 consecutive days will become habits. I built 10rituals.com so that I could track my progress at integrating these rituals into my daily routine.

Initially, I built this for personal use only. I used a JSON file as my ‘database’, and I didn’t need any authentication. However, my dad shared the book with me and my siblings, and I wanted to let them use it too. I needed a better way to store my data, and, more importantly, I needed authentication. WordPress to the rescue!

WordPress might seem like overkill for this project, but within hours I had built and launched a public app. I couldn’t have managed this without leveraging something like WordPress.

It’s a very simple app, but I think that it shows the power of WordPress not just as a blogging tool, or CMS, but as an app engine.

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.

 

IE Compatibility view issues

I’ve run into issues a few times recently with Internet Explorer’s ‘Compatibility view’. Some of my standards compliant web pages were being broken by having this view enabled.

I found a solution via this stackoverflow page.

If you add the following to your <head> it will force IE to disable compatibility view:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

However, if IE thinks that your website is part of an intranet you’ll have to disable this manually in the browser. The only way to override that is to uncheck ‘Display Intranet sites in Compatibility View’ checkbox in ‘Tools’ > ‘Compatibility View settings’.

Update

Wesley Burden (@wesleyburden) shared this little function with me:

add_action( 'send_headers', 'add_header_compatibility_mode' );

function add_header_compatibility_mode() {
header( 'X-UA-Compatible: IE=edge,chrome=1' );
}

Apparently this will override the IE settings and  disable compatibility even if part of an intranet. If you try it out let me know if it works.

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…

Passing variables to get_template_part() in WordPress

This morning I needed to pass a variable to a file that I was including using the WordPress get_template_part function.

I was fiddling around with global variables when I thought there must be a better way. There is.

Locate and include

You can use the WordPress locate_template function within PHP’s include(). It’s done like this:

include(locate_template('your-template-name.php'));

All of the variables available in your current script will be available in that template file now too.

Junior Front-end / WordPress role

Do you love building clean, modern websites using WordPress? Are you looking for a chance to build your portfolio and learn new skills? Then read on my friend!

The candidate

I’m looking for a freelance Junior Front End/ WordPress developer. The ideal candidate will have the following:

Required

  • Good HTML and CSS skills. Including HTML5 and CSS3.
  • Basic jQuery knowledge.
  • Basic PHP.
  • A good understanding of WordPress theme structure and template hierarchy.
  • Able to build simple WordPress themes and plugins.
  • London based and able to work near Old Street.

Nice to haves

  • Experience with Git.
  • Experience with LESS/SASS.

The job

I have various bits of work that I need help with. Mostly it will be installing and customising fairly simple WordPress sites.

The rate; £150/day. The location; Google Campus.

Junior Freelance Application

  • Accepted file types: pdf.

 

WordPress $is_iphone global

OK, why did nobody tell me about this, and why is it not documented!

I just found out today that WordPress does some browser detection of its own. I’ve previously relied on other code libraries for this, but maybe now I can use the ‘WordPress Way’.

Detecting mobile in WordPress using $is_iphone

In wp-includes/vars.php there is the following declaration:


global $pagenow,
$is_lynx, $is_gecko, $is_winIE, $is_macIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone, $is_IE,
$is_apache, $is_IIS, $is_iis7;

So it looks like WordPress detects a number of browsers. The $is_iphone variable is interesting because it seems to work as a general ‘mobile’ detection. I have it working to detect the Android ‘Internet’ browser.

I’ll add more here as I play with the possibilities.

The PHP ternary operator

In my quest to master PHP, I’m going to start investigating some of the bits I’m unfamiliar with, and blogging about them.

This morning, I was reading through the excellent “Professional WordPress Plugin Development” by Brad Williams, Ozh Richards and Justin Tadlock (I’ve made a resolution to read a bit every couple of days). In the user settings section there is an example of a ternary operator.

$lang = $_POST['boj_adminlang_lang'] == 'es_ES' ? 'es_ES' : '';

Frankly, I’m embarrassed that I’ve come across this syntax so many times without taking the time to understand it. Especially because it is so simple.

The above code is short for:

if( $_POST['boj_adminlang_lang'] == 'es_ES' ) {
$lang = 'es_ES' ;
} else {
$lang = '' ;
}

I’ve written so many statements using the longhand version. Time to level up!