In the Spirit of Leap Day…Email Design

Originally posted February 29, 2016.

With this unique day, I thought it appropriate to share how I personally leapt {silly humor} ahead in Email Design over the past two years. It wasn’t easy or pretty. At times, I found myself printing out pages of code in order to troubleshoot broken table tags, sitting through tutorial after tutorial, asking a million questions to the coding community, and banging my head off the wall when I felt completely lost. {⨂ Outlook is my nemesis ⨂}. It’s been a frustrating ride but I’ve finally made it into the promised land of responsive design. 

Take a look at the before and after {cringe}!

I think it’s important to show how far the progression has evolved even if it makes me a little embarrassed. To the naked eye, these designs may look okay but the emails to the right and left of the center screen are not responsive designs. Not only are they not responsive but they’re compiled mostly of images verse a healthy mix of text AND images. In the beginning stages of learning, I thought that the layouts I desired could only be obtained by implementing heavy elaborate image elements created outside of the coding. Although I still believe images to be wonderful when properly used in email designs, I personally feel it’s best to use an 80/20 hybrid. This is not a hard-and-fast rule, just something that works for me! I try to make eighty percent of my email tailored to text, buttons, color, and elements written directly into the code. The remaining twenty percent is left to the images (the cleaner the  better). This will ensure that your email audience is still viewing your original brainchild, even if it’s a simplified version. This can happen when clients turn off their ability to view images within their email software or browser, therefore creating empty boxes. Another little tip I picked up to troubleshoot this problem, use your alt text! In the case that the blank box appears, your audience will still know what’s “suppose” to be in it’s place. 

Now the center design, that is fully responsive. The only glitch was troubleshooting the background in Outlook. That explanation is for another day!
I would be a fool to state that I now know everything about responsive design. Quite the opposite! I find myself constantly learning with every email blast and analytic report. I want to challenge myself by pushing the boundaries even further translating beautiful functional design to every client. The most important shift into this responsive world has been rearranging my own thought process and approach to developing functional and eye-catching layouts. I view this shifted mindset as entering into a more mathematical perspective where percentages and pixel widths need to be calculated in advance to communicate and ensure proper functioning within the email itself. Once a general framework is pieced together, much like a puzzle, I start to rearrange and shift the content and art back into this designed layout. 

Nothing fancy just the basics. I start by sketching out the framework into sections that will translate into tables and rows. Laying this foundation will give me the flexibility later with my design. Even if it’s very loose, I am able to break the email into parts so that if I need to troubleshoot, it doesn’t feel too overwhelming in finding the problem and/or working on a seperate section until I figure out the answer. On the days the design finally comes together as a whole, I feel like a code breaker! 

Throughout the process, TEST, TEST, AND TEST your email. This is very important to maintaining your own sanity. When I first started designing emails, I used a free testing site called Putsmail by Litmus. I would lug two computers home to make sure my emails were rendering properly on both Mac and PC. Today, I’m lucky to say that I’ve finally been granted permission to purchase the full Litmus software which allows me the ability to test designs across several email clients and on different devices in order to ensure success when sent. Additional perks with the software include live email coding and cleaning, analytic reports, page testing and comparing between devices and views (as seen below), spam filter tests and so much more! No, I’m not a spokesperson for Litmus. I just think it’s made my life ten times easier and I want to share it with you!

To wrap things up, there are so many ways to learn and teach yourself responsive design. For me, it was beneficial to first break down the code in order to truly understand the lingo and functioning behind each moving part within the email. I’d like to think this has helped me in understanding and troubleshooting certain roadblocks that would otherwise have frustrated me in the long-term. It was also helpful to download some free responsive design layouts and work off of them when I first transitioned into this world. There is also an amazing community of open source help out there that’s only a google away! If you’re caught in a time crunch, I’ve even signed on for coding help and paid a small fee to enlist the help of an expert when I was at my whits end. The resources are endless, find them and use them! 

Email design can be learned and in my opinion and experience is best learned by doing. You will get discouraged, but keep going. The feeling of accomplishment when you solve even the smallest problem is worth it. Happy emailing! 

Using Format