Skip to main content

HTML Email Development

Table of Contents​

  1. [POP and IMAP Architecture]
  2. Email Templates
  3. Getting Started
  4. Google Analytics Pixel Tracking
  5. Email Platforms
  6. Legal Compliance
  7. Best Practices
  8. iOS Devices
  9. [MJML - Mailjet Markup Lang]

POP and IMAP Architecture​

POP (Post Office Protocol) and IMAP (Internet Message Access Protocol) are two commonly used email protocols that enable users to access and manage their email messages. When setting up a new business website, understanding the architecture and implications of using POP and IMAP is important for managing email communication effectively.

POP (Post Office Protocol) Architecture​

  • Architecture: POP is a simple and widely supported protocol used for retrieving email from a mail server to a local email client. When an email client connects to the mail server using POP, it downloads the emails to the local device and typically removes them from the server, although some configurations allow for leaving a copy on the server.
  • Implications for Business Website: If your business website uses POP for email, it means that emails are typically stored on the local device, which can lead to issues if the device is lost or if multiple devices need to access the same emails. It's important to consider backup and synchronization strategies to ensure email accessibility and data security.

IMAP (Internet Message Access Protocol) Architecture​

  • Architecture: IMAP is a more advanced protocol that allows users to access and manage their email messages directly on the mail server. It enables synchronization between multiple devices, as the emails remain stored on the server and changes made on one device are reflected across all devices accessing the same account.
  • Implications for Business Website: Using IMAP for email on a business website allows for seamless access to emails across multiple devices and provides a centralized storage solution on the server. This can be beneficial for team collaboration and ensures that emails are accessible even if a local device is lost or damaged.

Considerations for Business Website Email Setup​

When setting up a new business website, it's important to consider the following factors related to email architecture:

  • Accessibility: Determine how you want your team to access and manage emails. If multiple devices and team members need access to the same emails, IMAP may be a more suitable choice.
  • Data Security: Consider backup and security measures for email data. With POP, ensuring data backup and synchronization becomes crucial, while IMAP provides a more centralized and server-based approach to data storage.
  • Collaboration: Evaluate the need for collaborative email management. IMAP's synchronization capabilities make it well-suited for team collaboration and centralized email access.

In conclusion, when setting up a new business website, understanding the differences between POP and IMAP architecture is essential for making informed decisions about email management. The choice between POP and IMAP will depend on factors such as accessibility, data security, and collaboration needs for the business.

Outlook​

Outlook doesn’t acknowledge <div>s or their padding attributes

<!--{/* outlook-mso specific styles*/}-->
<!--[if mso]>
    <style type="text/css">
    body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
    </style>
<![endif]-->
    <!--{/* outlook scaled image solution */}-->
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
<![endif]-->

File Template​

  • .eml, .msg, and .oft files in Outlook

OFT files, also known as Outlook Template files, are used in sales as a way to create standardized email templates for use in Microsoft Outlook. These templates can be created and saved in Outlook for easy access and reuse when composing emails.

Sales professionals often use OFT files to streamline their communication process and ensure consistency in their messaging. By creating email templates, salespeople can save time by avoiding repetitive typing and ensure that important information is consistently included in their emails.

OFT files can contain pre-formatted text, images, attachments, and other elements commonly used in sales communication. They can be customized to include placeholders for variables such as recipient names, company names, or specific product details. This allows salespeople to quickly personalize the templates for each recipient without having to rewrite the entire email.

Using OFT files can improve efficiency and productivity in sales by reducing the time spent on repetitive tasks, ensuring consistent messaging, and providing a professional and polished look to email communications.

To use an OFT file in Outlook, you can simply open a new email, go to the "Options" tab, click on "Use Template," and select the desired OFT file from your computer or Outlook's template library. This will populate the email with the content and formatting saved in the template, allowing you to make any necessary modifications before sending the email.

resizing small text​

/* Stop Outlook resizing small text. */
* {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
}

Email Platforms​

Email Service Providers (ESPs) - ESPs such as Mailchimp, Constant Contact, and Campaign Monitor provide email marketing platforms that allow you to create, send, and track email campaigns. These platforms often have built-in email editors and templates, as well as analytics and A/B testing tools.

HTML editors - Many email developers prefer to code their emails using HTML and CSS, which gives them more control over the design and layout of the email. Popular HTML editors for email development include Sublime Text, Brackets, and Atom.

Litmus - Litmus is an email testing and analytics platform that allows you to preview your emails across different email clients and devices, and provides insights into email performance.

