• DocumentationDocs

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:[email protected];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">&nbsp;</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">&nbsp;</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 centered in legacy email clients.

Read more about email-friendly HTML at Email Framework, an open source repository with examples, snippets and best practices for email development.

Email Framework
Set Up ProjectSupported Clients

Follow the creator

Join the community