CSS3 in Responsive HTML Email Design

Last week we realized that you can use CSS for cool new features like fixed positioning a call to action in responsive email design. Credit to @crystal_aime for the original idea.

This whole concept opens a ton of new ideas!

During the last month I created a neat CSS3 animation for a project that was unfortunately scrapped at the last minute. The animation simulates a magnifying glass using CSS, image masks, and keyframe animations (along with a couple hacks to degrade gracefully to older browsers).

Check out what happens if you merge the two: Responsive Email Animation (remember to view this in a modern browser and reduce the width of a browser window). It even works in my iPhone 3GS (iOS6) using Apple Mail. An active state tap sort of works in Mobile Safari, but unfortunately not in Mail.

For HTML email designers CSS3 has huge potential. I’m almost as excited as I was after watching craftsman work their magic on CSS Zen Garden a decade ago.

Goodbye GIF, hello CSS3.

Fixed Position Your Call To Action

One of the great things about responsive design is the support by clients for real css.

This morning my coworker had an interesting idea to fix position an element in an email design. What if we can keep the call to action sticky?

Here’s a proof of concept: http://bit.ly/FixedEmail (remember reduce the width of your browser window to see the fixed cta).

I kept the height small for landscape orientation. I pushed this to the top so it doesn’t conflict with the unsubscribe at the bottom. Works on IOS 5+ and Android 4.2. Would need to be device and a/b tested (so determine if it’s effective).

The phone number is clickable and will prompt a call on a mobile device. In a real design this would be a css button.

Originally posted on Campaign Monitor Blog

Update: If you’re having issue with this working in iOS7, there’s a fix on the campaign monitor forum.

Will your feeds be burned by Google?

Much has been written lately about Google’s announcement that it will close the (beloved by many) Reader RSS news app. Marco Arment has what I think to be the best take.

“Our best option is to avoid supporting and using proprietary monocultures.”

The solution is fairly simple. Change apps. Export OPML. Import OPML. Done.

But. If Reader doesn’t fit in Google’s new “plus” ecosystem, will Feedburner?

Many independent web publishers are in a more dangerous situation. By using Google Feedburner, these publishers are at risk of losing their loyal RSS-loving readership. What happens when (not if) Google decides to close Feedburner? It won’t be as easy as changing apps.

Converting your RSS-loving readership away from an an old feed will take a lot of effort. Four months may no be enough.

When it comes to your site’s RSS feed, Marco’s recommendation is worthy of repeating:

“Avoid supporting and using proprietary monocultures.”

And move those feeds away from Google.