I can view this email signature correctly in VS Code and my browser, but all the other applications I've tried so far are unable to display it correctly

Question

I can view this email signature correctly in VS Code and my browser, but all the other applications I've tried so far are unable to display it correctly

Simply put, I am facing an issue with my email signature. I use eM Client, while my client uses Outlook and I've also checked it in iCloud webmail. Surprisingly, none of these platforms display my email signature correctly, but VS Code and all my browsers do without any problem. I designed the signature using auto-layout in Figma and then exported the code to create the signature file. This is how the file looks (please bear in mind that I'm quite new to this, so the code might not be perfect):

<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>

I initially tried using SVG for the email signature, but later discovered that Outlook does not support it. Subsequently, I encoded the images as base64 data. Now, I am unsure about what steps to take next.

View broken signature here

I have read about using tables for creating email signatures. However, I am unclear about the process and whether I should start over from scratch. Can you embed images within tables?

html css image email signature

Answer 1

Answer №1

Unfortunately, email design seems to be stuck in the past, reminiscent of 2004.

To ensure compatibility, it's best to utilize tabular layouts for emails. It may not sound glamorous, but it gets the job done! (No)

Unfortunately, no svg support. Any svg files will simply convert into small png images hosted on your server, with a link inserted in the email message.

It's crucial to inline all styles within the email content. One approach is to write code in scss, convert it to css, then use tools like gulp, to merge HTML and CSS for an inlined layout.

You can include some @media css rules alongside your email styles, although note that only certain email services will interpret them correctly. Aim to create visually appealing designs that adapt well to both mobile and desktop interfaces.

For further guidance on crafting beautiful emails, check out these helpful resources:

CSS properties you can utilize
Best Practices & Considerations for HTML Email Writing
Test your email display and delivery process
Prefer using 'em' units over 'px'

Consider leveraging gulp tools to streamline your email creation process:

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 covers it - place your html emails in ./src/emails/, retrieve the transformed versions from ./dist/emails/

Answer 2

Unfortunately, email design seems to be stuck in the past, reminiscent of 2004.

To ensure compatibility, it's best to utilize tabular layouts for emails. It may not sound glamorous, but it gets the job done! (No)

Unfortunately, no svg support. Any svg files will simply convert into small png images hosted on your server, with a link inserted in the email message.

It's crucial to inline all styles within the email content. One approach is to write code in scss, convert it to css, then use tools like gulp, to merge HTML and CSS for an inlined layout.

You can include some @media css rules alongside your email styles, although note that only certain email services will interpret them correctly. Aim to create visually appealing designs that adapt well to both mobile and desktop interfaces.

For further guidance on crafting beautiful emails, check out these helpful resources:

CSS properties you can utilize
Best Practices & Considerations for HTML Email Writing
Test your email display and delivery process
Prefer using 'em' units over 'px'

Consider leveraging gulp tools to streamline your email creation process:

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 covers it - place your html emails in ./src/emails/, retrieve the transformed versions from ./dist/emails/

Answer 3

Answer №2

If you're designing an email template, consider using tables and don't forget you can insert images within the table.

.container {
  padding: 2rem 0rem;
}

h4 {
  margin: 2rem 0rem 1rem;
}

.table-image {
  td, th {
    vertical-align: middle;
  }
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12">
        <table class="table table-image">
          <thead>
            <tr>
              <th scope="col">Day</th>
              <th scope="col">Image</th>
              <th scope="col">Article Name</th>
              <th scope="col">Author</th>
              <th scope="col">Words</th>
              <th scope="col">Shares</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap 4 CDN and Starter Template</td>
              <td>Cristina</td>
              <td>913</td>
              <td>2.846</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-5.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap Grid 4 Tutorial and Examples</td>
              <td>Cristina</td>
              <td>1.434</td>
              <td>3.417</td>
            </tr>
          </tbody>
        </table>   
    </div>
  </div>
</div>

For more information on creating email templates with HTML and CSS, check out this blog post: https://www.geeksforgeeks.org/email-template-using-html-and-css/

Answer 4

If you're designing an email template, consider using tables and don't forget you can insert images within the table.

.container {
  padding: 2rem 0rem;
}

h4 {
  margin: 2rem 0rem 1rem;
}

.table-image {
  td, th {
    vertical-align: middle;
  }
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12">
        <table class="table table-image">
          <thead>
            <tr>
              <th scope="col">Day</th>
              <th scope="col">Image</th>
              <th scope="col">Article Name</th>
              <th scope="col">Author</th>
              <th scope="col">Words</th>
              <th scope="col">Shares</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap 4 CDN and Starter Template</td>
              <td>Cristina</td>
              <td>913</td>
              <td>2.846</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-5.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap Grid 4 Tutorial and Examples</td>
              <td>Cristina</td>
              <td>1.434</td>
              <td>3.417</td>
            </tr>
          </tbody>
        </table>   
    </div>
  </div>
</div>

For more information on creating email templates with HTML and CSS, check out this blog post: https://www.geeksforgeeks.org/email-template-using-html-and-css/

I can view this email signature correctly in VS Code and my browser, but all the other applications I've tried so far are unable to display it correctly

Answer №1

Answer №2

Similar questions

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Manipulating div positions using JQuery and CSS

Trouble displaying portrait images in CSS slideshow

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

I've encountered an issue with adjusting certain property values for an SVG component within my React project

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Opting for HTML tags directly rather than using div.class

What steps should I take to make my Vue JS delete function operational?

designing a button layout with bootstrap framework

After utilizing the function, the forward and back arrows are no longer visible

Assistance required in publishing a website

fullpage.js: the content exceeds the height limit

Prevent unnecessary requests for asset images in Angular 5

Leveraging $last in Angular for obtaining the final visible element with ng-show

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

How can I create a rectangular border around text using the HTML5 canvas?

`How to perfectly place multiple text blocks and images using CSS`

Struggling with a dynamic HTML table using Mustache and Icanhazjs technologies

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer