Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

+1:Didn't know about Litmus. This looks like a huge time saver. Thank you :D And don't forget about the blog posts on CampaignMonitor, which also includes some nice tips.
– Horst GutmannJan 28 '11 at 14:32

I've fought the HTML email battle before. Here are some of my tips about styling for maximum compatibility between email clients.

Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents).

Against your better judgement, use and abuse tables. <div>s just won't cut it (especially in Outlook).

Don't use background images, they're spotty and will annoy you.

Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor <a> them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color).

Be careful hyperlinking an actual link with something different. For example, don't type out http://www.google.com and then link it to https://gmail.com/. Some clients will flag the message as Spam or Junk.

Save your images in as few colors as possible to save on size.

If possible, embed your images in your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.

And lastly, test, test, test! Each email client does things way differently than a browser would do.

@DavidRivers Maybe it should be pointed out that "embedded images" does not mean to add images as attachments, instead they should be included as base64-encoded strings to replace the url referenced in "normal" <img> tags, like so: <img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
– TimoFeb 12 '15 at 8:57

2

@MJafarMash That is the incorrect way to embed images in email. You have to create separate envelopes and refer to the image based on it's cid.
– Michael IrigoyenMar 11 '16 at 19:31

You have to be a bit careful with it though... it ain't foolproof. Like it might mess up widths of things, so just check everything before sending.
– Nathan MacInnesJan 28 '11 at 15:00

to get around that problem, you can hide the entire document with jQuery first, then run this code (and maybe unhide) - this way the actual CSS rules are retrieved and applied rather than the computed result (eg. for widths.)
– majickMay 18 '16 at 5:37

I find that image mapping works pretty well. If you have any headers or footers that are images make sure that you apply a bgcolor="fill in the blank" because outlook in most cases wont load the image and you will be left with a transparent header. If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user. Never try and use any styling sheets. Or CSS at all! Just avoid it.

Depending if you're copying content from a word or shared google Doc be sure to (command+F) Find all the (') and (") and replace them within your editing software (especially dreemweaver) because they will show up as code and it's just not good.

ALT is your best friend. use the ALT tag to add in text to all your images. Because odds are they are not going to load right. And that ALT text is what gets people to click the (see images) button. Also define your images Width, Height and make the boarder 0 so you dont get weird lines around your image.

Consider editing all images within Photoshop with a 15px boarder on each side (make background transparent and save as a PNG 24) of image. Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting!

Also i found the line under links particularly annoying so if you apply < style="text-decoration:none; color:#whatever color you want here!" > it will remove the line and give you the desired look.