Responsive email template example

Here is an example of a responsive email template:

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 some basic styling to make the email look decent */
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
      margin: 0;
      padding: 0;
    }
   .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
   .header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
   .header h1 {
      font-size: 24px;
      margin: 0;
    }
   .content {
      padding: 20px;
    }
   .content p {
      margin-bottom: 20px;
    }
   .button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
   .button:hover {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Responsive Email Template</h1>
    </div>
    <div class="content">
      <p>This is a responsive email template that adapts to different screen sizes and devices.</p>
      <p>It uses a combination of HTML, CSS, and media queries to ensure that the layout and design remain consistent across different email clients and devices.</p>
      <p><a href="#" class="button">Learn More</a></p>
    </div>
  </div>
</body>
</html>

Media Queries:

/* Add media queries to make the email responsive */
@media only screen and (max-width: 480px) {
 .container {
    width: 300px;
  }
 .header {
    font-size: 18px;
  }
 .content {
    padding: 10px;
  }
 .button {
    font-size: 14px;
    padding: 8px 16px;
  }
}

@media only screen and (max-width: 320px) {
 .container {
    width: 250px;
  }
 .header {
    font-size: 16px;
  }
 .content {
    padding: 8px;
  }
 .button {
    font-size: 12px;
    padding: 6px 12px;
  }
}

Explanation:

The HTML structure is simple and consists of a container div that wraps the entire email content, a header div that contains the email's title, and a content div that contains the email's body.
The CSS styles the email's layout and design, including font sizes, colors, and padding.
The media queries are used to make the email responsive by applying different styles based on the screen size and device.
The first media query targets screens with a maximum width of 480px, and the second media query targets screens with a maximum width of 320px.
The styles applied in the media queries adjust the email's layout and design to ensure that it remains consistent and readable on different devices and screen sizes.

Tips and Best Practices:

Use a simple and consistent HTML structure to make it easy to style and maintain the email.
Use a responsive design approach to ensure that the email adapts to different screen sizes and devices.
Use media queries to apply different styles based on the screen size and device.
Test the email on different devices and email clients to ensure that it looks and works as expected.
Keep the email's design and layout simple and easy to read, as some email clients may not support advanced CSS features.
Use a clear and concise subject line and preheader to ensure that the email is easily readable and understandable.

Mail Knowledge

Responsive email template example