*** No agencies please. ***

We're looking for a front-end developer. You’ll be good with HTML and javascript and UI stuff, but can also create beautiful designs that suffuse people with quiet joy.

In the past couple of years we've worked on projects for: O2, Adidas, Warp Films, Sainsbury's, Designer’s Republic and a bunch of other big names, and all the smaller, cool stuff you’re still proud of years later. We’re looking for ‘proper’ skills.

Technical skills
Core skils:
HTML & CSS to a high standard, Javascript, Photoshop and some illustrator
Shopping list:
Facebook, mobile dev., flash, canvas stuff: anything like that is a bonus

Why would you want to come and work here?

It's a nice place to work

• You'll have autonomy and responsibility. We want you to develop new technologies, ideas and to keep things fresh.
• Lots of chance to work on and develop new skills.
• Many of us also work from home for part of the week or do 4 day-weeks: flexitime. It's standard practice here. 
• Overworking people is stupid. We don't do stupid. We know you work better when you aren’t doing 60 hour weeks. 
• The boss doesn't think he knows everything and will admit it when he’s in the wrong.
• The boss knows how to say ‘no’ to clients who are asking the impossible.
• We avoid corporate bull. People who say “The difference between 'ordinary' and 'extraordinary' is that little something extra,” deserve to suffer.
• There's a good team here of 10 people: big enough to support you and small enough to make sure your voice is heard.
• Most people stay here for 4 years or more because it’s, well, a nice place to work.

It's great for your CV

Having those URLs on your CV. It’s not going to hurt, is it? There's also Land Rover, Kelloggs, Horlicks, Warburtons, Ribena and a bunch of others. When people do eventually leave, they always seem to just walk into another great job.

Us
We love the web started in 2003 and has doubled in size in the last 3 years and we hope to do the same again. We do sustainable growth, not 'explode then collapse' and we've all been doing web stuff forever.

Where
We're based in Hebden Bridge, 45mins from Manchester, a bit longer from Leeds, in a converted Mill building.

Money
£20-30k, depending mainly on skills and experience

• Bike to work scheme (funny how we all have great mountain bikes here)
• Profit share bonus
• Flexitime/working from home etc. are all standard practice here.

Next steps
Contact frank@welovetheweb.com or call on 01422 847 958 to have a chat or arrange an interview.

*** No agencies please. ***

Update: unsolicited tweet from an old colleague (who left after about 4 years). Thanks Mike!

Permalink | Leave a comment  »

No worthy insights into the dark tangled heart of the web this time. No earnest professorial voice delivering knowledge from dusty tomes enlivened only by tortuous puns wrung desperately from the tattered threads of the once-mighty English language.

Well, I say once mighty: in truth, English is a mongrel language. It's the natural consequence of our Nation's traditional expertise in the import-export division of the invasion business. And none the worse for that.  In fact all the mightier. The words you use have defeated all comers in mortal combat. Still, in spite of such drivel, please do read right to the end, you may find it worth your while.

Now, that dealt with: what fundamental truths will we uncover this time? What wisdom can I impart that sends a frisson of excitement rippling down your spine in anticipation of enlightenment? Well?
There was a point. Somewhere. Really there was...

Ah yes. A giggle.

Well, I can't promise you eternal happiness. Who can in these troubled times?
After all, true happiness is beyond price, Alladin.
It's what, Widow Twankey?
It's beyond price, Alladin.
That's silly, it's not beyond price!
Oh yes it is!
Oh no it isn't!
Oh yes it is!
Oh no it isn't!
(please continue this argument here)

And so, that was it. Our christmas joke. If you found it funny, then great! If not then I apologise profoundly. It's not my fault. I wanted to start this from 'itsbehindyou.net', but studio time is strangely non-existent at this time of year. That would have made it funnier. Really. It would. 

Anyway, if you thought it was a complete waste of your valuable time then I can only apologise. Those are 3 minutes you'll never get back.

OK, let's assume you are still reading at this point. I can only imagine you have extraordinary patience or not a lot to do today. Still, I admire your persistence, pluck and true grit. Tell you what, for wading through this much bland logorrhoea, I feel you should be rewarded. And handsomely! Send me an email with the subject line 'Bah, humbug' and I'll throw in a bottle of Harrods Champagne with your next order. And you can't say fairer than that. Well, you can, but frankly why should you?

Dear lord, I don't know why anyone would, but if you want to get a friend of yours to join our mailing list, then they can find the sign-up form just over there, on the left. 

Alternatively, we could do some web stuff for you. Sound like a plan? Call Jules and Frank on 01422 847958 or drop us a line at make.it.work@welovetheweb.com

Permalink | Leave a comment  »

If you want your customers to be able to buy stuff from you and pay online, then you'll need to make credit card transaction one way or another*. There are about four ways that you can do this, each with their pros and cons.

Whichever way you choose, it's almost always the part of setting up an eCommerce outfit that takes the longest. It just always does. You either have to prove who you are to Paypal or Google Checkout, or get a merchant facility with online 'customer not present' payments from your bank. Either route takes time - allow up to a month. I know. A month. It often takes less time to build the store than get the payment stuff in place.

* I am ignoring bitcoin and other alternative eCurrencies until they become a bit more mainstream. 

What are my options?
Broadly speaking: PayPal, Google Checkout, SagePay and WorldPay.
There are a host of minor providers, but these are the big ones.

PayPal
Easy to set up, people are familiar with it, but comes with issues around customer service. Because it's a mass market service, they have real problems with preventing fraud, so will tend to shut down accounts that exhibit unusual behaviour. So, if you get a big sales spike because your latest product video went viral then PayPal may shut down your account because a big jump in transaction numbers may indicate fraud. And then you are left to deal with PayPal customer support, which appears to be one little old lady in a broom cupboard with a bakelite telephone somewhere in the Arctic circle. OK, the risk is small, but the impact is huge. This has happened to people we know.

In its favour, it doesn't require you to get any special facilities from your bank. The downside to this is that they charge higher commission as a result. Watch out for its fee structure.

Both SagePay and WorldPay also offer a 'pay by PayPal' option on top of their own payment stuff, so you don't have to choose 'either/or'.

Google Checkout
Easy to set up, but takes quite a big lump out of your payments in commission. The same problem that you have with PayPal potentially freezing accounts is also true, but given the higher level of proof required to get the account, we haven't heard of as many problems. Unfortunately, Google customer support is, we think, outsourced to the same old lady in the Arctic circle that PayPal use. Getting redress for grievances may be difficult.

A significant difference between PayPal and Google Checkout, to my understanding is that Google automatically pays money into your bank account after about 48 hours, whereas PayPal just hangs onto it until you log in and initiate a transfer, but I may be wrong.

As with PayPal, this doesn't have to be the only payment option on your site. Adding new payment options often increases the number of completed orders.

SagePay, WorldPay and a host of smaller providers
These guys are like 'Securicor', they move the money safely between places for a fee. They usually charge a monthly fee and/or transaction fees to validate that the person's credit card exists and has funds available. If so, they take the money immediately, or reserve it (pending despatch of the item and 'release of payment' when you actually want to take the money). SagePay, for example, charge £20 a month, which covers the first 100 transactions and thereafter in £20 blocks for each 100 payments. 

To work, they need to be linked with a business bank account that has the ability to take credit card payments (called a merchant account).

A key advantage to these payment providers is that they are unlikely to freeze your accounts lightly and, because you are their customer paying real money, you can actually phone them up and try to sort things out with an actual live human being! Costwise, they are about the same overall because your bank will charge you commission on the incoming payments of 1-2% or about 60p for debit cards.

