Great Responsive Email Design From Bluefly

As a follow up to the post thumb is the new mouse. I wanted to share a great image-based responsive email example from Bluefly.

Responsive design entails coding the email HTML so it changes based on what device it is read on. Responsive design uses Media Query Support to know what screen size email is read on and then the email layout adapts to that screen size.

The following email, promoting Bluefly’s Presidents’ Day sale, looks great in all inboxes (that it can look good in) and doesn’t lose any branding or the strong imagery.

When viewing the email on my desktop email client (native mac client), the email rendered like the following (full navigation and nice pre header):

BF1

The main body of the email has four product sections per row and two rows:

BF2

When viewing the email on my iPhone (native email client), the email layout is adapted, as shown below. You can see that the product image row of four is now two and part of the navigation has been removed for it to fit nicely on a smaller screen size. This doesn’t lose any impact of the email or the main message as you can clearly see the Free Shipping offer.

iPhone header and main image:

BF3

iPhone product rows:

BF4

However, when viewing on the Gmail iPhone app, the responsive design does not work; why is that? It is because Gmail does not support Media queries. Here is a guide to which email cent’s support responsive design: http://www.campaignmonitor.com/guides/mobile/

iPhone Gmail:

BF5

What to improve on?
Although the email is mobile aware it is still somewhat stale. I would recommend adding a countdown clock that starts counting down when the email is opened, creating a sense of urgency.

Do you have a good responsive email example?