Astute Email Template

Astute Email Template

Astute email template

Coding regular emails is hard enough by itself. Making them responsive shouldn’t add to the headache. A few simple, but solid patterns are all that’s needed to optimize emails for small screens.

That’s what Astute is.

It’s just a few responsive email patterns that go a long way. The code blocks are compartmentalized so that they may be used, combined, and nested to build an email.

Each template is annotated and has good support among popular email clients.

Astute is a small collection layout patterns for HTML email. The code is meant to be edited, adapted, and built upon. The code is largely compartmentalized and annotated in an effort to explain what’s happening so you can add, edit, and remove code with some confidence.

This has been tested in all “popular” email clients, but not every email client out there.

Astute is tested in the most popular email clients and my own email campaigns.

The Templates

Responsive transactional HTML email templates

Transactional HTML emails often get neglected. Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers.

We’ve tried to remove some of the pain for you and open-sourced a collection of common templates for transactional email.

  • Action email
  • Email alert
  • Billing email

Each template is responsive and each has been tested in all the popular email clients.

What are transactional emails?

Typically any email that is triggered by or sent automatically from your application.

  • Welcome emails
  • Actionable emails
  • Password resets
  • Receipts
  • Monthly invoices
  • Support requests
  • App error alerts
  • Reminders
  • etc.

`astute-fluid.html` – Good for simple layouts such as transactional and single column emails.

`astute-responsive.html` – Good for more complicated, shape-shifting email layouts that work on some mobile clients.

`astute-hybrid.html` – This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support.