New Products

In our first engagement with Hulu, we had the opportunity to build an adaptive HTML newsletter. Hulu wanted to emphasize some of the television comedy’s quirkiness by displaying a fall-back (HTML tables-only) version of the logo for users in certain email clients. For users with images turned on, the image-friendly version was displayed.

View more New Products

The Problem

Many email clients including AOL, Yahoo!, Android, and older versions of Outlook block images in newsletters by default. That means an HTML newsletter that is image-heavy will display a jumbled mess for many users unless they click on “display images” in the heading. That was a problem for our client who wanted recipients to always see the logo even with images off. Even more so than that, the driving factor was building a custom newsletter with a distinct quirky feature.

Our Solution

We built the custom HTML newsletter using tables and rather than making the Broad City logo a single image, we sliced it into 200 smaller pieces and placed them into a table. Behind the image slices in the HTML table, the cells were given background colors so if images cannot be displayed, the background color of the cells will recreate the logo in a quirky way.broad city animated logo using tables

The Process

Hulu had the newsletters designed and knew what they wanted to achieve, but were not quite sure how to do it. Our team sliced up the artwork into tables, colored in the background table cells, then optimized the images and performance across a host of different browsers and email clients. This project ended up taking nearly as much time in compatibility testing as it did in development.