Highlighted

(CSS) About styling signatures and/or mailers...

Contributor ,
Jun 25, 2020

Copy link to clipboard

Copied

I have a question for the vets at creating HTML signatures and mailers : basically, how do you handle styling?

 

Do you link to a CSS (stylesheet) located on a public server - which I already do this with the images - or do you include it in the HTML file, between <style> tags before the body?

 

Or do you do neither, and simply apply "style=" to every item regardless of how redundantly bloated things can get going that route?

 

Thanks!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

The industry-tested method is #3, inline styles.

 

TOPICS
Code, How to

Views

66

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

(CSS) About styling signatures and/or mailers...

Contributor ,
Jun 25, 2020

Copy link to clipboard

Copied

I have a question for the vets at creating HTML signatures and mailers : basically, how do you handle styling?

 

Do you link to a CSS (stylesheet) located on a public server - which I already do this with the images - or do you include it in the HTML file, between <style> tags before the body?

 

Or do you do neither, and simply apply "style=" to every item regardless of how redundantly bloated things can get going that route?

 

Thanks!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

The industry-tested method is #3, inline styles.

 

TOPICS
Code, How to

Views

67

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 25, 2020 0
Adobe Community Professional ,
Jun 26, 2020

Copy link to clipboard

Copied

Keeping in mind that e-mail clients are limited and do not behave the same as modern web browsers, I think you should look at HTML E-mail Templates and online signature generators that are industry tested to work in Outlook, Gmail, Apple Mail, etc...  And keep it simple. 

 

Online Signature Generator

https://www.hubspot.com/email-signature-generator

 

Free Litmus responsive e-mail templates

https://litmus.com/resources/free-responsive-email-templates

 

A Google search will reveal others.

 

Another Creative Cloud member option is to send your e-mail list a URL to your Adobe Spark page or video.

https://spark.adobe.com/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2020 0
Contributor ,
Jun 27, 2020

Copy link to clipboard

Copied

I am specifically curious about the best method to implement the CSS (with plans to study a broader tutorial on email marketing later).

 

These are the 3 obvious methods I see :

 

  1. Define classes in a separate (linked-to) stylesheet located online.
  2. Define classes in the HTML page itself, before everything else, between <style> tags.
  3. Avoid using classes altogether, and apply CSS customisation directly to individual elements via "style=" (would mean more repetition/redundancy)

 

I am currently using method #2 and it appears to be working everywhere I tried it (including the notoriously picky Outlook 2016). In your opinion, is it generally safe to continue styling Sigs & Mailers this way?

 

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 27, 2020 0
Adobe Community Professional ,
Jun 27, 2020

Copy link to clipboard

Copied

The industry-tested method is #3, inline styles.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 27, 2020 0