Dear Client

Published on 10th January 2014

Tags:

freelancing

Hello there,

Chances are, this is your first time hiring a web designer. Even if it isn’t, you may not understand the methods I use, or the processes I follow, or even some of the language I speak. You may not even fully understand what it is you actually want me to provide for you, further than ‘a website’.

The good news is, you don’t need to know these things; that’s what you’re paying me for.

The bad news is, you have a new job now; well quite a few actually. My whole business is about providing value for money, and I can’t give you the best value without your input. We’re starting on a journey together, and I need your help just as much as you need mine.

Your first job is to teach me as much as you can about you and about your company. I’ll do a lot of research myself, but the best information will come from the horse’s mouth.

Why do think you need a website? Who of your clients/customers have expressed interest in using one? What do they want to use it for? Are you aiming to replace offline processes with online ones, or just use it as a marketing tool?

Until I know the answers to these questions I won’t know which audiences the site should focus on, and it will fail.

Secondly, what content are you going to put on your shiny new website? Get it to me straight away. Hire a copywriter if necessary (in actual fact, it’s always necessary).

If I don’t have any content when designing the site, all I can build is a bland template, with a hole to put some text in. Give me good content, and give it to me early, and I can tailor the entire website experience to it, and guide your users through your site in an immersive way that they will remember, and return for regularly.

Without content I can’t do that, your site will be forgettable, and it will fail.

Thirdly, do you have people in house who will maintain and support the website? Do you already have in-house designers, or another third-party that regularly create content, graphics or other design work for you?

I need to meet all of the people above, and they need to be involved in the design process from the beginning; therefore I’ll need you to introduce me. These are the people who already know your customers, and what appeals to them - as such they will be hugely valuable when creating a site that blends seamlessly with the brand they have helped you build. Without this insight, your site will fail.

And lastly, who are your customers? Let’s meet them.

All the research in the world is no good if we don’t put a prototype of the new design in front of the real-world users of your website. These users will play with it, get frustrated with it, break it, tell their friends about it, and based on their experience, use it, or leave it. If you wait until launch before you first show your new site to users, you are playing with fire. At launch, if a customer can’t use the new site in the way they want, you’ve lost a customer, and your site has failed.

Get their reaction early in the process, so we can respond to it, and at launch know in advance that together we have built something your customers will love and enjoy using.

As I said at the beginning of this post, this might be your first website, so you may not know the above is required of you, and without doubt there are many web designers who would not ask for that kind of involvement.

But it is absolutely necessary, however busy you are, that you or an equally-well-informed representative are as involved as I am throughout the design process. Whilst it may cost you time or money, this way we can ensure that I am designing a site that fits your company and is not just an empty shell, lacking in personality.

So please, be the client of my dreams, and help me out.

Sincerely,

Your friendly web designer.

Looking out for the little guy

Published on 28th December 2013

Tags:

I am not a web designer.

I market myself as a web designer, because that’s what my clients think they want. In fact, what they want is a person who makes websites.

That’s what I am. I’m a person who makes websites. And apps too, if you’re feeling adventurous. I’m a UX designer, a UI designer, a front-end developer, a back-end developer, a hosting provider, a sysadmin, a copywriter and a marketer.

I’ve done all of the above individually, for different companies at different times, and also I’ve done all of them at the same time for a single client as part of a larger package, which I will refer to as “a website”.

Primarily, I work in front-end development. But to any client outside of “the web”, this means nothing. They don’t care about day rates, the tools I use, or the maintainability of my code; they want to give me a brief, and when the website is live, hand over a cheque for a pre-agreed amount.

There is much talk in the web community about the latest responsive trends, scalability tools and performance optimisations that should be used on the web; and much berating of those who shy away from them. This criticism is often short-sighted. Granted, the above are all important aspects in the building of a website, but they also cost money; money that the average client simply doesn’t have. But why should a lack of budget deny a client from receiving a website that employs good design principles?

The answer is in the base elements of the design; the layout and typography. Dan Donald talks about this at length in his great talk Flux and Flexibility. A well designed website could be as simple as a single column layout, with a good typographic base. Inherently responsive, a design such as this could easily catapult a small business into the modern era of web design, for very little cost.

