Posts

Web Site Production Working closely with clients to bring their web site ideas to reality is at the heart of my day to day work. Whether it’s a sharp and elegant single page site, or an e-commerce behemoth with social media features coming out of its ears, I can produce exactly what you’re looking for. To spec, on time, in budget.

Site Maintenance This service is designed for those who already have a web site up and running but want to make some improvements. Perhaps the site is looking a little old and tired. Perhaps you’re still relying on what your favourite nephew knocked up for you during startup. Perhaps you simply need to update your contact details.

Internet Presence Many clients love the idea of handing off their entire internet management responsibilities, freeing them up to just get on with business. This includes everything from renewal of domains, through setting up new email accounts, and right on up to updating Twitter, Facebook and blog content or implementing a pro-active online customer service by hunting down and solving problems identified in bad online reviews.

Analytics The purpose of a web site is to generate revenue, even if only indirectly, for your business. As with all revenue sources you need to have at least a basic understanding of how well it’s working for you. My analytics service helps with that task. I can tell you how many visitors you get, how long they stay, where they’re from, what pages they look at, or even how many of them give up during your over-complex checkout process.

Some of the specific tasks I’ll undertake would include:

Business and brand analysis.

Securing the right domain for you.

Setting up web and email hosting.

Branding, style-guide and web site design.

Web site development, coding and testing.

Content creation, including a blog if appropriate.

Social media campaigns.

Ongoing security updates, backups and traffic analysis.

Future development based on business needs.

None of this is fixed in stone of course. Maybe your site’s been hacked and your old web guy has vanished. Maybe you’ve just moved premises and need changes to your web site’s contact details and Google map. Perhaps you’ve already had some great print work done and you want to use this in your web site rather than starting from scratch. Not a problem.

I haven’t a clue about setting up a web site. How does it all work?

I’ll do the patronising bit first. Always nice to get that out of the way. Don’t worry about not understanding how all this stuff works; odds are I don’t have much of a clue how your business works. Part of a web designer’s job is to teach the client just enough so they can make high quality business decisions about what they need from their web site. So, here are the basics.

First thing you’ll need is a domain name (e.g. mycompany.com or unicornsaddlesrus.net). This allows people to find your web site by entering www.mycompany.com into their web browser. It also allows them to send email to you using an email address like sales@mycompany.com. I’ll work with you to find a domain name that’s available and appropriate to your business. Once we’ve found the right one I’ll purchase it on your behalf. I’ll usually be the administrative contact for any queries about it but I’ll always set you up as the owner as you need to have legal ownership of it to make sure I can’t ever ruin your internet business. The up-front purchase price of the domain is included in the web site packages I provide. There are also ongoing fees associated with owning a domain which I roll into my standard site admin package to keep the administration simple for you.

Next up is finding some web hosting. Essentially this amounts to some space on a computer somewhere on the internet. That’s where your web site will live. These machines live in large, physically secure data centres with sophisticated backup processes, fast and reliable internet connections so your customers can access your web site quickly, and all sorts of power supply backups and the like. I currently use a UK company called Zen who have excellent customer service and good hosting packages. Again, there are ongoing fees for this hosting service which are rolled into my site admin package.

You’ll also probably want some email hosting; essentially a set of mailboxes where your email lives until you decide to collect it using your email client software (e.g. Outlook or Thunderbird) onto your PC or mobile phone. This is usually hosted on the same machine as your web site with the same hosting company. The fees for this are also included in my site admin package.

That’s the basics of how web site hosting works and pretty much the limit of the technical stuff you’ll need to know unless you’re interested in running a blog or eCommerce site.

Know Your Designer’s Intentions

The most important thing a designer must know is that your customers aren’t interested in your web site. Your customers are simply using your web site to achieve a task. That task is almost never to enjoy the wonderous design spread before them. Their task is to order a product, to find their way to your office or to sign up for a newsletter. As far as you’re concerned those tasks translate into generating revenue, gaining prospects and building brand loyalty. Make sure your goals are clear and that your designer’s intention is to build support for them.

There’s a saying in the wine business,

Buy on apples, sell on cheese.

Apple shows up the weaknesses in a wine, whereas cheese boosts the flavours. The mind deceives itself quite easily. There’s a saying in the web design business too,

Designers are hired for art and fired for process.

Don’t deceive yourself by focusing too much on a designer’s flashy portfolio. In reality what matters is their fundamental flavour; will they deliver the goods for your business.

Ensure You Have Realistic Expectations

How much do you really know about what constitutes a modern online presence? Have you underestimated the variety of options for an online presence? There’s social media, e-mail campaigns, video production, apps and a host of other options in addition to the traditional web site. Have you underestimated the work involved in creating a web site (particularly if in the past you’ve just knocked up a quick and dirty template site)? Keeping up to speed with this isn’t your day-to-day job so don’t be surprised if you’re a little out of touch.

