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:keps.utem@gmail.com">keps.utem@gmail.com</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>
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.
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
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.
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 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.
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.
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.
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.
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.
!
It´s a big headache.
