2015-09-15 23 views
6

Nasz CRM pozwala nam wysyłać automatyczne wiadomości e-mail do naszych klientów za pomocą ich oprogramowania. Rzeczy takie jak pokwitowania zakupu i tak dalej. Chociaż oferują edycję wiadomości e-mail w formacie HTML, są mocno ograniczone i nie możemy używać żadnego CSS.td układanie bez użycia css

Jeśli chodzi o to, co ich przewodnikiem styl nie pozwala, to wszystko wydaje się być trochę inline HTML i stylizacji, na przykład:

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

... wszystkie są OK, zgodnie z instrukcją. Jednak żadne inne odniesienia CSS lub CSS są dozwolone, w tym:

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

lub

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

lub

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

Na domiar zlego, i powinny mam włączone to powyżej, wszystko powyżej tagu <body> (i zawierające sam tag ciała) jest usuwane po zapisaniu pliku w edytorze HTML w programie. Mają jakieś skrypty do modyfikacji kodu autorskiego, które odwołują się do "zatwierdzonego" kodu w swoim przewodniku po stylach i usuwają to, co zostało. Więc z kim jestem? Niewiele. Zasadniczo od otwarcia <table> do zamknięcia </table>. Nawet rozbierają się na </body> i </html>.

Przy pozostałym kodzie, nie mogę w ogóle użyć @media lub pozwolić na jakiekolwiek układanie <td>. Czy są więc jakieś alternatywne sposoby łączenia się z arkuszem stylów, o którym wiesz? ... metoda, która pozwoli na układanie bez dostępu do CSS? Zasadniczo szukam sposobu na dostosowanie tych e-maili zgodnie z ograniczeniami opisanymi powyżej.

upload prowadnicę do JSfiddle styl: https://jsfiddle.net/Lxfqus7f

Odpowiedz

0

Wygląda Twój styl Podręcznik obejmuje korzystanie z niektórych stylów inline:

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

Skoro automatyczne generowanie wiadomości e-mail tak, dlaczego nie po prostu pozwolić ten slajd i zadeklaruj swoje style w zmiennych i wykorzystaj je w razie potrzeby?

Czy są one usuwane ze znaczników stylu wszystkie? Czy możesz po prostu umieścić styl ukryty na początku TD?

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

Dzięki za szybką odpowiedź! Zaledwie kilka chwil po opublikowaniu, weszłam i wyjaśniłam swój cel (na dole postu), który ma na celu ustalenie możliwości umieszczenia TD (lub alternatywnego sposobu wykonania e-maila) zgodnie z ograniczeniami opisanymi w przewodniku po stylu . – solateor

+0

Dobrze, więc dlaczego nie ustawić ręcznie reguł css, które chcesz umieścić w arkuszu stylów? Myślę, że ' Stuff Stuff Stuff' –

1

Tak, tak 100 razy tak. Każdy, kto kiedykolwiek zaprojektował szablon wiadomości e-mail, miał te same skargi. Projekt e-mail to projektowanie stron internetowych około 1999 roku. Po pierwsze, zapomnij o referencjach CSS, po prostu wstaw wszystko, co możesz i nie przejmuj się tagami @media, zapomnij nawet, że istnieją.

tabeli konfiguracji
myśleć o <table> w postaci arkusza, o <tr> jako wiersz tabeli oraz <td> jako komórki tabeli. Zamiast "układania" TDs spróbuj zagnieżdżać tabele. Nowy stół może wejść do środka i w stylu lalki w stylu Matrioszki można wykonać dowolny układ.

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

Powyższe działa dobrze.

Responsive maile
Słowa reagujących i poczty zwykle nie idą w parze. Co renderują klienci poczty e-mail jest poważnie ograniczone, ale istnieją sposoby obejścia tego. Podobnie jak ustawienie szerokości stołu głównego do 100% i posiadanie dwóch TD z każdej strony. Tak:

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

Oto przykłady zarówno w JSfiddle.

http://jsfiddle.net/e8r9ky4x/

0

Korzystanie tag styl w organizmie nie może być best of things to use a nawet mogą wywoływać wymiotów w wielu twórców stron, ale IS a possibility to utilize in Email.

Zdecydowanie zaleca się, aby nie używać go w ten sposób poza przypadkami, które wymieniono na liście, i poleciłbym CIĘŻKIE testy dla wszystkich klientów, ponieważ może to czasami powodować błędne wyniki.

Chciałbym sprawić, aby stylizacja w linii wykonywała większość podnoszenia ciężkich przedmiotów i po prostu używaj znaczników stylu w treściach, których nie można wykonać w żaden inny sposób.

Poniżej znajduje się kilka dobrych zasobów na temat responsywnej poczty w formacie HTML, które zostały stworzone do pracy z aplikacją GMAIL (która niemal całkowicie usuwa znacznik stylu) i powinny pomóc w stworzeniu podstaw do najlepszego sposobu tworzenia wiadomości e-mail.

kodowanie hybrydowe podejście - http://labs.actionrocket.co/the-hybrid-coding-approach

hybrydowe kodowanie Redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2

Czy Hybrid właściwym rozwiązaniem - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question