Responsive Emails
FuzzyMail comes with a default responsive HTML template that serves a a starting point for your own theme. To achieve full responsiveness and yet support the vast majority of email clients, including some legacy clients like the old versions of Outlook, emails are usually built entirely with tables.
Mobile Styles
FuzzyMail inlines all the styles automatically for all html elements. This means that you have to add !important to each CSS property in order for the mobile media query to take priority.
Main Wrapper
You start with index.html, this is the base you need to build your responsive/fluid HTML email templates. This will allow you start building HTML email templates using the provided grids & component options.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Luan Gjokaj, and FuzzyMail contributors" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>FuzzyMail - Making emails fun again</title>
<link href="@@webRoot/assets/css/styles.css" async defer rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
data-embed
/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style>
.outlook {
font-family: arial, sans-serif;
line-height: 24px !important;
mso-line-height-rule: exactly;
}
.layout {
width: 600px !important;
}
</style>
<![endif]-->
</head>
<body>
<div class="main-wrapper">
<table
border="0"
align="center"
cellpadding="0"
cellspacing="0"
class="main-table"
>
<tr>
<!--[if (gte mso 9)|(IE)]>
<td class="reset"> </td>
<![endif]-->
<td width="600" class="main-data">
<table
width="600"
border="0"
cellpadding="0"
cellspacing="0"
class="layout"
>
<tr>
<td width="600">
<!-- Content Here -->
</td>
</tr>
</table>
</td>
<!--[if (gte mso 9)|(IE)]>
<td class="reset"> </td>
<![endif]-->
</tr>
</table>
</div>
</body>
</html>There are some Outlook specific conditionals in the main container. Apply the class name .outlook to all typography elements to ensure a serif font on old versions of Outlook. There are two empty rows to ensure the main body of the email is
Read more about email-friendly HTML at Email Framework, an open source repository with examples, snippets and best practices for email development.
Email Framework