<img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=nups8&amp;p_id=Twitter&amp;tw_sale_amount=0&amp;tw_order_quantity=0"> <img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct?txn_id=nups8&amp;p_id=Twitter&amp;tw_sale_amount=0&amp;tw_order_quantity=0">

Customer Retention. Automated

Email Design & Development Best Practices

Posted by Mary Fran Thompson on Jul 25, 2017 3:54:15 PM

The first time I dabbled in email design, all I could think was… “I’m doing everything I was told not to do when designing for web.” I’ve made great strides since I developed and deployed my first email design  and wanted to share this knowledge in the form of a few “best practices.”


01. Design with Retina Devices in Mind

Don't alienate customers with high resolution devices by using standard resolution images. Make sure any images used are retina-friendly by doubling the pixel value. For example, in a 620px layout, a 620px her image should be 1240px. 

Email Best Practices - Design for Retina Devices

Pro Tip: If you're writing the code yourself, as opposed to using one of Windsor Circle's renowned retention automators, remember that the designated width of this high resolution image will be half the size of the original. For example, a 1240px image will still be designated as 620px in HTML.


02. Design Responsive Campaigns

According to "Email Client Market Share Trends for 2017" from Litmus, over half of all emails are opened on a mobile device. Unless you're willing to lose a sizable chunk of your audience, it's imperative that every campaign look flawless on all cell phones and tablets. 

Email Best Practices - Creating a Mobile Responsive Version


03. Build Your Layout in HTML Tables

The <table> tag might be archaic in web design, but it still reigns supreme in email design. Nested tables are the best method to ensure a consistent layout across all email clients. We'll explore why email clients render the same campaign differently in a future post. 

Email Best Practices - Using <table> tags

If writing HTML is not your thing, Windsor Circle offers custom email templates and design services - contact us!

Pro Tip: Image mapping is not  a best practice for responsive email design. This is a common misconception. While support across email clients is growing, because the coordinates used to specify the location of an image will change depending on the size of the viewport/browser, they will no longer accurately reflect the position of the image on mobile. 


04. Keep All Image Files Below 200k

The larger the file size, the longer the load time. With the average attention span clocking in at less than that of a goldfish, an email that takes even a fraction of a second longer to load could be all it takes to lose a potential transaction.

Email Design Best Practices - Image File Size

Pro TipBe careful when using GIFs. Even seemingly simple animations that have too many colors or frames can result in bloated 1+mg file sizes. You can reduce frame rates and the number of colors in image editing software such as Photoshop, but it is ideal, when using GIFs, to plan for a small, specific animation with as few colors and frames as possible. 


05. Test, Test, Test

At Windsor Circle, every campaign has at least 3 sets of eyes checking for any possible blemish or blip. We also use software, such as Email on Acid and Litmus, to test our campaigns across a myriad of email clients, which is the most efficient way to ensure your design renders properly across all clients and devices. 

Email Design Best Practices - Email On Acid Testing

Pro Tip: NEVER FORWARD AN EMAIL! This will jumble and strip your code, causing funky rendering issues. There are several ways around forwarding emails depending on the email service provider and/or testing service you use. 

Topics: Best Practices, Email Marketing

Popular Articles