Need help with simple HTML CSS Newsletter

Need help with simple HTML CSS Newsletter
0

#1

I have tried to make a newsletter email of sort by using HTML and inline CSS. When i view it in browser it looks just nice but after i try sending to myself as a test email, it looked crap. Can anyone help me?

As attached is two screenshots.

!

I uses Gmail in this case, and uses chrome extension from cloudHQ to enable HTML snippet in Gmail. And can anyone tell me why is there a white space between the grey area and black area? I couldnt find the reason of it. This is my code.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Enrollment Email</title>
  <script src="https://use.fontawesome.com/4ce1a4a58a.js"></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

  
  
</head>

<body>
  <div class="container-fluid" style="background color: #EEEEEE; width:600px; height: auto; margin-top:0px; margin-bottom:20px;">
  <div style="background-image:url(https://preview.ibb.co/h2QMCF/Email_Background_1024.png); background-position:top center; width:auto; height:auto; background-repeat:no repeat;">
    <h1 style="font-family: Helvetica; font-size:30px; color:white; padding: 50px 0px 20px 0px; text-align:center;"><b>Have you joined us yet?</b></h1>
    <h2 style="font-family:Calibri Light; font-size:14px; color:white; padding: 0px 20px 0px 30px;">Registered with the university but not with us?</h2>
    <p style="font-family:Calibri Light; font-size:14px; color:white; padding:0px 200px 20px 30px;">Join us in UTeM Postgraduate Club or Kelab Pasca-Siswazah UTeM (KePS UTeM) now to receive information, attend and organize activities, get awesome discounts on certain events, and have fun throughout your university life! </p>
    <button class="btn btn-danger" style="color:white; width:100px; padding:10px; margin:30px;" onclick="location.href:'https://www.google.com';"><b>Enrol Now</b></button>
    <p style="color:white; font-family:Calibri Light; font-size: 14px; padding: 0px 250px 30px 30px;">Visit our <a href="https://www.google.com">Facebook Page</a> for more info, <br>or email us at <a href="mailto:[email protected]">[email protected]</a>.</p>
  </div>
  <div id="footer" style="background-color:black; padding:5px 0px 0px 0px;">
    <h3 style="color:grey; font-family:calibri light; font-size:12px; text-align:center; padding: 0px 0px 5px 0px;"><i>UTeM Postgraduate Club<br>Kelab Pasca-Siswazah UTeM (KePS UTeM)</i></h3>
    <p style="color:grey; font-family:calibri light; font-size:12px; text-align:center;"><b>Universiti Teknikal Malaysia Melaka</b><br>Hang Tuah Jaya,<br>76100 Durian Tunggal,<br>Melaka, Malaysia</p>
    <p style="color:grey; font-family:calibri light; font-size:10px; text-align:center; padding:5px 0px 5px 0px">You're receiving this email because you are a postgraduate student in UTeM but have yet to register in UTeM Postgraduate Club.</p>
  </div>
  <div>
  
  </div>
</div>
  
  
</body>
</html>

#2

This is the one that i received as test email.


#3

The margin-bottom:20px; is the reason for the spacing between the body and footer. Also, I’m not sure you can set a fixed-width (ex. 600px) on a fluid container.


#4

I have tried taking away margin-bottom but it doesn’t help as the margin-bottom div includes also the black area div. Should i use container instead of fluid container? Im not quite sure which to use


#5

When I removed the following from the HEAD tag, it looks the same as what you show, so the email client is probaly ignoring the .js and/or .css external links. I personally have always used in-line styles and never have any trouble.

  <script src="https://use.fontawesome.com/4ce1a4a58a.js"></script>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

What email client were you using to view the email? That can make a difference also.


#6

But i thought as of September 2016 Gmail has already supported media scripts? What should i do to change the btn to inline css since its linked to the bootstrap library. I’m using Gmail as well to view the email.


#7

Hi! Your code it´s perfect, but unfortunately, using HTML in e-mails is very diferent from web layouts. Your newsletter look messed up for that reason.

If you want to create Newsletters to send them by mail, you need to use tables, and nesting more tables inside other tables in order to create a rigid grid.

Why? Every mail client read the code on its own way (Gmail, Outlook, Thunderbird or Yahoo some of the most known, but not the only ones…). Of course you have to consider the devices your audience uses. so you have to use tables to avoid unexpected results with your carefully created layouts :sweat_smile: It´s a big headache.

If you want to make responsive mails, the best way is to use media queries.

If you search a little bit you will find a lot of information about mailing in HTML. It´s too long to explain it here.

Good luck!


#8

Thank you for your reply and suggestion! I will have a look into it. Do you have any recommendation on the button ?


#9

As @victorsanchezm suggests, I also use tables and inline styles for all email campaigns.

If you really want to use Bootstrap, I suppose you could copy/paste the bootstrap css content into you style tag. That would be alot of css to insert though.


#10

Thank you for the help ! I would try what you guys have suggested and see if i could do it properly. Appreciate


#11

