DOCSEARCHbyAlgolia
Submit Docs

Responsive HTML Email Template

repository·master·Indexed 12 days ago

https://github.com/leemunroe/responsive-html-email-template

A lightweight, responsive HTML email template designed for transactional or marketing emails. Includes guidance on CSS inlining for APIs like Mailgun, SendGrid, and Postmark, as well as configuration for image attributes to ensure cross-client compatibility.

Tokens
451
Snippets
2
Records
3
Agent score
46%

What's inside Responsive HTML Email Template

  1. Configure image attributes for email compatibility

    master

    To prevent images from breaking in different email clients, always include specific attributes in your <img> tags. At a minimum, you should include src, alt, width, height, and border.

    It is also recommended to use inline styles to reset borders and ensure block display.

    <img src="https://absolute-path-to-image.jpg" alt="Useful alt text" width="500" height="300" border="0" style="border:0; outline:none; text-decoration:none; display:block;">

  3. Inline CSS for developer services and APIs

    master

    When sending emails via developer services or APIs (such as Mailgun, SendGrid, or Postmark), you must inline your CSS to ensure consistent rendering across email clients.

    To prepare the template:

    1. Copy the contents of email.html.
    2. Use an inliner tool like Email CSS Inliner to process the HTML.
    3. Use the resulting inlined HTML as your email template.
    4. Verify the output by sending a test email to yourself using a service like Postdrop.

    Note: The file email-inlined.html in this repository provides a pre-inlined example.

    1. Copy all of email.html
2. Paste the HTML as the source into the inliner
3. Copy the HTML output and use this as the email template you send