How to build and send a HTML Email 2019

Email development and design is not easy, as email client suppliers have not been nearly as progressive as web browser suppliers are in implementing new standards. This article gives some insight into building and sending email.

If you are into web development, it’s likely that coding emails will be a job that you get asked to do at some stage in your career. Coding **emails **in HTML is however old-fashioned and harks back to the days when developers called themselves webmasters while using tables, WYSIWYG editors and FrontPage to mark up a website.

Email design has not changed much, but has in fact gotten worse. As more mobile devices and email clients are introduced, there are more limitations to deal with when having to build HTML emails.

Sending Emails

Developers in charge of email campaigns, or all the emails a company sends, will have to know how emails work, legal requirements and how emails are actually delivered. A company typically sends a number of different email types

Marketing Emails

There are many ESPs (email service providers) specializing in promotional and marketing emails, including Campaign Monitor, SendPulse email, Emma, Constant Contact and MailChimp. They offer complete solutions to manage subscribers, work with templates, deliver bulk email campaigns and do reporting.

Transactional Emails

Transactional emails include alerts, receipts, password resets, welcome emails, etc. They are normally implemented by using APIs and development tools like Postmark, SendPulse Transaction, SendGrid and Mailgun. Although the tools are less based on WYSIWYG and CMS, and more API-focused, combined with services like Sendwithus, they could be extremely powerful.

Rather than using a service, you may want to implement your own email server by using a product such as Postfix. The disadvantage of doing this is that you’ll have to configure and set it up, and have to understand the technical side of not only sending emails, but also implementing unsubscribing and tracking, and making sure emails are actually delivered.

Life-Cycle Emails

Behavior-based and life-cycle email services assist with things like engagement and onboarding. Many ESPs specializing in marketing also provide this service, with services like Intercom, SendPulse Automation, Drip, Customer.io, ConvertKit and Vero falling into this category.

Best Practices for Email Lists

Never, ever buy an email list. Although there are a few legitimate services available, it’s better to steer clear from buying any list.

People who buy email lists typically experience a huge number of bounces, gain a bad reputation for their IP (Internet Protocol) address, have their emails blocked by ISPs (Internet service providers) or the email gets sent to spam. According to SenderBase, a full 85% of emails globally are considered spam — don’t join that club.

Double Opt-Ins

Subscribers that have to verify the email address they use may have an extra step in the process, but it does make sense and prevents other people from abusing any email address by subscribing to a list without having the owner’s permission. It also assists with keeping subscription lists clean and is the right way to validate email addresses.

CAN SPAM

These are legal requirements that need to be adhered to when sending emails.

• Don’t use subject lines that are deceptive.
• Don’t use misleading or false headers.
• Tell recipients your location.
• Identify messages as ads.
• Promptly honor an opt-out request.
• Let recipients know how to opt out.
• Monitor what others are doing on your behalf.

A good list of legal email requirements for different countries is provided by MailChimp.

Performance Measurement and Analytics

Always measure everything you can to determine if your emails are getting better. The figures will differ greatly depending on your industry, what you do, the context and the type of emails being sent. Generally however:

• A good open rate is 20%
• A poor bounce rate is 5%
• A good click through rate is between 3 and 7%
• A poor unsubscribe rate is 1%
• A poor spam rate is 0.01%

Click through and open rates are often seen as vanity metrics, i.e. they don’t mean anything. What you really need to track is conversion and the end goal. Airbnb tracks email quality scores, a good engagement quality indicator.

The URL builder by Google can assist with tracking if you use Google Analytics.

Reputation and Sending Score

All email campaigns have a score and reputation. This has an effect on how mailbox providers and ISPs handle your email, whether they reject or accept it and if they’ll send it straight to spam or to the recipient’s inbox.

Some factors that influence this are:

• your IP’s reputation (SenderScore)
• domain name signature (SPF and DKIM)
• complaints and bounce rates.

Bulk Emails

When a huge number of emails are sent (think millions), they are not all sent at the same time as this is limited by the speed of IP addresses and servers. Remember that recipients won’t receive emails at the exact same time.

It’s a good idea to use a few IPs to handle the load when sending millions of emails at the same time.

Email Client

Litmus uses its own internal statistics to track the market share of email clients. Although this is likely not the same for a specific customer base, it is however a good indicator.

Here are recent statistics:

• Apple Mail: 7%
• Android: 8%
• iPad: 12%
• Gmail: 19%
• iPhone: 33%