Email on Acid - Similar to Litmus, Email on Acid is an email testing platform that provides email previews across different email clients and devices, as well as spam testing and accessibility testing.

Campaign Precheck - Campaign Precheck by Salesforce is a comprehensive email testing tool that includes email rendering previews, spam testing, link validation, and accessibility checks.

Litmus Builder - Litmus Builder is an email design and development platform that allows you to create responsive email templates using drag-and-drop components, and export them as HTML code.

Email marketing in the United States is subject to several legal requirements. Here are some of the key legal requirements that email marketers must comply with:

Permission: You must obtain permission from recipients before sending them marketing emails. This can be done through opt-in forms, where users voluntarily provide their email addresses and agree to receive marketing emails from you. You should also provide an easy way for recipients to unsubscribe from your emails.

CAN-SPAM Act: The CAN-SPAM Act is a federal law that sets the rules for commercial email, establishes requirements for commercial messages, and gives recipients the right to have you stop emailing them. The law requires that all commercial emails include a clear and conspicuous unsubscribe link, a valid physical postal address, and accurate subject lines and header information.

GDPR: The General Data Protection Regulation (GDPR) is a European Union regulation that also applies to US companies that collect and process personal data of EU residents. It requires companies to obtain explicit consent from individuals before collecting and processing their personal data, and to provide individuals with the right to access and delete their personal data.

California Consumer Privacy Act (CCPA): The CCPA is a California state law that gives California residents the right to know what personal data is being collected about them, the right to request that their personal data be deleted, and the right to opt-out of the sale of their personal data. The law applies to businesses that collect personal information from California residents, and have annual grossrevenues over a certain threshold.

FTC Act: The Federal Trade Commission Act prohibits unfair or deceptive acts or practices in commerce, which includes email marketing. This means you must not use false or misleading information in your emails, and must not engage in deceptive practices to obtain email addresses or other personal information.

Industry-specific regulations: Depending on the industry you operate in, there may be additional regulations that apply to your email marketing activities. For example, the healthcare industry is subject to the Health Insurance Portability and Accountability Act (HIPAA), which regulates the use and disclosure of protected health information.

It's important to note that these legal requirements apply not only to commercial emails, but also to any marketing messages sent through text messages or social media. Failure to comply with these requirements can result in penalties, fines, and damage to your brand reputation. Therefore, it's essential to ensure that your email marketing practices are in compliance with these legal requirements.

Multi Touch Triggered Email Campaigns​

https://www.bluecore.com/blog/best-practices-multi-touch-triggered-email-campaigns/

Responsive Table​

https://css-tricks.com/complete-guide-table-element/

media query force to display block

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

 table { 
    width: 100%; 
 }

 /* Hide table headers (but not display: none;, for accessibility) */
 thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
 }

 tr { border: 1px solid #ccc; }

 td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee; 

 }

 td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
  /* Label the data */
  content: attr(data-column);

  color: #000;
  font-weight: bold;
 }

}

  • role="presentation": defines the <table> as being presentational, rather than using data, preventing it from creating issues for subscribers using assistive technologies, such as screen readers.

  • cellpadding="0": removes the default cellpadding, preventing gaps appearing around the content of each table cell.

  • cellspacing="0": removes the default cellspacing, preventing gaps appearing between each each table cell.

  • border="0": removes the default borders, preventing borders from appearing in the table.

HTML valign attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements.

  • top
  • middle
  • bottom
  • baseline

Using the scope attribute to associate header cells and data cells in data tables​

scope=col
scope=row

Table Row Element​