Crucially, you must not think of your web site as a cost centre. It’s an investment which needs to show a return. If you think of it as a cost your emphasis on its functionality will be all wrong. Every pound you spend on it should be gladly spent. If you’re begrudging the money then either your thinking about it wrong or you’re buying functionality that won’t return your investment.

Don’t Expect to Talk Colours

Initial discussions with your web designer should rarely, or perhaps at most tangentially, touch on fonts, colours, animation effects and the like. Once the business goals are squared away, he’ll probably move onto getting a feel for your business image with a view to producing a ‘feel’ for the web site. Traditional or contemporary? Mass market or luxury? These are questions you can answer.

Which font or colour is best used to represent your business values is, to a large extent, for your designer to decide. He’ll eventually show you some options and you can tweak things from there. Don’t make the mistake of dictating design details. If you think the design is wrong, that’s probably for one of the following reasons:

The designer hasn’t understood the values of your business or the goals you’re aiming for.

Come Prepared

Your business goals. This includes your broad goals as well as the specific goals for the web site.

Some idea of your budget. This can be a one-shot deal for the entire project or a smaller sum to run a pilot.

A list of the things you don’t know. Do you know how domains and hosting work for example?

Always Obtain Multiple Quotes

Finding the right web developer is not like finding the right plumber. You’ll find a huge variety of service levels, and associated costs, depending on who you ask. Starting off at one end of the spectrum you may be able to get your nephew to knock something together for fifty bucks. On the other end you’ll find the top end agencies who won’t touch any number with less than five zeroes after it. Not so with a plumber. Even more reason then, to obtain more than one quote when you’re looking for a shiny new web site.

Principles

One thing at a time. Finishing one thing before moving on to the next is more efficient because

you avoid task switching overhead costs

you can allow your brain to forget things not relevant to the problem at hand

you make time to build a focused mental context to work in

you produce higher quality work

Take breaks but don’t multitask. Read my article on multitasking for more background and some practical tips on how to manage your projects and day to day tasks.

Don’t repeat yourself. Known as DRY, this idea came to prominence in the late nineties as part of the Agile Software movement.

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

This can be applied to denormalised databases just as well as duplicate address books. Even such everyday things as having only one place for your car keys or having everything on one central to-do list.

Record everything but ensure minimal maintenance.

Look for components and extract them for reuse in other contexts.

Recognise the overhead involved in DRY; sometimes copy and paste is OK.

Always fix a guilty, unjustified, rush copy-paste later.

Things which need to remain in sync won’t; especially if you have to sync manually.

The opposite of DRY is WET – “We Enjoy Typing”.

‘Miscellaneous’ is an Old English word meaning “I can’t be bothered to think about this.” Miscellaneous can be a good thing, an inbox is a good example, but usually it’s just a dumping ground for unfinished ideas or lazy categorisation. You must have misc but keep it as empty as possible.

Prefer deletion over organisation. There’s a tension between this and not repeating yourself. Recognise when a thing will have future value but don’t hoard for the sake of it. Keep things simple by deleting anything that has no value or whose value is exceeded by the cost of keeping it. In essence, this is an exhortation to fight against the second law of thermodynamics: “There is a tendency to move from order to disorder as time passes.”

My brain is a processor not a memory. Write it down boy! Store notes external to your head. Recognise the ease of looking things up. Have a written to do list. Keep your head clear for thinking rather than remembering.

Support ‘undo’ in everything. Ctrl-Z is your friend. Use a version control system, Git, SVN, whatever. Undoing things is made substantially easier by doing one thing at a time because it creates a linear progression without any interleaved actions.

I’m sorry this letter is so long. I didn’t have time to make it shorter. It takes a great deal of effort to strip things down to their bare essentials. Always be looking for things that can be removed. Usually the complexity of a thing remains constant but our naive, initially rapidly increasing, understanding leads us to generate more data about it. Only once the majority of the data has been collected can we begin to form a fuller understanding and this allows us to remove much of the data we generated on the way.

People

A web site has four audiences; the user, the client, the tool set and the maintainer. The first two are obvious, though the distinction between them is often not. The tool set has a completely different set of requirements. For example, should a WordPress post title be an <h1> tag or an <h2>? The tool set will only accept one or the other but from a user perspective, a categories page should probably be showing a different heading level than a single post page. The maintainer, of course, wants to know why you picked <h1> rather than <h2>.