Not every email can be tracked as tracking of emails is done via pixel-tracking. Only email clients with enabled images will send reports.

HTML Templates

Building email templates with **HTML **is a schlep. This has resulted in many poorly designed emails being sent out. These are themed, clunky, pointless, verbose and distracting. Building your own can however be rewarding and fun, providing you want a unique look and feel, and enjoy a challenge. The alternatively is to use good email templates from:

• Really Simple Responsive HTML Email Template
• Litmus Templates
• Foundation for Emails 2
• HTML Email Templates
• Postcards Email Builder

HTML Email Templates

You’ll have to decide whether or not you want to code your own HTML templates. This is however more tricky than simply coding a web page.

Client-Rendering Engines

Emails are rendered for users in many different ways as there are numerous devices and email clients.

Different engines are used to render HTML emails:

• Internet Explorer is used by **Outlook **2000, 2002 and 2003.
• WebKit is used by Apple Mail, Outlook for Mac, Android Mail and iOS Mail.
• Web clients use the engine of their browser.
• MS Word is used by Outlook 2007, 2010 and 2013.

Looking at your statistics will help you determine what you need to design for.

Media Queries and Gmail Support for Inline CSS

Google supports media queries and **embedded CSS **in Gmail. This is massive for the email development industry.

Gmail also supports numerous CSS properties that makes template development for Gmail much simpler.

Using HTML Tables In Layouts

Different clients, specifically Outlook, have box-model and positioning issues with divs. Although divs can be used, it’s safer to use** tables**. This means:

• <table> instead of <div>,
• padding instead of margin,
• #FFFFFF instead of #FFF,
• HTML4 instead of HTML5,
• CSS2 instead of CSS3,
• HTML attributes instead of CSS,
• background-color instead of background,
• inline CSS instead of style sheets or <style> blocks.

When you use tables, remember to use border="0" cellpadding="0" cellspacing="0". Premailer has special CSS declarations to apply these HTML attributes.

Inline CSS

Some clients strip CSS that is not inlined. There are a couple of options:

• use a web-based CSS inliner
• write CSS inline as you go
• let your ESP do the inlining (if supported)
• use a programmatic CSS inliner

Writing inline CSS as you go is not maintainable or scalable, but it is often used to retain 100% control. When writing manual CSS inline, make use of a templating language with helpers and partials, and/or snippets.

Foundation for Email’s Responsive Email Inliner and HTML Email’s Responsive CSS Inliner are both good web-based inliners, Node.js module Juice is a good programmatic inliner, while Roadie and the Premailer gem are good Ruby alternatives.

Buttons

Trying to create a perfect button across clients is difficult. Always use table cells for almost everything, including buttons.

<a href="#" class="btn btn-primary">Click Here</a>

Instead, write it like this:

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
 <tr>
 <td align="center">
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td> <a href="" target="_blank">Take action now</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

Then, once your CSS is inlined, it will look like this:

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
 <tr>
 <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
 <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
 <tr>
 <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

This is one of many ways to implement a button in email, although it might not always look exactly the same in all clients. It is simpler and does not involve using VML or image assets.

VML (Vector Markup Language) is supported by older Outlook versions. Microsoft states that VML is obsolete as of IE (Internet Explorer) 10. This means it is no longer supported in new IE versions. As long as Outlook 2007, 2010 and 2013 are still being used, it will be used, mainly for background images.

Typography

Using standard system fonts is normally the easiest. These include Arial, Helvetica, etc., while Web fonts such as Google Fonts can still be used behind a WebKit conditional media query to prevent Outlook from messing them up.

For Outlook:

<style>
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Type styles for all clients */
h1 {
 font-family: Helvetica, Arial, serif;
}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 h1 {
 font-family: Pacifico, Helvetica, Arial, serif !important;
 }
}
</style>

Font families, font sizes and colors need to be used for every to prevent the client overwriting chosen type styles.

Conditionals

Specific CSS styles can be applied and content and elements shown or hidden for various Outlook versions. Specific version numbers of Outlook can be targeted, while WebKit-based clients can be targeted with a media query.

<!--[if mso]>
Only Microsoft Word-based versions of Outlook will see this.
<![endif]-->

Several clients show images by default, while others don’t. Remember this when adding images to content. This also has an influence on tracking metrics, as images are typically used to track opens. Gmail and Apple Mail don’t block image-rendering by default, while Outlook does.

<!--[if (IE)]>
Only IE-based versions of Outlook will see this.
<![endif]-->

