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>© 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
- Use a simple and consistent design to ensure that the template renders correctly in different email clients.
- Use a fixed width for the inner tables to ensure that the content is centered and looks good on different devices.
- Use the
@media
query to make the template responsive and adapt to different screen sizes and devices. - Use the
!important
keyword to override any styles that may be applied by the email client. - Test the template in different email clients and devices to ensure that it looks good and works correctly.