Today Gmail made a huge announcement that will forever change the way we code emails. Gmail will be supporting embedded styles! That means... you got it. No more inlining!
Here's Gmail's documentation on what is supported.
Read Geoff Phillips analysis on the Email on Acid blog on what this means for you.
Falling Basketball With CSS Fixed Positioning
This is a cool interactive email featuring a falling basketball. This email takes advantage of the thin and tall nature of a mobile email client for its effect.
Apparently fixed positioning support is going away in iOS10. Here's your last chance to experience this technique before its gone.
Apparently fixed positioning support is going away in iOS10. Here's your last chance to experience this technique before its gone.
Gmail Supports display:none and Gmail iOS Font Fix Update
One of my most often used hacks is the dash hack or hack to prevent the Gmail iOS app from drastically increasing the font size for certain emails. The technique took advantage of the fact that Gmail doesn't support display:none. With Gmail supporting display:none this technique no longer works.
Thankfully we can leverage the fact that Gmail doesn't support classes and ids to arrive at an alternative fix.
Thankfully we can leverage the fact that Gmail doesn't support classes and ids to arrive at an alternative fix.
Microsoft’s Slow March To Email Redemption
You might have tuned in to Litmus' "industry changing" announcement at the Litmus Conference that they will begin collecting feedback and bug reports on Microsoft's behalf for the various Outlook email clients. It is so good to hear that Microsoft is taking steps to embrace email designers in their email client development and I applaud Litmus for taking the initiative to establish the formal channel with the Outlook team. Last year...
CSS Fixed Positioning in Email
Its one of the least understood CSS styles in email and also one of the most quirky - especially when it comes to iOS. The iOS Mail toolbars will obscure fixed positioning elements set to the very edge and z-indexes don't work reliably. However with patience you can do some cool things with fixed positioning...
Thunderbird’s Quirky Support For Checkboxes
Thunderbird supports checkboxes so it supports interactive email right? Well not so fast. The client behaves strangely when it comes to form elements. This article goes over what you need to know about form element support as well as ways to target your CSS just for Thunderbird...
No Absolute Positioning in the Samsung Email Client
Ever since Google discontinued the native Android client, many users on Galaxy phones have turned to Samsung’s email client. This webkit based client – denoted with a red @ seal – comes with some quirks – the lack of absolute positioning a key one. Thankfully there’s a way to target just the Samsung email client […]
Responsive Rollover Images for Email
A while back I wrote an article that demonstrated a method to create rollover images in email using background images. However the old method requires the width of the image to be fixed because the background-size property is not uniformly supported by all email clients.
This article goes into how to create responsive rollover images.
This article goes into how to create responsive rollover images.
The Outlook Rosetta Stone
Jason Rodriguez and Ed Giardina dug up from the annals of the internets the Microsoft Office HTML and XML Reference. It contains a comprehensive list of the infamous Outlook (and Office) mso- properties and their uses. This document might one day be seen as an artifact of email's dark history but right now, its a reminder of why Outlook is a pain in every email designer's... workflow.
Read more...
Read more...
The Ultimate Email CSS Animation Guide
Alex Ilhan dishes the dirt on CSS animations in email. Lots of juicy techniques to experiment with.
Part 1: Overview, the pros & cons and examples
Part 2: How to code animations
Part 1: Overview, the pros & cons and examples
Part 2: How to code animations