It is always good to add good alt text to images. The text should tell users what the image is about or simply describe what it is, e.g. a logo. For clients that turn off images, you could even get creative with alt text. Also remember to include basic resets for images.

Most clients support animated **GIFs, except **Outlook 2007 to 2013 which revert to the first frame.

Media assets should be compressed and uploaded to a CDN (content delivery network) like imgix, Cloudinary or Amazon Web Services. Most marketing ESPs offer this service.

SVGs (scalable vector graphics) have many advantages on the internet. Email support does however vary, and SVG need a few conditionals or fallback hacks. **SVG **in email is not recommended, but if you want to use them, CSS-Tricks has a good guide that will assist.

Supply larger images (1.5× to 3×) for Retina-ready images and resize them.

Remember to declare how wide an image should be using the width attribute for Outlook. Outlook might otherwise render the actual image width, which will break the email.

Videos in Emails

Outlook.com, Apple Mail and iOS, support videos. Media queries can be used to hide or show videos based on the type of client. More on email video support is available on email on Acid.

Email Forms

Support for form elements differs. Rather link to external forms if one is required. Campaign Monitor has some advice on forms.

Although not using forms is safer, Mixmax and Rebelmail have done exciting things with forms for e-commerce and surveys, with good fallback support.

Gmail Actions

There are various actions available for Gmail and adding code is easy. There are two options:

• microdata
• JSON-LD

Getting whitelisted takes more steps. Gmail actions can be tested with an address from @gmail.com.

Pre-header Text

Pre-header text is important, but often forgotten. Various clients show pre-header text under or next to the subject line, e.g. AOL, Gmail, iOS, Outlook 2013, and Apple Mail.

Clients take the first piece of text in the email’s body and display it there. Use this to add a hidden element to the content that appears first. This text could provide extra incentives for users to open the email.

Email Testing

Email are seldom sent successfully the first time. There is always something that does not work, a typo, rendering issues, or something that was not added.

Email can be tested in a number of ways:

• Send the email to yourself and check it on desktop, web and mobile clients.
• Automate tests.
• Check the layout renders.
• Proofread the content.
• Do extensive A/B testing.

HTML emails can be sent to yourself using PutsMail, while Thunderbird allows you to compose with an HTML editor.

MIME Multi-Part

Most emails being sent or received are Multipurpose Internet Mail Extensions (MIME) multi-part emails. The standard combines HTML and plain text, allowing the recipient to decide which one to use.

Always include both HTML and plain-text versions, even if you think everyone uses HTML.

Various clients render plain-text emails as HTML, e.g. Gmail adds default styles and converts URLs into links. Most ESPs will construct the MIME and some will create a plain-text version, based on the HTML.

Accessibility

With email, accessibility is unfortunately often ignored.

The following is recommended:

• Provide alt text with meaningful descriptions.
• Add role="presentation" to each table so that it’s clear the table is being used for layout.
• Use semantic HTML tags, such as <p> and <h1>, where applicable.
• If you don’t need or want alt text, then use alt="" so that screen readers know it is meant to be blank.
• Use the role attribute for elements such as headers and footers (for example, role="header").

Responsive Email Designs

• Email opens on mobile are at 50% and increasing.
• Email Client Market Share puts Android at 10%, iPad at 11% and iPhone at 33%.
• MailChimp lists unique clicks from mobile users rising from 2.7 to 3.1%, an increase of nearly 15%.

We can use **media queries, grid-based layouts and fluid design in **emails, but not every client support these.

Gmail supports media queries, but various mobile clients don’t, including Gmail for Android, Windows Phone 8 and Yahoo.

Various techniques can be used in emails to overcome the lack of support for media queries. Some terms used are spongy, hybrid, fluid, responsive, and adaptive.

Fluid

The easiest option is to make your emails fluid while sticking to one column. This means that the content area shrinks with the viewport.

Adaptive and Responsive

Alternate styles for various viewport sizes can be provided by using breakpoints and media queries. Elements can also be hidden or shown.

This gets complex when columns and a grid are introduced. It is possible to have a two-column layout switching to a stacked one-column layout below specific viewport widths.

As media queries are not always supported, this is however not always reliable.

Spongy and Hybrid

This technique combines fluid, responsive and a few hacks to support Outlook. This also allows the columns stack without having to use media queries.

<!--[if (gte mso 9)|(IE)]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
 <tr>
 <td align="left" valign="top" width="50%">
 <![endif]-->
 <div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
 <!--[if (gte mso 9)|(IE)]>
 </td>
 <td align="left" valign="top" width="50%">
 <![endif]-->
 <div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
 <!--[if (gte mso 9)|(IE)]>
 </td>
 </tr>
