Guide to CSS support in email Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010
The Science of Looking Good in the Inbox CSSHow do I add margins to my image so text will wrap around it? Outlook 2007 and 2010 do not support the margin or padding CSS properties when placed within an image. Try using hspace and/or vspace:<img src=“ align=“left” vspace=“10” hspace=“10” /> Or add the additional spacing to the image itself (in pixels). CSSHow do I make a long text string wrap to the next line? If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style: This is a Microsoft only property so it should not adversely effect other clients. CSSI see a 1px white border around my table cells. If you are using a background color in your table cell, you might 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. If you are trying to “right” or “left” align multiple nested tables, the fix is a little more involved.
Design and Build Email Newsletters Without Losing Your Mind (and Soul) - Smashing Magazine Advertisement “We really love this new website you’ve built! Now we’d like to send out an email to all of our customers, friends and anyone, and it should look exactly like the website except with a spinning mailbox at the bottom, and have my photo, and my cat’s photo…” Ever had that conversation with a client? You’ve built plenty of websites in your time and could knock off a blog template in your sleep, but HTML email? Seriously? The mere mention of it sends some designers into physical shock (try it if you ever get stuck in a tedious conversation about XHTML vs. This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. If you’d like to get started right now, here are the cheat notes to get you on the right track. Respect your reader. 1. The email inbox is a noisy busy place for a newsletter to land. So when your email does arrive, make sure it doesn’t waste their time. 2. 3. 4. 5. 6. 7. 8. 9.
Email Testing and Email Preview - Email on Acid With the recent increase in mobile email open rates, it makes perfect sense that you'd want to design your email with each of the most popular devices in mind. In a recent article: Media Queries in HTML Emails, we explore which devices support media queries. To take it a step further, here's your play by play approach to developing your email for the iPhone, iPad, and Android devices. First we need to set up your media queries to detect the user agent: Important: I have included some notes in this snippet but be sure to strip out all of the CSS comments to avoid getting blocked by SPAM filters. What happens next depends on your layout. As a general rule, it's better to add "bells and whistles" to your media queries which optimize your layout in mobile devices. However, if you want to get really crazy, there is one more option: Let's say you have a three column layout and you want it to appear as two columns in the iPad and one column in the Android & iPhone. As you may know, Yahoo!
Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs : Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes.
Gabor hits Send: A Model of Your Inbox I've been thinking a lot about how users view and manage their inbox. This post is about the model I came up with. I'm basing this on my own experience and on having talked to dozens of people about their email habits. But since this blog also is read by lots of email enthusiasts, I'd love to hear your feedback: Does this make sense? What am I missing? Four Quadrants Every single email message youreceive can be classified into one of the four quadrants below. The key insight here is that the stuff you care about are the emails on the left. Filtering the Important How can you filter out what's important? Managing Later vs. I believe that this is the heart of email overload. The workflow should be that you decide whether you want to deal with an email now or later. This is the point where today's email clients fail. But none of this works. Wrapping Up Let's review. I'd love to hear your views on my theories. References [1] Gina Danielle Venolia, Laura Dabbish, JJ Cadiz, and Anoop Gupta.
Make Your HTML Email 5½ Times More Mobile Friendly Let's face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here's 5½ improvements you might consider making when you revamp or greenfield your next template. Note: This article is a guest post by Josh Rubinstein. Why should you care? From the time we rise until the wee hours of the night our smart phones are never far from our opposable thumbs. The Concept of "The One Web" represents a shift in thought towards "democratically" publishing online content to a range of devices. The statistics back this up: no matter what service your company provides, your HTML email needs to be optimized for mobile today – according to Campaign Monitor, the iPhone now accounts for almost 15% of their email subscribers. One HTML template for them All Tip #1: Design all "clicks" to be touch friendly!
Bulletproof background images | Campaign Monitor GMail gets auto-replies | Webware : Cool Web apps for everyone This is probably more useful than GMail's last goofy new experimental feature (Mail Goggles): Canned responses (see Official Gmail blog). You can now save a reply you're writing as a "canned response" and then quickly select one of these responses when you're replying to a future e-mail. You can also have your Gmail filters auto-reply to messages for you with these reponses. I quickly set up a filter, for example, to reply to people who send me an e-mail with "pitch" in the subject line with a message asking them to reach me on my work account. The canned response feature is useful and nicely done. If you often have to send people the same (or close to same) e-mail, you'll find it useful. If you use Gmail to handle work-related e-mail with a lot of typical queries, it's worth trying. To turn on the Canned Responses feature go to Settings | Labs.