J Crew Timer Hero

Real Time Countdown AWESOMENESS!

From: J. Crew
Date: 10/12/15
Subject Line: Get a piece of this sale event, now with free shipping (hurry, ends today)

J Crew Timer

J Crew

Wow, check this out. J. Crew had a one day sale. Instead of blasting reminders throughout the day, they included a timer that counted down to the end of the sale… in real time! It conveyed urgency and allowed people to check back throughout the day to see how much time remained in the sale. As you may be aware, this timer is not easy to pull off. Animated gifs can’t keep real time and complex code can’t be used in emails. So how did they do it? We speculate that this timer was made possible through a company called Moveable Ink. They use a server to generate an image on-the-fly based on the time and date the user loads the image. Genius. It’s not free, but the company provides some really awesome services that wouldn’t be possible otherwise.

Rather than counting down to the end of a sale, this technique would work great for counting down to the START of a Black Friday or Christmas sale (when discounts are large, sales end quickly and your email needs to stand out)! Last year I saw a few companies offering exclusive first dibs on sales for email subscribers, prime members, card holders or high status spenders. The timer could be used to count down the amount of time the sale remains exclusive to those members. And don’t forget countdowns to shipping cut offs as well!

Read More

Render Error: iOS layering images

This week a client brought an unusual rendering problem to the CALM team. In the iOS native Mail app the email was appearing very broken, with images and content layered and floating on top of each other. iOS is generally a very easy going email renderer, supporting a ton of modern CSS and standard HTML.  So when this issue was brought to our attention, it was baffling to say the least.

The email itself was very simple, basically a text preheader, a series of images stacked in tables stacked, and a footer. At the client’s request, we coded the images in the email without a defined height.  It is generally best practice to define a height for an image, however in this case, leaving the height to be computed enables the client to easily update the images at the last minute.

We dug into the problem right away. After ruling out a syntax error, things got interesting. After some troubleshooting, we discovered that iOS Mail in iOS 7-9 on the iPhone 5s and iPhone 6 when confronted with images without a defined height and no other elements to define their height loses its mind and tries to layer them on top of each other.

This is the simplest example we could contrive: two images in the body of an HTML document without a defined height. (The opacity is set so that we can see how iOS is layering the images.)

Litmus: https://litmus.com/builder/b5e2291

Cat's heads don't generally float over their feet.
Cat’s heads don’t generally float over their feet.

In this example, we’ve wrapped the two images in a container table and that seems to have solved the problem.

Litmus: https://litmus.com/builder/8e69941

However, what happens if we split the two images into their own tables.

Litmus: https://litmus.com/builder/12ac542

Everything appears fine, but if we add some text at the same level as the container tables, things break again.

Litmus: https://litmus.com/builder/e6a6df4


The simplest and most reliable solution we settled on is to make just sure our content is wrapped in a container table. This is generally best practice anyway and perhaps why we’ve not seen this problem before.

Litmus: https://litmus.com/builder/a307451


We will keep exploring this error and will post any updates.  Please post a comment with any questions or solutions that you have found.

Read More

So, You Want to Learn HTML?

Learning how to code HTML (ahem!) almost 10 years ago, without a doubt, changed my life for the better. It provided an opportunity to change careers in a completely new direction, shortly after my first child was born. Previously, I was the Sommelier + Maitre’d of a 4-star rated restaurant, a job that I loved, and in which I excelled. However, as I quickly discovered after returning from my maternity leave, trying to maintain the long hours required with restaurant management, along with the demands of a newborn did not make for a happy family life. I was most fortunate that my brother encouraged me to take a course in HTML. I remember being terrified, and had serious doubts that I could learn coding, but my awesome brother assured me that “any half-way smart person” could learn it…so that’s what I did!

There are many great books out there, and I got my start by reading Beginning Web Programming with HTML, XHTML, and CSS (now in 2nd Edition) by Jon Duckett, and enrolling in a 2 day intensive HTML course at LearnIt!, a San Francisco Bay Area based outfit, that now also offers Live Online Training. As luck would have it, the previously mentioned awesome brother was launching a boutique Email Creative Services agency, and I was able to hit the ground running with immediate part-time contract work, which enabled me to stay home with my baby daughter. Regardless of what a person does with their acquired HTML skills, it can be used across a wide array of career paths from Coding and Graphic Design, to Marketing and Advertising.

Below, are a few additional industry respected resources for learning about HTML, and Email Marketing:

Once you are feeling confident of your coding chops, and you are ready for some work, here are a few reputable places to find freelance gigs:

And a few useful tools for once you are more established in the Email Marketing world:

  • eDataSource (the perfect tool for mining data and analytics from the competition)
  • Litmus (a must have tool to ensure your emails are rendering and looking pretty across multiple platforms and devices)

Good luck HTML students, and potential future Code à la Mode coders! 🙂

Read More