I built an html newsletter template in Adobe Edge Code CC. I’d been wanting to try Edge Code for awhile. This was sent as a permissions (e-blast) in VerticalResponse. I had less than a week to design this, right before Christmas, and I encountered lots of problems. The main issue was many of the subscribers opened their email in Outlook so I’d need to do browser testing with Litmus, which takes time. In the forums I read, designing an e-blast template for VerticalResponse is a veritable minefield.
I designed a great template only to find that there is a Character Count in Vertical Response so my custom code didn’t work. I went back to the drawing board and created a simpler design. It was so simple, they didn’t like it. I learned that e-blasts need to be simple to get through spam filters. Limit your images to prevent spam filters from targeting your email and make sure you have an even amount of content. Also, all images need to be hosted. If you are using email software like MailChimp, you don’t need to worry because they host your images. After trying Constant Contact, VerticalResponse, and MailChimp, I prefer using MailChimp. It’s easier for designers and coders to customize.
Content tips
I learned some tips for designing a successful email blast. During the design process, I discovered that Verticle Response, Constant Contact, and iContant, require all of the html to be coded using inline styles, not CSS. Inline styling is more compliant. This means you want to keep the design VERY simple. For e-blasts, it’s better to emphasize your content. It’s more important than images. Instead, highlight your headers. Use bold squares of color in your header and to emphasize your content. For e-blasts, use valid html, test it, and make your code as clean as possible. If you want it to be responsive, I found it’s faster to download a boilerplate template. Always create a good text version of the e-blast for clients who will look at it on their phone or with images turned off. Use something like Litmus to test your code to make sure it looks good on all browsers, screen sizes, and OS. Try to always check an iPhone and Android to make sure the design is ok because it’s usually a little different from OS tests.
Some e-blast tips:
1. Inline your CSS code
2. Width of email, usually 600px
3. Images, use jpg or png, and double your image size for high definition displays. Example, 1200×400, 90 ppi
4. Keep your file size down so it loads faster. Less than 1MB. 75 – 100k is good.
5. Test your email https://putsmail.com/tests/new
6. Responsive Boilerplate template https://github.com/seanpowell/Email-Boilerplate
7. If you’d rather just buy it, Startup Creative $18 http://themeforest.net/item/startup-creative-enewsletter-builder-access/12932376
8. Make a good text version for clients
sumanidesign 