Để tạo một liên kết để gửi email, hãy sử dụng thẻ, với thuộc tính href. Thư đến liên kết được thêm vào bên trong thẻ. Để thêm một chủ đề, bạn cần thêm ? . Tất cả điều này đến bên trong thẻ
Chỉ cần lưu ý thêm địa chỉ email mà bạn muốn nhận email vào thư để liên kết. Ngoài ra, khoảng cách giữa các từ cho chủ đề không được là khoảng trắng, thay vào đó hãy bao gồm %20. Điều này là để đảm bảo trình duyệt hiển thị văn bản chính xác
Contact us
Cập nhật ngày 09-Jan-2020 06. 49. 01
Khi ai đó nhấp vào một liên kết email trên trang web của bạn, dòng tiêu đề email sẽ tự động được điền cho họ hay người đó sẽ tự điền vào?
Mã hóa liên kết email tiêu chuẩn trông như thế này
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Khi khách truy cập nhấp vào liên kết này, chủ đề email sẽ trống trừ khi họ điền vào
Có một cách để khắc phục điều này bằng cách điều chỉnh liên kết email của bạn để bao gồm một chủ đề
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bây giờ khi nhấp vào liên kết email, chủ đề email sẽ tự động được chèn vào
Đối với mỗi liên kết email trên trang web của bạn, hãy chèn một chủ đề. e. g. Đối với một yêu cầu thông tin bạn có thể sử dụng
p {
line-height: 1.5em;
margin: 0px 0px 10px 0px;
}Bạn không chỉ đã chèn chủ đề email phù hợp mà giờ đây bạn có thể sử dụng các quy tắc trong chương trình email của mình để sắp xếp email vào các thư mục dựa trên chủ đề
Thậ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 ra. 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 ô 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
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;
}
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 là một công việc 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 các 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 thành phần phù 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