Introduction

In this guide, we will explore how to create visually appealing gift certificates for your clients using Mailchimp. The goal is to overlay text on an image dynamically, ensuring that the design is both attractive and functional across various email clients.

Design Considerations

When designing emails, especially those that include images and text overlays, it's important to be aware of how different email clients render HTML and CSS. Absolute positioning can be problematic, particularly in Gmail, which does not support it well. Therefore, we will utilize a more compatible approach.

HTML Structure

Here's a sample HTML structure for your Mailchimp email template:

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>*|MC:SUBJECT|*</title>
    <style type="text/css">
        body { background-color: #bab145; text-align: center; }
        #layout { border: 5px solid #999999; background: #ffffff; margin: 10px auto; text-align: left; }
        #header { background-color: #cccccc; padding: 0; color: #333333; font-size: 30px; font-family: Georgia; text-align: left; }
        #content { font-size: 13px; color: #4d4d4d; font-family: Helvetica; line-height: 1.25em; padding: 10px 30px; }
        .primary-heading { font-size: 28px; font-weight: bold; color: #8b0000; font-family: Georgia; line-height: 150%; margin: 25px 0 0 0; }
        .secondary-heading { font-size: 20px; font-weight: bold; color: #000000; font-family: Georgia; margin: 25px 0 5px 0; }
        #footer { background-color: #eeeeee; padding: 20px; font-size: 10px; color: #333333; line-height: 100%; font-family: Verdana; }
        #footer a { color: #800000; text-decoration: underline; font-weight: normal; }
    </style>
</head>
<body>
    <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
            <td id="content">
                <div style="height: 243px; width: 500px; position: relative;">
                    <img src="http://getfreepellets.com/images/GC_flat.jpg" style="width: 100%; height: auto;">
                    <div style="position: absolute; top: 110px; left: 130px;">
                        *|FNAME|* *|LNAME|*
                    </div>
                    <div style="position: absolute; top: 140px; left: 130px;">
                        GetFreePellets.com
                    </div>
                    <div style="position: absolute; top: 166px; left: 130px;">
                        $100
                    </div>
                    <div style="position: absolute; top: 200px; left: 370px;">
                        *|COUPONCODE|*
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td id="footer">
                <p>
                    <a href="*|ARCHIVE|*">View email in browser</a> | 
                    <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | 
                    <a href="*|UPDATE_PROFILE|*">Update your profile</a> | 
                    <a href="*|FORWARD|*">Forward to a friend</a>
                </p>
                <p>*|LIST:DESCRIPTION|*</p>
                <p>*|HTML:LIST_ADDRESS_HTML|*</p>
                <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p>
            </td>
        </tr>
    </table>
</body>
</html>

Key Points

  • Image Handling: Use relative positioning for images to ensure they scale correctly across devices.
  • Text Overlay: Position text using absolute positioning carefully, as it may not render correctly in all email clients.
  • Testing: Always test your email in multiple clients to ensure compatibility and appearance.

Conclusion

By following these guidelines, you can create an engaging and dynamic gift certificate email that meets your client's needs while ensuring compatibility across various email platforms. Remember to keep testing and refining your design for the best results.