</table>
<![endif]-->
@media only screen and (max-width: 620px) {
 .span-3 {
 max-width: none !important;
 width: 100% !important;
 }
 .span-3 > table {
 max-width: 100% !important;
 width: 100% !important;
 }
}

Responsive Images

Retina images should be set at 1.5× to 3×, and the image dimensions should be set inline.

max-width: 100%; can’t be used as it is ignored by some clients.

Workflow Automation

Compiling bulletproof emails is complex as there are many steps, and many things can go wrong.

As with any monotonous tasks with many steps, automating what is possible will allow you to build the system once and make future work easier.

What does the Email Future hold?

The future looks much brighter with developments such as AOL’s Alto now supporting responsive email, Microsoft partnering with Litmus to improve emails and Google providing support for media queries.

An increasing number of developers and companies experiment with the possibilities of email technology: audio, shopping cart emails and CSS animation. In the future, more kinetic and interactive emails will emerge.

Summary

Email client vendors aren’t as progressive as web browser vendors when it comes to adopting new standards, while companies and users don’t adopt new email clients as they do with web browsers. If the increasing number of mobiles is added to the mix, we’re left in a state of having to support an intricate mix of versions and clients.

As this article is simply a high-level overview, you could investigate each of these points in detail. I hope it has given you a good foundation for building and sending emails.

#web-development #html #css

What is GEEK

Buddha Community

Send Email In Laravel

Hello Guys,

Today I will give you demo how to send email in laravel, in this post we will show how to send email using SMTP in laravel, email is very basic and most important feature in web development field and it is necessary for all client.

So, in this tutorial I will give you information about send mail in laravel. So, follow below steps.

Send Email In Laravel

https://websolutionstuff.com/post/send-email-in-laravel

#laravel #php #send email in laravel #email #how to send email in laravel #laravel send mail

Know Everything About HTML With HTML Experts

HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.

The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.

Basics of HTML are-

The simple fundamental components oh HTML is

1. Head- the setup information for the program and web pages is carried in the head
2. Body- the actual substance that is to be shown on the web page is carried in the body
3. HTML- information starts and ends with and labels.
4. Comments- come up in between

Html versions timeline

1. HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
2. HTML 2- November, 1995
3. HTML 3- January, 1997
4. HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
5. HTML 5- October, 2014; November, 2016; December, 2017

HTML draft version timelines are

1. October 1991
2. June 1992
3. November 1992
4. June 1993
5. November 1993
6. November 1994
7. April 1995
8. January 2008
9. HTML 5-
   2011, last call
   2012 candidate recommendation
   2014 proposed recommendation and recommendation

HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.

Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.

#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

HTML - A Complete Guide to Master the Top Programming Language

In this era of technology, anything digital holds a prime significance in our day-to-day life. Hence, developers have submerged themselves to create a major impact using programming languages.According to Statista, HTML/CSS holds the second position (the first being Javascript), in the list of most widely-used programming languages globally (2020).Interested to learn this language? Then head on to this tutorial and get to know all about HTML! Plus we have added numerous examples such that you can learn better! So happy learning!
html for beginners

#html #html-for-beginners #html-tutorials #introduction-to-html #learn-html #tutorials-html

Node js Send Email with Attachment using Nodemailer

In this node js send email with attachment using nodemailer. In this tutorial, you will learn how you can send the email using the Gmail SMTP in node js. Here you will learn step by step, how you can send email using Gmail SMTP in node js

Sending email via Node js is easy. Today we are going to discuss send an email via node js. We will use nodemailermodule and Gmail SMTP to send the email. We will also learn how to send an email with an attachment. So let’s get started with the node js send email with attachment tutorial.

How to Send Attachment in Email using Nodemailer in Node Js

Just follow the following steps and send email through gmail with attachment using nodemailer in node js:

1. Step 1 - First Install Nodemailer 1. Step 2 - Configure Gmail SMTP with Nodemailer 1. Step 3 - Sending Email with Gmail SMTP 1. Step 4 - Send Multiple Recipient At The Same Time 1. Step 5 - Send Simple HTML

https://www.tutsmake.com/node-js-send-email-through-gmail-with-attachment-example/

#node js send email through gmail with attachment #how to send attachment in mail using nodemailer #nodejs send email with attachment #nodejs send email with attachment example