2015-09-15 11 views
6

Unser CRM ermöglicht es uns, automatische E-Mails an unsere Kunden mit ihrer Software zu senden. Dinge wie Kaufbelege und so weiter. Während sie HTML-Bearbeitung der E-Mails anbieten, ist sie stark eingeschränkt und wir dürfen kein CSS verwenden.td stacking ohne css

Soweit, was ihr Style-Guide erlaubt, es erscheint all HTML und einig Inline-Styling zu sein, zum Beispiel:

<span style="color:#ffffff">white</span> 
<div style="color:#ffffff"> 
<img src="dickbutt.gif" style="width:30px;height:20px"> 

... sind alle OK nach der Führung. Es werden jedoch keine anderen CSS oder CSS Referenzen erlaubt, einschließlich:

<link rel="stylesheet" href="/stylesheet.css" type="text/css"> 

oder

<style type="text/css"> 
@import "/stylesheet.css"; 
</style> 

oder

<style type="text/css"> 
body { color:green; } 
</style> 

Um noch schlimmer zu machen, und ich sollte das oben aufgenommen haben, Alles über dem <body>-Tag (und einschließlich des Body-Tags selbst) wird beim Speichern der Datei in ihrem In-Software-HTML-Editor entfernt. Sie haben eine Art von Code-Modifikationsskripten, die auf den "genehmigten" Code in ihrer Style-Anleitung verweisen, und streichen, was übrig ist. Also, womit bleibe ich? Nicht viel. Grundsätzlich zwischen Öffnen <table> bis zum Schließen </table>. Sie strippen sogar </body> und </html> aus.

Mit dem verbleibenden Code kann ich @media überhaupt nicht verwenden oder <td> Stapeln zulassen. Also, gibt es alternative Möglichkeiten, ein Stylesheet zu verlinken? ... eine Methode, die Stapelung ohne Zugriff auf CSS ermöglicht? Ich bin im Grunde auf der Suche nach einer Möglichkeit, diese E-Mails unter den oben genannten Einschränkungen reagieren zu lassen.

ich den Style Guide zu JSfiddle hochgeladen: https://jsfiddle.net/Lxfqus7f

Antwort

0

Sieht aus wie Ihr Style Guide die Verwendung einiger Inline-Stile umfasst:

<p>Our studio is <span style="color:purple">purple.</span></p> 
    Define sections of text that require different HTML <div> 
<div style="color:#FC8301"> 
    <h3>This title.</h3> 
    <p>This is sentence.</p> 
</div> 

Da Sie E-Mails ohnehin automatisch bist zu erzeugen, warum nicht einfach lassen diese eine Folie und deklarieren Sie Ihre Stile in Variablen und verwenden Sie sie gegebenenfalls?

Sind sie strippen alle style tags? Könntest du zu Beginn eines TD einen Stil verstecken?

<td><style>/*rules are for quitters!*/</style>Stuff</td> 
+0

Vielen Dank für die schnelle Antwort! Nur wenige Minuten nach der Einlieferung ging ich in und geklärt mein Ziel (am unteren Rand der Post), die einen Weg, um herauszufinden, ist TD Stapeln zu ermöglichen (oder eine alternative Möglichkeit, die E-Mail ansprechbar machen) unter den Einschränkungen in der Style Guide skizzierte . – solateor

+0

Richtig, ja, warum nicht die CSS-Regeln setzen Sie manuell in einem Stylesheet in das HTML setzen wollen? Ich denke, wie ' Stuff Stuff Stuff' –

1

ja, ja 100 mal ja. Jeder, der jemals eine E-Mail-Vorlage entworfen hat, hat die gleichen Beschwerden. E-Mail-Design ist Web-Design ca. 1999. Zunächst einmal vergessen CSS-Referenzen nur inline alles, was Sie können und nicht mit @media Tags kümmern, vergessen sie sogar existieren.

Table Design
Denken eines <table> als Tabelle, eine <tr> als Tabellenzeile und einem <td> als Tabellenzelle. Anstatt TDs zu "stapeln", versuchen Sie, Tabellen zu verschachteln. Ein neuer Tisch kann in einen TD integriert werden und in einer Art Matryoshka Puppe Stil kann man jedes gewünschte Layout machen.

<table> 
    <tr> 
     <td> 
     <table> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>4</td> 
      </tr> 
     </table> 
     </td> 
     <td>5</td> 
    </tr> 
</table> 

Das obige funktioniert gut.

Responsive E-Mails
Die Worte reagiert, und E-Mail normalerweise nicht zusammen gehen. Was E-Mail-Clients rendern, ist stark eingeschränkt, aber es gibt Möglichkeiten, sie zu umgehen. Zum Beispiel die Breite der Master-Tabelle auf 100% zu setzen und zwei TDs auf jeder Seite zu haben. Wie folgt aus:

<table width="100%" cellspacing="0" cellpadding="0"> 
    <tr height="500px" valign="top"> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    </tr> 
</table> 

Hier sind beide Beispiele in einem JSfiddle.

http://jsfiddle.net/e8r9ky4x/

0

einen Stil-Tag im Körper kann nicht die best of things to use sein verwenden und sogar induzieren in vielen Web-Entwickler können Erbrechen, aber es IS a possibility to utilize in Email.

ich stark nicht verwenden, es auf diese Weise außerhalb der Fälle würde empfehlen, wie Sie aufgeführt haben, und würde HEAVY Tests für alle Kunden empfehlen, da es manchmal Buggy Ergebnisse verursachen kann.

ich aussehen würde Ihre Inline-Styling der schweren Hebe die meisten tun zu machen und nur die Style-Tags in Körper für Elemente verwenden, die auf andere Weise werden nicht gemacht.

Unten finden Sie einige gute Quellen zu Responsive HTML-E-Mails, die für die Arbeit mit GMAIL APP verwendet werden (die das style-Tag fast vollständig ausblendet) und Ihnen eine Basis für die Erstellung Ihrer E-Mails geben soll.

Hybrid Codierungsansatz - http://labs.actionrocket.co/the-hybrid-coding-approach

Hybrid-Codierung Redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2

Ist Hybrid richtige Option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question