Làm cách nào để gửi nội dung html trong email?
Lee Munroe là Trưởng phòng Thiết kế của OneSignal và là người tạo ra HTMLemail. io, có trụ sở tại San Francisco. Tìm hiểu thêm về Lee ↬ Show
Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Tôi đã dành nhiều năm để xây dựng các công cụ phát triển — hai năm trong số đó là trưởng nhóm thiết kế sản phẩm tại Mailgun, một dịch vụ email dành cho nhà phát triển, nơi tôi đã học được nhiều điều về cách thức hoạt động của email và các vấn đề mà nhà phát triển gặp phải khi xây dựng email HTML. Trong bài đăng này, tôi sẽ chia sẻ một số kiến thức của mình về chủ đề này email HTML. Hai từ mà khi kết hợp với nhau sẽ khiến lập trình viên phải rơi nước mắt. Nếu bạn là một nhà phát triển web, thì việc viết mã email sẽ là một nhiệm vụ không thể tránh khỏi vào một lúc nào đó trong sự nghiệp của bạn, cho dù bạn có thích hay không. Mã hóa email HTML là trường học cũ. Hãy nhớ lại năm 1999, khi chúng tôi tự gọi mình là “quản trị viên web” và sử dụng Frontpage, trình soạn thảo WYSIWYG và bảng để đánh dấu trang web của mình Không có nhiều thay đổi trong thiết kế email. Trên thực tế, nó đã trở nên tồi tệ hơn. Với sự ra đời của các thiết bị di động và ngày càng có nhiều ứng dụng email, chúng tôi thậm chí còn có nhiều vấn đề cần giải quyết hơn khi xây dựng email HTML Tôi đã dành nhiều năm để xây dựng các công cụ phát triển — hai năm trong số đó là trưởng nhóm thiết kế sản phẩm tại Mailgun, một dịch vụ email dành cho nhà phát triển, nơi tôi đã học được nhiều điều về cách thức hoạt động của email và các vấn đề mà nhà phát triển gặp phải khi xây dựng email HTML. Trong bài đăng này, tôi sẽ chia sẻ một số kiến thức của mình về chủ đề này Đọc thêm trên SmashingMag.
Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Gặp gỡ “TypeScript trong 50 bài học”, hướng dẫn mới tuyệt vời của chúng tôi về TypeScript. Với các hướng dẫn chi tiết về mã, các ví dụ thực hành và các vấn đề phổ biến — tất cả được chia thành các bài học ngắn, dễ quản lý. Đối với những nhà phát triển biết đủ JavaScript để trở nên nguy hiểm Chuyển đến mục lục ↬Giới thiệu về Gửi EmailLà nhà phát triển chịu trách nhiệm về chiến dịch email hoặc tất cả email mà công ty bạn gửi, bạn sẽ cần biết cách thức hoạt động của email, các yêu cầu pháp lý và cách thực sự gửi email. Các công ty gửi một số loại email khác nhau. Hãy cùng xem Email tiếp thịRất nhiều nhà cung cấp dịch vụ email (ESP) chuyên về email tiếp thị và quảng cáo. Email SendPulse, Giám sát chiến dịch, MailChimp, Emma, Liên hệ liên tục, chỉ kể tên một số. Họ cung cấp các giải pháp đầy đủ để quản lý người đăng ký, làm việc với các mẫu email, chạy các chiến dịch email hàng loạt và báo cáo Email giao dịchEmail giao dịch bao gồm biên nhận, cảnh báo, email chào mừng, đặt lại mật khẩu, v.v. và thường được triển khai bằng các công cụ phát triển và API như SendPulse Transactional, Mailgun, SendGrid và Postmark. Các công cụ này tập trung vào API hơn, ít dựa trên CMS và WYSIWYG hơn; Một giải pháp thay thế cho việc sử dụng dịch vụ là cuộn máy chủ email của riêng bạn bằng thứ gì đó như Postfix. Nhược điểm của điều này là bạn phải thiết lập và định cấu hình nó cũng như hiểu các chi tiết kỹ thuật của việc gửi email, triển khai theo dõi và hủy đăng ký cũng như nhận email được gửi đến hộp thư đến Vòng đời EmailCác dịch vụ email dựa trên vòng đời và hành vi giúp giới thiệu, tương tác, v.v. Rất nhiều ESP tập trung vào tiếp thị cũng cung cấp dịch vụ này, nhưng tôi có xu hướng nhóm các dịch vụ như SendPulse Automation, Intercom, Customer. io, Drip, Vero và ConvertKit vào danh mục này Danh sách email Các phương pháp hay nhấtĐừng mua danh sách email. Có thể có một số dịch vụ hợp pháp ngoài kia, nhưng tốt nhất bạn nên tránh xa các danh sách mua hàng hoàn toàn Kinh nghiệm của tôi là bất kỳ ai mua danh sách email sẽ bị trả lại rất nhiều, khiến địa chỉ Giao thức Internet (IP) của họ bị mang tiếng xấu và email của họ bị chặn bởi các nhà cung cấp dịch vụ Internet (ISP) hoặc gửi đến thư rác. 85% email trên thế giới được coi là thư rác, theo SenderBase; Có hai lựa chọnNgười đăng ký phải xác minh địa chỉ email của họ thêm một bước bổ sung vào quy trình, nhưng điều đó hợp lý và ngăn người khác lạm dụng địa chỉ email của họ bằng cách đăng ký danh sách mà không có sự cho phép của họ. Nó cũng giúp giữ cho danh sách đăng ký của bạn sạch sẽ và là “cách chính xác 100% để xác thực địa chỉ email” CÓ THỂ SPAMĐây là những yêu cầu pháp lý của bạn để gửi email, được thực thi bởi Đạo luật CAN-SPAM năm 2003
MailChimp có một danh sách tốt các yêu cầu pháp lý về email theo quốc gia Phân Tích Và Đo Lường Hiệu SuấtĐo lường mọi thứ. Bạn cần đo lường để biết liệu email của mình có đang được cải thiện hay không. Các con số sẽ khác nhau rất nhiều tùy thuộc vào những gì bạn làm, ngành của bạn, loại email bạn gửi và bối cảnh. Tuy nhiên, nhìn chung
Ngoài ra, hãy nhớ rằng tỷ lệ mở và tỷ lệ nhấp có thể là số liệu phù phiếm (hãy đọc “chúng không thực sự quan trọng”). Vào cuối ngày, điều bạn thực sự muốn theo dõi là mục tiêu cuối cùng hoặc chuyển đổi. Tại Airbnb, họ theo dõi điểm chất lượng email, đây là một chỉ báo tốt về chất lượng tương tác Trình tạo URL của Google có thể giúp theo dõi nếu bạn đang sử dụng Google Analytics Gửi điểm và danh tiếngEmail của bạn có danh tiếng và điểm số liên quan đến chúng. Điều này ảnh hưởng đến cách các ISP và nhà cung cấp hộp thư xử lý email của bạn, liệu họ có chấp nhận hay từ chối email đó và liệu họ có gửi email đến hộp thư đến của người nhận hay chuyển thẳng đến thư rác hay không Một số yếu tố đóng góp là
Gửi Email Hàng LoạtKhi bạn gửi nhiều email (hãy tưởng tượng một chiến dịch có hàng triệu email), chúng không được gửi đi ngay lập tức. Chúng chỉ có thể được gửi với tốc độ nhanh nhất mà máy chủ và địa chỉ IP có thể xử lý chúng. Hãy nhớ rằng người nhận của bạn có thể không nhận được email cùng một lúc Vì vậy, nếu bạn đang gửi hàng triệu email cùng một lúc, có thể bạn sẽ cần khá nhiều IP để xử lý tải Email khách hàngLitmus theo dõi thị phần của các ứng dụng email, dựa trên số liệu thống kê nội bộ của chính nó. Hãy nhớ rằng điều này có thể không giống nhau đối với cơ sở khách hàng của bạn, nhưng đó là một chỉ báo tốt để theo dõi Dưới đây là số liệu thống kê tính đến tháng 12 năm 2016
Hãy nhớ rằng không phải tất cả các email đều có thể được theo dõi. Theo dõi email được thực hiện thông qua theo dõi pixel, vì vậy chỉ những khách hàng có bật hình ảnh mới báo cáo lại Mẫu HTMLXây dựng các mẫu email HTML có thể là một công việc nặng nhọc. Kết quả là, có rất nhiều email được thiết kế kém - lộn xộn, theo chủ đề, dài dòng, vô nghĩa, gây mất tập trung. Nếu bạn thích thử thách hoặc muốn có giao diện độc đáo, thì việc xây dựng của riêng bạn thực sự có thể thú vị và bổ ích. Ngoài ra, một số mẫu email tốt có sẵn
Xây dựng các mẫu email HTMLBây giờ bạn đã biết cách thiết lập và gửi email đúng cách. Quyết định tiếp theo bạn sẽ đưa ra là có mã hóa mẫu HTML của riêng bạn hay không. Điều này phức tạp hơn một chút so với mã hóa trang web trung bình. Hãy đi sâu vào Công cụ kết xuất máy kháchThiết kế email vẫn còn trong thời kỳ đen tối. Do có nhiều ứng dụng email và thiết bị, email của bạn sẽ được hiển thị cho người dùng theo nhiều cách khác nhau Ứng dụng email sử dụng các công cụ khác nhau để hiển thị email HTML
Khách hàng cũng sẽ thêm hương vị phong cách của riêng họ lên trên phong cách của bạn. Ví dụ: Gmail đặt tất cả phông chữ 5 thành 6Nhìn vào số liệu thống kê của riêng bạn để bạn biết những gì để thiết kế Hỗ trợ Gmail cho CSS nội tuyến và truy vấn phương tiệnChỉ gần đây, Google mới công bố hỗ trợ CSS nhúng và truy vấn phương tiện trong Gmail. Điều này rất lớn đối với ngành phát triển email Giờ đây, kể từ tháng 9 năm 2016, Gmail sẽ hỗ trợ nhiều thuộc tính CSS, giúp việc phát triển mẫu cho Gmail dễ dàng hơn rất nhiều Sử dụng bảng HTML để bố tríDiv có các vấn đề về định vị và mô hình hộp trong các ứng dụng khách khác nhau — cụ thể là những ứng dụng sử dụng Microsoft Word để kết xuất (i. e. Quan điểm). Bạn có thể sử dụng div nếu muốn, nhưng sẽ an toàn hơn khi viết mã như năm 1999 và bám vào bảng. Điều này có nghĩa là
Đây là những thực tiễn tốt nhất. Bạn chắc chắn có thể bỏ qua con đường an toàn và vượt lên trên Khi sử dụng bảng, đừng quên 6. Nếu bạn đang sử dụng Premailer, nó có các khai báo CSS đặc biệt để áp dụng các thuộc tính HTML nàyCSS nội tuyếnMột số ứng dụng khách (đáng chú ý nhất là Gmail cho đến gần đây) sẽ loại bỏ bất kỳ CSS nào không được nội tuyến. Bạn có một vài lựa chọn ở đây
Viết nội tuyến khi bạn di chuyển không chính xác là một giải pháp có thể mở rộng hoặc có thể bảo trì, vì vậy tôi có xu hướng không khuyến nghị điều này, nhưng tôi biết rằng nhiều nhà phát triển email thích điều này để duy trì quyền kiểm soát 100%. Nếu bạn viết nội tuyến CSS của mình theo cách thủ công, thì tôi khuyên bạn nên sử dụng đoạn mã và/hoặc ngôn ngữ tạo khuôn mẫu với các phần tử và trình trợ giúp. Điều này sẽ giúp bạn không phải lặp lại chính mình Các trình nội tuyến dựa trên web bao gồm Trình nội tuyến CSS đáp ứng của Email HTML và Trình nội tuyến Email phản hồi của Nền tảng cho Email Đối với nội tuyến có lập trình, tôi khuyên dùng Node. nước ép mô-đun js. Premailer gem và Roadie là những lựa chọn thay thế tốt cho Ruby nútCố gắng đạt được nút khách hàng chéo hoàn hảo là điều khó khăn. Như đã đề cập, bạn nên sử dụng bảng và ô bảng cho hầu hết mọi thứ, kể cả các nút Sở thích của tôi là sử dụng giải pháp sau. Đây là cách thông thường bạn có thể định kiểu một nút cho trang web 2Thay vào đó, hãy viết nó như thế này
Sau đó, khi CSS của bạn được inlined, nó sẽ trông như thế này
Những gì đang xảy ra ở đây? . 5 thứ hai là kích thước của nút. Một số ứng dụng khách (chẳng hạn như Outlook) không nhận ra phần đệm trên thẻ 9, vì vậy chúng tôi sẽ tô màu nền của ô trong bảng. Sau đó, thẻ 9 sẽ chiếm không gian có sẵn trong 5 thứ hai và toàn bộ khu vực có thể nhấp được. Kiểm tra mã và kiểm tra ứng dụng khách trên LitmusĐây chỉ là một cách để thực hiện các nút trong email. Phải thừa nhận rằng không phải lúc nào nó cũng giống hệt nhau ở mọi khách hàng, nhưng web cũng không phải lúc nào cũng hoàn hảo về pixel. Tôi thích điều này hơn vì nó đơn giản hơn và không liên quan đến việc sử dụng nội dung hình ảnh hoặc VML VML là gì? . Vector Markup Language (VML) được hỗ trợ bởi các phiên bản cũ của Outlook. Theo Microsoft, kể từ Internet Explorer (IE) 10, VML đã lỗi thời, điều đó có nghĩa là nó không còn được hỗ trợ trong các phiên bản IE mới. Tuy nhiên, miễn là có Outlook 2007, 2010 và 2013, bạn sẽ thấy nó được sử dụng, thường là cho hình nền kiểu chữNói chung, gắn bó với phông chữ hệ thống tiêu chuẩn là dễ dàng nhất. Điều này bao gồm Helvetica, Arial, v.v. Tuy nhiên, chúng tôi có thể sử dụng phông chữ web, chẳng hạn như Google Fonts. Đặt chúng phía sau một truy vấn phương tiện có điều kiện của WebKit để Outlook không làm chúng rối tung lên 0Hãy nhớ bao gồm một họ phông chữ, cỡ chữ và màu sắc cho mỗi 5, nếu không, bạn có nguy cơ bị khách hàng ghi đè lên các kiểu chữ đã chọn cẩn thận của mìnhđiều kiệnChúng tôi có thể áp dụng các kiểu CSS cụ thể và hiển thị hoặc ẩn các thành phần và nội dung cho các phiên bản Outlook khác nhau Các mục tiêu sau đây nhắm mục tiêu tất cả các phiên bản Outlook dựa trên Microsoft Word 2Đoạn mã tiếp theo này nhắm mục tiêu tất cả các phiên bản Outlook dựa trên IE 3Chúng tôi cũng có thể nhắm mục tiêu số phiên bản cụ thể của Outlook 4Chúng tôi có thể nhắm mục tiêu các máy khách dựa trên WebKit bằng truy vấn phương tiện 5Hình ảnh và Truyền thôngHình ảnh trong EmailMột số khách hàng sẽ hiển thị hình ảnh theo mặc định. Một số sẽ không. Hãy ghi nhớ điều này khi đưa hình ảnh vào nội dung email của bạn. Điều này cũng ảnh hưởng đến số liệu theo dõi vì hình ảnh thường được sử dụng để theo dõi lượt mở
Hãy nhớ bao gồm văn bản 03 tốt cho tất cả các hình ảnh của bạn. Văn bản có thể cho người dùng biết hình ảnh nói gì hoặc chỉ mô tả nó là gì (ví dụ: “logo công ty”). Bạn có thể sáng tạo với văn bản 03 cho những khách hàng tắt hình ảnh, như Email Monks đã làmHãy nhớ bao gồm thiết lập lại cơ bản cho tất cả các hình ảnh 8GIF hoạt hình được hỗ trợ trong hầu hết các máy khách. Các phiên bản Outlook 2007 đến 2013 không hỗ trợ GIF động, thay vào đó sẽ quay lại khung hình đầu tiên Hãy nhớ nén nội dung phương tiện của bạn và tải chúng lên mạng phân phối nội dung (CDN), chẳng hạn như Amazon Web Services, Cloudinary hoặc imgix. Hầu hết các ESP tiếp thị sẽ xử lý việc này cho bạn Đồ họa vector có thể mở rộng (SVG) có rất nhiều lợi thế trên web. Như bạn mong đợi, hỗ trợ qua email khác nhau và SVG yêu cầu một số điều kiện hoặc thủ thuật dự phòng. Tôi thường khuyên bạn nên tránh xa SVG trong email, nhưng nếu bạn muốn nghiêm túc về nó, thì CSS-Tricks có hướng dẫn về hỗ trợ SVG trong email Đối với hình ảnh sẵn sàng cho Retina, hãy cung cấp hình ảnh lớn hơn (1. 5× thành 3×) và thay đổi kích thước. Tôi thường lưu hình ảnh chất lượng thấp có kích thước 2×, hình ảnh này hoạt động tốt. (Tôi đã viết thêm về kỹ thuật này. ) Hãy nhớ rằng, đối với Outlook, bạn cần khai báo độ rộng của hình ảnh với thuộc tính 05. Nếu không, Outlook có thể hiển thị chiều rộng thực của hình ảnh và phá vỡ email của bạnVideo trong EmailVideo được hỗ trợ trong iOS, Apple Mail và Outlook. com. Bạn có thể sử dụng truy vấn phương tiện để hiển thị hoặc ẩn video dựa trên ứng dụng khách. Email on Acid có nhiều hơn về hỗ trợ video qua email Để có cảm hứng, hãy xem hướng dẫn của Kevin Mandeville về mã hóa video HTML5 làm nền trong email — nội dung ấn tượng và đáng xem Biểu mẫu trong EmailHỗ trợ cho các phần tử biểu mẫu khác nhau. Cố gắng tránh xa và liên kết với một biểu mẫu bên ngoài nếu bạn cần. Campaign Monitor đưa ra một số lời khuyên về các biểu mẫu Rõ ràng, nó phụ thuộc vào mục tiêu của bạn. Tránh xa các biểu mẫu sẽ an toàn hơn, nhưng Rebelmail và Mixmax đã làm được những điều thú vị với các biểu mẫu cho khảo sát và thương mại điện tử, với sự hỗ trợ dự phòng tốt Tác vụ GmailGoogle cung cấp các hành động hữu ích cho Gmail. Bạn có thể đã nhìn thấy chúng trên GitHub cho các vấn đề hoặc trên Amazon cho các đơn đặt hàng Thêm mã là đơn giản. Bạn có hai lựa chọn
Bắt danh sách trắng bao gồm một vài bước nữa. Bạn có thể kiểm tra các hành động của Gmail bằng địa chỉ 06Văn bản tiêu đề trướcMột cái gì đó quan trọng nhưng thường bị lãng quên là văn bản tiêu đề trước. Một số khách hàng hiển thị văn bản xem trước bên cạnh hoặc dưới dòng chủ đề. Những ứng dụng khách này bao gồm iOS, Apple Mail, Outlook 2013, Gmail và AOL Khách hàng sẽ lấy đoạn văn bản đầu tiên họ tìm thấy trong nội dung email của bạn và hiển thị nó ở đây. Tận dụng tối đa điều này và thêm một yếu tố ẩn vào nội dung cơ thể của bạn xuất hiện đầu tiên. Văn bản này sẽ cung cấp thêm động lực để người dùng mở email của bạn. Ẩn văn bản như vậy 1Sử dụng công cụ tiêu đề và chủ đề của Austin Woodall để xem trước các chủ đề và tiêu đề email của bạn Kiểm tra emailTôi không nghĩ mình đã từng gửi email thành công ngay lần đầu tiên. Luôn luôn có điều gì đó cần sửa, luôn có lỗi đánh máy, luôn có sự cố kết xuất trong Outlook, luôn có điều gì đó tôi quên thêm vào Bạn có thể kiểm tra email của mình theo một số cách
Làm thế nào để bạn gửi email HTML cho chính mình? . Nó khó hơn bạn nghĩ. PutsMail cho phép bạn thực hiện việc này khá dễ dàng và Thunderbird cho phép bạn soạn thảo bằng trình soạn thảo HTML của nó MIME nhiều phầnMột email văn bản thuần túy chỉ có vậy, văn bản thuần túy. Email HTML chỉ là HTML. Hầu hết các email bạn gửi hoặc nhận là email nhiều phần MIME (Multipurpose Internet Mail Extensions) (đừng nhầm với loại MIME). Tiêu chuẩn này kết hợp cả văn bản thuần túy và HTML, để người nhận quyết định hiển thị cái nào Khi bạn gửi email, cho dù là giao dịch hay hàng loạt, hãy bao gồm cả phiên bản HTML và văn bản thuần túy. Theo suy nghĩ của bạn, ngay cả khi mọi người đều sử dụng ứng dụng khách hiển thị HTML, thì vẫn gửi văn bản thuần túy Ngoài ra, hãy lưu ý rằng một số ứng dụng khách hiển thị email văn bản thuần dưới dạng HTML; . Hầu hết các ESP sẽ xây dựng MIME cho bạn, vì vậy bạn không thực sự cần phải lo lắng về điều đó. Một số cũng sẽ tạo phiên bản thuần văn bản, dựa trên HTML của bạn mẹo chuyên nghiệp. Trong Gmail, chọn “Hiển thị bản gốc” từ trình đơn thả xuống để xem MIME đầy đủ Một phần MIME mới đã xuất hiện. 07. Nội dung này sẽ chỉ được hiển thị trong Apple Watch (và bất kỳ ứng dụng khách nào khác hỗ trợ loại MIME này trong tương lai)khả năng tiếp cậnTrên web, nếu bạn tuân theo các tiêu chuẩn và phương pháp hay nhất, đồng thời sử dụng đánh dấu ngữ nghĩa và cú pháp HTML hợp lệ, thì bạn có xu hướng nhận được khả năng truy cập cơ bản ngay lập tức. Thật không may, với email, do chúng tôi bị hack quá nhiều và hỗ trợ HTML kém nên khả năng truy cập thường bị bỏ qua Tôi đã thấy rất ít cuộc thảo luận về khả năng truy cập email, nhưng một điều nổi bật là bài đăng của Mark Robbins về khả năng truy cập. Ông đề nghị như sau
Thiết kế email đáp ứng
“Thiết kế web đáp ứng” là một cụm từ được đặt ra bởi Ethan Marcotte vào năm 2010 Bằng cách kết hợp bố cục linh hoạt, dựa trên lưới và truy vấn phương tiện CSS3, chúng tôi có thể tạo một thiết kế đáp ứng tốt hình dạng của màn hình hiển thị nó Trong thế giới email, chúng ta vẫn có thể sử dụng thiết kế linh hoạt, bố cục dựa trên lưới và truy vấn phương tiện. Vấn đề là không phải tất cả khách hàng đều hỗ trợ những. Do đó, chúng tôi cần một số hack trên đường đi Cho đến gần đây, Gmail không hỗ trợ truy vấn phương tiện. Rất may, kể từ tháng 9 năm 2016, hầu hết các khách hàng của họ đều. Tuy nhiên, một số ứng dụng khách di động vẫn không, bao gồm Yahoo, Windows Phone 8 và Gmail cho Android Một số kỹ thuật được sử dụng trong thế giới email để giải quyết vấn đề thiếu hỗ trợ cho các truy vấn phương tiện. Một số thuật ngữ bạn sẽ nghe là “linh hoạt”, “thích ứng”, “phản hồi nhanh”, “lai” và “xốp. ” DịchGiải pháp đơn giản nhất là bám vào một cột duy nhất và làm cho email của bạn trôi chảy. Điều này có nghĩa là khi khung nhìn co lại, vùng nội dung của bạn co lại 0Đáp ứng và thích ứngSử dụng truy vấn phương tiện và điểm dừng, chúng tôi có thể cung cấp các kiểu thay thế cho các chế độ xem có kích thước khác nhau. Chúng ta cũng có thể ẩn hoặc hiện các phần tử Điều này bắt đầu trở nên phức tạp khi bạn giới thiệu lưới và cột. Bạn có thể có bố cục hai cột và sau đó chuyển sang bố cục một cột xếp chồng lên nhau bên dưới chiều rộng khung nhìn nhất định Tuy nhiên, như chúng ta đã thấy, các truy vấn phương tiện không được hỗ trợ ở mọi nơi, vì vậy điều này không phải lúc nào cũng đáng tin cậy lai và xốpKỹ thuật này sử dụng một chút linh hoạt, một chút phản hồi nhanh và một vài thủ thuật để hỗ trợ Outlook. Chúng tôi cũng đảm bảo rằng các cột xếp chồng lên nhau mà không có truy vấn phương tiện Kỹ thuật này được phác thảo bởi ActionRocket và Nicole Merlin đã viết một hướng dẫn từng bước tuyệt vời về nó Đây là một đoạn mã tôi sử dụng để tạo hầu hết các email của mình 1 2Hãy xem kho lưu trữ nguồn mở xốp của Fabio Carneiro trên GitHub và đọc bài viết của Stig về mã hóa email ưu tiên thiết bị di động. Rémi Parmentier cũng có một kỹ thuật phản hồi khác không cần truy vấn phương tiện và sử dụng hàm 26Hình ảnh phản hồiNhư đã đề cập, sử dụng hình ảnh Retina ở 1. 5× đến 3× và đặt kích thước hình ảnh nội tuyến 3Chúng tôi không thể dựa vào 27 vì một số khách hàng bỏ qua nó. Bạn cũng sẽ muốn nhúng CSS sau 4Tự động hóa quy trình làm việc của bạnQuá trình kết hợp một email chống đạn rất phức tạp. Có rất nhiều bước, và có rất nhiều điều sai sót Giống như bất kỳ nhiệm vụ đơn điệu nào với các bước, tôi khuyên bạn nên tự động hóa những gì bạn có thể để bạn xây dựng hệ thống một lần và giúp công việc trong tương lai dễ dàng hơn Brian Graves có một bài viết hay về cách tạo mô-đun email của bạn. Giống như bạn có một hệ thống thiết kế và thư viện mẫu cho trang web hoặc ứng dụng, bạn nên làm như vậy đối với email, làm cho các thành phần có thể tái sử dụng và email nhất quán trên sản phẩm và công ty của bạn Kevin Mandeville khuyên bạn nên sử dụng các đoạn mã có thể tái sử dụng để tối ưu hóa quy trình làm việc của mình, để bạn không phải viết lại mã liên tục. Trong bài đăng của mình, anh ấy phác thảo cách sử dụng đoạn trích trong các trình chỉnh sửa hiện đại (chẳng hạn như Atom và Sublime) và anh ấy chỉ ra thư viện đoạn trích do cộng đồng đóng góp do Litmus lưu trữ Về phần mình, tôi đã tổng hợp và mã nguồn mở quy trình làm việc của Grunt để tự động hóa các bản dựng email. Nó chạy nhiều tác vụ khác nhau, chẳng hạn như CSS nội tuyến, nén hình ảnh, tải hình ảnh lên CDN, gửi bản xem trước và thử nghiệm với Litmus, tất cả chỉ bằng một lệnh. Nếu bạn chưa quen với Grunt, tôi đã viết một bài hướng dẫn chi tiết về cách thức hoạt động của nó. Foundation for Email cũng có một số công cụ tự động hóa tuyệt vời dành cho nhà phát triển, cũng như Mailjet với khung email phản hồi MJML Nhìn về tương laiGoogle vừa mới triển khai hỗ trợ cho các truy vấn phương tiện; . Vì vậy, tương lai có vẻ tươi sáng hơn nhiều Ngày càng có nhiều công ty và nhà phát triển đang thử nghiệm những gì có thể với công nghệ email. Hoạt hình CSS, âm thanh, giỏ hàng trong email. Mong đợi nhiều trường hợp email tương tác và động xuất hiện vào năm 2017 Sự kết luậnThiết kế và phát triển email là một con thú. Nó rất giống với việc xây dựng một trang web… 10 năm trước. Các nhà cung cấp ứng dụng email không tiến bộ như các nhà cung cấp trình duyệt web trong việc áp dụng các tiêu chuẩn mới và người dùng cũng như các công ty của chúng tôi không áp dụng các ứng dụng email mới như chúng tôi làm với trình duyệt web. Thêm vào đó là sự gia tăng của thiết bị di động và chúng tôi rơi vào tình trạng phải hỗ trợ sự kết hợp phức tạp giữa ứng dụng khách và phiên bản Phần giới thiệu của tôi ở đây là tổng quan cấp cao; . Hy vọng rằng nó đã cung cấp cho bạn cái nhìn sâu sắc về thế giới xây dựng và gửi email, đồng thời các đoạn mã và tài nguyên đã thêm vài giờ vào cuộc sống của bạn Bạn có thể gửi email tệp HTML không?Hầu hết các ứng dụng email đều gửi thư ở định dạng văn bản thuần túy theo mặc định, vì vậy HTML sẽ không hiển thị. Người nhận của bạn sẽ chỉ nhìn thấy tất cả mã nguồn thô đó, thay vì email đẹp mắt mà bạn đã tạo cho họ. Thay vào đó, bạn cần gửi email HTML từ máy chủ của mình ở định dạng MIME thay thế nhiều phần .
Cách tốt nhất để tạo email từ nội dung HTML hiện có là gì?Ngoài các mẫu, bạn có thể tạo email bằng cách sử dụng. dán HTML. Sử dụng mã HTML hiện có để tạo email của bạn. . Nhấp vào +Tạo Nhấp vào Tin nhắn Email Chọn mẫu Chọn tab Đã lưu Chọn một mẫu và nhấp vào Chọn. . Xác định các thuộc tính của email |