td{
   &:before {
      content: attr(data-label);
      position: absolute;

td element​

data-column attribute

td:before { content: attr(headers); }

When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.

<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="80"></td>
  <td width="280"></td>
 </tr>
</table>

Never assume that if you don’t specify a cell width the email client will figure it out. It won’t. Also avoid using percentage based widths. Clients like Outlook 2007 don’t respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but never combine the two.

When to use cellpadding in emails​

I often use cellpadding in my email code. I tend to use it in places I know I will not need to change the cellpadding for different email clients or devices. For example, adding a guttering around an entire email container.

Templates​

Getting started​

Google Analytics Pixel Tracking​

Google Analytics (GA) can help you get detailed email insights and boost your marketing efforts. You can use pixels to track open rates and utilize UTM to measure post-click performance. https://htmlemail.io/blog/google-analytics-email-tracking

Email marketers use various software implementations to track analytics, including email opens. These implementations typically involve the use of tracking pixels or unique identifiers embedded within the email content. When you receive an email from a company that includes these tracking elements, certain actions can be monitored and recorded by the marketer.

Here's a general overview of the software implementations commonly used:

  1. Tracking Pixels: A tracking pixel is a small, invisible image embedded within an email. When the email is opened, the email client or webmail service requests the pixel from the marketer's server. This request is logged by the server, indicating that the email has been opened. The pixel can also provide additional information such as the recipient's IP address, location, and device type.

  2. Unique Identifiers: Email marketers may include unique identifiers in the hyperlinks or URLs within their emails. These identifiers are specific to each recipient and can help track individual engagement. When you click on a link in the email, the click is recorded, and the marketer can associate it with your email address.

  3. Redirects and URL Shorteners: Marketers sometimes use URL redirects or shorteners when including links in their emails. These services act as intermediaries between the link in the email and the final destination. When you click on the link, the redirect service records the click and then redirects you to the intended webpage. This allows the marketer to track the click and gather analytics.

Regarding your observation about being unsubscribed if you never open emails, it's likely that companies use email engagement metrics as a basis for managing their email lists. If a subscriber consistently fails to open emails, companies may assume that the recipient is no longer interested in their content or that the email address is no longer active. As a result, they may choose to unsubscribe such recipients to maintain a more engaged and responsive subscriber base.

It's important to note that tracking practices can vary between companies and email marketing platforms. Some marketers may choose not to use tracking mechanisms, while others may employ more advanced techniques. Additionally, the use of these tracking methods is subject to privacy regulations, and marketers are required to comply with applicable laws and regulations, such as obtaining proper consent from recipients.

GetResponse​

GetResponse is an all-in-one email marketing platform that provides a range of tools and features for email developers. Here are some of the key features of GetResponse for email developers:

Email editor: GetResponse provides a drag-and-drop email editor that allows you to create professional-looking email templates without any coding skills. The editor provides a library of pre-designed templates, as well as a range of customization options, such as adding images, videos, and buttons.

HTML editor: For developers who prefer to code their emails, GetResponse provides an HTML editor that allows you to create custom email templates using HTML and CSS.

Email testing: GetResponse allows you to preview your emails across different email clients and devices, and provides spam testing to ensure that your emails will reach the inbox.

Responsive design: All email templates in GetResponse are designed to be mobile-responsive, ensuring that your emails will look great on any device.

Automation workflows: GetResponse allows you to create automation workflows that trigger emails based on user behavior, such as sending a welcome email when a new subscriber joins your list, or sending a follow-up email after a purchase.

A/B testing: GetResponse provides A/B testing features that allow you to test different elements of your email campaigns, such as subject lines, send times, and content, to optimize your results.

Integrations: GetResponse integrates with a range of third-party tools and services, such as Salesforce, Shopify, and WordPress, to provide additional functionality and features. You can use these integrations to automate workflows, segment your audience, and personalize your emails.

Analytics: GetResponse provides detailed analytics that allow you to track the performance of your email campaigns, including open rates, click-through rates, and conversion rates. You can use this information to optimize your campaigns and improve your results.

Landing pages: In addition to email marketing, GetResponse also provides landing page creation tools that allow you to create custom landing pages to promote your products or services.

Overall, GetResponse provides a comprehensive set of tools and features for email developers, from easy-to-use email templates to more advanced HTML editing options. Its automation workflows, A/B testing, and integrations with third-party tools make it a powerful platform for email marketing campaigns, while its analytics and testing features allow you to optimize your results.

Email Client Caveats​

why inline CSS?​

  • head and style tags are stripped out of certain email clients

https://howtotarget.email/

centering the Email Layout​

to do this we’ll use the <center> HTML tag which isn’t valid anymore in the latest version of HTML(5) but still serves it’s function in HTML email rendering engines.

<center style="table-layout:fixed;">

Inside of the <center> tag you’ll notice the style declaration “table-layout:fixed;” which gives us control over the width of the main table we’ll add inside of the center tag.

doctype​

XHTML 1.0 Transitional doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

HTML5 is the most recent and was designed to hold multiple code forms, but as it is still evolving, the support for HTML5 is limited across email clients. For that reason, you should avoid using HTML5.

Scalero recommends XHTML 1.0 Transitional and HTML 4.01 Transitional doctype declarations:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

Tools​

https://h-supertools.com/

Blogs​

https://mailbakery.com/blog/ https://www.dyspatch.io/resources/

Image Best Practices​

https://www.campaignmonitor.com/resources/guides/email-width-and-sizes/

Testing Tools​

https://www.emailvendorselection.com/best-email-testing-tools-free/ https://www.htmlemailcheck.com/ https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/ https://www.accessible-email.org/ https://chamaileon.io/resources/email-accessibility-designing-and-coding-accessible-emails/

File Size​

Sizespace
small10 kb to 25kb
medium25 kb to 100 kb
large500 kb to 1 mb
huge1 - 5 MB

Best Practices​

One of the golden rules of email design is ‘where possible, use HTML attributes instead of CSS’. Whereas CSS support can be fairly flaky across the gamut of email clients, attributes tend to be rock solid. For example, attributes like align=”left” and cellpadding=“10” are far more reliable than their approximate CSS equivalents, float: left; and padding: 10px;. It’s exactly these attributes we’ll be using when building our two-to-one column layout.

  • Multiple Email Clients, No Universal Rules

1. Deliverability​

If your email doesn’t get delivered, it doesn’t get opened. If it doesn’t get opened… well, you know the rest.

Making sure your emails get to their final destination is the first essential step in email marketing.

There are many variables that affect deliverability of your emails, including ISPs, MTAs, throttling, bounces, bulking, spam issues, and the quality of your content.

Here are a few simple rules that will help you achieve 99.5%+ deliverability:

Avoid SPAM complaints Don’t spam Use double opt-in Set expectations upfront, so subscribers know how often they’re going to hear from you The new “hot” SPAM law is the EU’s General Data Protection Regulation (GDPR). The law is designed to safeguard data privacy for EU citizens, and applies to any business with EU users or customers, regardless of whether the business is based in the European Union or not. The penalty for non-compliance is “up to €20 million, or 4% of the worldwide annual revenue of the prior financial year, whichever is higher.”

If you do email marketing, lead acquisition, or referrals, you should become very familiar with the GDPR.

Avoid hard bounces Use double opt-in If you don’t use double opt-in, verify validity of collected email addresses in some other way: If you’re collecting emails in exchange for a freebie, send that freebie to their inbox vs. putting it on a thank-you page. If you’re collecting emails in a giveaway, send your first email to participants from a different account, so the wave of unsubscribes and bounces doesn’t affect sender reputation of your main account. Purge your list Every 6 months or so, delete all your inactive subscribers. If they haven’t opened any of your last 20-50 campaigns, they probably won’t open the next 100. Such subscribers and you don’t need each other, so let them go.

Know how the Gmail Promotions tab works The Gmail Promotions tab adds a new layer to email deliverability. If your email is delivered but ends up in the Promotions folder, the subscriber might only get to it much later, if ever.

The problem is that Gmail got pretty good at distinguishing personal emails from everything else, so whether you need to stress over the Promotions tab is debatable. However, it’s still good to know what can cause your emails to land there: bulky images, fancy styling, excessive links, different reply-to address and email header markup.

2. List building​

Growing an email list is one of the most rewarding efforts you can take in your business. Good marketers should have a grip of different subscriber acquisition mechanisms available to them, such as:

Content marketing (i.e. blogging coupled with content upgrades) Guest blogging Lead magnets (steal a few ideas from the bonus at the end of this post) Webinars Giveaways Opt-in tools like popups, slide-in forms, and top of the page ribbons Social media (see section below)

3. Social media integration​

Social media is not only good for building your brand image and gaining exposure; it can also help you add subscribers to your email list.

The good news is that almost any social media channel can be leveraged to grow your email list.

Here are a few ideas:

Create a Twitter website card showcasing an irresistible lead magnet, and pin it to the top of your Twitter profile (check out mine here) Have a sign-up button + sidebar apps on your Facebook page Ask Instagram followers to leave their email address in the comments to receive something juicy (and relevant to your brand) — this works surprisingly well Talk about your email list and the benefits of joining it in your Instagram stories Give a sneak previews of (exciting) emails in Instagram stories Drive traffic to the opt-in freebies in your blog through Pinterest Collect leads in slide presentations on Slideshare Essentially, plug your email list sign-up in all of the storytelling you’re already doing on social media.

4. Subscriber engagement​

Everybody wants a big list, but few realize that it’s not a panacea for your business.

Even small lists can work magic if they are healthy and engaged. This is because engaged subscribers open more, click more, and buy more. Your top 1,000 customers can generate $8.6 million in revenue (if you’re Ramit Sethi).

The best part is that once you learn how to engage your email subscribers you can apply that to a list of any size to optimize its effectiveness.

The top rule of email list nurturing is “give more than you ask for”.

Especially in the first 2-4 weeks after someone subscribes to your list, make sure you surpass all expectations of being helpful and overdeliver on a regular basis.

Once you establish trust with your new subscribers, continue your communication keeping in mind why people join and stay on email lists: they love the feeling of being on the “inside” of a private club.

Cultivate that feeling by:

making them the first to hear new announcements; sending them exclusive content that’s not available on your blog; offering special deals to your subscribers. Here are a few more tips on keeping your subscribers engaged:

Segment your list and send more relevant info to segments Don’t lose your voice in automated emails Find the right “send” frequency: be on their radar without being annoying Make your emails feel like a continuous conversation (vs. a series of one-off emails)

5. Open rate​

If you’ve ever sent an email campaign to a list of people, you might have engaged in the “open rate watching” behavior that looks at least somewhat like this:

open rate for email marketing manager

Just 2 minutes after hitting “go” on my email campaign, I start refreshing my browser to watch the open rate stats roll in…

I know I’m not alone. We’ve all been there, right?

Email open rate is not just the subject line (although it’s important). It depends on a whole host of reasons, including:

“From” name Preview text Send time Your list quality Your content email open rate anatomy for email marketing manager

The more people open an email, the more people click, the more people buy, so make sure you always optimize your emails for a higher open rate.

6. Click rate​

Most marketing emails get sent to trigger some action, whether you want people to buy, share, or engage with your stuff.

Any action in an email is measured by the click on your CTA (call to action). That’s why click rate (along with the conversion rate) is the ultimate metric in email marketing.

The “big secret” of achieving a high click rate is making a truly valuable offer. If your end product is not good, no tactic will save you.

However, if your fundamental offer IS good, then there are a few tips for optimizing your click rate:

Make your CTA crystal clear Readers must immediately recognize the call to action even if they simply skim through the email. The easiest way to make your CTA stand out is to use buttons.

PRO-tip: use HTML-based buttons for best results. They’ll get displayed even if subscriber’s email client blocks images.

Use one CTA per email Too much choice can be demotivating. The fewer options your subscribers have, the more they are likely to act. Using just one call to action eliminates the paradox of choice.

There are lots of resources to back this. Whirlpool got a 42% click-through-rate increase by dropping the number of CTAs in its emails from 4 to 1. HelpScout increased click-through rate by 17% by keeping the number of CTAs in its emails to one.

Evoke powerful emotions in your copy Marketing is based on psychological principles, and the most effective campaigns take advantage of such powerful emotions as:

Scarcity Curiosity Social proof Authority

7. Analytics and data​

Any email marketing manager has to feel comfortable in the analytics dashboard of their ESP (email service provider).

Email marketing stats like open and click rates, bounces, unsubscribes, list growth and conversion rate can give powerful insights at what’s working (and what’s not) in your email marketing strategy.

Looking at the numbers and seeing trends, and with that, opportunities for experiments (A/B tests) is a skill that distinguishes a successful email marketing manager from someone with stagnant results.

The first step to a more thoughtful email marketing strategy is determining exactly what you want to achieve — your number one goal. Based on that goal, decide what your primary and secondary metrics should be and track them meticulously.

8. Automation​

Email marketing automation is growing fast and is no longer a novelty or an option. It is a must for any email marketing strategy.

And for good reason. Automated emails are timely, personalized and hyper-relevant to the reader. As a result, they drive open and click rates and positively affect subscriber engagement. The bottom line of all that — more revenue for your business.

Most ESPs these days have automation features, but you can also get sophisticated software to create advanced workflows. No matter what tools you’re using, you should be able to set up simple email workflows that get triggered in a number of different ways:

when a subscriber gets added to a list, clicks a link in an email, views a page on your blog, clicks on one of your ads, becomes a qualified lead, downloads one of your lead magnets (freebies), any combination of these and more.

9. Segmentation​

Segmentation is a powerful mechanism that lets you subdivide your list based on a certain set of characteristics. You can then send highly targeted emails to subscriber groups within your list.

According to eMarketer,

39% of email marketers that practice list segmentation see better open rates; 28% see lower opt-out and unsubscribe rates; 24% see better email deliverability and greater revenue. There are a number of ways you can segment your list simply based on campaign activity. Look at the following groups and see how you can serve them differently:

subscribers who open most of your emails but don’t click subscribers who click but don’t convert (send them a new campaign with more reasons to purchase your product) subscribers who didn’t open the last email (if it was an important email, re-send it with a new subject line after a few days) subscribers who have consistently replied to your emails (they are your biggest fans, so treat them accordingly) Skillful email marketers should also be able to segment based on past purchases, interest level, demographics, and much more.

I have included 7 smart ideas for list segmentation in the bonus at the end of this post.

10. Attribution​

Attribution is one of the most advanced topics in digital marketing.

A good email marketing manager wants to know the exact payoff of each tactic they use. When you know how your marketing efforts covert, you are better informed to develop further strategy and allocate budget.

Although email marketing is highly trackable, email attribution is not a straight line. For many companies, a linear A-to-B-to-C email interaction is increasingly rare.

Today, consumer behavior looks more like this:

Someone hears an ad in a podcast and then googles the company. They are not ready to buy yet, but they sign up for the newsletter. At some point in the future they receive an email from the company and forward it to a colleague who is interested in the product. The colleague is then walking down the street and sees the product in a window. She remembers the email and goes into the shop to purchase.

It’s hard to attribute this conversion to any particular event, and the truth is that this might only get messier in the future. However, email marketers need to keep attribution in mind to continue making the right decisions when they analyze reports and develop strategies.

GMAIL​

  1. emails for non-Gmail accounts don’t support <style> tags, so media queries, which we can usually rely on to optimise our emails for small screens, aren’t supported. This tutorial will show you how to make emails that are responsive, even in this scenario.

  2. Gmail doesn’t accept the display:none style and will therefore display the hidden tables we want.. well hidden!

Adding an !important on the end of display:none will work in Gmail but then will override the CSS we have implemented for mobile clients, causing the tables to not appear.

the best way to solve this issue is to instead go down the 0px font-size and 0% width. This will cause the webmail clients to display the HTML, but due to both properties being 0, will not visually show it. The tables can then be activated by CSS for mobile clients.

iOS Devices Head Meta Tags​

👉 The head​

It’s time to create the element. Head elements contain the information that your subscribers can't see but is necessary for machine processing by email clients. The information is put under meta tags within a tag.

Meta tags The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

There are many meta tags you can add in HTML, but the following are the most useful in maintaining control over how basic aspects of your email display:

<meta name="format-detection" content="date=no">
<meta name="format-detection" content="telephone=no">

These meta tags will tell iOS devices not to turn addresses or phone numbers in their emails into links. You might want these elements to display as clickable links, but Apple's default blue may not go with your email color scheme.

So, these meta tags will prevent such happenings and allow you to modify your links as per your preference.

<meta content="width=device-width, initial-scale=1" name="viewport" />

This tag guides email clients on how to scale the email, precisely its width. This will help maintain the position of email content to avoid any blank space next to images or text that doesn't wrap properly.

After meta tags, add a CSS style tag to indicate that the content in your email is, in fact, CSS:

<style type="text/CSS">
  • SMTP, SMS, QR Code, AR QR code
  • SentStatus
  • Email
    • EmailAddress
    • Body
    • From
    • To
    • Subject
    • CC
    • EmailRecipient
    • Timestamp
    • priority
  • ErrorLog
  • Embed Images
  • responsive
  • serialize/deserialize encoding/decoding
  • network credentials
  • ssl
  • c# .net mailmessage, mailclient, smtpclient

MJML​

MJML (Mailjet Markup Language) is an open-source markup language specifically designed for creating responsive email templates. It aims to simplify the process of building responsive email designs that render consistently across different email clients and devices.

MJML provides a set of predefined components and a structured syntax that allows developers and designers to create email templates using a combination of HTML-like tags and custom MJML tags. These tags represent various email elements such as headers, footers, body content, buttons, images, and more. The components are responsive by default, meaning they automatically adapt to different screen sizes and devices.

One of the key benefits of using MJML is its ability to generate HTML email code that is compatible with a wide range of email clients and platforms. It handles the complexities and inconsistencies of email rendering engines, ensuring that the email templates look good and function properly across different devices, email clients, and operating systems.

MJML offers a command-line interface (CLI) and a live preview feature, making it easy to develop and test email templates. It also provides integration with various email service providers and frameworks, allowing seamless integration with your existing email workflow.

Overall, MJML simplifies the process of creating responsive and visually appealing email templates, reducing the time and effort required to build and maintain email campaigns.