Content #1687: Update Email Templates for Responsiveness, Alignment, and Styling via html - SQA-Lead Content Writing - Redmine

Actions

Copy link

Content #1687

open

Update Email Templates for Responsiveness, Alignment, and Styling via html

Added by Maruf Parves about 1 year ago. Updated about 1 year ago.

Status:

Pending

Priority:

Medium

Assignee:

Maruf Parves

Target version:

Start date:

01/15/2025

Due date:

01/15/2025 (about 15 months late)

% Done:

100%

Estimated time:

5:00 h

Spent time:

4:00 h

Description

We need to update our email templates to ensure they are responsive, centered, and properly styled across all devices (mobile, tablet, and PC). This includes:

Centering the email content within a visible border.
Making the email templates responsive so they display correctly on all devices.
Adding a centered button (if applicable) and ensuring all text is properly aligned.
Ensuring the "Click here to stop receiving email from us" text is centered.

Actions

Copy link

Updated by Maruf Parves about 1 year ago

% Done changed from 0 to 90

As the existing emails were looking a bit on desktop view. as everything was left aligned. I tried to use a html code which can make the existing email have side borders, while keeping the body as it is. Also ensured that the button and the " click here to stop receiving email from us" text was middle aligned as well. Solution is very simple. We just have to put a before and after code on each emails code section.

here is the before code which shall be placed at the very first:

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="center">
            <!-- Centered Container with Border -->
            <table class="email-container" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; border: 1px solid #ddd;">
                <tr>
                    <td align="left" style="padding: 20px; font-family: Tahoma, Geneva, sans-serif; color: #333333;">
                        <!-- Your Existing Content Will Start Here -->

and here is the after code which shall be placed at the bottom:

                        <!-- Your Existing Content Will End Here -->
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- Style Existing Unsubscribe Text -->
<style>
    /* Target the existing unsubscribe link */
    a[href*="UNSUBSCRIBE_INSTANTLY.ai"] {
        display: block;
        text-align: center;
        font-size: 12px !important;
        color: #B8312F !important;
        text-decoration: none !important;
        margin: 20px 0;
    }
</style>

Actions

Copy link

Updated by Maruf Parves about 1 year ago

Due date set to 01/15/2025

Actions

Copy link

Updated by Maruf Parves about 1 year ago

Estimated time set to 2:00 h

for the button allignment in the middle I have updated the

with centered table structure. bacause even though wrapped in

and text center alligned, email cleints like gmail doesnt support them.
so,
instead of:

<div style="margin: 10px 0; text-align: center; display: flex; flex-direction: column; align-items: center;">
    <a href="

[ Button content]

</a>
</div>

I have updated it with:

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="center" style="padding: 10px 0;">
            <a href="