But instead of this, too many designers concentrate on adding embellishments that add nothing more than zeroes to the price of the site. They may be eye catching, and no doubt will appeal to the client, but by placing these front and centre in mockups and prototypes, when it comes the time to remove features in order to fit a project within budget, these are the features which the client will want to keep.

But there are many aspects of web design that clients might not fully understand; responsiveness, performance optimisation, maintainability, accessibility. Why would any client choose these as features of their website, when the fancy lick of paint that masks them looks so appealing?

The answer is progressive enhancement. Not in the development sense, but in the process through which the website is designed and built. When creating mockups and agreeing quotes, start with that simple, single column layout. Explain that although such a design may not be the most modern, or the most eye catching, it is functional and inclusive across all devices, connection speeds and ability levels. Explain that embellishments cost extra, and add to a simple base, rather than removing features from an over-ambitious mockup.

If we were all to work in this way, the even the smallest of budgets could allow access to well designed, well implemented sites. Clients would not be disappointed when their users complain of lack of support for their device, or inaccessibility.

And why shouldn’t they be allowed access to good design? People laugh at clients who come to them with budgets in the range of hundreds, rather than thousands; but this is unnecessary. A website can be built in a couple of hours. It won’t win any awards, but if built properly and populated with the right content, it will be functional, and more than likely meet the clients needs.

So think about this the next time a small, local business comes to you for a quote. Spend the time to talk to them, and remember that whilst a simple website built in a couple of hours might not be up to your usual standard of work, it might just be the best thing that’s ever happened to that particular business.

Sincerely Yours, A Pissed-Off Web Developer

Published on 25th November 2013

Tags:

Dear Apple,

It’s been six fucking years. If you’re not going to fix WebKit on iOS, for God’s sake stop blocking other people from implementing their own version that actually works. Even IE6 could implement CSS backgrounds correctly. You’re shit.

Sincerely yours,

A pissed off web developer.

Dear Google,

I don’t know why you felt the need to destroy Chrome with the last two updates, but Dev Tools are now completely unusable. If I wanted to use guesswork to help me develop sites I’d still be using fucking Notepad. You’re shit.

Sincerely yours,

A pissed off web developer.

Dear Mozilla,

Why in the name of all that is the internet does Firefox need so much memory? Are you secretly trying to cache the entire fucking internet in my RAM? You’re shit.

Sincerely yours,

A pissed off web developer.

Dear Opera,

Have you ever even heard of a web font? I mean, seriously, how can they not work. You’re shit.

Sincerely yours,

A pissed off web developer.

Dear Microsoft,

IE11 is actually really fucking good. Well fucking done. But your marketing tactics are lower than low. You’re shit.

Sincerely yours,

A pissed off web developer.

They don't make 'em like they used to...

Published on 21st November 2013

Tags:

Originally published on Everyday Designer

Ladies and Gentlemen, allow me to introduce you to Country Ken.

Country Ken is a 1967 long-scale Epiphone Casino. You might not think that he’s anything special.

The paintwork is cracked across nearly every inch of his body and neck. There is a large patch of paint missing from the corner of his body, where the player’s arm rests against it. The paint on the back of his neck has bubbled and turned black, where the sweat from 46 years of heavy playing has reacted with his nitro-cellulose finish. The original Burgundy Sparkle colour on his body has faded to a dull copper from contact with sunlight.

To many people, he looks like a piece of junk, found in some old relative’s attic; the sort of thing that would be discarded once found. In actual fact, he is the most expensive thing I have ever purchased.

So why would I spend twice the value of my car on a beaten up plank of wood? The reason is simple: because of the feeling I get from playing music on it. Any artist will tell you that it’s impossible to write or play good music without inspiration, and what better to provide inspiration than an instrument which radiates the 46 years of love, devotion and attention shown to it by those who have played it.

The Epiphone Casino was a hugely well designed instrument. It was used by the best in the business when first released, and the original guitars are a highly sought after today. It has been imitated countless times in the years since. But none of these modern, machine built models can possibly hope to match the care and attention that was put into building the handmade original. In comparison they feel cold, rigid and almost clinical. They lack feeling. They lack personality.