If you want to start practicing with HTML e-mails, my recomendation for the button is, to convert your button into a JPEG, and adding it to the table grid. Then link the direction within the image. Some mail clients doesn´t support button elements so well.


#12

I see, alright, i’ll do so then. Thanks a lot. =) Have a nice day


#13

Some tips:

GO SIMPLE.
No JS, No font-awesome, no web-fonts, no bootstrap, etc.
Use in-line style within your html code.
Wrap everything around a table element. Don’t use divs.
Don’t make any assumptions about display widths. Make it fluid.
The simpler the layout, the better. Talking about single-column, top to bottom.
Reference all graphics using their complete url, including hostname.
Don’t forget the unsubscribe link.
Follow CAN-SPAM rules.


#14

Thanks Owel !! I will have a try.


#15

Hi guys, i have successfully made a table tagged newsletter but now i faces another problem. It has already have no problem in Gmail and Yahoo. However, it has problems for it to be viewed accurately in Outlook. It has managed to load the header image, but is unable to load the content background image. Please advice.


#16

The one in Gmail and Yahoo looks like this


#17
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/

css">
    <title>Enrollment Email</title>
</head>

<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td style="padding:20px 0 30px 0;" valign="top">
    <table align="center" border="0"  cellpadding="0" cellspacing="0" width="600px" style="border-collapse: collapse; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;">    
        <tr>
        <td align="center" bgcolor="#70bbd9" valign="top" >
            <img src="https://preview.ibb.co/cSda7F/Logos_Header.png" alt="Header" width="600px" height="auto" style="display:block;"/>
        
        </td>
        </tr>
        <tr>
        <td valign="top"  style="background-image:url(https://preview.ibb.co/cJEtuv/Email_Background_2_1024.png); background-repeat: no repeat; background-size: 605px auto;">
            <table cellpadding="0" cellspacing="0" width="100%" border="0" style="padding: 40px 30px 30px 30px;">
            <tr>
                <td valign="top" align="center" style="font-family: calibri; font-size: 32px; color: #ffffff; padding-top: 10px; padding-bottom: 30px;">
                    <b>Have you joined us yet?</b>
                </td>
                </tr>
            <tr>
                <td valign="top" style="font-family: calibri light; font-size: 12px; color:#ffffff; padding: 0px 0px 10px 20px;">
                    <b>Registered in university but not in the club?</b>
                </td>
                </tr>
                <tr>
                <td valign="top" style="font-family:calibri light; font-size:12px; color:#ffffff; padding: 0px 300px 30px 20px; text-align:justify; line-height:1.2;">
                Join us in UTeM Postgraduate Club or Kelab Pasca-Siswazah UTeM (KePS UTeM) now to receive information, attend and organize activities, get awesome discounts on certain events, and have fun throughout your university life!
                </td>
                </tr>
                <tr>
                <td valign="top" style="padding: 0px 300px 30px 18px; font-family:calibri light; font-size: 12px;">
                <a href="https://goo.gl/forms/1DizcVi8KWo7vrc13"><img src="https://image.ibb.co/eL3fra/Enrol_Now.png" alt="Button" style="display:block;" width="80px" height="auto" border="0"></a>
                </td>
                </tr>
                <tr>
                <td valign="top" style="font-family:calibri light; font-size:12px; color:#ffffff; padding: 30px 0px 0px 20px;">
                    Visit our <a href="https://www.facebook.com/keps.utem/">Facebook Page</a> for more info,<br>or email us at <a href="mailto:[email protected]">[email protected]</a>.
                </td>
                </tr>
            </table>
        
            
        </td>
        </tr>
        <tr>
        <td valign="top" bgcolor="#000000" style="font-family:calibri light; font-size:10px; color:grey; text-align:center; padding:10px 0px 10px 0px; line-height:1.2;">
            <i>UTeM Postgraduate Club<br>Kelab Pasca-Siswazah UTeM (KePS UTeM)</i>
            <br><br><b>Universiti Teknikal Malaysia Melaka</b>
            <br>Hang Tuah Jaya,<br>76100 Durian Tunggal,<br>Melaka, Malaysia.<br><br>
            You're receiving this email because you're a postgraduate student in UTeM but has yet to register yourself in the club.
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    
    
    

</body>
</html>

#18

Outlook does not support background-image css

There is a StackOverflow discussion on options to deal with Outlook. Check it out here.

Check this site for information on what CSS is supported by the major email clients.

Outlook (like Internet Explorer) has always been difficult to work with in my opinion.

Also, you need to check out how your email looks in IE 10/11 because, Outlook always has that message for users to click to view a website version of your html email. The default browser for Outlook is IE. Your design looks different on IE (see below for screenshot).


#19

Thank you sooooo much Dawson !!! It is finally working now in IE 11. I’ve tested sending to hotmail and view it in IE 11 Its working properly. I do not know how to write VML codes so i used the Bulletproof Background Image suggested from the StackOverflow comments. Much appreciated to everyone who helped me through this.