HTML Emails

wac

Senior Member
A client has asked for a html email layout, I’ve attached an image.

nhfs1.jpg


What would be the best way to do this, tables and inline styles?

I’ve actually never done one before.
 
I don't do this type of thing but we've had a thread on here about it and iirc it's got to be tables and inline styles to support outlook due to it being outdated and not supporting modern layout techniques lol
 
Okay, so when it comes to emails... it's a whole new world of painful experiences. Quite literally, email clients are the browsers. You thought it was bad developing for FF/Chrome/IE/etc well, think about how many email clients there are...

You are correct in that tables must be used, furthermore, css can be used to some degree but it must be inline. One of the biggest issues is that a lot of email clients will block all images from displaying unless the user puts the address into some kind of safe list, so you need to make sure that the template is clear and readable without the use of any images. I would suggest using block colours with border styling via CSS (or HTML attributes wherever possible) instead of using those button images (also why are they so pixelated?) and note that any images used should be reffered to via an external source and not embedded into the email itself, for obvious reasons.

Here's a site which lists very clearly the CSS support for each email client: http://www.campaignmonitor.com/css/
 
It's a real ballache mate, I just finished doing one for MailChimp, we're talking no background images, gaps before any full-stops in CSS classes and all sorts of nightmares. I did it for £150, next time it will be more.
Enjoy
 
Go with Campaign Monitor, you can download all their templates to edit and one will be a direct replica of yours without a doubt. That way you can save Robbys issues as all the issues for CSS etc are pre-addressed. Plus you can brand the site as your own and mark up the prices a wee bit, then clients can log in and send their own - makes you look good and they feel trusted (read chuffed). Passive income they call it and it works.
 
@wac. I'd just doit in plain HTML tables, if you start to add CSS you'll start and discover compatibility issues. Draw out the template on paper and slice it up first and add notes, it'll make life easier.

However, this is quite a tricky mailer to be honest. You have overlapping elements which tables cannot really achieve. It depends which areas need to be clickable.

Also be aware of the "click here" having click here will effect your spam score big time. I'd probably keep that as an image and just have it clickable.

I know your not using this service but have a look at how a few mailchimp templates are created, and be sure to check out http://kb.mailchimp.com/article/how-spam-filters-think
 
Yes, the overlapping elements were my concern too. I've done it now. It's a bit crude but it seems to work.

http://wacdesign.com/pps/temp/index5.html
 
Back
Top