Best Practice for Email Design and Html Coding

There are a few things to keep always in mind when designing Responsive HTML email Template:

=> Emails width should be within 600 to 650 pixels. This will make them behave better within the preview-pane size provided by many clients.
=> Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.
=> If it is possible to avoid background image, then it is good. Because some email clients will be initially blocked and some email clients will completely fail to load.
=> Email design is not Wed Design. Don’t design an email with sliced-up image. While these kinds of emails look pretty, they perform poorly.
=> Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
=> For mobile screen use big call to action button.

If you are looking for this kinds of Responsive HTML Email Coding??

You can message me any time, Click here.

Slider Widget

5/recent/slider

Find the right course for you

Popular Courses

Limitation Of Responsive Html Email Template

There are some limitations of Responsive HTML Email Template. They are:

1) Width: Keep your email width under 650px. Stay at 600px for maximum safety.

2) Custom Font: All Email Clients doesn't supported custom fonts, See more.

3) Background Image: Some email clients block Background Images while others simply do not support them. What’s more, depending on the mobile email clients backgrounds can render differently. So, test the email to sort out all the possible issues. For this we, Will always avoid to using background image. Instead of background image with overly text, We will make that section as Image.

4) Border & Border-radius: Some email client's doesn't supported Border & Border-radius. Please see the below screenshot:

If you use this kinds of border and border-radius, Then some email client's doesn't supported this border and border-radius. That email client's will shows this section as below screenshot:

5) Overlap: Email client doesn't Supported Overlap one section to another section. In normal HTML for browsers, making elements overlap is easy. Position isn't supported in many clients, so no position: absolute; or position: relative; and no top, left, right and negative margin. Please check the below screenshot:

Most of the email clients show this overlap section as below Image:

How to Remove Blue Links in HTML Emails??

The key to understanding blue links is identifying which text is most likely to be auto-linked and styled. In our testing, these things are prime candidates for becoming blue links:

Addresses, Dates, Email addresses, Website names, Times and Phone numbers etc.

We can follow below steps to fixed this problem:

1. Overriding Blue Links in Apple Mail:

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

2. Overriding Blue Links in Gmail:
<body id=”body”></body>

u + #body a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

3. Overriding Blue Links in Samsung Mail:
Just like with Gmail, we can target that ID and any links contained within.

#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

4. We can also add a specific class to remove blue link:

Or, <span class="noLinks">+1 (800) 123-4567</span>

.noLinks a {
color:inherit !important;
text-decoration: none !important;
}

If you are looking for this kinds of Responsive HTML Email Coding??

You can message me any time, Click here.