Basically the title. I use eM Client, my client uses Outlook and I've tested it in iCloud web as well. None displays the signature correctly but VS Code and all my browsers does. Unsure why and what to do at this point. Note that I'm a designer, so I used auto-layout in Figma and used that code to get to this file. The file looks like this (please remember I'm very new to this, so it might be messy):
<html>
<head>
<title>Compucable email-signature</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Rubik:300,700,italic");
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
html,
body {
margin: 0px;
height: 100%;
}
button:focus-visible {
outline: 2px solid #4a90e2 !important;
outline: -webkit-focus-ring-color auto 5px !important;
}
a {
text-decoration: none;
}
.email-signature {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 15px;
padding: 15px;
position: relative;
background-color: #ffffff;
width: 100%;
min-width: 758px;
min-height: 162px;
}
.email-signature .info {
display: inline-flex;
flex-direction: column;
height: 131px;
align-items: flex-start;
justify-content: space-between;
position: relative;
flex: 0 0 auto;
}
.email-signature .name-and-logo {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
position: relative;
flex: 0 0 auto;
}
.email-signature .div {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
position: relative;
flex: 0 0 auto;
}
.email-signature .j-d-van-der-walt {
position: relative;
width: fit-content;
margin-top: -1.13px;
background: linear-gradient(180deg, rgb(43, 145, 209) 0%, rgb(41, 196, 169) 100%);
-webkit-background-clip: text !important;
background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Rubik, Helvetica;
font-weight: 700;
color: transparent;
font-size: 24px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
}
.email-signature .operations-director {
position: relative;
width: fit-content;
font-family: "Rubik", Helvetica;
font-weight: 300;
font-style: italic;
color: var(--blue);
font-size: 13px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
}
.email-signature .links {
display: inline-flex;
align-items: flex-start;
gap: 10px;
position: relative;
flex: 0 0 auto;
}
.email-signature .div-2 {
display: inline-flex;
align-items: center;
gap: 5px;
position: relative;
flex: 0 0 auto;
}
.email-signature .flexcontainer {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.email-signature .text {
position: relative;
align-self: stretch;
margin-bottom: 0px;
font-family: "Rubik", Helvetica;
font-weight: 300;
color: var(--blue);
font-size: 8px;
letter-spacing: 0;
line-height: normal;
}
.email-signature .text-wrapper {
font-family: "Rubik", Helvetica;
font-weight: 300;
color: #003366;
font-size: 8px;
letter-spacing: 0;
}
.email-signature .div-3 {
display: inline-flex;
align-items: center;
gap: 5px;
position: relative;
flex: 0 0 auto;
}
.email-signature .text-wrapper-2 {
position: relative;
width: fit-content;
font-family: "Rubik", Helvetica;
font-weight: 300;
color: var(--blue);
font-size: 8px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
}
:root {
--white: rgba(255, 255, 255, 1);
--blue: rgba(0, 51, 102, 1);
--teal: rgba(0, 128, 128, 1);
--orange: rgba(184, 115, 51, 1);
--grey: rgba(211, 211, 211, 1);
}
</style>
</head>
<body>
<div class="email-signature">
<img alt="Icon with compucable logo" style="position: relative;
width: 132px;
height: 132px;"
src="data:image/png;base64,imagecodehere>
<div class="info">
<div class="name-and-logo">
<div class="div">
<div class="j-d-van-der-walt">J.D. Van Der Walt</div>
<div class="operations-director">Operations Director</div>
</div>
<img alt="compucable logo" style="position: relative;
width: 245px;
height: 16px;"
src="data:image/png;base64,imagecodehere>
</div>
<div class="links">
<div class="div">
<div class="div-2">
<img alt="address icon" style="position: relative;
width: 10px;
height: 10px;"
src="data:image/png;base64,imagecodehere>
<div class="flexcontainer">
<p class="text">
<span class="text-wrapper">PTA: </span>
<a href="tel:0123429160" target="_blank" rel="noopener noreferrer"
><span class="text-wrapper">012 342 9160<br></span
></a>
</p>
<p class="text">
<span class="text-wrapper">CPT: </span>
<a href="tel:0212073977" target="_blank" rel="noopener noreferrer"
><span class="text-wrapper">021 207 3977</span></a
>
</p>
</div>
</div>
<div class="div-2">
<img alt="address icon" style="position: relative;
width: 10px;
height: 10px;"
src="data:image/png;base64,imagecodehere>
<a href="https://maps.app.goo.gl/JXRQiR4KMZ8LLnv9A" target="_blank" rel="noopener noreferrer"
><div class="flexcontainer">
<p class="text">
<span class="text-wrapper">1028 Pretorius Street,<br></span>
</p>
<p class="text">
<span class="text-wrapper">Hatfield, Pretoria, 0002</span>
</p>
</div></a>
</div>
</div>
<div class="div">
<div class="div-3">
<img alt="address icon" style="position: relative;
width: 10px;
height: 10px;"
src="data:image/png;base64,imagecodehere>
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer"
><div class="text-wrapper-2">[email protected]</div></a
>
</div>
<div class="div-3">
<img alt="address icon" style="position: relative;
width: 10px;
height: 10px;"
src="data:image/png;base64,imagecodehere>
<a href="https://www.compucable.co.za" target="_blank" rel="noopener noreferrer"
><div class="text-wrapper-2">www.compucable.co.za</div></a
>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I started with SVG but apparently Oulook doesn't support that (??) and then decided to encode the images with base64. Not sure what to do next.
I saw some things about using tables for email signatures. Honestly not sure how to do that, if I should start from scratch? Can you add images into tables?
Oh! Yes, unfortunately, email layout is stuck back in 2004.
Therefore, you should use tabular layout to work with emails. This is so much fun! (No)
No svg, unfortunately. Any svg - is just a small png picture that is hosted statically on your server, and a link to it is inserted in the email.
It is also necessary that all your styles are inlined. You can write code in scss, which you transform into css, which then gulp will take, for example, and convert your HTML and CSS into one inlined layout.
You can also attach some @media css rules in the style tag along with your email, but only half of the email services will read them, so write in such a way that everything looks beautiful on both mobile and desktop at the same time.
There are a lot of rules and recommendations on how to write beautiful emails, I’ll share a couple of useful links:
And this gulp tool, that will help you make correct emails:
package.json:
{
...
"scripts": {
"start": "gulp buildEmail"
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-email-builder": "^3.0.0"
}
}
gulpfile.js:
const gulp = require('gulp');
const emailBuilder = require('gulp-email-builder');
gulp.task('buildEmail', function () {
return gulp
.src(['./src/emails/*.html'])
.pipe(emailBuilder().build())
.pipe(gulp.dest('./dist/emails/'));
});
That's all, put your html emails into ./src/emails/, take it from ./dist/emails/