Create your own emails with HTML styles

How-to create your own emails with rich content using HTML and send them.
Email Website HTML PHP Online Marketing SEO Responsive

What happens when we have our website, our new app or our new product or service ready? Usually, we want the rest of the world to know about it and they see what we have created. This process - Online Marketing - is tedious and complicated so many people just hire some service to do it for them.

But, what happens if our budget is tight and you don't to spend that money? You end up doing it by yourself but social networks are something crazy and many times you don't reach your potencial customers and you only reach friends and family. Then you try with eamils, but emails are not attractive, a white background and simple text... Do you want to send emails like those big companies, free from your system? Let's try.

Crear Email 1

The main idea is that to make your emails look more profesional like those from big companies you will need some kind of rich text, different sizes, your logo, your sign, images, videos, ... and all that comes to your mind. Of course, we cannot do this with a simple email so we want to send emails with some HTML content. To do this, in this tutorial, we've decided to use PHP to compose and send the email but you can do it with any other language on a similar way.

The method we're going to use is very simple. We just need a design for our email as it was a page from our website. Here, for example, we decided to send some emails to promote our new app MatchUp Padel and this is the style and content we have decided to send.

Crear Email 2

In this email, we have included our logo, some links, different rich text, our social networks, ... All we have considered is interesting and attractive.

Considerations during the design

Although we said we should design the email as another page from our website, it's not 100% true. We need to think that when someone opens our email, the CSS code and Javascript we used won't be able to be executed by the email reader they will use.

The solution is that all the CSS and Javascript code we want to use should be in the actual HTML code or load it from a remote addres and avoid local paths (like ../../example.css).

For example we could use explicit CSS in the HTML code like:

                                    <div style="width: 100%;max-width: 600px;background: #fff;text-align: center;border: 1px solid #e7e8e8;border-radius: 2px;margin: auto;padding: 2px;">
                                        <img style="width: 100%" src="http://galcode.com/matchup-padel/content/img/email-top.jpg">
                                            <div style="font-family: arial,sans-serif;color: #272727;text-align: center;font-size: 30px;min-height: 16px;vertical-align: top;padding: 10px 30px;font-weight: 900;">
                                                Presentamos
                                            </div>
                                

Or use CSS and Javascript file using absolute paths to our server on the head tag of the email like:

                                    <div style="width: 100%;max-width: 600px;background: #fff;text-align: center;border: 1px solid #e7e8e8;border-radius: 2px;margin: auto;padding: 2px;">
                                    <head>
                                        <meta charset="utf-8">
                                        <title>MatchUp Padel</title>
                                        <meta charset="utf-8">
                                        <link href="http://galcode.com/matchup-padel/img/favicon.ico" rel="shortcut icon">
                                        <link href="http://galcode.com/matchup-padel/css/email-style.css" rel="stylesheet" type="text/css">
                                        <link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
                                    </head>
                                

Well, we have our email ready, now we just have to send it, how do we do this? There are many ways, as we said, we have choosen for this tutorial do it using PHP but you could use any other language able to send emails.

To start, we will see how the PHP function to send emails works. The function name is mail() and it accepts several parameters:

mail($receptor,$asunto,$texto,$cabeceras)
  • $receptor: it's the email address to we want to send the email.
  • $asunto: the subject for the email.
  • $texto: here we'll have the HTML code we have designed.
  • $cabeceras: the email headers.

We're going to start seting up our email headers:

                                    $headers  = "From: MatchUp Padel <ignacio@galcode.com> \r\n";
                                    $headers .= "Reply-To: ignacio@galcode.com\r\n";
                                    $headers .= "Bcc: info@galcode.com\r\n";
                                    $headers .= "MIME-Version: 1.0\r\n";
                                    $headers .= "Content-Type: text/html; charset=utf-8\r\n";
                                

  • From: [REQUIRED] this is the email address you will send the email. Usually you use the structure name <email address>
  • Reply-To: the email address you want they reply to. It can be the same or not to the previous one.
  • Bcc: if you want to send a hidden copy of the email to another address.
  • MIME-Version: 1.0.
  • Content-Type: text/html [REQUIRED] Remember we want to send HTML code.

Great! We already have the headers ready and into a $headers variable. Now we need to create another variable with all the HTML we have created before. This is really easy, we create a text string variable with the code inside it:

                                    $texto = '
                                        <!doctype html>
                                        <html>
                                            <head>
                                                <meta charset="utf-8">
                                                <title>MatchUp Padel</title>
                                                <meta charset="utf-8">
                                                <link href="http://galcode.com/matchup-padel/img/favicon.ico" rel="shortcut icon">
                                                <link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
                                            </head>
                                            <body style="background-color: #ffffff; color: #1e1e1e; font-family: Comfortaa, sans-serif; font-size: 14px; line-height: 22px; margin: 0; padding: 0;">

                                                <table style="width: 100%; background-color: #f7f7f7; text-align: center; border: 0; margin: 0; padding: 0">
                                                    <tbody>

                                                        <tr>
                                                            <td style="text-align: center;padding-top: 20px;padding-bottom: 10px;">
                                                                <img src="http://galcode.com/matchup-padel/img/logo.png" alt="Logo" style="max-width: 250px;">
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td>

                                                                <div style="width: 100%;max-width: 600px;background: #fff;text-align: center;border: 1px solid #e7e8e8;border-radius: 2px;margin: auto;padding: 2px;">
                                                                    <img style="width: 100%" src="http://galcode.com/matchup-padel/content/img/email-top.jpg">
                                                                    <div style="font-family: arial,sans-serif;color: #272727;text-align: center;font-size: 30px;min-height: 16px;vertical-align: top;padding: 10px 30px;font-weight: 900;">
                                                                        Introducing
                                                                    </div>
                                    ...
                                    ...
                                    ';
                                

We already have the headers, the code in a variable and we only need to choose a subject and the email address we want to send it to. We run the mail() function as we saw before and ready, we have sent our email.

Last minute ideas

This method works but you have to change the code each time you want to send an email to a diferent email address and this is not efficient at all so if we tweak the code a bit and we surround the mail() function by an if block using a $_GET variable with the email address we want to send the email to to control the if statement, we will have a much better method to send the email to as many email addresses as we want. Something similar to this:

                                    if(isset($_GET['email']) && $_GET['email'] != '') {
                                        $aux = mail($_GET['email'],"Nueva App MatchUp Padel",$texto,$headers);
                                    }
                                

Besides, it would be great to know who has opened our email and to have all the data to see how well our campaign has worked. Easy, if you have a Google Analytics account, you'll be able to insert a new event and track it to see who has opened the email and much more from your analytics. We have explained this whole process in this div: adding Google Analytics to your emails.

Obviously, this is not the most prefect method you can find but you'll be able to save some money in system like MailChimp or social managers. You want to implement this method but you don't know how to do it and you prefer to pay once and have it forever? You can contact us and we will do it for you.

Ignacio Borrajo
Feb 17th 2017, Ourense

Leave a comment

Comments

  • Miguel, 22.04.2016:

    Artículo buenísimo y super detallado!! Lo he probado con mi proyecto y funcionó a la primera.