Trong HTML, giá trị thuộc tính hiển thị mặc định được lấy từ thông số kỹ thuật HTML hoặc từ biểu định kiểu mặc định của trình duyệt/người dùng. Giá trị mặc định trong XML là nội tuyến, bao gồm các phần tử SVG
Đưa ra bản chạy thử ❯
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Hiển thị tài sản4. 08. 03. 03. 17. 0
Ghi chú. Các giá trị "flex" và "inline-flex" yêu cầu tiền tố -webkit- để hoạt động trong Safari
Ghi chú. "trưng bày. nội dung" không hoạt động trong Edge trước phiên bản 79
Cú pháp CSS
Giá trị tài sản
ValueDescriptionPlay itinlineHiển thị phần tử dưới dạng phần tử nội tuyến [như ]. Mọi thuộc tính chiều cao và chiều rộng sẽ không có hiệu lực Bản trình diễn ❯khốiHiển thị phần tử dưới dạng phần tử khối [như
]. Nó bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng
Bản trình diễn ❯nội dung Làm cho vùng chứa biến mất, làm cho các phần tử con của phần tử này trở thành cấp độ tiếp theo trong DOMflexHiển thị một phần tử dưới dạng một lưới vùng chứa flex ở cấp độ khốiHiển thị một phần tử dưới dạng một vùng chứa lưới ở cấp độ khốiinline-blockHiển thị một phần tử dưới dạng một khối ở cấp độ nội tuyến . Bản thân phần tử này được định dạng là một phần tử nội tuyến, nhưng bạn có thể áp dụng các giá trị chiều cao và chiều rộnginline-flexHiển thị một phần tử dưới dạng một bộ chứa flex cấp độ nội tuyếninline-gridHiển thị một phần tử dưới dạng một bộ chứa lưới cấp độ nội tuyếninline-tablePhần tử được hiển thị dưới dạng một bộ chứa cấp độ nội tuyếnThêm ví dụ
Ví dụ
Minh họa cách sử dụng giá trị thuộc tínhcontent. Trong ví dụ sau đây. một vùng chứa sẽ biến mất và tạo các phần tử con [. b] con của phần tử cấp độ tiếp theo trong DOM
Trong thế giới thiết kế web rộng lớn hơn, chúng ta đã trải qua các cuộc chiến trình duyệt nơi Netscape và Internet Explorer chiến đấu với nhau để giới thiệu các cách cạnh tranh để viết mã cho mọi thứ. Nhờ Dự án tiêu chuẩn web và những nỗ lực liên quan, các trình duyệt web hiện đại nhất quán hơn nhiều so với mười năm trướcThật không may, trong khi cuộc chiến đó đang diễn ra, các ứng dụng email như Outlook và Lotus Notes đã không được tìm thấy, ẩn nấp ở một góc nào đó, bị bỏ lại phía sau
Thậm chí tệ hơn là không cố gắng cải thiện kết xuất HTML và CSS của họ, một số ứng dụng email đã thực sự đi ngược lại. Mười ba năm trước, Microsoft đã quyết định Outlook 2007 sẽ ngừng sử dụng Internet Explorer để hiển thị email HTML. Trước khi bạn hào hứng, họ đã thay thế nó bằng Microsoft Word. Có—Microsoft Word. trình xử lý văn bản. Trong một phiên bản, Outlook đã chuyển từ khá tốt và dễ hiểu sang hết sức tệ khi hiển thị email HTML từ bất kỳ ai ngoại trừ những người dùng Outlook khác
Outlook vẫn sử dụng công cụ kết xuất Microsoft Word trong tất cả các ứng dụng Windows Desktop, với mỗi lần lặp lại được cung cấp một số phiên bản [ngoại trừ phiên bản mới nhất. Outlook 2016 và 2019 giống nhau, khiến chúng tôi mất tinh thần]
Và Outlook vẫn là một ứng dụng email cực kỳ phổ biến, nhưng điều đó thậm chí còn gây ra nhiều vấn đề hơn. Xây dựng HTML cho email có nghĩa là bạn đang xử lý hơn bốn hoặc năm trình duyệt web chính và 12 đến 15 ứng dụng email khác nhau, mỗi ứng dụng có thị phần vững chắc. Litmus đã từng khẳng định rằng nếu bạn đếm mỗi lần lặp lại ứng dụng email/trình duyệt/mô hình sản phẩm, thì sẽ có 15.000 khả năng khác nhau
Một số trong số chúng rất tuyệt, như Apple Mail. Một thiết kế hoạt động trong Safari sẽ hoàn hảo trong Apple Mail. Một số, như Outlook, gây căng thẳng và lo lắng cho mọi nhà phát triển email. Gmail hiện có thị phần cao nhất [xem phần còn lại của bảng phân tích trên trang web Thị phần email của Litmus] và Gmail có những điểm phức tạp riêng. Ở giữa là một loạt các ràng buộc kết xuất khác nhau, sự kỳ quặc và sự không nhất quán
Không cần phải nói, có một thách thức đối với các nhà thiết kế web. Làm cách nào để bạn sử dụng các kỹ năng thiết kế web năm 2020 của mình và áp dụng chúng cho các ứng dụng email có khả năng của thiên niên kỷ trước?
Đừng tuyệt vọng, vì bạn có thể thành công với một chút kiến thức và sẵn sàng thử nghiệm. Bạn thậm chí có thể tiết kiệm đường chân tóc của mình
If you’ve been building websites for long enough to remember the glory days of GeoCities and Angelfire, you probably built your first websites using tables for layouts. Building an HTML email today will take you back to those heady times, although with rather less use of the tag.
Hãy tiếp tục và đánh dấu vào phần này, bởi vì bạn sẽ muốn quay lại phần đó mỗi khi bắt đầu tạo một mẫu email mới. Chúng tôi sẽ đề cập đến các mẹo và thủ thuật giúp bạn có thể đạt được kết quả tốt cho càng nhiều người đọc—hoặc khách hàng của bạn—độc giả càng tốt
Ứng dụng khách duy nhất vẫn cần bảng HTML là Outlook dành cho Windows Desktop, vì vậy, cho đến khi ứng dụng đó không được dùng nữa, bạn sẽ cần hiểu cách ứng dụng email kết xuất bảng, ngay cả khi đó chỉ là dự phòng cho bố cục bảng cho Outlook
Nhưng trước tiên, điều quan trọng là phải biết bạn đang gửi cho ai
Xác định thói quen xem của khán giả
Bước đầu tiên trong việc xây dựng một email HTML thành công là biết nó sẽ được đọc như thế nào. Ví dụ: nếu tất cả những người đăng ký sẽ đọc email của bạn trên email Outlook của công ty họ, thì điều này có thể hướng bạn đến việc sử dụng văn bản gốc
Trong hầu hết các trường hợp, sẽ có nhiều ứng dụng email được sử dụng, nhưng có một số cách để tìm hiểu. Giám sát chiến dịch xuất bản một số thống kê tổng thể về việc sử dụng ứng dụng email cung cấp một cái nhìn tổng quan, mặc dù có một số hạn chế. Hoặc bạn có thể xem trang web Chia sẻ thị trường email của Litmus
Tuy nhiên, không có gì đảm bảo rằng những điều này phản ánh đối tượng của bạn. Giám sát chiến dịch và nhiều nhà cung cấp dịch vụ email khác sẽ cung cấp cho bạn báo cáo cho từng chiến dịch, liệt kê ứng dụng email cho từng người đăng ký nếu có
Điều bạn đang tìm kiếm trong các báo cáo này là mẫu số chung thấp nhất của bạn. Ví dụ: nếu có 30% sử dụng Lotus Notes 7, bạn cần đảm bảo rằng bạn đã kiểm tra cụ thể ứng dụng khách đó trước khi gửi. Một phiên bản cụ thể của ứng dụng email có thể phù hợp—Outlook 2003 sẽ khiến bạn ít đau đầu hơn nhiều so với Outlook 2007 và trong một số trường hợp, danh sách của bạn có thể chỉ sử dụng một phiên bản
Nếu bạn chưa bao giờ gửi danh sách này trước đây, bạn có thể phải kiểm tra mọi khách hàng mà bạn có thể tìm thấy và đưa ra một số phỏng đoán có cơ sở về loại đối tượng mà bạn đang giao dịch. Họ có khả năng sử dụng điện thoại di động để đọc email hoặc máy chủ của công ty bị khóa không? . com và địa chỉ Yahoo, ít nhất là dễ kiểm tra trong. Dù bạn biết gì về đối tượng của mình, hãy ghi chú cho mình những email khách hàng nào bạn muốn kiểm tra nhất mỗi khi gửi.
Điều đáng ghi nhớ là trong vài năm qua, số lượng người nhận đọc email trên thiết bị di động của họ đã tăng lên 50% thời gian. Ở một số thị trường, hơn 70% email được đọc trên thiết bị di động. Đảm bảo email của bạn phản hồi nhanh sẽ mang lại trải nghiệm khách hàng tốt hơn, đặc biệt là khi mức tiêu thụ email trên thiết bị di động tiếp tục tăng
Dựa vào bảng—và không chỉ cho dữ liệu
Nguyên tắc quan trọng nhất đối với email HTML là bố cục CSS không hoạt động. Các ứng dụng email chính hoặc không cung cấp hỗ trợ nào cả hoặc xử lý nó theo vô số cách khác nhau một cách khó chịu
Sử dụng CSS thay vì bảng là tiếng kêu trong cuộc chiến tiêu chuẩn web, nhưng mã hóa email HTML có nghĩa là giương cờ trắng và nhượng bộ. Trừ khi bạn đang xây dựng một email cực kỳ đơn giản hoặc toàn bộ khán giả của bạn đang sử dụng một công cụ đọc email hiện đại hơn, nếu không thì bạn nên quay lại với tất cả các thẻ
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Gmail, Outlook, Lotus Notes và nhiều thứ khác chắc chắn đều có vấn đề lớn với các phần tử nổi và thậm chí không đáng tin cậy với lề và phần đệm. Bạn sẽ muốn thiết lập một số bảng HTML có cấu trúc để đảm bảo rằng bạn nhận được một email ít nhất là kết hợp tốt với nhau
Cũng có một số vấn đề khi sử dụng bảng, như nhiều nhà thiết kế đã học được một cách khó khăn. Dưới đây là một số mẹo để xử lý các bảng trong email
1. Đặt chiều rộng trong mỗi ô thay vì trên bảngSự kết hợp của chiều rộng trên bảng, chiều rộng trên các ô, lề và phần đệm HTML cũng như lề và phần đệm CSS có thể hỗn loạn. Đơn giản hóa mã của bạn và cuộc sống của bạn bằng cách chỉ đặt trên mỗi ô
Các ứng dụng email không đáng tin cậy khi suy ra chiều rộng chính xác của một ô, vì vậy, cách an toàn nhất là đặt một cách rõ ràng. Độ rộng pixel là đáng tin cậy nhất, vì việc sử dụng tỷ lệ phần trăm có thể mang lại cho bạn một số kết quả kỳ lạ, đặc biệt là khi sử dụng các bảng lồng nhau
Để đặt phần đệm cho ô của bạn, hãy đặt phần đệm một lần trên toàn bộ bảng với tham số
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Ngay cả khi lề và phần đệm được hỗ trợ bởi hầu hết các ứng dụng email, kết quả sẽ không nhất quán. Nếu khoảng cách là quan trọng đối với bạn, thay vào đó hãy thử lồng các bảng bên trong bảng chính của bạn. Đó là trường học cũ, nhưng nó đã được thử và đúng
3. Đặt màu nền trên bảng vùng chứaMột số ứng dụng email sẽ bỏ qua nền trên thẻ
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Về mặt lý thuyết, nên bỏ qua khoảng trắng trong tệp HTML. Nhưng trong thực tế, nó có thể gây ra tất cả các loại lỗi kết xuất—đặc biệt nếu bạn có khoảng trắng giữa các ô của bảng. Tạo thói quen xóa bất kỳ khoảng trắng nào giữa thẻ đóng của một ô và thẻ mở của ô tiếp theo để tránh các khoảng trống khó coi và các vấn đề về bố cục
Sử dụng CSS nội tuyến
Đây là nơi C để xếp tầng trong CSS có ích. Việc áp dụng một kiểu trong dòng sẽ ưu tiên kiểu đó hơn các kiểu ở xa hơn [chẳng hạn như kiểu ứng dụng khách webmail] và cũng hoạt động xung quanh các ứng dụng email loại bỏ CSS khỏi phần đầu hoặc các tệp CSS bên ngoài
Currently, the only major email client that strips all other types of CSS, embedded tags in the head or body, and externally linked stylesheets is the Gmail app with non-Gmail addresses [commonly referred to as GANGA].
Gmail không hỗ trợ biểu định kiểu bên ngoài hoặc thẻ
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Đây là thông tin bổ sung nhanh trong trường hợp bạn không sử dụng CSS nội tuyến trong một thời gian [hoặc chưa bao giờ, nếu bạn bắt đầu thiết kế web sau năm 2000]
CSS nội tuyến. những thứ cơ bản
Một kiểu được áp dụng cho các phần tử
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Các kiểu này sẽ áp dụng cho tất cả các đoạn trong trang của bạn, nhưng nếu kiểu bị loại bỏ, các đoạn sẽ được tạo kiểu theo bất kỳ kiểu mặc định nào mà ứng dụng email khách sử dụng hoặc biểu định kiểu riêng của ứng dụng webmail
Áp dụng kiểu theo dòng có nghĩa là tạo kiểu cho từng thành phần
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bạn sẽ đạt được kết quả nhất quán hơn nếu áp dụng các kiểu theo cách này cho mọi thành phần trong email HTML của mình
Khi bạn bắt đầu làm điều này, bạn sẽ nhanh chóng nhận ra rằng việc lặp đi lặp lại cùng một phong cách trong HTML của bạn thật mệt mỏi [rất giống với các thẻ
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}- Đừng nội tuyến các kiểu của bạn cho đến khi bạn hoàn thành mã hóa. Phát triển toàn bộ thiết kế bằng cách sử dụng thẻ
3 trong đầu và chỉ khi bạn đã thực hiện các điều chỉnh cuối cùng, bạn mới nên áp dụng chúng theo hàng. Điều này giúp tiết kiệm việc phải quay lại và chỉnh sửa 20 phiên bản cùng kiểup { line-height: 1.5em; margin: 0px 0px 10px 0px; } - Sử dụng một dịch vụ hoặc công cụ email sẽ tự động tạo nội tuyến CSS cho bạn. Ví dụ: Trình giám sát chiến dịch có các công cụ để lấy kiểu từ phần đầu hoặc tệp bên ngoài và tự động áp dụng từng kiểu cho các phần tử thích hợp khi bạn nhập chiến dịch
Có một số công cụ sẽ lấy một trang HTML và biểu định kiểu, sau đó nhổ ra trang của bạn với tất cả CSS được nội tuyến. Bạn có thể sử dụng Công cụ nội bộ CSS của Trình giám sát chiến dịch hoặc một công cụ yêu thích khác của chúng tôi, Premailer, công cụ này cũng sẽ cung cấp cho bạn lời khuyên hữu ích về CSS không được hỗ trợ
Có một số kiểu hoạt động nội tuyến kém—bạn không thể chỉ định. trạng thái di chuột cho các liên kết, làm ví dụ. Nhìn chung, bạn nên ghi nhớ các phong cách cũng như sắp xếp theo hàng—kích thước tải xuống bổ sung lớn hơn lợi ích của việc bao phủ tất cả các cơ sở của bạn
Tránh dựa vào hình ảnh cho mẫu HTML của bạn
Bạn có nhớ thuật ngữ slicing của nhà thiết kế web không?
Cắt lát từng là một kỹ thuật rất phổ biến để xử lý các điểm không nhất quán của trình duyệt. Đáng buồn thay, kỹ thuật tương tự vẫn tồn tại trong hộp công cụ của nhiều nhà thiết kế email và ngay cả những công ty lớn nhất cũng gửi email HTML không gì khác hơn là một bộ sưu tập hình ảnh
Mặc dù nó chắc chắn làm giảm thời gian phát triển email, nhưng lợi ích chỉ dừng lại ở đó. Không giống như các trình duyệt web, các ứng dụng email thường xuyên chặn hình ảnh tải xuống cho đến khi người đọc nhấp vào một nút hoặc liên kết đặc biệt, như trong hình bên dưới
hinh 4. 1. Email có liên kết “hiển thị hình ảnh trong email này”
Nghiên cứu trong vài năm qua đã chỉ ra rằng một tỷ lệ đáng kể [ước tính lên đến 40%] người nhận email không bao giờ kích hoạt hình ảnh. Thêm vào đó là tất cả những người không nhận ra rằng họ có thể hiển thị hình ảnh và bạn có một lượng lớn người nhận sẽ không nhìn thấy logo hoặc hình ảnh tiêu đề của bạn—ít hơn nhiều so với phần còn lại của email nếu nó hoàn toàn dựa trên hình ảnh
Cài đặt chặn hình ảnh mặc định cho các ứng dụng email khác nhau được hiển thị trong bảng bên dưới. Chúng tôi sẽ giải thích ý nghĩa của cột cuối cùng [Hiển thị img người gửi đáng tin cậy] trong phần tiếp theo. Bây giờ, chỉ cần chú ý đến cột thứ hai. điều này cho biết hình ảnh có được hiển thị theo mặc định trong mỗi ứng dụng khách hay không
Chặn hình ảnh mặc định trong ứng dụng email
Hiển thị img ClientDefault Người gửi đáng tin cậy hiển thị imgYahoo Mail CóKhông Yahoo Mail Beta YesYesWindows Live MailNoYesGmailNoYesOutlook.comCóCó AOL Web CóYesApple MailYesNoThunderbirdYesYesOutlook 2007NoYesOutlook 2003NoYesOutlook ExpressYesNoEudoraYesNoEntourageYesNoAOL DesktopNoYesVí dụ: trừ khi bạn biết chắc chắn rằng khán giả của mình chỉ đọc email trong Apple Mail, bạn cần giả định rằng một số lượng kha khá người sẽ không nhìn thấy hình ảnh của bạn [vì một số ứng dụng khách phổ biến, bao gồm Gmail, Outlook. com, Outlook 2019 và Windows 10 Mail chặn hình ảnh theo mặc định]. Vì vậy, bản tin bán hàng đẹp mắt đó sẽ chỉ hiển thị dưới dạng một loạt các ô vuông trống
Bạn có thể tưởng tượng tác động sẽ có đối với sự thành công của chiến dịch của bạn. Vậy, giải pháp thay thế là gì?
Mẹo điều hướng hình ảnh bị chặn
1. Trở thành người gửi đã biếtHầu hết các ứng dụng email cho phép người nhận tự động hiển thị hình ảnh khi thư đến từ một người gửi đã biết [người gửi xuất hiện trong danh sách trắng, danh sách liên hệ hoặc sổ địa chỉ]. Cột cuối cùng trong bảng trên hiển thị ứng dụng khách nào sẽ cho phép người nhận ghi đè cài đặt chặn hình ảnh của họ đối với người gửi đáng tin cậy
Bạn sẽ muốn khuyến khích những người đăng ký của mình thêm địa chỉ “từ” mà bạn sử dụng vào danh sách trắng của họ. Bạn có thể có một ghi chú ngay trên biểu mẫu đăng ký của mình để yêu cầu họ làm điều này. Hoặc, tốt hơn nữa, bao gồm các hướng dẫn về danh sách trắng hoặc thêm địa chỉ vào danh bạ của họ trong email xác nhận đăng ký hoặc email chào mừng đầu tiên của bạn. Điều này đảm bảo hình ảnh sẽ hiển thị và cũng sẽ tăng khả năng gửi của bạn
Trong các chiến dịch email thực tế của bạn, bạn có thể làm tương tự. Để hữu ích hơn, hãy đặt một trang trên trang web của bạn với các hướng dẫn về cách thêm địa chỉ vào danh sách trắng cho các ứng dụng email khác nhau và liên kết tới trang đó
2. Sống không hình ảnhSẽ luôn có những người—dù do lựa chọn hay tình cờ—không bao giờ bật hình ảnh cho các chiến dịch của bạn, vì vậy thiết kế cần phải tính đến điều đó. Thực hiện theo một số hướng dẫn đơn giản để cải thiện kết quả của bạn
Không sử dụng hình ảnh làm mục đầu tiên trong email của bạn. Hãy nhớ rằng nhiều ứng dụng email sẽ sử dụng một cửa sổ xem trước nhỏ và nếu yếu tố duy nhất phù hợp ở đó là một hình ảnh không được hiển thị, thì email cũng có thể trống. Thay vào đó, hãy đảm bảo bắt đầu nội dung email bằng một số văn bản tiêu đề trước để cung cấp bản xem trước phù hợp và thu hút nhiều lượt mở hơn
Sử dụng thuộc tính alt. Giống như bạn làm với một trang web, hãy đảm bảo có các thuộc tính alt hữu ích cho mỗi hình ảnh. Trong một số trường hợp, chúng sẽ hiển thị khi hình ảnh bị chặn và có thể cung cấp một bản sao lưu tốt. Chúng không phải lúc nào cũng được hiển thị hoặc có thể không được hiển thị đầy đủ. Bạn có thể xem các ứng dụng email phổ biến sẽ xử lý các thuộc tính thay thế như thế nào trong bảng bên dưới
Hỗ trợ thuộc tính thay thế bằng ứng dụng email
ClientRenders altNhận xét Yahoo Mail Không N/AYahoo Mail Beta CóApplies CSS font styling to alt attributes.Windows Live MailKhông N/AGmailĐôi khiTùy thuộc vào độ dài văn bản. Quan điểm. com Không N/AApple Mail Không Thay thế văn bản thay thế bằng biểu tượng dấu chấm hỏi. Thunderbird Có Áp dụng kiểu phông chữ CSS cho văn bản thay thế. Outlook 2007Sắp xếpThay thế văn bản thay thế bằng thông báo bảo mật. Outlook 2003YesÁp dụng kiểu phông chữ CSS cho văn bản thay thế. Outlook ExpressYesÁp dụng kiểu phông chữ CSS cho văn bản thay thế. EudoraSắp xếpThay thế văn bản thay thế bằng URL thành hình ảnh. Outlook MacĐôi khiTùy thuộc vào độ dài văn bản.Sử dụng chú thích cho hình ảnh quan trọng. Nếu bạn có một hình ảnh chứa nội dung quan trọng [chứ không phải là một yếu tố trang trí], hãy sử dụng chú thích văn bản để mô tả nó. Bằng cách đó, ngay cả khi hình ảnh không được hiển thị—và ngay cả khi văn bản thay thế không được hiển thị—người đọc vẫn có quyền truy cập vào thông báo
Luôn có văn bản và hình ảnh. Nếu bạn có sự cân bằng giữa văn bản HTML và một số hình ảnh, thì email sẽ hữu ích ngay cả khi không có hình ảnh. Nếu email hoàn toàn bao gồm các hình ảnh bị chặn, email sẽ lãng phí thời gian và có thể thu hút một số người hủy đăng ký
Cân nhắc xem bạn có cần hình ảnh nào không. Đôi khi hình ảnh là cần thiết. Để có một ví dụ tuyệt vời, hãy xem bản tin FontShop, hiển thị các mẫu phông chữ mới. Không có hình ảnh, nó sẽ kém hữu ích hơn rất nhiều—vì vậy chúng chắc chắn đáng để đưa vào. Đối tượng FontShop cũng có nhiều khả năng hiển thị hình ảnh mọi lúc và sử dụng các ứng dụng email tiến bộ hơn
Tuy nhiên, đối với một số trường hợp, hình ảnh là không cần thiết. Hãy coi một email giao dịch giống như một xác nhận đơn hàng. Nó cần phải rõ ràng và có thể quét được, nhưng hình ảnh sẽ không chứa nội dung quan trọng
Sử dụng một biểu tượng dễ nhận biết cho những người có thể nhìn thấy nó, nhưng tránh dựa vào hình ảnh để đưa ra quan điểm của bạn cho bạn. Đảm bảo rằng một phần của quy trình gửi chiến dịch của bạn đang xem email mà không tải bất kỳ hình ảnh nào để xem số lượng người nhận của bạn sẽ nhìn thấy nó như thế nào
Làm nản lòng những khách hàng muốn có email toàn hình ảnh. Các nhà thiết kế web thường nói rằng cá nhân họ biết rõ hơn là chỉ gửi email hình ảnh đơn thuần, nhưng khách hàng của họ muốn mọi thứ trông thật hoàn hảo. Đây là vấn đề—công việc của các nhà thiết kế là cho khách hàng thấy lý do tại sao đó là một ý tưởng tồi. Cho họ thấy email của họ sẽ trông như thế nào nếu không có hình ảnh và hỏi họ, “Bạn có muốn nhấp qua trang trống này không?”
Nhắc họ rằng có lẽ 30% số người sẽ nhìn thấy chính xác điều đó, có thể tương đương với hàng trăm hoặc hàng nghìn người có thể bỏ email [hoặc hủy đăng ký] và không bao giờ bận tâm tải những hình ảnh đó
Thêm một lý do để tránh email toàn hình ảnh
Có. Bộ lọc thư rác thường sử dụng tỷ lệ hình ảnh so với văn bản làm cờ để đánh giá xem email có hợp pháp hay không. Email toàn hình ảnh có nhiều khả năng bị đánh dấu là thư rác hơn so với email có nội dung hỗn hợp.
There are some designers who will tell you that you have to use tags because CSS never works in email clients. That’s just not the case, and there’s a significant body of tests that confirm it.
Mặc dù bạn có thể yên tâm để các thẻ
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bạn có thể xem Hướng dẫn cơ bản về Hỗ trợ CSS trong Email tại đây
Bạn sẽ muốn tham khảo tài nguyên này khi xây dựng mẫu như một cách nhanh chóng để xem bộ chọn và thuộc tính nào an toàn để làm việc cùng với những bộ chọn và thuộc tính nào bạn cần xem. Thậm chí phức tạp hơn, bạn sẽ thấy hỗ trợ không nhất quán cho một số thành phần, sẽ hoạt động trong một số kết hợp nhất định nhưng không hoạt động trong các kết hợp khác. Vì vậy, những gì hoạt động trong một email có thể thất bại trong một email khác
Không thể tránh khỏi quá trình thử nghiệm, nhưng các biểu đồ hỗ trợ CSS sẽ loại bỏ rất nhiều sự thất vọng cho bạn. Khi bạn đã tạo một vài mẫu, bạn sẽ bắt đầu biết từ bộ nhớ cách nhanh nhất để đạt được kết quả chắc chắn
Ứng dụng khách webmail có thể là một trường hợp đặc biệt khi kết xuất email HTML. Ví dụ: Gmail có ít nhất hai phiên bản khác nhau và trong thử nghiệm của Trình giám sát chiến dịch, chúng tôi đã thấy các biến thể về cách cùng một email xuất hiện tùy thuộc vào phiên bản bạn đang làm việc
Các trang web hiện đại chứa nhiều thứ hơn HTML, CSS và hình ảnh. JavaScript, âm thanh, Flash, video, hoạt ảnh và biểu mẫu đều là một phần của bộ công cụ của nhà thiết kế. Cái nào trong số này hoạt động trong ứng dụng email?
Ngay cả khi bạn có thể sử dụng một kỹ thuật hoặc phương tiện nhất định, bạn có thể không muốn. Mọi người thường truy cập trang web của bạn theo lựa chọn. Họ đi khi họ muốn và với sự hiểu biết về những gì mong đợi
Email là một môi trường hoàn toàn khác với một trang web. Có âm thanh hoặc video phát bên trong email có nhiều khả năng gây khó chịu hơn là giải trí. Đối với một số email và một số người đăng ký, điều đó có thể không sao, nhưng hãy hết sức thận trọng về việc làm gián đoạn kỳ vọng của độc giả
Hãy xem công nghệ internet hiện đại có thể hoặc không phá vỡ những kỳ vọng đó như thế nào
JavaScript trong email
Khi nói đến viết kịch bản, chúng ta có thể đưa ra một tuyên bố hơi bao quát. Viết kịch bản không được hỗ trợ trong email
Điều này hầu như không đáng ngạc nhiên, do các rủi ro bảo mật rõ ràng liên quan đến tập lệnh chạy bên trong ứng dụng có hàng tấn thông tin cá nhân được lưu trữ trong đó
Các ứng dụng webmail chủ yếu chạy giao diện bằng JavaScript và không quan tâm đến việc email của bạn can thiệp vào điều đó. Và các bộ lọc trên máy khách để bàn thường coi JavaScript là dấu hiệu của thư rác hoặc email lừa đảo
Ngay cả trong những trường hợp nó có thể chạy, thì thực sự có rất ít lợi ích khi viết kịch bản trong email. Giữ email của bạn dưới dạng HTML và CSS thẳng và tránh rắc rối
Flash trong email
Trên thị trường trình duyệt web, Adobe Flash gần như có mặt khắp nơi, nhưng trong thế giới ứng dụng email, Flash hầu như không tồn tại. Trong hầu hết các trường hợp, nó hoàn toàn không có và ngay cả hình ảnh dự phòng mà bạn có thể chọn cũng không hiển thị
Hiện tại nên tránh sử dụng Flash trong email của bạn, vì nó không hoạt động. Không có gì đáng ngạc nhiên, điều này có ảnh hưởng đáng kể đến hiệu quả của video trong email, đây là chủ đề tiếp theo của chúng tôi
Video trong email
Video có thể là một phương tiện rất thuyết phục, mô tả hành động thay vì chỉ hiển thị một bức ảnh tĩnh hoặc mô tả văn bản. Liệu mọi người có thực sự muốn xem video trong email của họ hơn là trên trang web hay không là một câu hỏi mở
Kể từ năm 2020, về mặt lý thuyết, có rất nhiều cách khác nhau để video có thể được đưa vào một email, nhưng trên thực tế, hầu hết chúng sẽ không hiệu quả với phần lớn người nhận. Giám sát chiến dịch đã thử nghiệm các kỹ thuật và định dạng sau cho video trực tiếp trong email. Flash, QuickTime, Windows Media, GIF động [được phát trực tuyến và nhúng], Java Applet, MPEG được nhúng và video HTML5 được phát trực tuyến. Các kết quả chi tiết được hiển thị trong hướng dẫn này
Như bạn sẽ thấy, GIF động có hỗ trợ vững chắc, mặc dù chúng vẫn bị chặn hình ảnh nhiều như hình ảnh tĩnh. Ngoài ra, Outlook trên Windows sẽ chỉ hiển thị khung hình đầu tiên của hoạt ảnh
Có thể là khôn ngoan nếu vẫn thực hiện một cách tiếp cận đơn giản hơn. Sử dụng hình thu nhỏ của video hoặc chụp ảnh màn hình của trình phát [lý tưởng nhất là có nút phát] và gửi ảnh đó vào email của bạn. Làm cho nó liên kết đến video trên trang web của bạn [và cũng liên kết một chú thích bên dưới nó]. Đó là một cú nhấp chuột bổ sung, nhưng nó được đảm bảo hoạt động cho tất cả mọi người
Biểu mẫu trong email
Có một email chứa biểu mẫu trực tiếp là một ý tưởng tuyệt vời. Người đọc của bạn có thể dễ dàng điền vào một số chi tiết, trả lời hoặc trả lời khảo sát. Thật không may, sự hỗ trợ cho các biểu mẫu trong ứng dụng email khá không nhất quán. Một số khách hàng sẽ đưa ra các cảnh báo bảo mật trông đáng sợ khi người đọc cố gắng sử dụng một biểu mẫu và những khách hàng khác sẽ vô hiệu hóa biểu mẫu để không thể gửi được
Nhiều người có thể sử dụng một biểu mẫu, nhưng những người còn lại sẽ thấy một biểu mẫu chẳng có tác dụng gì cả—đó là một trải nghiệm khá tệ. Cách tiếp cận được đề xuất là liên kết đến một biểu mẫu trên trang web của bạn, nơi bạn biết nó sẽ hoạt động. Mức độ hỗ trợ biểu mẫu trong các máy khách thông thường có thể được tìm thấy tại đây
Nếu bạn chỉ học được một bài học từ hướng dẫn này, hãy để nó là bài học này. Luôn luôn, luôn luôn, luôn luôn kiểm tra email của bạn trước khi gửi đi
Cảm giác chìm sau khi nhấn gửi và sau đó phát hiện ra một lỗi đánh máy trong tiêu đề đầu tiên thật khủng khiếp. Và danh sách càng lớn, cái hố trong bụng bạn càng lớn
Khi một email đã được gửi đi, không thể lấy lại. Một trang web có thể được cập nhật trong giây lát, nhưng các email vẫn tồn tại cuộc sống riêng biệt của chúng trong hàng triệu hộp thư đến khác nhau, ngoài tầm với
Có khá nhiều phương pháp và yếu tố để kiểm tra. Rõ ràng, bạn sẽ có tất cả các bản sao được kiểm tra và kiểm tra lại bởi người khác. Nhưng khi nói đến thiết kế và xây dựng, thử nghiệm có thể hơi tốn thời gian. Với rất nhiều ứng dụng email khách khác nhau để xem xét, phiên bản của những ứng dụng khách đó và sự khác biệt về nền tảng, điều đó có thể khiến bạn choáng ngợp
May mắn thay, có một vài dịch vụ tuyệt vời xung quanh giúp giảm bớt khó khăn khi kiểm tra email của bạn trong nhiều ứng dụng email
- Kiểm tra email giấy quỳ
- Email về kiểm tra email axit
- Thiết kế Campaign Monitor và kiểm tra thư rác
Mỗi dịch vụ sẽ lấy email HTML của bạn và trả lại cho bạn một loạt ảnh chụp màn hình cho biết email của bạn hiển thị như thế nào trong một số ứng dụng email khác nhau. Thông thường, bạn có thể cuộn qua toàn bộ email, xem nó có hình ảnh bị chặn hoặc hình ảnh được tải và có ý tưởng khá hay nếu có sự cố mà bạn cần khắc phục
Nếu có thêm thời gian và quyền truy cập vào tất cả nhiều ứng dụng email đã được thiết lập, sẽ tốt hơn nếu tương tác trực tiếp với từng ứng dụng. Tuy nhiên, trên thực tế, các dịch vụ thử nghiệm này giúp tiết kiệm thời gian rất nhiều và rất xứng đáng với chi phí bỏ ra
Trong trường hợp có khả năng xảy ra là có điều gì đó không hoạt động bình thường [nội dung bị cắt hoặc hiển thị sai vị trí hoặc bất kỳ hành vi kỳ quặc nào], quy trình khắc phục sự cố sẽ bắt đầu. Nếu bạn may mắn, ứng dụng khách có vấn đề sẽ là một ứng dụng như Gmail hoặc Outlook mà bạn có thể dễ dàng sử dụng
Sau đó, bạn có thể chỉnh sửa và kiểm tra một vài lần để làm cho nó hoạt động trở lại và có thể chạy một thử nghiệm thiết kế đầy đủ khác để đảm bảo không có gì khác bị hỏng trong quá trình sửa lỗi
Đôi khi, đó sẽ là một ứng dụng khách khó tính hơn, chẳng hạn như một phiên bản cụ thể của Lotus Notes. Những điều này có thể khó khắc phục sự cố và bạn có thể cần sự trợ giúp của người đọc hoặc đồng nghiệp, những người có thể chạy một số bài kiểm tra cho bạn
Quá trình này có thể khá dài. Nhưng khi bạn đã khắc phục sự cố mạnh mẽ cho mẫu của mình, mẫu đó có thể được sử dụng lại nhiều lần cho các chiến dịch trong tương lai và thường được điều chỉnh để phù hợp với nhiều thiết kế. Vì vậy, thời gian sẽ được chi tiêu tốt
Trong phần cuối của chương này, chúng ta sẽ xem xét mã cần thiết cho bản tin Modern Henchman, mã này đã được phát triển và thử nghiệm theo các hướng dẫn mà chúng tôi đã đề cập
Bạn có thể tải xuống mẫu này miễn phí cùng với kho lưu trữ mã cho cuốn sách này13 và sử dụng nó làm cơ sở cho các thiết kế của riêng bạn, nếu bạn thích
Đối với khách hàng của chúng tôi, tạp chí Modern Henchman, chúng tôi đang cố gắng tạo một mẫu chắc chắn sẽ được sử dụng lại hàng tháng mà không cần thêm thời gian thiết kế hoặc thử nghiệm. Vì vậy, chúng tôi cần phát triển một email có cấu trúc có thể xử lý nội dung dài hơn hoặc ngắn hơn mà không bị tách rời. hinh 4. 4 hiển thị một lời nhắc nhở về những gì chúng tôi muốn sản phẩm cuối cùng trông như thế nào
hinh 4. 4. Ảnh chụp màn hình bản tin Tay sai thời hiện đại
Xây dựng khuôn khổ
Bắt đầu từ trên cùng, chúng tôi có phần giới thiệu sẽ hiển thị trong khung xem trước đối với hầu hết người đọc. Nó sẽ chứa một danh sách nội dung đơn giản cho email và lời nhắc về lý do tại sao mọi người nhận được bản tin
Ngay cả khi hình ảnh bị tắt, văn bản đó vẫn hiển thị và đó là cơ hội tuyệt vời để thuyết phục mọi người đọc tiếp. Chúng tôi cũng sẽ đặt một liên kết hủy đăng ký ngay trên đầu, dành cho những người không còn quan tâm nữa. Như chúng ta đã thảo luận, sẽ tốt hơn nhiều nếu để họ dễ dàng hủy đăng ký hơn là buộc họ đánh dấu nó là thư rác
Bên dưới phần giới thiệu là tiêu đề rộng 580 pixel. Điều đó đủ hẹp để có thể đọc được mà không cần cuộn ngang đối với hầu hết các ứng dụng email. Rõ ràng là một số độc giả trên thiết bị di động sẽ gặp khó khăn, nhưng vì mục tiêu chính của chúng tôi là quảng bá sản phẩm của tháng và chúng tôi muốn sử dụng một bức ảnh lớn nên chúng tôi không thể thu nhỏ quá nhiều
Khi thiết kế cho khách hàng của riêng mình, bạn có thể sử dụng chiều rộng cột linh hoạt, nhưng hãy nhớ xem xét các mục tiêu của mình và chuẩn bị để chứa các nội dung khác nhau
Bố cục cho nội dung cơ thể khá đơn giản—về cơ bản là cấu trúc hai cột, nhưng có ít nhất một phần trải dài trên toàn bộ chiều rộng dành cho quảng cáo sản phẩm
Chúng tôi đã biết rằng CSS float sẽ không hoạt động, vì vậy để xây dựng bố cục này, chúng tôi sẽ sử dụng các bảng để giữ nội dung. Để đảm bảo rằng chúng tôi có thể đặt màu nền và hình ảnh [ít nhất là đối với một số ứng dụng email], chúng tôi bắt đầu với bảng chứa 100% chiều rộng
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Khoảng trắng
Có. Tôi đã đề cập trước đó rằng một số ứng dụng email có thể nhạy cảm với khoảng trắng trong HTML của bạn. Trong các ví dụ tiếp theo, tôi đã đặt ra đánh dấu để có thể đọc được tối đa và nó vẫn hoạt động tốt trong các ứng dụng khách mà tôi đã thử nghiệm. Tuy nhiên, điều này có thể không đáng tin cậy, vì vậy nếu bạn đang điều chỉnh mẫu này và gặp phải bất kỳ vấn đề về khoảng cách kỳ lạ nào, bạn nên thử xóa khoảng trắng để xem có giúp được gì không.
Bên trong đó là nơi chứa nội dung chính của chúng tôi với chiều rộng cố định là 580 pixel
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bạn sẽ nhận thấy rằng chúng tôi đang sử dụng các thuộc tính HTML thay vì CSS ở đây để có kết quả tốt nhất. Các bảng lồng nhau mang lại bố cục đáng tin cậy hơn những gì chúng ta có thể đạt được, đặc biệt là với các ứng dụng email như Outlook và Lotus Notes
Khi bạn đang xây dựng các mẫu của riêng mình, bạn nên thử nghiệm trong Outlook 2007 [nếu có thể] và Gmail khi bạn tiến hành, để bạn sớm phát hiện ra bất kỳ sự cố bố cục chính nào—hai ứng dụng khách này đều là nguyên nhân phổ biến và thường xuyên gây ra sự cố
Tô màu khối cho các ô của bảng và thêm một số đường viền CSS để bạn có thể thấy cách bố cục được kết hợp với nhau khi bạn làm việc trên đó
Thêm nội dung
Việc xử lý phần giới thiệu và tiêu đề có chiều rộng đầy đủ rất đơn giản—chúng có thể được thêm dưới dạng các hàng có chiều rộng đầy đủ đơn giản vào bảng nội dung
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bên dưới đó, bố cục hai cột bắt đầu. Điều này trông giống như một công việc cho một bảng khác. Việc lồng một bảng khác cho phép chúng tôi tạo phần đệm và lề nhất quán xung quanh bản sao nội dung
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Điều này có vẻ phức tạp hơn nó là. Chúng tôi tạo hai cột, một lần nữa đặt độ rộng rõ ràng. Như tôi đã đề cập trước đây, việc để các ứng dụng email cố gắng tìm ra độ rộng của một phần tử không bao giờ là một ý tưởng hay, vì kết quả sẽ rất khác nhau
Bí mật của cái gọi là bố cục “hai cột” này thực sự là nhiều cột hơn, ẩn xung quanh cả hai bên của nội dung để tạo rãnh và lề
hinh 4. 5 hiển thị khối nội dung có viền được bật. Tôi đã sử dụng tiện ích mở rộng Thanh công cụ dành cho nhà phát triển web dành cho Firefox để hiển thị đường viền xung quanh tất cả các ô của bảng, điều này giúp dễ hiểu điều gì đang diễn ra hơn. Nếu trước đây bạn chưa từng làm việc với bố cục dựa trên bảng hoặc đã loại bỏ chúng khỏi tâm trí, tiện ích mở rộng này có thể giúp bạn hiểu chúng khi bạn phát triển các mẫu email của mình
hinh 4. 5. Khối nội dung với các ô của bảng được phác thảo
Như bạn có thể thấy, chúng tôi đang sử dụng tổng cộng sáu cột cho bố cục hai cột của mình. Tôi biết, nó xấu xí và lỗi thời, và khiến bạn cảm thấy hơi khó chịu khi nhìn vào nó. Tất cả chúng ta đều cảm thấy như vậy khi lần đầu tiên quay lại cách bố trí bảng
Cảm giác buồn nôn cuối cùng sẽ qua đi và bạn sẽ có bố cục hai cột hiển thị đáng tin cậy trong tất cả các ứng dụng email chính. Mã cho khối nội dung có chiều rộng đầy đủ rất giống nhau, ngoại trừ việc nó chỉ sử dụng ba cột. một cho mỗi máng xối và một cho khu vực nội dung
Khi bạn cần phân chia thêm một vùng nội dung, tất cả những gì bạn cần làm là lồng một bảng khác. Trong ví dụ của chúng tôi, các khối “Gửi cho bạn bè” và “Hủy đăng ký” ở cuối email yêu cầu lồng vào một bảng một cột khác, như thế này
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bố cục hoàn chỉnh được mô tả trong Hình 4. 6
hinh 4. 6. Ảnh chụp màn hình của mẫu đầy đủ, với tất cả các ô trong bảng được phác thảo
Kiểm tra chi tiết cho mọi ứng dụng email
Khi xây dựng bất kỳ mẫu email HTML nào, bạn sẽ đạt đến điểm quyết định. Cho rằng các cột đã được đặt đúng chỗ và sẽ kết hợp tốt với hầu hết mọi người, chúng tôi có thể ngừng gửi email cho khách hàng vào thời điểm này
Nếu bạn và khách hàng của bạn đồng ý với một số thay đổi nhỏ về hình ảnh giữa các ứng dụng email, bạn có thể quay lại các kỹ thuật hiện đại hơn cho nội dung thực tế. Chỉ cần điền vào các tiêu đề và đoạn văn, tạo kiểu cho chúng trong CSS của bạn và để chúng được hiển thị theo yêu cầu riêng của ứng dụng email
Hầu hết thời gian người đọc của bạn sẽ không so sánh email trong các chương trình khác nhau, vì vậy trừ khi có điều gì đó thực sự bị hỏng, họ sẽ không để ý đến những khác biệt nhỏ. Đây là những gì tôi luôn đề xuất, mặc dù tất nhiên vẫn còn rất nhiều thử nghiệm phải thực hiện
Nếu khách hàng của bạn đòi hỏi khắt khe hơn hoặc thiết kế thực sự cần nhất quán, bạn có thể tiếp tục với các bảng lồng nhau hơn nữa cho các khối nội dung riêng lẻ. Bằng cách đó, bạn sẽ có nhiều quyền kiểm soát hơn đối với khoảng cách xung quanh các tiêu đề, chẳng hạn và kiểm soát tính nhất quán để cho phép bạn sắp xếp các phần tử với nhau
Đây là một ví dụ về nỗ lực cần thiết để tạo một khối tiêu đề nhất quán
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}This is all the code required just to make sure that the
is displayed at the same size, and with the same surrounding space across the big email clients.
Hãy suy nghĩ cẩn thận trước khi bạn đi đến những khoảng thời gian dài này, bởi vì nó có thể lãng phí thời gian của bạn. Thật tốt khi biết rằng nó có thể được thực hiện
Thử nghiệm bố cục Người tay sai hiện đại
hinh 4. 7 và Hình 4. 8 minh họa phiên bản mẫu của bản tin Modern Henchman trông như thế nào trong một số ứng dụng email phổ biến. Những ảnh chụp màn hình này được tạo bằng công cụ kiểm tra Campaign Monitor, nhưng bạn có thể đạt được kết quả tương tự từ các dịch vụ khác
hinh 4. 7. Ảnh chụp màn hình trong Gmail [trái], Windows Live [giữa] và AOL Desktop 9 [phải]
hinh 4. 8. Ảnh chụp màn hình trong Outlook 2007 [trái], Thunderbird [giữa] và Lotus Notes 6. 5 [phải]
Có thể khó nhận ra trong ảnh chụp màn hình, nhưng vẫn có một số biến thể từ khách hàng này sang khách hàng khác. Những gì bạn có thể thấy là thiết kế tổng thể khá gần gũi và chắc chắn không bị hỏng trong bất kỳ ứng dụng khách nào [mặc dù một trong các hình ảnh không tải được trong Lotus Notes 6. 5]
Bài học bạn rút ra từ điều này là bạn không cần chỉ sử dụng hình ảnh để đạt được kết quả nhất quán với email HTML. Mã hóa email của bạn theo cách tôi đã phác thảo có thể đòi hỏi nhiều nỗ lực hơn một chút, nhưng chúng sẽ hiệu quả hơn, vì vậy bạn sẽ gặt hái được phần thưởng trong thời gian dài
Tạo một mẫu HTML thực sự phù hợp với khách hàng là một tác phẩm nghệ thuật. Như bạn có thể thấy từ hướng dẫn này, đây không phải là một quy trình nhanh chóng—nhưng nó rất đơn giản khi sử dụng các phương pháp hay nhất. Và, như đã nói nhiều lần, bạn sẽ thấy phần thưởng theo thời gian vì các mẫu đã được thử và đúng này sẽ thu được mức độ tương tác và kết quả thực tế
Web có rất nhiều phòng trưng bày thiết kế và phòng trưng bày CSS dường như mọc lên như nấm ở mọi ngóc ngách của nó, nhưng có tương đối ít phòng trưng bày mẫu email HTML
Hãy đánh dấu các trang web này cho thiết kế tiếp theo mà bạn cần viết mã, bởi vì bạn có thể tiết kiệm rất nhiều thời gian
- Các mẫu miễn phí từ Giám sát chiến dịch
- Bộ sưu tập tại Email thực sự tốt
- Mẫu ThemeForest
Không có gì xấu hổ khi sử dụng một mẫu thử nghiệm có sẵn miễn phí và điều chỉnh nó theo nhu cầu của bạn
Khách hàng của bạn không quan tâm đến việc trả tiền cho bạn để chiến đấu sinh tử với Lotus Notes 7—họ chỉ muốn một email mà mọi người có thể đọc và đạt được mục tiêu của họ
Theo thời gian, bạn sẽ xây dựng kiến thức của riêng mình và một bộ mã hoạt động mà bạn có thể sử dụng lại, điều này sẽ giúp bạn tiết kiệm thời gian để dành cho các mục tiêu thiết kế và kinh doanh tốt hơn
Sử dụng Trình giám sát chiến dịch, bạn có thể nhập HTML của riêng mình cho các thiết kế email tùy chỉnh, nội tuyến tất cả CSS của bạn và thậm chí tạo các mẫu mà khách hàng hoặc thành viên nhóm có thể nhanh chóng chỉnh sửa trong tương lai. Đăng ký miễn phí ngay hôm nay và thử
Hướng dẫn này ban đầu được xuất bản vào tháng 4 năm 2010 dưới dạng một đoạn trích từ cuốn sách Tạo email HTML tuyệt đẹp chỉ hoạt động. bởi Mathew Patterson. Hướng dẫn này đã được cập nhật vào tháng 5 năm 2020