Although it’s one of the oldest digital direct marketing tools, email is still the most efficient way to communicate with current and potential customers. But unlike the early days of email when only a few desktop email clients were used for email access, we now use a plethora of desktop clients to read and send email, like Microsoft Outlook and Gmail — not to mention the wide variety of mobile devices and tablets we use to check email.

Unfortunately for email marketers, optimizing an email campaign so that it looks good and functions properly across all of these platforms doesn’t simply happen by magic.

The myriad ways we view our email inboxes are precisely what makes email development so challenging. Getting an email to perform optimally across all of these clients and devices requires older HTML/CSS techniques and a whole lot of rigorous testing, but the good news is there’s plenty of help out there.

Let’s take a look at a few tools and frameworks available that can help to optimize emails for all clients and devices.

Development Across Devices

There are nuances between different browsers and devices that can make email development frustrating, so building an optimized and well-designed email takes time, practice, and a lot of patience. Luckily for us, over the course of email’s existence many great resources have been created to help us build the perfect email. The de facto guide on the do’s and don’ts of email development has been put together by the folks at Campaign Monitor. It’s worth a close read, but the main takeaway is to keep the code old-school — tables, inline styles, etc. — which for some of us is hard these days. (Technology has come a long way, so going back to the old stuff can be a challenge, but it’s worth it.)

Again, keep in mind that patience is key during the email development process.

More importantly nowadays though, emails need to display properly on mobile; in 2013, 47% of emails were opened in a mobile client or application. For this mobile-focused perspective, Zurb has created a responsive email framework called Ink. Ink allows you to build emails for both desktop and mobile experiences using a simple grid system and media queries (yes, media queries do work in most desktop and mobile clients). Ink’s Inliner tool also allows you to paste your HTML and have it automatically outputted with all the styles inline, saving you a lot of time. I created a “starter” point for using Zurb Ink, and it can be found here on my github.

Having an email look great on mobile is so important to users that 80% of people delete an email if it doesn’t look good to them (or if they can barely read it). The key to making an email look good on mobile is responsive design. Although there are a ton of companies using responsive email design now, a few have stood out — Litmus, TOMS, Expedia, to name just a few. To illustrate the power of great responsive design, I’ll use one of Expedia’s emails as an example:

Why is this email great? Its call-to-action (CTA) is clear, it’s not text-heavy, and take a look at how well the email translates to mobile; on the smartphone’s smaller screen, the design fits to the confines of the screen and maintains the readability of the CTA and images. No matter the device, the integrity and intended design of the email remains intact, and that’s exactly what every proactive marketer wants to see.

For more information and examples of great email design, take a look at this case study from Campaign Monitor about Twitter’s approach to responsive email design, as it goes a little deeper into media queries and actual code.

The Power of Testing

Probably the most overlooked component of building an email is thorough testing — and by that I mean not just sending the email to your Gmail or Yahoo! account, but testing on all browser, desktop, and mobile clients. Rigorous testing of an email across platforms is the only way to ensure your email is responsive and readable to everyone.

A tool that I couldn’t live without for email testing purposes is Litmus, because it allows you to set up test cases based on specific clients you want to check. Litmus also provides you a test email address to send your campaign to, runs the email through all the clients you select, and then shows you a screen shot of how the email would look for all clients. Here’s an example of a TrackMaven email test in Litmus below:

Check out all the results for the above more in-depth here, so you can see the wealth of information and feedback this tool provides.

If you are new to email development, this testing process will probably be the most frustrating for you. You’ll find sometimes your email will look great in Outlook 2007, but then will be a wreck in Outlook 2013. The great thing about testing with Litmus is it will allow you to keep re-testing your email campaign until everything is perfect.

Hopefully this will help you get on track with building emails for every device, screen and client. Remember, patience is key, testing is tedious but necessary, and if you can, build your email for mobile, because every customer deserves an optimal email experience!

If you like this post, you might like 3 Reasons Marketers Should Learn To Code or How TrackMaven Digs Up Data: An Introduction to APIs & Python.