2015-09-15 16 views
6

CRM của chúng tôi cho phép chúng tôi gửi email tự động tới khách hàng bằng phần mềm của họ. Những thứ như biên nhận mua hàng và vv. Trong khi họ cung cấp chỉnh sửa HTML của các email, nó bị hạn chế rất nhiều và chúng tôi không thể sử dụng bất kỳ CSS nào.td xếp chồng mà không cần sử dụng css

Theo như những gì hướng dẫn phong cách của họ không cho phép, nó dường như là tất cả HTML và một số kiểu nội tuyến, ví dụ:

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

... đều OK theo hướng dẫn. Tuy nhiên, không CSS hoặc CSS tài liệu tham khảo khác được cho phép, bao gồm:

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

hoặc

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

hoặc

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

Để thêm sự xúc phạm đến thương tích, và tôi nên tôi đã bao gồm này trên, mọi thứ phía trên thẻ <body> (và bao gồm cả thẻ body) sẽ bị loại bỏ khi lưu tệp trong trình chỉnh sửa HTML trong phần mềm của chúng. Họ có một số loại kịch bản sửa đổi mã tự động tham chiếu đến mã "được phê duyệt" trong hướng dẫn kiểu của họ và loại bỏ những gì còn lại. Vì vậy, những gì tôi còn lại với? Không được nhiều. Về cơ bản, từ lúc mở <table> đến đóng </table>. Họ thậm chí còn bỏ ra </body></html>.

Với mã còn lại, tôi không thể sử dụng @media ở tất cả hoặc cho phép bất kỳ việc xếp chồng <td> nào. Vậy, liệu họ có cách nào khác để liên kết với một tờ kiểu mà bạn biết không? ... một phương pháp cho phép xếp chồng mà không cần truy cập vào CSS? Tôi về cơ bản đang tìm cách để làm cho các email này đáp ứng theo các hạn chế nêu trên.

Tôi đã tải lên hướng dẫn phong cách để JSfiddle: https://jsfiddle.net/Lxfqus7f

Trả lời

0

Hình như hướng dẫn phong cách của bạn bao gồm việc sử dụng một số phong cách nội tuyến:

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

Vì bạn đang tự động tạo ra các email dù sao, tại sao không chỉ để một slide này và khai báo các kiểu của bạn trong các biến và sử dụng chúng khi thích hợp?

Họ có tước tất cả các thẻ kiểu không? Bạn có thể chỉ cần đặt một phong cách ẩn lúc bắt đầu của một TD?

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

Cảm ơn bạn đã trả lời nhanh chóng! Chỉ vài phút sau khi đăng, tôi đã đi vào và làm rõ mục tiêu của mình (ở cuối bài đăng), đó là tìm ra cách để cho phép xếp chồng TD (hoặc cách thay thế email phản hồi) theo các hạn chế được nêu trong hướng dẫn kiểu . – solateor

+0

Phải, vậy, tại sao không đặt các quy tắc css bạn muốn đặt vào một tờ định kiểu vào html theo cách thủ công? Tôi đang nghĩ như ' Stuff Stuff Stuff' –

1

Có, có 100 lần có. Mọi người đã từng thiết kế mẫu email đều có cùng khiếu nại. Thiết kế email là thiết kế web vào khoảng năm 1999. Trước hết, chỉ cần quên đi các tham chiếu CSS chỉ nội tuyến mọi thứ bạn có thể và không bận tâm với các thẻ @media, quên chúng thậm chí tồn tại.

Table Design
nghĩ về một <table> như một bảng tính, một <tr> như một dòng của bảng, và một <td> như một ô trong bảng. Thay vì "xếp chồng" TDs hãy thử làm tổ bảng. Một chiếc bàn mới có thể đi vào bên trong một chiếc TD và theo kiểu thời trang kiểu búp bê Matryoshka, bạn có thể thực hiện bất kỳ bố cục nào bạn muốn.

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

Các tác phẩm trên có hiệu lực.

Email đáp ứng
Phản hồi và email không thường đi cùng nhau. Những gì khách hàng email hiển thị bị giới hạn nghiêm trọng nhưng có nhiều cách để giải quyết nó. Giống như thiết lập chiều rộng của bảng Master của bạn đến 100% và có hai TD ở mỗi bên. Như thế này:

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

Dưới đây là cả hai ví dụ trong JSfiddle.

http://jsfiddle.net/e8r9ky4x/

0

Sử dụng một thẻ phong cách trong cơ thể có thể không phải best of things to use và thậm chí có thể gây nôn mửa trong nhiều nhà phát triển web, nhưng nó IS a possibility to utilize in Email.

Tôi thực sự khuyên bạn không nên sử dụng nó theo cách bên ngoài các trường hợp như bạn đã liệt kê và sẽ đề xuất thử nghiệm HEAVY trên tất cả khách hàng vì đôi khi có thể gây ra kết quả lỗi.

Tôi sẽ xem xét để tạo kiểu nội tuyến của bạn thực hiện hầu hết việc nâng hạng nặng và chỉ sử dụng thẻ kiểu trong nội dung cho các mục không thể thực hiện theo bất kỳ cách nào khác.

Dưới đây là một số tài nguyên tốt trên email HTML đáp ứng được thực hiện trên GMAIL APP (loại bỏ thẻ kiểu gần như hoàn toàn) và giúp cung cấp cho bạn đường cơ sở về cách tốt nhất để tạo email của bạn.

lai mã hóa cách tiếp cận - http://labs.actionrocket.co/the-hybrid-coding-approach

lai mã hóa Redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2

là lai đúng tùy chọn - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

Các vấn đề liên quan