Responsive Design for Emails

With the explosion in mobile devices over the past few years it’s no surprise that mobile-first and responsive design have become the standard when building new web applications. And while users spend a considerable amount of time browsing the web and using apps on their mobile devices, they spend an equal or greater amount of time reading email.

But if you’ve subscribed to any number of newsletters or interacted with products / services that communicate via email, it’s quickly apparent that techniques for developing emails have failed to keep up with modern design and device requirements.

Last week Etsy posted this great article on creating responsive emails that actually work…

You get a mobile-oriented design on phones, a desktop layout on Gmail, and a responsive, fluid design for tablets and desktop clients.  It’s the best of all worlds—even on clients that don’t support media queries.

Check out the article for more details on how this technique works and try out the code which they kindly posted to GitHub:

<html>
<head>
<style type="text/css">
table table {
width: 600px !important;
}
table div + div { /* main content */
width: 65%;
float: left;
}
table div + div + div { /* sidebar */
width: 33%;
float: right;
}
table div + div + div + div { /* footer */
width: 100%;
float: none;
clear: both;
}
@media (max-width: 630px) {
table table {
width: 96% !important;
}
table div {
float: none !important;
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background: #ccc;">
<table cellpadding=0 cellspacing=0 style="width: 100%;"><tr><td style="padding: 12px 2%;">
<table cellpadding=0 cellspacing=0 style="margin: 0 auto; background: #fff; width: 96%;"><tr><td style="padding: 12px 2%;">
<div>
<h1>Header</h1>
</div>
<div>
<h2 style="margin-top: 0;">Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem dictum, iaculis magna ornare, dignissim elit.</p>
<p>Cras justo mauris, elementum id purus ut, elementum volutpat nibh. Proin quis augue sed dui vulputate bibendum. Sed congue arcu eget porta pellentesque. Integer pretium tristique augue, lacinia ultricies libero malesuada id.</p>
<p>Cras quis est convallis, malesuada neque nec, pellentesque lorem. Maecenas tempor dui id lorem imperdiet, vitae sollicitudin lacus tincidunt. Aliquam nec arcu eu dui tempus dignissim. Mauris consequat metus nec erat elementum egestas. In vitae lacus pretium justo suscipit imperdiet.</p>
</div>
<div>
<h2 style="margin-top: 0;">Sidebar</h2>
<p>Donec tincidunt tincidunt nunc, eget pulvinar risus sodales eu.</p>
</div>
<div style="border-top: solid 1px #ccc;">
<p>Footer</p>
</div>
</td></tr></table>
</td></tr></table>
</body>
</html>

view raw
gistfile1.html
hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s