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.

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.

How to Enable and setup Dark Mode in Html Email?

1. Enable Dark Mode in email client user agents
By including this metadata in your: tag, you can ensure that Dark Mode is enabled in your email for subscribers that have Dark Mode turned on:

<meta name="color-scheme" content="light dark">

<meta name="supported-color-schemes" content="light dark">

2. Add :root selector with styles to the email:

<style type="text/css">

:root {Color-scheme: light dark; supported-color-schemes:light dark;}

</stlye>

3. Add Dark Mode styles for @media (prefers-color-scheme: dark), Add this media query in your embedded <style></style> section for custom dark mode styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS), and Outlook App (iOS).

Duplicate Dark Mode styles with [data-ogsc] prefix, Add this styling for support in Outlook app (Android).

@media (prefers-color-scheme: dark ) {

/* Shows Dark Mode-Only Content, Like Images */

.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */

.light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */

.darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */

h1, h2, p, span, a, b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */

.link { color: #91ADD4 !important; }

/* Shows Dark Mode-Only Content, Like Images */

[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */

[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */

[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */

[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */

[data-ogsc] .link { color: #91ADD4 !important; }

}

4. Apply your Dark Mode-only styles to your body HTML

Make sure all of your HTML tags have the appropriate Dark Mode classes inserted. Here is an example of the .dark-img and .light-img classes as they appear in our Light Mode vs. Dark Mode logos.



<a href="http://litmus.com/" target="_blank">

<img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />



<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">

<img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

</div>

</a>



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

You can message me any time, Click here.

What is the best Width Size for Responsive Html Email ??

This is a very complex topic and it is impossible to cover it in a few paragraphs.

The standard Html email template width was 600 pixels for desktops, 320px for vertical, and 480px for horizontal view on mobile devices. The height was unlimited and depended on content length. A few years ago the 600px width was a must-use standard and had no alternatives. But the standards have changed.

Let’s now talk about the acceptable width of emails, the best width of all email elements, and how to adjust these elements to multiple email clients, screens, and devices.

There is an article on the Litmus blog that claims that 600px email width is a myth. We totally agree on that as now there are more options than only a 600px width, yet it remains the standard size for email newsletters. But how did this width appear? Why is it exactly 600px?

A long time ago the screen resolution was far from perfect. And a number of devices were much poorer than now. That was the time when the 600px-width appeared. Since then a lot of things have changed but the width of 600px has become a basis of an email layout.

So 600px width is more of a tradition than a rule and it gives you 100% that it will be displayed properly. Not bad, isn’t it?

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

You can message me any time, Click here.

The Best Guide for HTML Email's Fonts

We can use 3 kinds of Fonts for HTML Email Template. They are:
1. Web safe fonts: (Web safe fonts)
Think Arial, Times New Roman, Verdana, or Georgia as prime examples of web safe fonts. They’re the default fonts found across the majority of different operating systems and devices.

2. Web fonts: (Web Fonts / Web Safe Fonts)
Web fonts aren’t found as part of the default fonts available on various devices and operating systems, and are specifically designed and licensed for use on websites. A couple of web fonts you may be familiar with are Open Sans and Roboto.

3. Self-Hosted Fonts: (Custom Fonts / Web Fonts / Web Safe Fonts)
Self-Hosted Fonts is like Web fonts aren’t found as part of the default fonts available on various devices and operating systems, and are specifically designed and licensed for use on websites.

I will use three technique for HTML EMAIL:
Technique 1:

This kinds of fonts is better for html email template. Becuse this kinds of fonts supported most popular email clients. That fonts are:
font-family:Arial, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:Trebuchet MS, sans-serif;
and so on.

Technique 2: (While I will use web fonts in email, then I will Choosing a fallback font)
=> (Web Fonts / Web Safe Fonts)

When using web fonts, it’s a necessity to have a fallback web safe fonts in place for those email clients that don’t support web fonts.
e.g. font-family: 'Montserrat', Verdana, sans-serif;
Here, Montserrat is web fonts and Verdana & sans-serif is fallback fonts. Which email client doesn't supported Montserrat fonts, they will supported Verdana or sans-serif.

Css of this: font-family: 'Montserrat', sans-serif;

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Or, To embed a font, copy the code into the <head> of your html

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>

The following CSS is targeting Outlook, as denoted by <!–[if mso]> and <![endif]–>, and telling Outlook to use a different font-stack.

Technique 3: (While I will use custom fonts, then I will Choosing a fallback fonts as web fonts in email, then I will Choosing a fallback font as Web safe fonts)
=> (Custom Fonts / Web Fonts / Web Safe Fonts)
First it will shows Custom Fonts, If fails then It will shows Web Fonts and finally fails Web Fonts, then it will shows Web safe fonts.

font-family:'wf_5527ee9a1ac34ef3a8c5a4d99', 'Caveat', cursive;
Here, wf_5527ee9a1ac34ef3a8c5a4d99 is Custom Fonts, Caveat is Web Fonts and Cursive is Web Safe Fonts.

CSS of this:

<style type="text/css">
@font-face {
font-family: 'wf_5527ee9a1ac34ef3a8c5a4d99';
font-style: normal;
font-weight: normal;
src: local('wf_5527ee9a1ac34ef3a8c5a4d99-Regular'), url("https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/woff2/file.woff2") format("woff2"),
url("https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/woff/file.woff") format("woff"),
url("https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/ttf/file.ttf") format("ttf");
}
@font-face {
font-family: 'wf_3e7b57c29e35401b9767ba51b';
font-style: normal;
font-weight: bold;
src: url("https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/woff2/file.woff2") format("woff2"),
url("https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/woff/file.woff") format("woff"),
url("https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/ttf/file.ttf") format("ttf");
}
</style>

Basically, do NOT do this:

@font-face {
font-family: 'Montserrat';
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Like web design, you can pull in the genuine fonts by including these styles in your @font-face stack, like so:

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: normal;
src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: bold;
src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

Do NOT do this, either!

@font-face {
font-family: 'Montserrat Bold Italic';
src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

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

You can message me any time, Click here.

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.

Is it your Html Email work in Outlook?

Yes, Of-course my Html email will be work in Microsoft Outlook. Some of the Microsoft Outlook Version name are given below:

Outlook 2007 (Windows 10)
Outlook 2010 (Windows 10)
Outlook 2013 (Windows 10)
Outlook 2016 (macOS 10.12.6)
Outlook 2016 (Windows 10)
Outlook 2019 (Windows 10)
Outlook Office 365 (Windows 10)

My Html email coding will always work perfectly in Microsoft Outlook for below reason.

I will always use:

Microsoft Conditional Code <!--[if gte mso 9]> [ Test ] <![endif]->
Bulletproof Background
Bulletproof Button

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

You can message me any time, Click here.

What is Responsive Html Email??

A Responsive Html Email is a newsletter that has combination of html and inline css coding that allows it to display perfectly across different devices such as Desktop, Tablet and Mobile. For example, without making use of responsive emails, the same newsletter that shows up perfectly on a PC monitor but in mobile devices not look good.

Responsive Html Email automatically adapts to all screen resolutions, allowing subscribers to read emails on the go with convenience and meeting a modern demand in mobile presence.

Responsive Html emails using media query css under a specific width. By default is for Desktop & Microsoft outlook version and when it goes to tablet and mobile devices, then the media query will be activated. Then the Email will shows perfectly in tablet and mobile devices.

Another one important thing is that for Outlook version Email's, always need to use outlook conditional code. i.e. <!--[if gte mso 9]> [ Test ] <![endif]->
Otherwise the email's in Outlook will be broken and looking poor.

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

You can message me any time, Click here.

Best Practice for Email Design and Html Coding

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

Slider Widget

Find the right course for you

Popular Courses

How to Remove Blue Links in HTML Emails??

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

How to Enable and setup Dark Mode in Html Email?

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

What is the best Width Size for Responsive Html Email ??

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

The Best Guide for HTML Email's Fonts

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

Best Practice for Email Design and Html Coding

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

Is it your Html Email work in Outlook?

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

What is Responsive Html Email??

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

Footer Menu Widget

Best Practice for Email Design and Html Coding

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

You may like these posts

Slider Widget

Find the right course for you

Popular Courses

How to Remove Blue Links in HTML Emails??

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

How to Enable and setup Dark Mode in Html Email?

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

What is the best Width Size for Responsive Html Email ??

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

The Best Guide for HTML Email's Fonts

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

Best Practice for Email Design and Html Coding

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

Is it your Html Email work in Outlook?

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

What is Responsive Html Email??

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

Footer Menu Widget