The client isn’t always right. But sometimes you need to let him be wrong. You’ll often disagree with your client over matters of style. Sometimes you need to let the client’s views win out. Sometimes they’ll have business insight which overrides aesthetic concerns. Sometimes it’ll be a subjective call with no ‘right’ answer. Sometimes you’ll be right but the fight isn’t worth the damage to your relationship or reputation. Sometimes you’ll just be plain wrong. Yes, even you Mr Ego.

There are fewer psychopaths in the world than you think. There’s usually a perfectly reasonable explanation behind weird behaviour. Fear and miscommunication are the top contenders. Always take a step back. But never forget that there are some psychopaths in the world.

Business

Rock, paper, scissors, business. Business wins. Always. A business need satisfied beats design shininess every time. The purpose of a shiny design is to satisfy the business need.

Hired for design, fired for process. Projects are almost always awarded based on a pretty portfolio and almost never on a pert PERT chart. Both are important but the usual emphasis is way, WAAAAY out of wack. The fact of the matter is that bad projects almost always go bad because of poor project management and hardly ever because of creative ineptitude.

Real trust is earned trust. If you, as a complete stranger, expect me to trust you wildly, you’re gonna have a bad time. I’ll be doing some work up front, for free, on spec. It’s part of the pre-sale process. That’s my trust investment. Your half of the bargain is that you pay me up-front for the design and development work.

Design

Don’t gild the lily. A drop shadow should not be noticed. Engagement with a design works mainly at a subconscious level. It’s really the things not seen which the brain uses to build its map of what it thinks of your work. Good design should not distract.

Not everybody’s screen is as big as yours. With the rise and rise of mobile tech, this is becoming more and more obvious and barely needs thinking about any more. It is still tempting to stick with a nice big screen for too long during a project though. Go diddy early and make sure you look good on the small screen.

Content is under-rated. Designers have an attraction to the shiny whether it’s the latest and greatest user interface tricks or a gorgeous pixel perfect layout. But it’s information that really counts and that means content and content means words. For the most part at least.

Typography is under-rated. If content is king then he needs some finery. Typography is hard. Really, really, hard. But if you’re after showcasing your content then it has to be done well.

Coding

Right, cheap, fast: pick one. Seriously. A well honed process will allow you to choose one whilst also maximising the other two. But make no mistake, you cannot dial more than one of them up to ten. Unless you have flexible resource levels (i.e. you have a team who can be pulled off other work or you can call on outside help). In that case you can potentially pick ‘fast’ and one other. But nowhere near as often as you’d think. More people means more overhead and can really put the brakes on a project until they get up to speed.

Performance should only be optimised in response to measured metrics. A dev who knows what performance bottlenecks his code will encounter is a rare thing indeed. The vast majority of those who do, are simply making lucky guesses. The fact is, there are so many contextual variables that it’s nigh on impossible to do any kind of performance tweaking without actually running the numbers.

You can never test enough. There will always be some funky freaky corner case that you’ve missed. The more you test, the more you eliminate, but don’t ever kid yourself you’ve whacked all the moles. Try to design for resilience under failure though.

Design security in from the start. Security isn’t something you can layer on top of an existing project. It has to be baked into the heart of the thing. Plan what you need early and never lose sight of it. Even after you’ve shipped.

Code for today rather than a dreamed of tomorrow. Otherwise known as YAGNI (you ain’t gonna need it). Many, many, absolutely essential features turn out to be less essential than you first thought. Build a strong, flexible foundation and drop the features on top as and when they are required.

Comments are evil. The voice of your code must be clear and precise. I don’t get it. Never have. Why do so many experienced coders use so many comments? It’s not DRY. Every time you repeat yourself those repetitions will go out of sync. Comments on all your </div> tags to tie them to their opening tag? You’ve probably got div-itis. Simplify the markup or replace some with HTML5 semantic markup.

Support

A backup plan without tested recovery is just a guess. There are so many things that can go wrong with a backup plan. Simply setting up an automated backup to run once a week is just not good enough. Does it actually run? How do you know if it has run? Has it generated the data (because running is no guarantee that it’s done anything)? Can you get access to the data under all circumstances (hint – no you can’t)? Can you restore from the data? How do you know the restore you just did worked?

A tidy file structure is a cognitive burden beaten into submission. There really should be a place for everything and everything should be in its place. Lots of other principles come into play here. Make sure you only keep one copy of a file. Make sure your files are named sensibly (image.png is not a good name for a file). Make sure your folder structure works for you rather than against you.

Never add a version number or name to a file. Version control is there for a reason. There’s really no excuse for not using a version control system. It’s a bit of a steep learning curve but it’s so pleasing to be confident that you can rewind history in a simple and consistent manner.

I’ve written a short e-book to help web site owners check their sites for potential problems. Although it’s aimed at owners there’s plenty in there for developers and designers as well.

