Navigate:
Responsive HTML Email Template
~$RHET0.0%

Responsive HTML Email Template: Simple email starter

Cross-client HTML email starter with inline CSS support.

LIVE RANKINGS • 02:32 PM • STEADY
OVERALL
#414
3
FRONTEND
#38
2
30 DAY RANKING TREND
ovr#414
·Front#38
STARS
13.7K
FORKS
4.4K
7D STARS
+6
7D FORKS
-4
See Repo:
Share:

Learn more about Responsive HTML Email Template

This is a starter HTML email template designed for use with email marketing platforms and transactional email services. The template uses responsive CSS media queries to adapt layout across desktop, mobile, and web email clients. It provides both a standard version for marketing platforms like Mailchimp that handle CSS inlining automatically, and a pre-inlined version for API-based services like Mailgun and SendGrid. The repository includes documentation on image attribute requirements for email client compatibility and has been tested across multiple email clients including Gmail, Outlook, Apple Mail, and mobile clients.

Responsive HTML Email Template

1

CSS inlining guidance

Provides both a standard HTML version and a pre-inlined CSS version, with clear documentation on when to use each depending on whether you're using a marketing platform or API service.

2

Multi-client testing

Template has been tested across major email clients on mobile, desktop, and web platforms, with visual documentation of rendering results.

3

Minimal structure

Focuses on a simple, clear layout with a single call-to-action button rather than complex multi-section designs, reducing compatibility issues across email clients.


const mailchimp = require('@mailchimp/mailchimp_transactional');
const client = mailchimp('your-api-key');

const emailHTML = `<!DOCTYPE html>
<html>
<!-- Use the non-inlined responsive template -->
<head><style>@media only screen and (max-width: 600px) { .mobile-stack { width: 100% !important; } }</style></head>
<body><table class="mobile-stack"><tr><td>Your content here</td></tr></table></body>
</html>`;

await client.messages.send({
  message: { html: emailHTML, subject: 'Welcome!', to: [{ email: 'user@example.com' }] }
});


[ EXPLORE MORE ]

Related Repositories

Discover similar tools and frameworks used by developers