Responsive html mail template

Here is a basic responsive HTML email template that you can use as a starting point:

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Email Template</title>
  <style>
    /* Add your CSS styles here */
  </style>
</head>
<body>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <!-- Header Section -->
        <table width="600" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <h1>Responsive Email Template</h1>
            </td>
          </tr>
        </table>
        <!-- End Header Section -->
      </td>
    </tr>
    <tr>
      <td align="center">
        <!-- Content Section -->
        <table width="600" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <p>This is a responsive email template.</p>
              <p>It should adapt to different screen sizes and devices.</p>
            </td>
          </tr>
        </table>
        <!-- End Content Section -->
      </td>
    </tr>
    <tr>
      <td align="center">
        <!-- Footer Section -->
        <table width="600" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <p>&copy; 2023 Responsive Email Template</p>
            </td>
          </tr>
        </table>
        <!-- End Footer Section -->
      </td>
    </tr>
  </table>
</body>
</html>

CSS Styles

/* Add your CSS styles here */

/* Make the email template responsive */
@media only screen and (max-width: 600px) {
  table {
    width: 100%!important;
  }
  td {
    width: 100%!important;
  }
}

/* Style the email template */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #333;
  background-color: #f9f9f9;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 20px;
  border: 1px solid #ddd;
}

th {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

How it works

This template uses a table structure to create a responsive design. The outer table has a width of 100% and contains three inner tables: one for the header, one for the content, and one for the footer.

The inner tables have a fixed width of 600 pixels, which is a common width for email templates. The align attribute is set to center to center the content horizontally.

The CSS styles are used to make the template responsive by setting the width of the tables and cells to 100% when the screen width is less than 600 pixels. This ensures that the template adapts to different screen sizes and devices.

You can customize the template by adding your own content, images, and styles. Just remember to keep the template simple and lightweight to ensure that it renders correctly in different email clients.

Tips and Tricks