Image Swap for Email Revisited [non-mobile]

In 3 Steps to Create an Interactive Email Using CSS we saw how we can implement a simple rollover effect in email. After further experimentation I've found a slightly simpler method to implement the same effect...

Read More and Background Images

A well placed background image can make all the difference in an email. If you have an image that you'd like to use as the background, use a table cell background to get it to work in (Hotmail).This is effective because strips background-image styles...

Read More

Interactive Images on Mobile Email

In a previous article I showed how to create "rollover images" in email wherein the user could move their cursor over an image and an alternate image will be shown. This tutorial will show you how to create a similar effect on mobile...

Read More

Bulletproof Solution to Hiding Mobile Content when opened in Non-Mobile Email Clients

This is a definitive guide into hiding content on desktop and web clients that you only want displayed on mobile email clients.

These days, responsive design is getting popular on email. Having the layout and sizes of elements change when viewed on a desktop vs mobile environment make for a much more pleasing email experience for the recipient.

The question is, what is the best way to hide content that you only want seen on a mobile device - such as a call to action to try out your mobile app or a clever layout trick - so that it is not displayed when the user opens on an email on a desktop or web client? ...

Read More

Email Client Media Query and Embedded Styles Support 2014

The email client landscape is very fluid. Webmail providers make frequent tweaks which often affect the rendering of our email design.

The following is a table of media query and embedded styles (CSS placed within <style> tags) support in the various major email clients as of January 2014 - attributes used in the interactive techniques covered in this blog...

Read More

How Yahoo! Mail’s Mangling of Media Queries Affects Your CSS

The first part of this article talked about what you should be aware when creating email with Media Queries in relation to Yahoo! Mail.

In this article we’ll look at what happens when Yahoo! Mail mangles media queries. This article will be very technical in nature and may be of limited value if you're just looking for tips. However, if you want to understand what appears to be going on "under the hood", read on...

Read More

Why Not to Put Regular CSS Under Media Query Blocks [Yahoo! Mail]

In a previous blog post we saw how Yahoo! Mail mangles media queries and how we can address it. However there is a less well known, adverse effect that arises from Yahoo! Mail's mangling of CSS. If you have CSS rules after  Media Query blocks, it can get frustrating trying to figure out why Yahoo! Mail seems to be enabling and disabling rules seemingly at random...

Read More

How to Limit Email Interactivity to Non-Mobile Clients

A recent FreshInBox post 3 Steps to Create an Interactive Email using CSS showed how to create simple mouseover image effects that work with most of the major webmail clients including Outlook 2003.

If you tried out the example in that post on the iPhone and Android you probably noticed that although the touch devices don’t support the concept of a "cursor hover", it does respond to the hover event when an element with hover is touched...

Read More

Send Yourself an Example of an Interactive Email

I've put up a page that allows you to send yourself an example of the Interactive Email that I covered in the article 3 Steps to Create an Interactive Email Using CSS.

You can send yourself the example by going here.

Read More

3 Steps to Create an Interactive Email Using CSS

Do you find yourself trying to find new ways to engage your email audience with compelling and eye-catching content?

This example will show you, in three easy steps, how to do just that. By creating an email that will display an alternate view of a product when the recipient hovers the cursor over an image, users will have a much more interactive and enjoyable experience...

Read More