The Dark Art of HTML email build

So designers out there, at some stage in your career, it’s likely you’ll be asked by a client to design a HTML email, that's the easy bit, more to the point you'll be asked to build that design into a working, cross email client HTML email. Therein lies the problem the biggest challenge for designers still remains building an email that renders well across all the popular email clients. Here are some top tips on the dark art of email build.


How wide should me email be?

Each email client uses up real estate for stuff like menus, the inbox on the left in outlook and advertsing. So the amount of space you have to play with is limited. Create an outer table and centre it. That should be a fixed width of between 550px - 600px wide, this ensures that there is no annoying horizontal scrolling for the user.

Keep it simple

That means bin javascript, ajax and definitely bin flash. The only client to recognise and display flash is mac mail and whilst Apple mail is on the increase it's still not a majority player. Check your client base see which browsers and email clients they are generally using. Not surprisingly mobile devices are on the up and so is gmail.

Lowest Denominator

Here's the think there are A LOT of email clients and the more complicated the design the less people will be able to view it correctly. So keep the design simple, keep the graphics small and put key information outside graphical format.

HTML Rules

• Use tables for layout
• Use a container table to set background colours
• Use nested tables and remember for each nested table you'll need to redefne the font family, font size and colour.
• Move all CSS inline
• Avoid shorthand CSS including hexdec values
• Beware the paragraph. Whilst clients are now starting to support tags, beware they all interpret them differently. Try and set padding on 's rather than
  tags. Set margins inline on each tag.
• Links: you'll need to specify the colour of each link inline in the href.
• Don's use float it don't work!

Images

Remember a lot of email client turn off images by default so if you have big grabbing headlines try and use text not graphics. This goes for any other important information. Whilst it is tempting to design a large graphical email and chop it up into tiny winy bits in a table and call it an email, it's a bit of a lazy solution. You can't think web design when designing email you have to think email design and the limitations that brings. Make sure your client is aware of those limitation too and you'll avoid all sorts of trouble and disappointments.

Hotmail adds pixels of padding below any image! Yeah go hotmail. So in the header (because hotmail reads the header) set this workaround  img {display:block;} and don't ask it'll drive you mad.

Don't use PNG's lotus certainly ignores them and I image other client fuss over them too. Stick to JPG's and GIF's.

Always including the dimensions of your images but remember that many clients will also ignore those so make sure your images are the right size too.

Make sure you have alt text assigned to your images, see above for blocked images on many clients. 

Alternative Viewing

I always try and have a "Can't see this then click here" at the very top of the email in text only and then load an HTML version onto a server so people can see the email even if they use the world's worst email client.

Testing

Finally TEST RETEST and TEST again. Litmus is a fabulous (if slightly pricey) piece of software which allows you to run HTML through most email clients and see the (often very frustrating) results.

The Client versus Usability

So here's the question every designer will ask at some point in their career. 
"Why are you bothering to spend money contracting in the services of a professional designer with usability knowledge and experience if you are going to systematically ignore everything we advise you on website design and layout?"
13 years in the industry and I still can't answer that. Now the old edict that the client is always right is not true, in fact it's pants. I don't get a roofer in to fix the roof and then as he tells me where and what will be the best way to prevent further leaks, stroke my proverbial beard and say " I hear what you are saying but no, let's concrete the driveway instead I think personally that's the best way to fix the roof and I'm the client"
So first truism of the day THE CLIENT IS NOT ALWAYS RIGHT, in fact in the majority of cases they are arrogantly wrong about usability.


So, for me, web design is split into roughly into 2 parts. You have the usability of the design, which is the layout, where elements are positioned on the page in relation to what the client wants to achieve. Secondly you have the design itself, the colouring in if you like.


