Create HTML Emails

Word Count: 388
  • Post category:Codings
  • Post last modified:2021-04-06

HTML Email Development

The site Good Email Code provides very good sample codes for html emails with detailed explanations.

Use this sandbox on tfw-test to develop email templates.

Use this mailer on tfw-test to send out emails.

The issues in HTML Email development (see Ref.#1)

  1. Gmail’s app still doesn’t support the <style> tag for non-Gmail accounts
    • The Gmail app is massively popular on iOS and Android. But viewed in the Gmail app, emails for non-Gmail accounts don’t support <style> tags, so media queries, which we can usually rely on to optimise our emails for small screens, aren’t supported.
  2. It’s really hard to keep on top of email services and their level of CSS support
    • New email providers and apps appear all the time. Some of them have great CSS and media query support, but some of them focus more on email workflows and don’t support <style> tags or media queries at all. Some of them differ across platforms – for example, the Yahoo mail app for iOS supports <style> in the head, whereas on Android it doesn’t, unless you include your entire <head> twice, which isn’t possible from every sending platform.
  3. Using traditional methods like float or align to create columns results in unsightly stacking on mobile apps without media query support 
  4. When you use float or align to create columns, you lose the ability to vertically align them
  5. When you use float or align to create columns, you have to place them in separate divs or table rows, so they can’t flow and stack naturally at different screen sizes

Reference

  1. Creating a Future-Proof Responsive Email Without Media Queries (2020-12-17)
    • Client issues & fixes, CSS Left to Right, Column-reverse
  2. Creating a Simple Responsive HTML Email (2021-02-03)
    • Ghost table, [if mso], fluid hybrid method
  3. Responsive HTML Email Template with HTML Tables & CSS – Ecommerce Layout – Youtube
  4. Responsive HTML Email: First Steps (2020)
  5. How to Create an HTML Template That Email Clients Render Well (2018)
  6. Good Email Code (M. J. Robbins)
  7. How to Send Email Using PHPMailer (2021) & Gmail SMTP

Tools

Tags: