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.) There are a wealth of resources on this topic. However, there is one small problem with all of the above: they all advocate the use of media queries. A Media Query Quandary Media query support can pretty much be taken for granted in desktop browsers, but it remains unknown to many email clients today. Pinch me! A mobile design strategy that doesn’t address one of the most popular mobile email clients isn’t a very good strategy. One Layout to Rule Them All Most mobile email design articles still want you to think “multiple layouts for multiple screen sizes.”

So rather than depend on media queries to modify the layout, we thought, “Why not just design one layout that looks good on all screen sizes?” Impossible? Mobile First I was inspired by Luke Wroblewski’s mobile first approach. We began by asking, what layouts work well on mobile? Writing the Codez <! 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. This is the default table with only a border defined for the TDs. Note the space between the TDs: as has been the case since the invention of tables, the default cellspacing is 1. The table has empty-cells: show by default. Empty-cells This declaration takes two values: show: show empty cells (with a border). Border-collapse separate: keep borders separate. Border-collapse: collapse should overrule cellspacing.

Border-spacing border-spacing is cellspacing translated to CSS. You can use two values: the first is the horizontal cellspacing, the second the vertical one. table-layout table-layout takes two values: auto: the table is layed out normally (see below). Let's give the test table a width. If we add table-layout: fixed, however, the table obeys the width, even if that results in unreadable content. caption-side caption-side takes four values, even though W3C specifies only the first two:

Responsive HTML Emails: a Different Strategy. Responsive HTML Emails: a Different Strategy. Email Clients | MailChimp Email Template Reference. Modern web designers must account for a handful of browsers when designing and building a website. 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. In addition to long-in-the-tooth desktop clients, web-based clients have issues which are two-fold: you’re forced to account for how the email client itself renders HTML and CSS, and also how the browser that client is viewed in renders HTML and CSS.

An email viewed in Gmail and Firefox can look quite different than one in Gmail and Internet Explorer 8. With the increasingly rapid rise of mobile, a new arena for email clients has materialized. Microsoft Windows Microsoft’s Outlook desktop client is the world’s most-popular by far. Windows Live Mail. Style Campaign. Android: grid of grim. Designing for Android is rough. 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.

Just align your creative top-left. Download grid of grim (Zip 450k) (above image not actual size) The grid dimensions are based on the eight Android devices we currently test on: 1. 2. 3. 4. 5. 6. 7. 8. Each device is on a separate layer in the PSD, so you can look at them individually. Native vs. To complicate matters the native client and Gmail app display differently.

. { Native client on S2 and Gmail app on S2 with UI obstructing the bottom } Optimize left-rail 2nd I never scroll right on Android unless prompted. 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. 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. Design | 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. 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. Most email clients block images from first-time senders by default, so your subscribers will almost always see the text of your email before they see anything else. Your message should still come across without images. Keep in mind that your email’s layout should stay right around 600 pixels in width. In this section, we delve into the specifics of designing your email for both desktop and web email clients as well as mobile devices.

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. 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.

If things like ‘adaptive layouts’ are new to you, I highly recommend reading this primer by ‘A List Apart’. The skinny is that we’ll be designing two CSS layouts of the same newsletter - one layout that looks great in webmail and desktop clients, plus another layout that can be easily read on the smaller screens of mobile devices. For example, here’s an HTML email in Outlook: Designing and Coding Effective Adaptive Email Layouts | Adworkshop Inc. 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. 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? Why is the email copy so long? Gone are the days of coding an HTML email that only needs to render well on desktop email clients (such as Microsoft Outlook and Mozilla Thunderbird, for example). HTML Email Coding Practices First, it's important to understand the principles behind coding HTML emails. Due to a glitch in Yahoo! 17 Must-Know Tricks for Outlook 2007, 2010 and 2013.

Designing for Outlook is like chasing the ever elusive White Whale. 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. Try using hspace and/or vspace: Or add the additional spacing to the image itself (in pixels). 2.

If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style: In the example below, #3 does not have word break and #4 does. 3. If you are using a background color in your table cell, you'll see a 1px white border around the contents of the TD. Or you can add it inline: <td style="border-collapse: collapse;">... Check out this post from Campaign Monitor for more info. 4. For example: <a style="font-size: 20px; color: #004990;">Shop Flooring </a> 5. 6. 7.

Home | 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. 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. The only change that I made was switching the view online text from ‘Email looking funny? Let’s try it in your browser.’ to ‘View this email in your browser here.’ Click to view at full size Setting the breakpoints This design actually has three ‘breakpoints’ or set sizes at which a certain layout displays.

Creating a mobile-friendly header The CSS: Creating the headings Version 1 Left: Desktop, Right: Mobile view Version 2. Email Wizardry | 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! 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. To make a long story short, each version of Yahoo! Ignores your media query declaration along with all of its conditional statements.

It then renders each of the styles as if they are outside of the media query to begin with. Will get converted to this: As you can see, Yahoo! <div class="desktop">Text</div> Is converted to: <div class=" yiv1449593645desktop ">Text</div> Although Yahoo! So what's the fix? Campaign Monitor came up with a sneaky solution to use attribute selectors since they are not supported either. To give an example, if I convert my original query from above, it would look like this: Each of the recommendations above will work in both Yahoo! Adaptive Buttons | 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: Thankfully, there’s a straightforward, if less-than-elegant solution. It turns out that Yahoo! …to the attribute selector format, like so: The result for us was a restored-width email newsletter in Yahoo! Thankfully, this solution doesn’t affect the display of mobile-optimized email in the iPhone and Android’s respective Mail email clients.

Of course, the danger is that Yahoo! Many thanks to mobile email design legends Ed Melly and Stefan Velthuys for outlining this excellent mobile optimization for our monthly newsletter. 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 <style type="text/css"> /* Ink styles go here in production */ </style> <style type="text/css"> /* Your custom styles go here */ If you’re applying a background color to your entire email, be sure to attach it to the table with a class of body as well as to the actual <body> tag, since some clients remove this by default. Inline Styles <html> ... Sending Your Email Sending HTML email is a lot different than sending plain text email. Testing and Troubleshooting Create powerful multi-device layouts quickly and easily.

Rows. 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? " Aside from the fact that there are no guarantees that any HTML email design will adapt nicely from one email client to another, there are two distinct issues that give email design for Android a bad name. We'll look at both and how you can do your best to tackle them. Gmail for Android doesn't heart CSS We may have been responsible for disproportionally raising everyone's hopes about CSS support on Android devices when we said that "Android is powered by WebKit.

While Android's default email client and browser do a superior job at rendering HTML email, the Gmail app for Android is undoubtedly popular... What it boils down to is a combination of Gmail a) stripping out @media queries and offering shoddy CSS support. I've got 99 viewports, but 480 x 320 ain't one. 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. Information is supplemented and verified by first-hand testing when possible. Coding your Emails. 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 | In The Box: MailerMailer Email Marketing Blog.

Code-Therapy-Troubleshooting.png (1000×4500) 600+ Free Email Templates. How-to-responsive-email-design-infographic.png (975×5571)