My first eMail Newsletter

PeterBreis

Junior Member
I'd like to not fall flat on my face doing this.

A client wants me to produce their newsletter as an eMail Newsletter, which I know is fraught with incompatibilities.

I'm reading up on research material but would love to hear practical, current advice from fellow designers. Particularly as to how far I can (or not) push the design. What real world workflow to use. Also how to make this reusable from month to month.

Should I stick to HTML tables like some advise or can I use at least some CSS?

How do I build in redundancy for the more difficult, worse case, email clients?

Should I use a service like MailChimp? What other alternatives are there, and how much difficulty will I be taking on if I try to directly code and submit the material myself?

Anything else I may not have thought of.

Thanks,

Peter
 
Hi Peter,
I would strongly recommend services such as Mailchimp and or Campaign monitor, by using the a specialist services you will have access to all the tools and utilities to check your email in the majority of email clients and you will also have access analytical data for your campaigns.

There is a lot of issues with HTML email specifically with CSS support etc, but the rule of thumb is this.

Use tables, and nested tables when you need too, define explicit widths and don't leave any room for interpretation for the email clients rendering engine, and if in doubt consult the holy grail...

Guide to CSS support in email clients - Articles & Tips - Campaign Monitor

and

Email design guidelines - Articles & Tips - Campaign Monitor

also where possible dont use images, try for solid block colours that can be defined in html.
The above two links will see you though 98% of it.

If you get stuck, feel free to ask for help from the members or just contact me (see sig)

Geoff.
 
Thanks very much for that solid start Geoff. :)

I'll be doing quite a bit of reading, and having a heart to heart with the client.

I'm really happy that I've found this site. I should spend more time in the company of fellow professionals.

Peter
 
I build a lot of HTML emails. Got several t-shirts on this subject.

To code for maximum compatibility, sadly the lowest common denominator is Outlook 2007 which is appalling. Outlook 2003 is still more widely used in many sectors and is only slightly better.

Here are some of my essential tips:

1. use tables/nested tables for layout and specify widths that add up.
2. make sure your design works and makes sense at 600px wide. It can be wider, but it's best to stick to this viewport width.
3. use inline CSS. CSS is fairly well supported for padding and font styling, patchy for everything else. ESP's like CampaignMonitor will convert head styles to inline which can make the job a little easier.
4. allow text to flow and vary in size/height because it will.
5. don't be lazy and stack your design full of images to get around mail client deficiencies - you need a sensible ratio of text to graphics to help your messages get through spam filters.
6. do not rely upon background images - they are badly supported, particularly in MS Outlook.
7. make sure your design makes sense with graphics switched off.
8. include ALT attributes in IMG tags and make the text length shorter than the width of the image.
9. make sure your design is readable if background colors do not render, which will happen in some cases. So light text on a dark background is not a good idea.
10. use <br> rather than <br/>
11. if time and budget permit, use progressive enhancement via CSS which is much better supported on webmail clients, Thunderbird, Apple Mail and iOS mail. You can even introduce client-specific style declarations, explore opacity, box/element rotation, rounded corners, etc.
12. run your markup through a validator and correct any errors that need fixing (confusingly, not all can be or need to be).

13, 14, & 15. test thoroughly with Outlook 2003, Outlook 2007, all popular webmail services, iOS Mail (big growth), Thunderbird, Apple Mail. Inbox preview services are not good enough - you need a test rig with all target mail apps covered for a rapid fire test/preview/fix cycle.

Sending via your ESP: subject lines essential, email domain authentication important, split testing valuable.
 
Newsletters can be divided into two distinct types: printed on paper and in digital formats, which are usually distributed via the Internet. The digital formats vary from the simplest format, text to highly designable formats like Portable Document Format (PDF) and HTML. The use of more formatting and web 2.0 attributes like video and sound have become a market standard all over the world.
 
My opinion is,

Use of decent file size images, tables and HTML. Absolutely no CSS to avoid any issues with all mail clients
 
glenwheeler said:
Absolutely no CSS to avoid any issues with all mail clients

That's probably the most misleading advice I have seen on coding HTML emails.

Did you mean "don't rely totally upon CSS"?

CSS is essential for fine-tuning style and layout. This works for a very a significant proportion of mail clients while not interfering with the ones that don't render CSS. So long as the underlying markup works for bad email clients, you can significantly improve your layout with progressive enhancement CSS.

If you code your emails in HTML3 with no CSS you will end up with some pretty awful results.
 
Electronic mail, commonly called email or e-mail, is a method of exchanging digital messages across the Internet or other computer networks. Originally, email was transmitted directly from one user to another computer. This required both computers to be online at the same time, a la instant messaging. Today's email systems are based on a store-and-forward model. Email servers accept, forward, deliver and store messages. Users no longer need be online simultaneously and need only connect briefly, typically to an email server, for as long as it takes to send or receive messages.email marketing solution as an effective tool to manage and market your business.
 
Back
Top