Design.
The design of the site, the colours, fonts, images used, icons, background and general feel. Hands up this is subjective, you may design something that you think is just on brand, and beautiful, but ultimately if the client wants bright pink and yellow, with black text and crap animated icons, this is design and they are the client. As much as it may gall us designers we simply have to bite our tongues and deliver the mess that is often the clients design preference. Sorry but in this case the client is always right, however usability that opens a whole can of worms. 


Usability
This is from useit.com but I can't define usability any better:


Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by five quality components:

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?

The type of site, it's function and aims will change the way a designer approaches a site. Are they e-commerce? If so you need to address the layout of the page differently from they way you might approach a brand brochure site. 


Usability may not be an exact science but it's a science nevertheless, there is some wiggle room for subjectivity but to a greater extent many of the rules for good usability have now been tried and tested. Most designers will know their Jakob Nielsen (http://www.useit.com/) and also Steve Krug and his infinitely enlightening Don't Make Me Think!: A Common Sense Approach to Web Usability (http://www.amazon.co.uk/gp/product/0321344758/ref=ord_cart_shr?ie=UTF8&m=A3P5ROKL5A1OLE)

What is perhaps most frustrating for a designer is a client who disregards all the work you put into usability. Let's take an example. A client wants an e-commerce site, their primary aim is to sell products online and make money, a secondary aim is to reflect their brand.

As a designer I would incorporate a search facility, links to delivery, a well structured product navigation, a feature banner perhaps to reflect the brand, and some homepage feature boxes perhaps promoting products or features.

On the homepage I would look at the 3 main types of user. A tracker who knows what they want and needs a clear easy to use search facility. The explorer who knows they want say a pair of trousers but is unsure as to which trousers and what colour. Here my product navigation comes into play. It needs to be intuitive. Thirdly the browser who doesn't even really want to buy anything but is having a browse. They need enticing into the site through homepage features and promotions. All 3 user types are important to convert into purchases if the site is to be successful.

So what do you do when the client looks at your designs, deems them too busy and says they only want a large lifestyle banner on the homepage and nothing else?


I think this is where you need to fight your corner. In terms of performance if the site fails to perform because the client has insisted on having a search facility bottom left, a navigation that needs a IQ of 300 to use and a checkout process that simply leaves you confused, they will be banging on your door asking why. In addition I promise they will have selective memory when it comes to usability discussions that you may have had.

Arm yourself with facts. read up on the subject, for example e-commerce usability reports. Useit and Steve Krug are great examples. Email the client so you have proof of these conversations so that the comeback from failed site doesn't land on your doorstep. Client can be expressly arrogant when it comes to web design, everyone is a designer. So simply cover your back, fight for what you think is right and ultimately if they are pigheaded enough to ignore all your professional advise ... well tarmac the driveway to fix the roof and wait for the call in a month to ask you back to fix the roof!

Maternity Pay for Small Businesses

So here I am fat and round and looking ever-increasingly like Mr. Greedy. I'm 6 months pregnant and trying to unravel the joys of SMP as an employee of a small business which I also own. But here's the good news it's really not that hard.


SMP is paid through the tax office to the business which you then pass onto yourself in weekly or monthly instalments as the employee just like you would PAYE. 


SMP (Statutory Maternity Pay) is 90% of your weekly salary for the first 6 weeks  and then £124.88 for the remaining 33 weeks. So 9 months in total and although it might not seem a lot it really is better than a kick in the teeth. On top of that the business is paid 4.25% for administering the SMP (bonus)


As soon as you get your MATB1 form from the midwife go onto the HMRC website Calculating and recovering Statutory Maternity Pay http://www.hmrc.gov.uk/paye/employees/statutory-pay/smp-calc.htm
You can calculate your SMP entitlement online http://www.hmrc.gov.uk/calcs/smp.htm this will tell you week by week how much you will get and what administration fee you can claim too.

If you are a one man band like me you don't pay enough NI and Tax to claim in back off these payment so you can apply for the full amount to be sent to you by the tax man. Simply fill out an online form https://online.hmrc.gov.uk/shortforms/form/DMB_SMP?dept-name=DMB&sub-dept-name=AdvancePayments&location=1&origin=http://www.hmrc.gov.uk and a cheque will appear in the post for you. Apply in advance and like me you can pop in in a high interest account until it's needed and make some interest too.

If the 9 months of maternity pay spans 2 tax years you will get an initial cheque to cover year 1 then in April a subsequent cheque for the remainder for year 2. Oh you also need to split the claim into 2 tax years but the online forms pretty much guide you through this.

You can spend it when you like of course or pay it out as normal as part of your PAYE. If you don't already use the HMRC CD ROM for your payroll I can recommend you getting a copy, simply call the new employer helpline on 0845 607 0143. This easily allows you to run a PAYE system which does all your totals for you and tells you what to pay to who and when.


There are some FAQs at http://www.hmrc.gov.uk/employers/smp-faq.htm with regards to SMP. It's all rather easy as it turns out.

UK Election 2010 - Who should I vote for?

Gosh it's election time again and if you are anything like me they all seem full of empty promises and frankly a load of bullshit. I can't distinguish between what's spin and what's real anymore, Golden Brown seems archaic and grumpy, DaveCam seems fake and not terribly bright, I also have concerns over a cabinet consisting entirely of old Etonions, that doesn't smell of diversity to me. Finally the LibDems? Who? Sorry who's in charge? Sorry who? So what to do, I have strong opinions of all sorts of policy I just don't know who is actually advocating those policies.

So here's your answer http://www.whoshouldyouvotefor.com/ A website where I can answer some questions and be told who to vote for now that's democracy in action! Also the BBC have a great microsite http://news.bbc.co.uk/1/hi/uk_politics/election_2010/8515961.stm#subject=immigration&col1=conservative&col2=labour&col3=libdem where you can select an issue and have a read about what all the parties think and stand for.

Like many people in this country I'm fairly jaded by politics but I'm also a great believer in our democracy and what it means to have a free vote in a free world. I don't have to worry about being shot by a sniper whilst standing in a voting queue, I don't have to fight for my right to have a voice by chaining myself to a railing, I do have an obligation to vote though. Even if you walk to that polling booth and scribble "You're all tossers" across the ballot paper I urge you to do just that, make a stand and have your say.

Questions to ask in a design brief

So today I had to design a website from scratch, the brief, ummm nothing too wacky, but not too corporate either.... yes that was it! Brilliant so you have a blank canvas but then how the hell do you turn that canvas into something the client is going to like. Well to avoid this situation, and to help you get a design that suits you client I suggest the use of a design brief.

This document tries to get as much information out of the client as possible. Not only does it get you some information as a starting point but it makes the client think about the website they have commissioned and the reasons for needing a new or updated the website.

So here are the questions I ask in a design brief:

Objectives

1. How are you currently positioned within your market?
2. How, if at all, does this differ from how you wish to be positioned?
3. What are the reasons for needing a new look and feel for your online presence?
4. What do you think a users expectations are of your site? e.g Do they expect to be able to purchase online? Information only, reassurance?
5. What are the main objectives of the project? E.g to drive web enquiries, to show products/services, to drive phone calls, online brochure, addition to branding?
6. What are the core messages that you want to communicate about your company? For example professionalism, fun, reliable, qwerky? Do you have a strap line for your business?

The Current Website

1. What do you like about your existing website?
2. What are the known issues that you are currently experiencing with your current web site?
3. What business needs are not currently being met by your existing web site?
4. Define the target audiences for your website, and the priority of those groups.
5. What do you think a users expectations are of your site? Do they expect to be able to purchase online? Information only, reassurance?
6. What primary messages are you trying to communicate to your individual target audiences?

The New Website Design

1. What are the top-level content categories for your website that will make up the main navigation?
2. Let us know what elements you require on your homepage. Products? Newsletter signup? News? Events? Feature boxes? Introduction text? Imagery?
3. Please specify the tone of voice required for your website.
4. Does the project have to work within an existing corporate identity?  Are there guidelines for their use?
5. Do you have existing imagery you wish to use on the website?
   
6. Can you give a brief outline of some keywords you feel would fit the design of your site e.g. clean white crisp, black background, highly colourful, funky, corporate, etc.
   
7. Please can you suggest some colour schemes. It can be as simple as blue, or red or you can supply exact pantone references.
   
8. Do you have a company logo and can you supply it in an EPS or PDF format?
   
9. Do you have any specific fonts you wish to use in the design both graphical and web safe
   

What's already out there

1. List 5 websites that you like together with reasons as ti why (they don't need to be in your industry).
   
2. List 5 websites that you dislike together with reasons as ti why (they don't need to be in your industry).
   
3. Please list websites of some key competitors
   

I find that the 5 sites the client likes is often the key information, that will at least let you know if they want a solid black background or a nice clean white site. Even that's a starter for 10. To be honest there is nothing more demoralising as spending a heap of time creating a beautiful design only to find it's a million miles from what the client want. So get that information out of them, that way you'll cut down on both the time it takes to design and also the number of amends that need to happen on the project.

JQuery - Easy guide to tabs with HTML and CSS

So today I had to put some funk stuff into the HTML site I was building. Enter jquery. Now I'm no coder but this seems like a great way to get funky functionality into a static website without much mither.

1. Go to the jquery site http://jquery.com/ and download the current release. It's just a .js file. Point at this file in your HTML doc. I'd also take the time to read the introduction to jquery.
   
2. Next you need to set up another js file that's basically going to do all the work. So I did site.js saved it and pointed my HTML file at this too.
   
3. Next you surf around until you find the functionality you want in my case tabs. I found this website http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ and follow the instructions. Adapting the CSS to fit in with the website.

There are hoads of great little scripts that can really improve the look and feel of a website. I like the accordion menu which can either be used as a menu or for content like a Q&A page. Seem to me that there are loads of little ways to make the page more interactive but also space saving. So you can have lots of content on the page without the old scrolling page from hell syndrome.

Then I found this menu tutorial which was simple and easy to follow and had great results. I like simple things.
http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

So my advise for today is designers, if you haven't already entered the world of jquery have a snuffle.

Getting an RSS Feed onto my website

So todays mission is to get my new blog postings into a RSS feed displaying on my website. So simple I hear you cry ... well that's what I thought but obviously like any DIY project it starts with a banging a nail into a wall and ends up taking out half the house. So I read up on everything I could. Simple enough to get a little RSS graphic and link that to sign up for feeds. But I wanted to display my new blog posts automatically on my website.

Google has a gadget called Slim RSS Reader. http://www.google.com/ig/directory?synd=open&url=http://1o4.jp/google/module/slim-reader.xml brilliant except you can't alter the settings so you have all the feeds appearing on a white background and you have almost no control over the aesthetics. So not really very useful.

Next I found http://panel2.feed.informer.com/ Feed Informer, which appears to be excellent. I can enter as many feed sources as I like, in my case just PepperStreet. Then I can set the number of items I want to appear. Brilliant. Even better I can edit the HTML myself for the feed, I can set font, colours, borders anything I like. I can take out the source as it's all Pepperstreet anyway and all I have to do in return is display a small powered by link at the bottom. I can live with that. Also - she goes on rather evangelically - the code you put into your HTML page is the same whatever changes you make to the layout in Feed Informaer itself. So you can simply play with the settings in Feed Informer and the look and feel automatically changes on the website. Now I'm no coder, I can write HTML and CSS with my eyes shut, but I once tried to master Joomla and was a dribbling mess inside 20 minutes. But this has worked, it's simple, easy and effective what more can you ask from a piece of code.
Check it out on http://www.pepperstreet.co.uk/