Email Campaign: Save-the-Date Announcement
Skills:Branding, Email Design
Date:August 6, 2013
Goal: Create a responsive email announcement that inspires the audience to add the event to their calendars and begin making plans to attend.
Challenge: Working with email is very tricky because each email client mandates its own styles and rules. Ensuring that your message will look good in MS Outlook or Gmail as well as an iPad or Android phone requires careful planning and testing. Since the main message of this email is conveyed in an image, I wanted to guarantee readability when images are turned off by the email client and when the image is scaled to a small screen.
Process: Pictured are two concepts that I initially presented to the marketing team. The first concept turns a prominent feature of the Denver landscape into abstract art, evoking mountains at sunset. The second concept focuses on the benefits of attending the meeting: networking with colleagues, collaborating on new ideas, and celebrating industry success.
Typically, I begin any new project by first mapping out the spatial properties of the design. Drawing boxes around the columns in the design allows me to anticipate how the HTML and CSS needs to be written. This method also helps me to determine where media queries need to be added to allow the email to respond to different screen sizes. I use tables to create my email messages because I’ve found the structure offers the most control across all email clients and browsers.
I used Illustrator to develop the artwork and Photoshop to create the mockups. I modified the HTML boilerplate with my own presets to create a blank canvas for most email clients. Media Queries are built into the CSS to replace the main image for a cropped version when the screen scales below 400px wide.
View the finished project. This email was sent on Tuesday, August 6, 2013 and had a 15.7% open rate.