Broadly speaking, WorldPay allows you to apply your styling more seamlessly to the payment process, but SagePay is more flexible to work with in terms of setting things up and better with foreigners (see below). We prefer SagePay.

Do I have to take Credit Cards? Is there no other way?
There are some really interesting developments on the horizon such as dwolla that circumvent the need for a Visa card entirely. This is a good thing and long overdue because Visa and Mastercard take far too large a chunk of your payment and can get away with it because there's no meaningful competition. Sadly, they only work in the US at the moment. We'll update this post when they come over here!

Why does it take so long to get set up?

Paypal
PayPal is the quickest route, but comes with other issues (see below). Paypal need to validate your credit card and address by making a small charge against a credit card validated to your given address. When you receive your statement then you type in the special code given. You'll need to do the same thing for a nominated bank account too as soon as you reach a sending limit for money.

Google Checkout
Setting this up entails sending off audited accounts to Google, along with copies of your certificate of incorporation (for Ltd. companies) and various other bits. Google then lets you know a few weeks later when it's approved.

SagePay, WorldPay and others that need a bank account with a merchant facility.
The big problem here is the banks. You'll be amazed to learn this, obviously. Honestly, it's like they are stuck in the 18th century. We've yet to see a bank completing the necessary paperwork in less than a month. No reason, just bureaucracy.

Taking and storing credit card numbers yourself like wot Amazon do.
This is a complete non-starter unless you have about £15k to spend just on taking payments. We have to have all sorts of heinous security stuff in place and it's not just about software on the server, it's about making the organisation PCI-DSS compliant. Sorry, acronyms. PCI-DSS is the set of rules that the banks have put in place to make sure your organisation can process credit card payments securely. There are a lot of rules and complying with them all is expensive.

Foreigners with their funny money.
Just when you thought you'd solved all the problems with taking money, some damn foreign Johnny will want to give you some money. And this introduces a new set of minor complications.

Assuming your shop supports multiple currency pricing for a moment (and ours do, obviously), then you need to make sure your payment provider does too. For Paypal, this shouldn't be a problem, at least for the obvious currencies (Yen, US$, Euro, GBP Sterling) - you may have a problem with the Azerbaijani Manat through. It will handle the hard work.

Google checkout only works with a handful of currencies, currently Yen, US$ and GBP, but will only accept payments in your native currency (so GBP for UK accounts). It will not take payments in Euros.

For SagePay, providing your bank account with the merchant facility is set up to accept payments in other currencies, then you just let them know and it will pass on the payments in the original currency.

World Pay always used to be owned by RBS, those fine upstanding titans of fiscal rectitude. They used to make you have an RBS account for payments in all currencies except Sterling, but not sure if they still do now that they are no longer owned by RBS.

Watch out for cross-border payment fees too. Even if your customer is paying in pounds sterling, some (I'm looking at YOU PayPal) also charge you for moving the money across borders. No, I don't really understand why either: it's not like there are import duties.

What other gotcha's are there?
Well, you also have to watch for chargebacks. Basically, if a customer is unhappy and can't get resolution from you, they can initiate a 'chargeback', which involves telling their bank that this was a fraudulent transaction. The bank assumes the customer is correct and takes the money back. The onus is on you to prove yourself innocent of the charge. Too many chargebacks a month (more than a couple) and you could be looking at fines or suspension of your account. These sound scary, but in truth, they rarely happen if you have good customer service. Many of our customers have never had a chargeback.

Oh, and finally: one real eyebrow raiser is that refunds are counted as another transaction and therefore attract another round of commissions! That makes you cross the first time it happens, but it is survivable as most people don't have to issue many refunds.

So, hope I haven't scared you off taking money online. It really does work out well for most people - none of our customers have had real problems around this part of the process, but since the banks are involved you can expect to experience a stinging pain in the wallet. Strip aside all the comic 'chip on the shoulder' stuff about the banks and it boils down to this: you have to plan the turnaround times and transaction fees into your business model.

To find out more about how eCommerce. could help you, call Frank or Jules on 01422 847 958 or email us: make.it.work@welovetheweb.com

If you have a friend or colleague who you think might like to receive these as emails, get them to sign-up here: Sign up for the We love the web newsletter.
We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

And you can unsubscribe at any time.

Permalink | Leave a comment  »

I was reading an article about the companies that spent the most on advertising and noticed something odd. Not one of them spent more than 10% of their budget online. They loved TV though. You could buy the whole damn Internet for the sort of money they spend on TV campaigns.

This is a bit mental when people spend as much time online as they do watching TV. It's even more mental when you consider that online marketing can be so much more effective than TV: you can get five times as much for your money. More was spent on billboards than online. So: if you want to get the most for your money then 'As seen online' is more effective than 'As seen on TV'.

Still, most of us don't deal in TV-sized budgets. How does digital spend compare with direct mail, press, outdoor and other channels for Return On Investment (ROI)? In the B2B environment, it's websites.

"Methods generating the highest B2B ROI are topped by advertisers’ own websites, followed by conferences, exhibitions and trade shows; direct mail; search engine keywords; and e-marketing/e-newsletters." Source: Outsell.

So, if you have a choice of spending a few thousand on a print ad. or improving your website, it's a no-brainer. Some of our customers wouldn't dream of spending thousands on SEO or a campaign microsite and this does seem daft.

Thing is: you can measure the effectiveness of the campaigns quickly and easily (that's code for 'fairly cheaply'), so you can and should test and compare the cost per sale across media.

Of course the highest payback of all came from cross-media campaigns. Even though my livelihood depends on selling you digital stuff, I'm not suggesting you should only spend money on digital, just that you may profit from doing some testing and experimentation of your own. We can help you with that, so give us a call to find out how. 

Permalink | Leave a comment  »

Apps are shiny.
Apps are there on your iThing even without an internet connection.
Apps run in full screen with no browser bars.
Apps make great bling to show your clients/boss.

What’s not to like?

First things first: the mobile web is (normally) more important.
If you don’t have a mobile-friendly website, then consider that first. You can find more information here - How-to: stop punishing iPhone owners.

Done? Great: let’s talk about apps.
Sucessful apps.increase customer loyalty by being useful, amusing or informative and keep your brand right there on a customer’s home screen (I’m talking about marketing apps in this how-to, not paid-for ones).

It’s also true that most apps are only used a couple of times. There are a lot of apps. out there.

So: why would anyone want yours?
If you can’t answer that question, you will waste your money.

5 good reasons to build an app.

• You have a complicated product that people need to configure, update or access on–the-move
• Your app. provides an information service (AA directions, Train times, Yell etc.)
• You have great content that changes regularly and people want to access it on-the-move (e.g. the Economist or Guardian etc.)
• There’s a repeating or ‘hobby’ element to your offering (such Nike GPS+ that records jogging mileage using a smartphone GPS tracker or a dieting product with weekly weigh-ins).
• You have a great idea that’s going to ‘go viral’ which will amuse and amaze everyone. 

3 reasons not to

• Because we can
• Because our marketing director has an iThing
• Because you want to see if you can get Comic Sans past the Apple app. reviewers.*

*You can’t. Comic Sans has been banned from the app. store and using it is in violation of your license agreement with Apple. Loading an app. containing this font causes the immediate and irreversible shut-down of your iOS device. This paragraph is 100% true in every way. Oh yes. 

What’s does that leave?

• You have an in-house brochure or sales tool that would look great on a shiny.

Something you have to know about the iThing

The only way to get iPhone/iPad apps in the hands of the public is through the Apple app. store. That means we have to get it past the app. store review process (PDF doc).

Break the rules and the app. gets kicked back at you.

This isn’t true of Android. Publishing to Android marketplace costs about £50 in fees and there’s no review process. Debate rages as to whose approach is better.

So, is there no other way of distributing an app.?

Many of the enquiries we get are for sales collateral: shiny screens to be used at trade shows etc. So: for limited distribution, you need a different answer: in-house apps.

To do this, the iShiny device has to be known to your IT people and has to be tweaked to allow installs of ‘in-house’ apps on it. The IT people need to be registered developers too. The configuration change isn't a huge deal, but it's not exactly the 'download and install' that you are used to.

You could always put a full-screen PDF or slideshow on the iPad if you just need to get your brochure on it. Or buy an Android instead.

What else do I need to know?

Consider which platforms you need the app. to work on:
Right now, it’s normally iPhone and Android. Here’s a link to current smartphone market share.

But, take the lead from what devices people use to access your website. For you, iOS may outstrip Android because of your audience.

If you need to develop more than one, then you need to read this bit. These devices understand different languages. It’s possible, but harder, to develop an app. to target both at the same time. Considering you have to get the Apple version through the review process for *each and every* update, it can be cheaper to maintain two separate programs. You can learn and iterate on the Android, then push the successful changes through to the iPhone version.

To find out more about how a mobile app. could help you, call Frank or Jules on 01422 847 958 or email us: make.it.work@welovetheweb.com

If you have a friend or colleague who you think might like to receive these as emails, get them to sign-up here: Sign up for the We love the web newsletter.
We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

And you can unsubscribe at any time.

Permalink | Leave a comment  »

Yeah, I'm bored of the web and decided to write about music instead. So, the big news this week is that Take That's official fansite uses our favourite CMS (Umbraco) and serves 6 million pages every 30th of a second or something.

Maybe not. It's actually about the very basics of Search Engine Optmisation(SEO). Getting your site in the top 10: that vital first page of search results in Google.

Dull, dull, dull, Why do you care?
Because it can double the number of people who find your site, see what you offer and decide to buy your stuff. When we rebuilt www.celebrityslim.co.uk and did SEO work, traffic nearly doubled, to 180% of previous levels (I've no hard sales data, sorry. Suffice to say our client was happy!)

Odd then, that it's the budget line-item that people most often cut from the build to 'save money'. To reprise an earlier theme: that's like spending £10k on a brochure and then hiding it in the cupboard. Nuts.

I understand though. It can be hard to make your client see the value.

So, Search engines: they're clever things right?
No. They are dumb machines, set up in complicated ways. They decide which sites are important using a complex set of rules designed to cover up the problem that they don't really 'understand' us humans (this is partly because most people don't understand us humans very well). Anyway, we work with those rules to promote your site.

Search engines do their best to work out where your site fits into life's rich tapestry by crawling through what they can see: text and links.

Important sites look like this:

• Well-made
  Good code tells search engines which bits of the page are important. Well structured content flags what that page is about to search engines in ways they find easy to understand.
• Lots of links
  People link to sites and articles they find useful or good. Search engines count how many sites link to yours to gauge your popularity and authority.
• Lots of content
  Plenty of original text and links to chew through, index and correllate. Search engines use that content to build up a picture of what you are about. Also, the more text and links there are, the bigger the site. Size is a proxy for importance.
• Lots of activity
  Things change regularly. Search engines use this to gauge how likely it is someone will visit the site often.
• Staying power
  Spammy sites come and go. Authoritative sites like, the BBC tend to stick around. Search engines like sites that stick around. Just being there for the last ten years can give you a better rank!
• No comic sans
  Sites using comic sans are downgraded by search engines for being amateurish.*

If your site looks important to Google, it shows up in searches for your products and services. And visibility + good product = sales.

* This is not true. It should be though. 

Boring note: lots of other things affect your ranking. These are just the main ones

How do I make my site look more important?
The usual way: rent a Bentley, don an expensive suit, go round to Google HQ and demand your due! Alternatively, follow our Five Step Plan.

• Step 1: who am I trying to impress?
  The most important question. What are your customers searching for, both metaphorically and on Google? We work with you to build a plan of what you want to be found for. We back it with real search data and measure the effect after doing the work, so you can see the benefit.
• Step 2: make the code help you
  We can restructure existing website code if you already have a site, or we can build fresh. The point of this is to structure the pages so that search engines can see what's important and what's not.
• Step 3: optimise the content
  This is a copy editing and writing job, but it's NOT a job for a generic copywriter. Too many website home pages are accidentally optimised for the word 'Welcome'. Get an SEO specialist copywriter to do this or you are wasting your money. You'll be amazed to learn that we can supply such a person.
• Step 4: get links
  You could do this yourself, but the truth is that you probably won't. Not only is it dull, slow work, you also need to know which sites are worth getting links from. Does your Yell listing link to your site and hit your keywords? Is your Google places record up to date? Are you listed in DMOZ? If you can't answer these questions, you'll benefit from our help.
• Step 5: implement your content plan
  You do have one, right? It's almost as important as the build.
  Too many people think: yeah: we'll have a blog and a twitter feed and news and ... and ... and ... STUFF! Since they haven't set any time or resource aside for it, no content ever happens.
  Having a community of users generating content is also a great way of improving search engine rankings and has many other sales benefits, but unless you have a Mrs. Miggins who organises and looks after that community, you may find it a non-starter.
  We can help you with that content plan.

And finally: as with all your marketing efforts, if you aren't testing, measuring the return and optimising then you have no idea what's bringing you sales. Surviving the afterlive is something we'll cover in another post.

Summary 

I (the person trying to sell you SEO along with your build) says that cutting SEO or trying to do it yourself is a false economy. Well, I would, wouldn't I? But the payoff is so unambiguous that it should be a no-brainer.

To find out how SEO could help you, give Frank and Jules a shout on
01422 847958, or email make.it.work@welovetheweb.com

Boot note: You may notice that I haven't used the word 'Metatags' once. That's because they are only peripherally useful: less than 5% of the job. So if you have an idea in your head that SEO is to do with metatags, then you may not fully understand the process.

Disclaimer: your mileage may vary for which of your search terms make it into the top ten. That's why we optimise for a whole spread of words and phrases.

If you have a friend or colleague who you think might like to receive these emails, get them to sign up for the We love the web newsletter. We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

Permalink | Leave a comment  »

HTML5 is a good general upgrade to HTML4, the basic language of web pages. It adds a couple of new features that allow you to play video and sound without using a plug-in such as Flash. It has some data handling tools too. That's it.

Sorry, I didn't promise that every how-to would be exciting. This one is aiming more for ‘informative’. If you read to the end, I’ll throw in some jokes. Fair?

I’ve vaguely heard of HTML5. If it’s so dull, why the hype?

Many of the HTML5 demos you’ll see are full-on multimedia eye candy. Where’s all this bling come from?

What’s happened is that other things have become confused and associated with HTML5.

1. A fistful of handy design and typography features used to make designs richer in the styling system called CSS.
2. Lots of work on making animations work without Flash by people who don’t like Flash.**
3. Lots of work by people who want to update bits of a page on the fly without the whole page refreshing.

Most of the cool new animation and interactivity stuff is done with that scripting language called JavaScript. And most JavaScript works on pages written using boring old HTML4 too. It may take a bit longer, but it can be done. The typography stuff can be done with existing browsers too: it’s a bit of a faff, but it’s do-able. This is good news, as half the browsers people use don't understand HTML5*.

Cool HTML5 demo’s that only work in some browsers:

http://www.hongkiat.com/blog/48-excellent-html5-demos/
The demo’s only work in recent versions of Safari, Firefox and Chrome and IE9

Why do you care about HTML5?

Together, these things allow us to deliver websites that are a real pleasure to use: where everything feels slick. It’s the little things, like revealing and hiding text with a pleasing slide, so much nicer than the clunky ‘wait and re-arrange’ of a full page-load. Or the searches that suggest things to you before you’ve finished typing. Or forms that turn green the second you’ve filled them in correctly.

HTML5 makes it easier to tie all that stuff together, but it’s not mandatory.

Where’s the sell?

The reality is: we know it's not mass-market yet. Not until browsers that understand HTML5 outnumber those that don't by about 20:1. That’s about 2 years away.

It doesn’t matter: all that niceness is here, now. Yes. Your sites can be effortlessly cool even without alienating the technologically challenged! So, to find out about a whole heap of cool grooviness, give Frank and Jules a shout on 01422 847958, or email make.it.work@welovetheweb.com

* Internet Explorer versions 6, 7 and 8 don't understand HTML5 properly. These browsers make up about 40% of the browser market. Internet Explorer 9 does get it.

** The iPhone and iPad don't do Flash because Steve Jobs banned it from iThingies. I think he got grumpy that Adobe (who make Flash) never made a Mac version of Flash as good as the Windows version. Flash runs fine on Android phone, so it's just industry politics keeping Flash off your Apple fondleslab. Dear sweet Lord, the politics of IT are dull. Quite apart from that, a lot of programmers don’t like Flash because Adobe own it,make lots of money from it and are a bit of a pain. And a lot of programmers also hate flash adverts. 

If you have a friend or colleague who you think might like to receive these emails, get them to sign up for the We love the web newsletter.
We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

Oh yes, jokes.

OK, top three jokes from this year's Edinburgh festival:

1. Nick Helm – “I needed a password eight characters long so I picked Snow White and the Seven Dwarves.”
2. Tim Vine – “Crime in multi-storey car parks. That is wrong on so many different levels.”
3. Hannibal Buress – “People say ‘I'm taking it one day at a time.’ You know what? So is everybody. That's how time works.”

As you were.

Carry on.

Permalink | Leave a comment  »

 We're very busy and that's a fabulous thing.

So, we need some extra people to help us out.

If you are a proper, top notch front-end coder with these skills:

• HTML
• Javascript

Please get in touch.

Umbraco and/or WordPress skills are a bonus, if you have them.

Please get in touch with Frank or Jules: make.it.work@welovetheweb.com

If you do, please include:

• URLs
• CV/website
• Day rate
• Availability for the next couple of months.

No recruitment agencies please.

So: if we hear from you, it means you can't read. And if you can't read, you can't help us.

And finally: No comic sans. If you use comic sans, it means your eyes don't work. And if your eyes don't work, you can't help us.

Permalink | Leave a comment  »

Here's a quick test.

Take out your iPhone (your friend's Android, Blackberry or other smartphone will do just as well).

Go outside, beyond the reach of Wifi and onto your 3G connection.

Now: browse to your company's website.

And wait.

... wait some more...

... tum-tee-tum-tee-tum ...

... not long now ...

... are we nearly there yet?

... I wonder what's on the telly tonight...

... maybe I'll just take a quick snooze while this web page loads.

OK, so why should you care? 

That's what one in five of your customers experiences.
Just before they leave in disgust.

Now, try this site m.guardian.co.uk

I hope you agree that this is far less annoying.

One in five users are now mobile.
This screenshot below is from the analytics for one of the consumer sites we look after. Popular site too, it has 50,000 members. Quick Caveat: different sites attract different browsers. We look at this on a case-by-case basis with you.

20% of web browsing is now done from mobiles!

You'll know this if you ever travel by train. Sometimes it seems as though half the carriage is busily jabbing away at touchscreen devices. Not having a mobile version of your site means you are annoying one in five of your customers. I think that's a bad thing.

Good news: it's usually straightforward to make a mobile version of your site.

Basically, we do some cleverness so that mobiles just skip much of the styling and images that make a desktop site pretty, but slow to load. There's no rebuilding: it just runs off your existing desktop site content. These stylesheets are simple and lightweight by design, so they aren't even expensive to produce.

We'll also set things up so that people on smartphones are automatically redirected to the mobile site. And even put in a link to the full site so they can get to that if they want it.

To find out more about how a mobile site could help you, call Frank or Jules on 01422 847 958 or email us: make.it.work@welovetheweb.com

If you have a friend or colleague who you think might like to receive these emails, get them to sign-up here: Sign up for the We love the web newsletter.
We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

And you can unsubscribe at any time.

* you stop punishing Android and Blackberry owners too at the same time. You may see that as a good thing or a bad thing, depending on how you feel about the shiny.

Permalink | Leave a comment  »

Very simply: almost anything except the things you'd expect to be easy.

Your Facebook fanpage is made out of frame that facebook supply and a page on your own server that gets pulled into that frame whenever someone looks at the fanpage.So, realistically, it can contain almost anything.

This bit comes from Facebook.

This bit comes from a page on your website.

We make magic spells and the two are combined.

So, your fanpage is mostly a normal web page that Facebook pulls in remotely using magic spells that we cast to make it all work. What most of our customers want is to get access to all those lovely people who 'like' you and interact with you. And that's down to making your facebook page relevant and valuable to your customers. I'll start to scratch at the surface of that in another post. For now, this is the 'mechanical' how-to.

There are a couple of rules about accessing people's details that will probably surprise and annoy you though: they are the opposite of what you'd expect.

You can:

• Do almost everything you can with a normal web page, albeit one limited to 740x588 in size.
• Make a different set of stuff display once someone 'Likes' you
• Collect information using normal web-based forms. So, you can ask for people's email address, inside leg measurements and get them to enter a competition, but you can't automatically 'harvest' information from their profiles.
• If you want to gain access to people's profiles then you build an application such as this one:
  http://apps.facebook.com/hovis-stop-snacking/?ref=appd_my_recent&fa=1.
• People have to give permission for you to access their profiles. The deal is this: you give people something they want and they, in return, hand over their name, permission to message them, post on their wall, access to their list of friends, messages they've posted, profile, phone numbers and private innermost thoughts. Seems like a good deal.

You can't:

• Get access to someone's facebook profile name, addresses or profile details directly from a fan page.
• This is the annoying one, because it's the one that everyone asks for. Gathering this info has to be done through a facebook app. and these don't live on the fan page.
  • Facebook apps. are a slightly different beast and they can't be on your Facebook homepage. They have to be on a separate tab or linked from the fanpage.

One more thing to note:
Facebook change things. A lot. Like, all the time. They've probably changed everything at least twice since you started reading this. When I'm doing research on anything facebook related, I tell Google to ignore any page older than 6 months old.

And Facebook Connect? Oh, I think I've written enough for this mini how-to. I'll cover that soon too.

Bootnote:
D'you know what? It's getting harder and harder to shoehorn in an insult to comic sans, the world's ugliest typeface. Hmm... your suggestions welcome for how to do this more effectively.

Permalink | Leave a comment  »

We love the web has taken the plunge and embraced WordPress.

So, to celebrate, we're offering a free bottle of Champagne with all orders placed in August*

Why havn't we offered it before now?

WordPress has always been a capable package, but has had real security and usability issues until quite recently. Still, we've kept an eye on it because it would be daft to ignore the world's most popular CMS. The last few updates have been focused on a big security overhaul and a major revamp of the administration tools.

So WordPress has pulled off the ugly-duckling manoeuvre?

Pretty much. It's blossomed into a beautiful swan: a powerful lightweight CMS that has loads of great plug-ins and can be extended in all sorts of interesting ways.

We also now have several people on board with a load of WordPress experience (so we can support you, even if one of us is on holiday). Add in the number of requests we get for it and, all in all, it made sense to start offering it as a CMS solution.

For reference, here's a site that Tim built in WordPress: http://www.skolarsrl.com, and a site that Matt built: http://www.walktheplank.co.uk

Don't forget that we're still top-notch ASP.net, eCommerce, Contentment and Umbraco developers too: that hasn't changed. The good news is the offer of free booze applies to all orders.

To take advantage of this offer, just call Jules or Frank on 01422 847958 or email us: make.it.work@welovetheweb.com

*Terms and conditions: minimum order value £250 and we deliver the booze along with the completed job. Err, that's it. If you don't like Champagne, talk to us. Sure we can work something out. Oh damn, just noticed that there's no rant against Comic Sans in this blog post. Don't know what's come over me. Must be the summer heat. It's still rubbish though.

Permalink | Leave a comment  »

'Should we promote our site using Google AdWords, or invest in Search Engine Optimisation (SEO)?' Which is better? I get asked this a lot.

SEO is a basic 'Thing you should do'. If you don't, you are throwing money away.

Not doing SEO on your site is like spending £10,000 on a brochure but keeping it in a box at the back of a cupboard. Silly, right? SEO improves the chances of your customers finding you. The basics are not even technical, but they do take time (this will be the subject of a 'how-to' very soon).

If you haven't done the SEO basics then you shouldn't even be considering AdWords.

Let's assume you've done the basics. Should you invest more in SEO, or spend money on AdWords?

That depends.

AdWords are good when:

• You've done all the basic SEO stuff
• You have a specific product, service or event to promote
• You need to get the word out 'Right Now!'
• You are prepared to spend time testing and measuring what leads to sales and what doesn't. If you don't, then you'll get a lot of click-throughs, but no sales.

Bad things about AdWords:

• As soon as you stop spending, the traffic stops.

SEO is good when:

• You have a reasonably stable target audience or range of products.
• You don't have a huge budget.
• You want to do some work now and reap the benefits for the next year or more.

Bad things about SEO:

• It's hard to test and measure results quickly.

We have used AdWords in the past with good results to refine keyword choices for optimisation. We use AdWords to work out what SEO we should do!

So: we have a very low budget Adwords campaign on a number of different keywords. At the end of the month, we look at which Adwords generated the most sign-ups/sales/enquiries. We then know how to optimise the site. This is a good way to make sure your SEO budget is used effectively.

Whatever you do, make sure you measure the outcomes to see what you get back from the money you spend.

Permalink | Leave a comment  »

In the beginning it was easy.

The only fonts you were allowed to use on a web page were the ones everyone had installed, so:

Times, Arial, Courier, Verdana, Georgia, Trebuchet, Tahoma, Lucida

And that's yer lot. Everything else had to be created as an image.

Then came a little widget called Sifr, another called Cufon and finally the widespread use @font-face in stylesheets.Yeah, I know that sentence is gibberish, but in plain English: you can now use any font online. And 'lo the designers were greatly pleased.

It's not quite a free-for all though.

• Every non-system font we use adds about 20k to the page load. So add more than a couple and it will start to affect website load time (especially on mobiles).
• Fonts aren't free and need to be licensed. Sorry, we can't just include it on the quiet. This is public, easily searchable stuff and you will get caught. It's a cost we can't predict until we see the artwork, so be prepared for us to come back and ask you to license the fonts. 
• We still can't do kerning and leading in the way you are used to in print work. Sorry. Give it five years.
• Email is stuck in the past. You can still only use the standard system fonts. Everything else has to be done in images.

Do

• Use fonts creatively, but sparingly

Don't

• Use comic sans. Ever. No really, why would you? It's deliberately choosing something ugly when there are so many beautiful options available.

Permalink | Leave a comment  »

Was having a conversation at a party last week about this (yeahman, you just know the kind of happenings I go to) and someone asked me this, citing that dreary Microsoft advert where some insanely dull person says 'let's take it to the cloud'. Whizzy stuff then happens and you are left no wiser.

Very simply put: cloud services are things you only ever have online and the 'cloud' is just a confusing way of referring to stuff 'out there' on the Internet. They aren't dependent on your particular computer, they can be accessed from anywhere.

Paypal is a cloud service: you don't have a Paypal installed on your computer. Hotmail is a cloud service. Google documents is a very useful cloud service: like a word document or spreadsheet that lots of people can work on at once (and see each other's changes as they make them).

Those are all cloud services and you probably use them every day.

Permalink | Leave a comment  »

On May 26th 2010, a new EU directive came into force stating that, if you store a cookie on a user's machine then you have to gain their explicit opt-in consent.

What is a cookie?
It's a little fragment of text that we store in the user's browser so that we can track them around the site: whether they are logged in, whether they have a shopping cart, where they've been on the site, how often they visit and that sort of thing. Google analytics puts a cookie in place, for example, so that you can see where visitors go.

Why do you care?
We may have to alter your website in order to make it comply with the law and sorry, that isn't covered by support: it's a chargeable item. We'll have to look at your site and assess exactly what we need to do on a case by case basis.

Why haven't you told me about this before?
The Information Commissioner's Office (ICO), whose responsibility it is to enforce this, have said that they are not going to go after anyone for non-compliance this year. Next year, however, they may. We have a little time to look at this, but it's coming.

To be blunt: we just didn't think it would become law. It's a bit of a daft idea requiring the alteration of pretty much every single website in the EU for no very clear privacy benefit. Talking with others in the industry, almost everyone is agreed that no-one knows how this is going to play out in real life. As an example, none of these sites are yet compliant: www.number10.gov.uk, www.nhs.uk, www.parliament.uk, www.conservatives.com, www.direct.gov.uk. Right now, what we should do about this is unclear. Even the ICO seem confused as to what people should do to comply. Their own site sets a cookie in order to ask you whether or not it can store cookies!

So: why are you telling me now?
It's better to tell you now, so you know something's coming, than have a nasty surprise next year some time. We'll keep you posted as to how this develops: we're hoping that a best-practise will emerge over the next few months so that whatever we do is a one-off amend that doesn't need to be revisited.

Are there any loopholes?
Theoretically there is an exemption for cookies placed in order to make the website work: e.g. shopping carts and logins but there still has to be explicit consent and the capability to delete the cookies if consent isn't given (or not set them in the first place).

What's the worst that could happen?
Well, it might be like Disability Discrimination Act and be 'more honoured in the breach than the observance' (i.e. lots of people break the rules, but no-one really gets sued), or it could be actively pursued. At this stage, we just don't know. The fines for breaches are up to £500,000 so we're obliged to take it seriously.

Note: our sites are built to comply with DDA legislation.

Where can I find out more?
http://www.ico.gov.uk/news/current_topics/website_changes_pecr.aspx

If you have any other questions, please feel free to ask us for more details. We're happy to help.

Permalink | Leave a comment  »

Seriously, how hard can it be? A few wipes, fades, a line of text and a logo. Bish, bosh, bash: job done.

Aye, maybe: but you do underestimate the ability of people to complicate the simplest thing.

If you need to make a banner advert for a client then here's what you need to know.

What's an Ad management platform

Any website that publishes a lot of adverts will have an Ad management platform. These control how many times a banner is shown, when it's shown, tracks clickthroughs, handles where in the site the Ad is served and so on. We have to make a banner that can talk and listen to the Ad manager. This affects the deliverables in a number of ways and we'll ask a number of questions before we take on a job.

What's the clickTag?

When you click a flash advert, you get taken to the target page on your website. Under the hood, the flash movie shouts out 'I've been clicked', then the ad management platform steps in, looks up where it needs to take you, records the click and only then passes you on.

The clickTag is the 'hook' that the ad management platform uses to track whether or not the banner has been clicked and we need to include that in our banner movie. They differ slightly between ad platforms and the publisher will normally be able to give you/us that code fragment.

What's the maximum file size?

Flash banners are generally tiny, tiny files: 30-40Kb. This is because a magazine can easily serve a million pages a day, each with several ads on it. Serving big files turns into an expensive headache for publishers really quickly. They have strict rules, therefore, on how big your file can be.

Well, how do I get whizziness and video into my flash with that file size limit?

Since 30Kb is barely the size of a jpeg, it can be very challenging to do anything other than a few wipes and fades leading to a text-slogan. A lot of the time and effort we spend is often making the flash movie into a small enough file.

As a basic guide: We can do quite a lot with vector artwork in 30Kb.

The big things to avoid are:

• Too many fonts(more than 2)
• Too many photos (more than 2)

We've all seen adverts that contain video and other rich media though, so how are they done?

The basic file you send to the publishers is still only 30Kb, but it usually just contains code and a placeholder image. Once loaded, the banner then goes and fetches video, images etc. hosted on a web server elsewhere, pulling that into the banner for display.

In the early days of video banners that caused a real problem: all these big files were being loaded in at the same time and people weren't able to see the page they were trying to access as it took theee days to load. So, nowadays we have to do 'polite loading'. Polite loading waits until the rest of the page has finished loading, then asks for all its heavyweight files one after the other.

The only way that the banner knows that the rest of the page has finished loading is if the ad management platform tells it so. We have to include code (that the publisher will supply) in the banner that allows the banner and the ad management platform to 'talk'. Whether or not we can do polite loading should be checked with the publishers before you start on the creative.

How do we do those flash banners that pop-out over half the page?
First off, ask the publisher if they allow that on their site (the key term is 'expandables').

If they do support expandables then we go to the technical bit. These are made up of 2 separate flash movies that are both hosted by an ad management platform, ready to be served in that particular format. It knows to serve both and handles the switching between them.

As an aside: because they are separate movies, you can't pass information between the small and the large size, so you can't pass over what frame they were on or whether sound was off etc.

Skyscrapers, Leaderboards and Micro Bars: what size should I make my ad?
For the actual build, the publisher will have specs.

During meetings, you'll often find people in the industry referring loosely to the various formats by name and you may not know which is which. Here's a lookup list matching name to sizes helpful: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

What about iPhones: they don't use flash?

Not just iPhones, but anyone who doesn't have flash installed won't be able to see your ad. To get around this, it's normal to supply either a Jpeg file or animated Gif file as a 'flash alternative'. This also needs to come in under that 30kb file size liimit.

If it's a Jpeg then it can't be animated. Using a gif file, we can usually get two, sometimes three, page states out of it as long as they are simple. The main decider is the number of different colours we need to use as Gifs compress by posterising the image to reduce the number of colours. Photo's and gradients need a lot of colours to look nice, so think flat screens of colour and text when designing the alternative.

Allow for a small amount of artworking time to create a flash alternative.

How do you want the artwork then?

• A storyboard is essential - outlining the screenstates and transitions (we can work with you on creative effects and transitions).
• Crucial: let us see them before they go to the client due to the restrictions on file size etc.
• Illustrator files please: this is vector artwork.
• RGB, 72dpi, outlined fonts or fonts (if appropriately licensed).
• Flash alternative artwork
• Comic Sans font files will spontaneously combust on collision with our firewall.

What are Doubleclick and Eyeblaster?

These are Ad networks. They have management platforms used to serve a lot of Ads on more than one site. Creating accounts for these is usually aimed at bigger ad campaigns that sort of fall out of the scope of this how-to: that's more of a media buyer's job. We've worked on campaigns like this before. If you are planning an online media campaign big enough to need these systems then you'll also need digital media buyers.

And finally: those banners that show me what I was looking at on a shopping site last week: how do they work?

Debenhams (or whoever) have a media account with a big ad network who we will, for arguments sake, call 'Doubleblaster' or maybe 'Eyeclick'. As you browse the Debenhams site, it puts a cookie from on your machine with a unique number. Every time you look at a product, it calls up the Doubleblaster server and pushes 'person 395241564 looked at a Smeg fridge on the Debenhams site'. Thereafter, everytime you go to a site that serves Ads from Doubleblaster, they look up your cookie and what products you looked at, then serve info. about those products back to you as Ads.

The idea is that people often browse for something a few days before the buying decision and repeatedly jogging their memory leads to extra sales. It works, but it can be a bit disconcerting. 

As always, if you want more help or have specific questions, then phone 01422 847958 and ask for either Frank or Jules: we're happy to help.

Permalink | Leave a comment  »

We can see that he doesn't get on with designers: he's must have annoyed all the designers he knows so much that they refuse to work on his brochure. Boy, is that an ugly piece of print.

Anyway, this inestimable pamphlet outlines how web designers don't care about about the benefits of being sociable online, keeping in contact with customers and writing relevant content (then keeping it fresh with regular updates). It seems we ignore SEO, analytics, testing, measurement and other techniques that allow you to see how that money you are spending online contributes to the bottom line.

Please note: we really, really want you to pay attention to these things! (And not just because some of them are chargeable services).

They make the difference between a website that adds to your profits and one that just sits there, not doing 'owt for you.

Analogy time: I go to my friends' house to see my friend. There's always something cool happening at his house. No matter how well built it is, I go there to see him, not admire his joists!

A website build can create a great place to hang out online: with metaphorical comfortable seating, pleasing architecture and light, airy atriums. Thing is, if no-one's visiting then it's just a dead space.

Dead space doesn't sell.

Help us help you make sure you have proper content, social and measurement plans as a core part of your online marketing. It makes all the difference.

Permalink | Leave a comment  »

*** No agencies please. ***

We Love The Web is looking for a web developer. The perfect person would be an web developer who loves their work and is always looking to develop their skills and learn new stuff. If you have a brain that rapaciously acquires information and is good at problem solving, you'll fit right in. We try and fit the job to the person, so only C# and SQL server are core 'must have' skills, with the rest being optional.

Technical skills

Essential: C#, SQL server

Nice to have: Umbraco, XSLT, AJAX, JSON, Spring framework, VB.net., SVN, Javascript, HTML, CSS, MVC, TDD

Of interest: Objective C, Facebook SDK, Android dev.

A lot of your work will be with the Umbraco CMS. If you haven't used it, it's a lovely framework and there's training in the specifics available as we're going through the Umbraco certification programme.

Non-technical skills

We're also interested in someone who is as happy with the speccing and client-facing side as much as the development: but from a dev. background. It's not core, but if you want to take things in that direction, happy to talk about it.

Why work for us?

• Produce great work: We've had projects for O2, Adidas, Sainsbury's, Manchester Airport, Kelloggs, Horlicks, Ribena and more in the last 3 years. 
• Good prospects: We've doubled in size in the last 3 years. We plan to do the same again and we promote from within the team.
• Learn new stuff: We're engineering-led. We want you to introduce new technologies and better ways of doing things. Come up with good ideas and we'll support you.
• Great team, stable too: people seem to like it here. With 5 in the dev. team, you've got the autonomy to work effectively, but with enough support to help you when you need it.
• Good company: We love the web started in 2003 and has doubled in size in the last 3 years by winning more work. We do sustainable growth, not 'explode then collapse',
• Good working environment: Many people work from home part 2 days a week or on flexi-time, some work 4 days a week. We're happy to be flexible if it means that you are happier.

Here's what Mike, who used to work here, tweeted when he saw the our last job ad.

• Bike to work scheme (funny how we all have great mountain bikes here)
• Profit share bonus
• Flexitime/working from home etc. are all standard practice here.

£30-35k

Next steps

Talk to Frank:

make.it.work@welovetheweb.com or call on 01422 847 958 to have a chat or arrange an interview.

*** No agencies please. ***

Permalink | Leave a comment  »

Without doubt, this is toughest online design discipline, bar none.

For a print designer, it's like playing 3D chess. It's hard because the pages change, depending on how they're used. Forget your A4 piece of paper with a set amount of space. No, you have a page of indefinite length filled with elements of varying height and/or width. To add to the fun: you'll have bits of the screen that reconfigure themselves depending on the time of day, what the user is doing, whether there's a video or not or any of a hundred other variables.

We can't make it simple, but we can help you avoid the pitfalls.

Basic approach: content led design

You are designing a set of templates that other people will use to make pages of their own. This means relinquishing a lot of control over how it's used to a content-monkey who understands little about design. The templates have to be flexible and robust so they always look good despite the evil works of design-illiterate website admins.

Do:

• Stress-test your design once the basic layout is one you are happy with.
  • Does this design still work if the headline is twice as long? 
  • What if the images are half the size (see images stuff, below)? 
  • How does it look when there are 10 items on the page? When there is one item on the page?
  • What if the one column has a lot of content? Does it push everything else out and make the rest of the page look ridiculous?
• Content builds up over time. Think about how a page element might look when there are 3, 12 or 100 items to list. 
• Have a read of this article here: http://www.onextrapixel.com/2010/11/03/15-ui-design-patterns-web-designers-should-keep-handy.
• Use a column-based grid layout: make it one that cascades down the page, so that big content lumps can push others down the page without breaking.

Don't:

• Make something that requires lots minor variations of the same template.
• You won't necessarily know what you can and can't do, but we are happy to give feedback. if we say 'this won't work' then it's because we are trying to help you achieve a good, workable design and genuinely not that we are trying to be unhelpful.

Images

Most modern Content Management Systems scale images to the right size for the site automagically, but there are limits to this: the machine is fairly 'dumb' and cannot intelligently crop an image.
We can scale it to size in one of three ways.

1. Squish it to fit into a defined size. This will distort any image uploaded that doesn't fit into a given size. You can't force a rectangle into a square hole without breaking it.
2. Scale to a set width and then set the height in proportion.
3. Scale to a set heigh and then set the width in proportion.

Don't worry, we know that's tough to visualise, so here's an illustration.

Do:

• Visualise your templates with a series of landscape and portait images. Make sure you are happy that these will display correctly.
• Remember that finding appropriate images can be hard, so some items may not have an image. Visualise your templates so that some items have images and some don't.
• Remember that some images may be used in more than one place. The classic mistake here is to put an image thumbnail on the news homepage that appears again in a completely different aspect ratio on the news story page. They can be scaled to different sizes, but we can't shape-shift them!

Don't:

• Flow text around a curve or image cut-out. It can't be done.
• Flow text around a rectangular image. Well, you can if you want but bear in mind that line-heights are fixed - site administrators may get orphans and widows because the image is just 3 pixels higher than the line wrap.

Text

When we get artwork for a CMS website from a designer, the same chunk of Lorem Ipsum usually fits very neatly into exactly a space provided, kerning and leading adjusted to make it fit.
Real life isn't like that - you have a harrassed PR guy trying to push the latest press release online in about 10 minutes flat. The truth is they will never respect or follow any visual rules that you try to impose. The only solution is to make it sufficiently flexible to accommodate this variability and look good.

Product names are the classic case. To choose two items from Amazon:
'iPad (16Gb)' vs. 'Panasonic KX-TG8422EB Colour DECT Twin Phone With Answer Machine - Black'
Both have to fit into the headline slot. Both have to look good.

Here's an example. In this pic, the text has been neatly fitted to the available space.

Still OK? Well, that line-wrap looks a bit wrong. The boxes look all irregular too. It's not as good-looking as the first piece of artwork, certainly. If you don't try out the variations, then your design will fail in real life use.

Do:

• Make the text line-wrap over several lines as well as showing it fitting neatly into a single line for headlines, sub-headlines and body text.
• Make your design rubbery. It has to look good with one line of text in the headline or three.
• Allow each element to stretch and contract. When designing: visualise every element with twice and much and half as much text.

Don't:

• Fit everything neatly into a space allocated.
• Use comic sans. Black polo-neck clad typography ninjas will pad silently into your stylesheets and do unspeakable things under the cover of darkness.

Site functions

When designing, make sure you understand the types of content that go in the site and what the restrictions are.

Anyone can draw a picture of a moon rocket but it doesn't mean we can provide you with a vehicle capable of interplanetary travel!

Seriously, a designer recently added 'last time you were here you visited the following pages:' throughout the artwork for a site, then showed it to the customer, who loved the idea and signed it off. The first we knew about it was after the sign-off. We said: 'Great idea. It's not in the budget mind. We'll happily do it, it's an extra day or two at our normal rates.' Cue much muttering, but it's really not our fault.. We'd rather have happy customers, but we can't extra work for free. We will supply wireframes or a spec. showing what each part of the site will do. Please follow this, or discuss it with us if you are unsure it will meet the client's needs. It may be an extra, or it may be that we can do something similar within budget, but it's handled properly and not adding to anyone's stress levels.

Do:

• Work from the wireframes and spec. documents. If you don't understand them, we are happy to support, explain and illustrate, more than once if necessary.
• Show us artwork early and often. We can identify potential issues before they turn into problems.

Don't:

• Design something in isolation, sell the client on it and then show it to us. It's bad for everyone's blood pressure. Please don't think we're being unwilling: if we're shown designs that can't be achieved, then we have to say no!

Navigation

Do:

• Visualise a navigation item text wrapping over two lines. It will happen, so be ready for it!

Don't:

• Put content-managed navigation across the top without thinking long and hard about what may happen next year. Your client may want to add a new site section called 'Insert very long name here'. Is there enough space for that?

Integration with outside systems

We do a lot of integrations with stock control or warehousing systems run into issues when the designer has included a whole number of fields that don't exist. There was a recent example where stock management software is supplying the core information for each product in a large 'brochure' site. Their software contained no pricing information, but the design called for four different price points to be displayed on each of the 20,000 different products (price breaks by how many you buy). Assumptions collided with reality in a design presentation when the client pointed out the lack of pricing information and how many person weeks it would take to create that info if they added 100 products a day. The design was changed.

Do:

• Check what information an outside system will be supplying (we'll help with that: we'll usually supply a list of available fields).

Don't:

• Assume that any missing information can be created by the client. They may not be happy about that.

A special note on eCommerce

Do:

• Think like a customer: what would I look for when deciding whether or not to buy? We've not bought a computer because the spec. was vague and the image of the back of the machine was too small and we couldn't see what type of video card it had in it. A £400 sale lost because the photo was too small. People have very little emotional commitment to one shop over another, so your product pages should be very carefully considered.
• Think about how people will use the site, whether it all makes sense and whether you'd buy based on the information you can see on the page.

Don't:

• Use lorem Ipsum. Use an actual product that you would want to buy and make sure it includes the information you need to make a buying decision. If it doesn't, discuss with us to see if that information can be created. 

We've only scratched the surface really, but there's so much to cover....

If you'd like any further help or advice, please feel to drop us a line at make.it.work@welovetheweb.com

Permalink | Leave a comment  »

Bit late this month. Very, very busy. It's a good thing. Anyway....

Designing for email is a specialist discipline that causes problems even for experienced web designers. We’ve created HTML mailers for some of the biggest firms in the business and we’re sharing our expertise.

Why is email so difficult to do properly?

Over 95% of email traffic is SPAM. A lot of that is malicious and tries to trick you into doing things that will harm your computer. Dumbing-down the code makes it easier to keep the bad guys at bay. Javascript and Flash can’t be used in email because they've been used to infect computers with viruses before. The makers of email programs are just trying to shut down lines of attack for the bad guys.

Email also has to work on a vast array of devices: far more than a website.

Quick round-up: Outlook 2003, 2007, 2010, Mac Mail, iPhone mail, Outlook Express, Windows Mail, Entourage, Thunderbird, Blackberry, Nokia mail reader and webmail: Hotmail, Yahoo mail, Google Mail and so on. For each webmail variant, your email also must look right in Internet Explorer (version 6, 7 and 8), Safari, Firefox and Chrome.

The margin for error is tiny: we spend most of our time in any given email build on testing, testing and testing again.

Good news: we’re here to help.

Artwork Setup

Do:

• Make your main content area:
  • 600 pixels wide if you are designing for a consumer audience
  • 750 pixels wide if you are designing for a business audience
• Remember to set your image editor to work in RGB at 72dpi

Don’t:

• Work at 300dpi in CMYK

Don’t forget:

• Allow for a variable screen-size, so allow for a surrounding background colour* around your main content area.

* Background colour is safer. Background only 'sort-of' work in hotmail and can break in annoying ways.

Images

Images aren’t downloaded by default in most email programs. Worse, some email programs strip out all HTML, leaving just the text behind: the user isn’t even given the option of downloading images!

Here’s a great example: guess what’s on sale here?

Ooh! It’s a netbook! Well who’d a thunk?

Do:

• Design your emails to be intelligible without the images.

Don’t:

• Put text over images or grads. If you do, we have to do one of two things.
  • ‘Bake the text into the image’. The meaning is lost if the image isn’t downloaded
  • Put the text over an image background. Background images are often filtered out by email programs, so you lose visual appeal. 

Fonts

Emails don't embed fonts, so you have to use the fonts installed on the user's computer. That does impose restrictions since it means you have to use fonts installed on everyone's computer.

Do:

• Use system fonts. These are: Times, Arial, Courier, Verdana, Georgia, Trebuchet, Tahoma, Lucida

Don’t:

• Use non-system fonts for any crucial information (including headlines). Anything you need to be set in a different typeface will have to be created as an image, so it won’t be legible to anyone opening your mail, but not downloading the images.
• Use white text on a dark background. If the background colour is filtered out by the ISP, your customers will be left with white text on a white background. Using light-coloured text is not a workaround: your customers will be left squinting at the screen in annoyance, trying to read low contrast text. We tend to feel that making the customer angry is a bad thing.
• Do bullet-pointed lists, especially not using custom bullet points. You will just cause us, and you, and your client pain and frustration as it goes through 25 iterations of 'not quite right' as there's no easy way to do this in email HTML.
• Put ‘real’ text over an image. We’ll need to put the image in the background of the table cell and background images overlaid with text won’t work on many email programs: the background image will be filtered out.
• Put ‘real’ text over a colour gradient. Same reason.

Don’t forget:

• Don’t use comic sans. Not ever.

Animations, forms, rollovers and video

You can’t really use these in email.

Do:

• Include very simple 2-3 frame animations if you want. These can be achieved using animated gifs. These may not work in all email programs: only the first frame may display, so make sure it is mainly used for visual impact: anything people must see for the email to make sense should be in text form.

Don’t:

• Put animation, video, rollovers or forms into your email. None of these things will work. If you want to reference some video, put in a ‘You-tube’ style slate image that links directly to the video.

File Formats

Do:

• Give us layered Photoshop or Illustrator files.
• Include fonts with your artwork (if appropriately licensed).
• Supply artwork with fonts outlined if fonts aren’t appropriately licensed.

Don’t:

• Give us PDF, InDesign or Quark files. These are intended for print and can be problematic.
• Give us Jpegs and tiffs – they are ‘flattened down’ and aren't suitable. 

Content managed email: special notes

Do:

• See how your design changes when you put twice as much text in each element

Don't:

• Design multi-column setups: equalising the heights is well-nigh impossible.
• Design multiple 'pods' side by side unless your client has the budget for you to create these as images for each email they send. The ONLY way to get the heights to equalise in a controlled fashion is to make them as images.

Finally: forget about the pretty

Most of the variables in the success of an email are nothing to do with how it looks.

Five ways to improve email response rates

The effectiveness of your email promotion depends on how many people open, read and act upon your mail. There are a number of factors affecting this, the most important of these are nothing to do with the design of the mail:

1. Clean subscription data
2. Correct sending setup
3. Subject line of the email.
4. Degrading Gracefully
5. Clear call to action

1. Clean subscription data

I don’t know anything about your mailing list, but many are in a poor state. 
Old email addresses that no longer exist and people who haven’t opted in consciously will both make it much more likely that your email never reaches the recipient. 

Since over 90% of email sent is Spam, most spam filters are very, very sensitive. Most ISPs will detect even relatively small numbers of mails with the same subject line and content coming in.

If a significant proportion of those are to email addresses that no longer exist, the mail will be thrown into a ‘black-hole’: your user will never see it.

If a handful of people have marked the email in hotmail or gmail etc. as ‘spam’, then no-one on that domain will see the email, it will be black-holed. People are much more likely to do this if they did not consciously opt-in to receive the email.

If the list is clean, up to date and is populated by an opt-in (people have chosen to be on the list) or is a list of existing customers (people with whom you are expected to communicate), then you should look at a service like mailchimp. If the list is old and crufty, then you should look at a data-cleansing exercise first (or even start again)

2. Correct sending setup

To reach the user, the emails should come from the place that they say they come from e.g. I could send you an email from our server pretending to originate from god@heaven.com, but it would probably never reach you because the internet would do a lookup to compare the IP address for heaven.com with the sending IP address of the email. If they don’t match then it’s spam and goes in the bin.

If there are more than a few thousand subscribers then it’s worth looking at spam white-listing services such as Return Path.  These are expensive, (about £1500 a year, last time we used one), and a faff to set up, so only worth doing if your send a lot of email.

Alternatively, we use Mailchimp quite a bit. Their sending setup is has high delivery rates and is reasonably priced.

3. Subject line of email

Is the email equivalent of ‘Front page, above the fold’ in a newspaper. If the subject line is engaging, witty, interesting etc. then people will open the mail. If not then they won’t. Most people don’t think about the subject line, but it’s incredibly important.

A final note on subject lines. I was recently sent an email by someone extolling their ‘n_k_d* marketing’ offering. Because of that one word in the subject line, it was spam filtered in three different places. I had to ‘release’ it from three different spam traps before I could read the mail. Most people wouldn’t have bothered. Anything words relating even tangentially to procreation should be avoided.

* ‘not wearing clothing’.

4. Degrading gracefully

Not all email reading software is the same. Some strip out background images even if you choose to ‘download images’, some strip out all styling information, some strip out colour and so forth.

The point is this: you should always make sure your design can be read and acted upon by the user even if all they see is white text on a black background.

And Finally…
If you are looking read rates (also known as open rates), you may be measuring the wrong thing.  Open rates can be a very misleading guide to the success of your email – to the point where we encourage people to disregard them except as a trend indicator.

• If your user does not click the ‘download images’ button, you won’t know they’ve read it
• If they have not enabled HTML email in their mail client, you won’t know they’ve read it.

This is because the emails rely on a ‘beacon image’ being downloaded to flag the mail as being read. The image is unique to that particular email, so we know which mail it was.

The real measure of success is the clickthrough rate: the number of people who respond to your call to action.

Permalink | Leave a comment  »