Questions tagged [html-email]

HTML used to format emails (message content, not email addesses)

Although the HTML used to format emails is the same as that used to create web pages, it has a different set of problems and best practices.

Code Validation

Since most email clients don’t follow web standards and there are no email-specific standards in place, properly coded HTML emails will not pass HTML validating because, if coded properly, nearly all of the code within an HTML email is likely to be comprised of depreciated elements.

Client Code Compatibility

In working with HTML emails, much of the functionality possible in typical web development is not possible in email. Good practice, is to restrict code usage to that which is XHTML1.0 compliant. Recent upgrades to many platforms have allowed for some loosening of that restriction and it is now common for people to use the HTML4.0 compliance standard.

DOCTYPE

The recommended doctype for HTML email is XHTML 1.0 Strict. The reason for this is because, regardless of any alternative doctype definition, Gmail will impose XHTML 1.0 Strict regardless and of the two clients which impose their own doctype, Gmail has the largest percentage of users so it is only logical to confirm to the standard that will be imposed whether you like it or not.


Below is a list of Email Clients and Their Treatment of !DOCTYPE as well as expected results.

STRIP or IGNORE your DOCTYPE entirely:

  • AOL
  • Android Gmail Application
  • Lotus Notes 6.5, 7, 8 and 8.5
  • Outlook 2007 and 2010
  • Thunderbird 2 and 3
  • Yahoo

    Results:

    • Box model padding becomes an issue when viewing your email in IE vs Firefox
    • In IE 8, CSS padding on TABLEs are reset to “0″ – for example:
    • Center tags with a set width will no longer be centered in all browsers except IE. For example:
    • In IE, the minimum height on any EMPTY block element is 19px This is particularly important when using spacer divs.
    • In all browsers except for IE 6 and 7, paragraph elements have a default top and bottom margin of “0″ whereas it would otherwise use a default top and bottom margin of 16px.
    • In IE 8, you might see an exaggerated left margin on OLs and ULs, you will need to define the margins with inline CSS to correct this.
    • Some special characters are not supported

ACCEPT your DOCTYPE

  • Android Mail Client
  • Entourage 04 and 08
  • iPad and iPad Gmail
  • iPhone and iPhone Gmail (iOS3 & iOS4)
  • Kindle Fire
  • Live Mail
  • Outlook 2003
  • Outlook Express
  • Thunderbird 6
  • Windows Mail

Impose Their Own Standards

  • XHTML 1.0 Strict – Gmail & Hotmail

    Results:

    • Line height for small fonts may become more prevalent in all browsers except for IE. This is only an issue when using inline elements, use paragraph elements or TDs for formatting your small fonts.
    • You might see a small space below each of your images. A common fix is to useinside your image tag.
    • Some special characters are not supported
    • There may be a difference in the way your text links appear (colored underlines)
  • Yahoo Classic – HTML 4.01 Transitional

Mailchimp KB

SlideShare

SixRevisions guideline

5038 questions
1
vote
3 answers

Using Foundation to Create Email Template with Tiles

I am using the CSS framework Foundation for Email to create a responsive email template. My email design has tiles stacked next to each other, but I can't create the gap between each other using raw Foundation. My hacky solution involves using css…
Jon
  • 8,205
  • 25
  • 87
  • 146
1
vote
3 answers

Content not aligning in center

this is my first time posting here. I'm having trouble with this email I am trying to develop. Everything looking fine until you expand full screen. When expanding full screen, some of the content ends up being next to each other. Please help. Thank…
A.Kelley
  • 13
  • 4
1
vote
1 answer

Outlook email format changes when forwarded, How to format in such a way its not modified

The automated outlook emails using pywin32 and plain HTML were great till people started using it for forwarding and reply, Once you forward all the HTML formats are getting stripped and the borders of the table suddenly disappears. The way around…
kiren sk
  • 11
  • 1
  • 3
1
vote
0 answers

Trigger an event from inside a email

I have made a form that once submitted sends a set of details to the client email using the mail() in php. The email has html encoding with two buttons: Accept and Reject. Is there a way to capture the click event from inside the email if Accept…
ASO
  • 85
  • 6
1
vote
5 answers

HTML email: font-weight bold in Outlook is not working

UPDATE. I've tried all the suggestions. But still can't get Outlook to display bold! UPDATE 2. See my solution below I'm creating a HTML email newsletter. The

is bold, but when I test in Outlook (2007, 2010, 2013 etc) the font doesn't appear to…

Markeee
  • 523
  • 2
  • 8
  • 23
1
vote
0 answers

Collect metrics for each individual recipent on Amazon SES

I'm using Amazon's Simple Email Service to send transactional emails. To do so, I created a Python class that uses the AWS SDK for Python, Boto3. One of the parameters of this class, recipients, represents a list of recipients who will receive the…
Kfcaio
  • 442
  • 1
  • 8
  • 20
1
vote
1 answer

Windows Outlook ignoring body container width

I'm going through testing my email newsletter, and everything seems to be working pretty solidly, except for windows outlook. It's working for osx outlook just not any version of windows. Basically outlook seems to ignore the main container and…
1
vote
1 answer

Achieving wanted layout for e-mail template

I'm having some issues with structuring the e-mail template, more precisely with centering and especially with its responsivness due to the table layout... it's very frustrating and I just don't have a clue how to structure it properly. This is the…
Smithy
  • 807
  • 5
  • 17
  • 43
1
vote
1 answer

How does Linkedin redirect from email to app so fast and without passing through the browser?

I want to make a link to send it in a email so when the receptor clicks it send him directlly to the app (ios or android) if he has it installed or to the browser if he has not the app Linkendin mails (for example) do that, but i don't know…
Borja
  • 31
  • 6
1
vote
2 answers

How to control what Gmail auto-linking recognizes as an address or phone number?

I'm having inconsistent/buggy issues when delivering transactional emails (in this example, purchase confirmation email) to clients. Gmail not only auto-links the address (the clients' dynamic, local store-address in this case), but also maps the…
1
vote
0 answers

How do I encode an image into a Base64 string within a Macro Scheduler (.scp) macro?

The macro scheduler I am using is the product offered at https://www.mjtnet.com/ My ultimate goal is to have a macro that will send emails with images embedded into it. To do this, I want to be able to convert image files into Base64 strings so that…
KKar
  • 11
  • 4
1
vote
1 answer

email from SQL ASP

I have a web portal based upon a SQL database, that we use to update progress. When a record has been updated in the queue the web form is supposed to send an email message. Currently the web portal is not sending the message, and I am not sure of…
1
vote
0 answers

Remove default hyperlink color and text decoration in HTML mail format C#

I want to remove the default formatting(the blue text and underline) for shared UNC paths(\\) in my html mail format. By default, they are links when we use html mail format. Here's is my sample code doing that. private string…
Programmerzzz
  • 1,237
  • 21
  • 48
1
vote
1 answer

Absolute Positioning Of DIV in Android GMail within Relative

The two images show a problem I'm having with an absolute DIV -not- positioning properly within a relative DIV. The second image is the email attachment which looks as intended as email attachment in various flavours of Outlook, Eudora and desktop…
jchwebdev
  • 5,034
  • 5
  • 21
  • 30
1
vote
1 answer

Non-Breaking Hyphen Entity Being Replaced with Lowline Entity in Android Email Clients

Android email clients are replacing all ‑ non-breaking hyphen entities with lowline entity in Android email clients. This is only happening on serif fonts and works fine when switch just the font to a sans-serif. Researching shows that Android…
Richard Clifford
  • 494
  • 3
  • 17