Where’s this going?

The same can usually be said about modern UI and web design. Those who design and build great user experiences allow fun, feeling and personality to shine through at every stage of the site or application’s use. Those who build cold, clinical interfaces rarely see the same levels of user engagement.

One of the best examples of this is Github. What could be an incredibly tedious user-experience – let’s face it, pushing code and fixing bugs is rarely anyone’s idea of “fun” – is made rewarding thanks to the generous use of Octocats, playful error messages, and the gamification of stats on user profiles.

With Siri, Apple managed to remove some of the stigma attached to feeling like a dick when talking to your phone by making it tell you jokes.

Google’s brilliant video advertising focuses on stories and real-life events that their target market can empathise with, and introduces their product’s user interfaces almost as an additional character in the story itself. By personifying their products in this way, users immediately feel an affinity towards them.

There’s a reason that copywriting, content marketing and conversion rate optimisation have become multi-million-dollar industries. The people who do these things are (for the most part) professionals, and have spent years perfecting their craft.

With the low barrier-to-entry in web and UI design these days, far too many people are focusing on pitching their product in a cold, lifeless environment, without trying in any way to empathise with their users, and as a result, they struggle.

The cheap imitation guitars I linked to above suffer from the same issue. Instead of being built by people who love and make guitars, like the original they are attempting to imitate, they are built by people who know how to operate the machinery they are built with – two very different approaches.

So before you next start a design, spend some time with a product you love. Think about the feeling it gives you when using it. Then think about the feeling you want your users to experience, and try and implement your UI in a way that really makes them feel like they know your product, on a personal level.

That way, when you finally show the user that “Sign Up” or “Buy” button, it feels less like a sale, and more like an invitation.

Things about CSS that make me want to put my face in a blender

Published on 16th October 2013

Padding

When you enter a margin value such as:

margin: 12% 24%;

the vertical value is taken as a percentage of the height of the parent and the horizontal value is taken as a percentage of the width of the parent. This makes sense.

If I enter the same values as padding:

padding: 12% 24%;

the vertical value is taken from the width of the element (horizontal), and the horizontal value is taken from the height of the element (vertical). This is stupid.

The only time this has ever been of any use to me whatsoever in four years of writing CSS has been when forcing the aspect ratio of an element like so:

height: 0;
padding: 0 0 50%;  /* Forces a 2:1 aspect ratio. */

You know what would be far more useful? Make the horizontal and vertical the right way around, and give us an aspect ratio property. Not only would this make aspect ratios an actualproperthing™ rather than a hack, it also allow us to finally vertically center things properly.

/* 25% of the element's height will be
    whitespace above and below its children,
    making them vertically centered (Hurrah!) */
padding: 25% 0;

/* The elements width will be double that
    of its height, which is determined by
    the flow of content. */
height: auto;
width: auto;
aspect-ratio: 1 2;

Exes and Whys?

margin: Y X;
padding: Y X;
border: Y X;
outline: Y X;
background-position: X Y;
transform: translate(X, Y);
transform: scale(X, Y);

Why, dear God, Why???

Fixed positioned elements

I set some elements at a certain size.

.parent {
  width: 50%;
}
    .parent .child {
      width: 30%;
    }

.child is 30% of the width of it’s parent. Nice and easy. Then I add position: fixed; to the child.

.parent {
  width: 50%;
}
    .parent .child {
      width: 30%;
      position: fixed;
    }

Boom! .child has now doubled in width. That makes sense doesn’t it? No.

Borders

I only ever use solid borders, because anything else is harder to see than a true word in the Daily Mail.

I want to write

border: blue;

and have it give me a 1px wide, solid blue border.

border: 5px blue;

gives me a 5px, solid blue border. Easy peasy.

Posititioning

background-position: top center;

is a nice easy way to position a background. At the moment, to absolutely position an element in this way, I have to do this:

width: 300px;
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;

If the width is dynamic, the above is impossible without a javascript hack. This would be better:

position: top center;  /* Boom! */

Where’s this going?

Padding

Exes and Whys?

Fixed positioned elements

Borders

Posititioning

Hey, good lookin’What would you like to talk about?

Hey, good lookin’
What would you like to talk about?