Skip to main content

e-mail styling with limitations: gotchas to avoid? [Resolved]

I'm designing a simple e-mail for the amazon buyer-seller messaging system and it has quite a few limitations.

These are the allowed HTML and CSS tags - I can only do inline-styling as everything else gets stripped. Allowed HTML and CSS tags

This is an example of what I've got.



    

BRANDNAME

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

At vero eos et accusamus!

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed ut perspiciatis unde omnis.

dolor sit amet.

My question isn't with regards to the design (it's mediocre at best), but rather if there's anything I should be aware of as these e-mails are likely going to be viewed by a number of different devices and I'm not sure how I can assess what it's gonna look like using different e-mail providers and devices? Are there any typical practices that trip people up on this that I should avoid? I'm not sure how to get the margins done nicely (I want a lot of whitespace around the text and edges) and look more or less similar on any device. I just went with padding and margin that's based on a percentage, hoping that would do the trick, but I'm not sure how well that actually works?


Question Credit: gloomyfit
Question Reference
Asked July 11, 2019
Tags: design, email
Posted Under: UI UX
65 views
1 Answers

It's been a while since I've done email campaigns, but it used to be quite a large part of my work, as such the bits of advice I can give:

  1. Use tables - I know it goes against modern web practises, but email clients ignore a lot of CSS alignment values, whereas tables seems to work.
  2. Use cloud hosting for your images so they're downloaded as part of the read rather than the delivery.
  3. Use absolutes rather than spacing derived from the view port
  4. Use inline CSS

Some more help here: https://www.campaignmonitor.com/dev-resources/guides/coding-html-emails/

It looks like Amazon supports most relevant email tags so you should be ok.


credit: DarrylGodden
Answered July 11, 2019
Your Answer