0

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.

<html>
<body style="font-family: Helvetica, montserrat; margin: 0% 10% 0% 10%;">
    <div style="background-color: whitesmoke; text-align: center;">
        <h1 style="padding: 25px"><span style="color: #5cb811;">BRAND</span><span style="color: white">NAME</span></h1>
    </div>
    <div style="padding: 0% 5% 0% 5%;">
        <div class="delivery-box" style="padding: 10px; text-align: center; margin: 0% 10% 0% 10%;">
            <div style="border: 1px solid whitesmoke;">
            <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <h2>At vero eos et accusamus!</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Sed ut perspiciatis unde omnis. </p>
        <p>dolor sit amet.</p>
    </div>
</body>
</html>

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.