It presents a series of checkpoints, split into categories, together with short discussion points and solutions. I’ve tried to cover everything from layout to branding to copyright to backups.

It’s completely free. Share it among your friends, business contacts and social networks. Just don’t try and make out it’s not my work and don’t sell it.

Download the free e-book

Why is it free? My hope is that you’ll find the information useful and that it will help you improve your web sites, or if you’re a web designer or developer, those of your clients. Of those who do find the information useful, my guess is that some of you will want to fix the issues you’ve found but will need some help to do so. Of those, my hope is that some of you will turn to me for that help. That’s where the effort I’ve put into it pays off and that’s why it’s free.

This is by no means a finished work, there will always be something new to add so if you want to be notified of updates when they happen just give me a shout and I’ll send you updates as soon as they happen.

In the mean time download the book, brew a nice cup of tea, grab some choccy biccies and start working through it. Additions and comments are, of course, most welcome via comments here or directly to me.

In web design, the little things make the difference. Computers have historically used ' and " (the so-called ambidextrous quotation marks) at both the beginning and end of a quotation like so,

"A quotation using 'ambidextrous' quotation marks."

This was because of limitations in the space on typewriter keyboards and the limit of 128 characters available to ASCII. These days we’re a little more sophisticated and we can take advantage of Unicode to give us proper curly quotes, just like the ones typesetters used to use back in the day,

“A quotation using ‘book quote’ quotation marks.”

Of course, this is a tiny detail and most people won’t be conscious of it. That’s why most web designers don’t worry about things like this. Nobody ever complains about the look of quotation marks. Even if somebody did, would anyone really take such a complaint seriously? There are phrases for people who complain about this kind of thing.

However, even though these little things are too small to tickle the conscious mind, they are big enough to irritate that part of the subconscious that decides where people are going to spend their money. They contribute to the feel of a site and that’s why smart people pay other people to create web sites. We’re the people who are obsessive enough to make sure your quotation marks set you apart from the ordinary web sites out there.

Genuine small caps aren’t just scaled versions of normal caps, they’re completely different glyphs. Here’s a black uppercase ‘M’ in Arno Pro overlaid with a semi-transparent blue small-caps ‘M’. The blue letter has been scaled up (keeping the width and height ratio constant) so its height matches the conventional uppercase black glyph. You can see that small caps are wider and have thicker strokes and more sturdy serifs.

In CSS we can supposedly achieve this by setting font-variant: small-caps; but browser support is limited: all you’ll get are small versions of the uppercase glyphs. Instead I prefer to use font-feature-settings:'smcp'; Here’s a quick demo. The blue letters are, again, lowercase characters rendered as small caps and scaled to match the height of the conventional uppercase black glyph.

Remember when web sites used to show phrases like “Best viewed in Netscape 3.0”? Web browsers used to be riddled with inconsistencies, bugs and proprietary features, thanks in large part to the so-called browser wars. Today we’ve largely solved these problems and as long as you’re using a reasonably up to date browser you, and more importantly your customers, should have pretty much the same experience of any web site in whatever browser you prefer.

There is one fly in the ointment though. It takes the W3C (essentially the internet’s powers that be) quite a long time to ratify new features. Consequently browser manufacturers, the likes of Mozilla, Google and Microsoft, have been allowed to use a feature called experimental vendor specific prefixes. Essentially they’re a way for browsers to temporarily provide features (things like drop shadows and rounded corners) before they’re completely defined by the W3C. The key word here is ‘temporarily’; they’re intended as a stop gap until the real features are fully supported.

Unfortunately, some web developers have been designing web sites on the assumption that these prefixes will be available for all eternity and that’s led to a potential problem. Some of these prefixes have become so ubiquitous that some browser manufacturers are considering implementing prefixes from other vendors in their own browsers; thus breaking both the ‘vendor specific’ and ‘experimental’ aspects.

Whilst this is nothing like as severe as the old browser wars scenario it does have significant implications for the future of stable, simple, cross browser support and may well lead us back into a world where developers have to spend their valuable time, and your valuable cash, hacking together awkward and complex code just to get things to work right.

So, what are the real-world implications for you when you’re looking for someone to produce and maintain your web presence? In short, there are two things you need to consider:

Make sure your developer is committed to producing high quality, standards compliant code. Unless you’re an expert yourself, this can be difficult to ascertain but simply asking the question is a great first step and it’s certainly something that should come up in your initial negotiations if not as an explicit statement on their web site.

This is just one more reason why it’s important to consider your web site as an ongoing project rather than a fire and forget commission. Make sure you build a solid, long-term relationship with your developer and be prepared to invest at least some minor future effort on web site maintenance and upgrades.