background preloader

Responsive Email

Facebook Twitter

Table - How to set cellpadding and cellspacing in CSS. Responsive HTML Emails: a Different Strategy. Email has become quite the funny thing. It follows us everywhere. To the grocery line. To the dinner table. To the… shower? (Well… why not.) CSS - border-collapse, border-spacing, caption-side, empty-cells, and table-layout. Page last changed today On this page I explain some of the new CSS declarations to be used with tables.

CSS - border-collapse, border-spacing, caption-side, empty-cells, and table-layout

This is the default table with only a border defined for the TDs. Responsive HTML Emails: a Different Strategy. Responsive HTML Emails: a Different Strategy. MailChimp Email Template Reference. Modern web designers must account for a handful of browsers when designing and building a website.

MailChimp Email Template Reference

Standards-based web design has brought most browsers into relative parity with each other, but the opposite is the true where email is concerned. There are dozens of email clients, including some that have been around for decades. Large, slow-to-update companies still have employees relying on outdated clients like Lotus Notes or Outlook 2000.

Style Campaign. Android: grid of grim. Designing for Android is rough.

Android: grid of grim

We’ve limited stats due to image blocking and there’s a range of screen sizes and active platform versions. Worse of all, it expects users to piece together our creative like a jigsaw puzzle. Android only displays the top left-hand corner by default and those dimensions vary. While there’s not one “fold”, you still want to try for some level of optimization. I created this grid showing the default view of eight Android devices and thought I’d share. Keep High-Density Displays from Uglifying Your Emails. High pixel density displays are becoming more and more common, with Apple’s Retina display available on the iPhone 4S, iPad 3, and now the MacBook Pro, and also showing up in devices such as the Samsung Galaxy Nexus.

Keep High-Density Displays from Uglifying Your Emails

There’s no denying that these new-era displays are gorgeous, but they’re not without fault: high-density displays can make your email ugly. The reason for that ugliness is an increase in PPI, or Pixels Per Inch, the measurement of the number of pixels spread across an inch of screen space. As displays get better and better, this number climbs higher. This increase has doubled the CSS pixel ratio of these displays from 1 to 2 (quirksmode explains here), so that a high-density display now has double the resolution of an older one; in the case of an iPhone 4s you go from a resolution of 480×320 to one of 960×640 instead, on the same 3.5 inches of screen.

The increased definition makes the small images we all use across the web — icons, logos, etc. — look fuzzy and unfocused. MailChimp Email Template Reference. Now that you have a solid understanding of how HTML emails work, we can get to the fun stuff: designing and coding your emails.

MailChimp Email Template Reference

Use existing materials to craft the tone and look of your email into a solid and effective layout. Keep your design simple and straight forward, focus on your message, not your craftiness. Focus on typography first. The type is the one thing that is consistently rendered across different email clients. Responsive Email Design. Just as most web designers take a ‘design-first’ approach to their projects, we’re going to cover the visual side of creating a mobile-optimized email newsletter in this guide, before going elbows-deep into coding.

Responsive Email Design

This will help you make informed decisions when next planning an email newsletter, plus make it that much easier to conceptualize the techniques we’ll be discussing later on. We’ve already started talking about responsive email design. If you’re familiar with the use of this term in the context of the web, then you’ll be pleased to know that we’ll be using the same concepts and techniques here for email. Designing and Coding Effective Adaptive Email Layouts. With the explosion of responsive/adaptive techniques on the web in the last few years, it is surprising to see how slowly these concepts have been adopted into email marketing.

Designing and Coding Effective Adaptive Email Layouts

While we can't technically make email page layouts dance and flex with the bells and whistles seen on websites, we can alter the layout to give subscribers on mobile devices a better reading experience and increase the chances that they will follow through on your priority messaging. Take a look at some of the emails in your smartphone's inbox: Are you squinting trying to read the text? How can you click on that tiny little textual link? Should you have to view all emails in landscape mode? 17 Must-Know Tricks for Outlook 2007, 2010 and 2013. Designing for Outlook is like chasing the ever elusive White Whale.

17 Must-Know Tricks for Outlook 2007, 2010 and 2013

We spend hours pursuing it, tracking down bugs and glitches, trying to achieve pixel perfection in a distinctly imperfect environment. Here are 17 tips to improve your outlook on Outlook. 1. Outlook ignores margin and padding on images. Outlook 2007-13 do not support the margin or padding CSS properties when placed within an image. Email Standards Project. Creating a Responsive HTML Email Newsletter for Codecademy. Note: This article has been updated to include information on revisions that were applied to the template after seeing how it performed and how it was being used.

Creating a Responsive HTML Email Newsletter for Codecademy

I recently had the pleasure of converting Codecademy’s monthly email newsletter into a responsive one. I thought I would share the process because it is a nice example of creating a responsive template from an existing newsletter without redesigning the desktop version. The Desktop Template This is the Desktop template that I created which is almost identical to the original supplied files from Codecademy. Mastering the dark art of HTML email, one UTF-8 encoded character at a time. Stop Yahoo! Mail from Rendering Your Media Queries. In April 2011, Campaign Monitor published this article which identifies an issue in the way Yahoo!

Stop Yahoo! Mail from Rendering Your Media Queries

Mail handles media queries. With the help of Brian Sisolak @bsisolak at Trilogy Interactive, we've identified a few more issues with regard to the way Yahoo! Mail handles media query styles intended for mobile devices only. MailChimp Email Template Reference. Prevent Yahoo! Mail from displaying the mobile version of your email. Soon after publishing our recent post on ‘Mobile email design in practice’, it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside.

As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal: Html - Override/Remove underline link style in Outlook. Ink: Responsive Email Documentation. Dive into creating your responsive email. The Boilerplate Starting a new Ink project is fairly straightforward. If you aren’t using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a <link> tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the <style> tag in the head before running your email through an inliner.

Boilerplate.html. Why can't I get my HTML email to look great on Android devices? Every now and then, we receive a mobile email question that goes along the lines of, "I've done everything to get my HTML email to look right on mobile devices. So why does it still fall apart on my Android handset? " Which clients support media queries? - Help. Which clients support media queries? If you’ve built a responsive email design using media queries, but your Litmus screenshot is showing the desktop version of the email, it could be that the particular client/device you’re viewing doesn’t support media queries. The chart below outlines support for media queries across a range of mobile email clients and applications.

When troubleshooting responsive designs and media queries, also keep in mind that the media query will be triggered by the viewport size of the device. Viewport sizes can vary drastically based on the physical screen size of the phone, the screen’s resolution and the pixel density or device-pixel-ratio of the device.

This information is partially sourced from Campaign Monitor and Style Campaign. Coding your Emails. The modern Web contains a lot more than HTML, CSS, and images. JavaScript,audio, Flash, video, animations, and forms are all part of a designer’s toolkit. Mobile Email Compatibility Guide: What Works Where? Email Client Popularity. Guide to CSS support in email. Responsive Email Design. Ultimate Field Guide to Common Bugs in HTML Email.

While testing HTML emails, I've come across a variety of bugs, quirks, and behaviors. Most of these can be fixed by adjusting your markup and styles— the main obstacle is figuring out what's going on. If you're really stumped, you might even decide to google a description of the problem, rephrasing it several times, sifting through dozens of outdated, dead-end pages until you stumble on one that offers some insight. Repeat for each bug, and you've got your work cut out for you. What if you could find everything in one place? Code-Therapy-Troubleshooting.png (1000×4500) 600+ Free Email Templates. How-to-responsive-email-design-infographic.png (975×5571)