From: J. Crew Date: 10/12/15 Subject Line: Get a piece of this sale event, now with free shipping (hurry, ends today)
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!
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.)
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.
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: