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 ↬
Bản tin email
Email [đập vỡ] của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.
- Take action now
5 thành
6Take action now Nhì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ện
Chỉ 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à
7 thay vìTake action now
8,Take action now
9 thay vìTake action now
0,Take action now
1 thay vìTake action now
2,Take action now - CSS2 thay vì CSS3,
- HTML4 thay vì HTML5,
3 thay vìTake action now
4,Take action now - Thuộc tính HTML thay vì CSS,
- CSS nội tuyến thay vì biểu định kiểu hoặc khối
5Take action now
Đâ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àyTake action now CSS nội tuyến
Mộ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 CSS nội tuyến khi bạn đi,
- sử dụng một CSS inliner dựa trên web,
- sử dụng một trình nội tuyến CSS có lập trình,
- hãy để ESP của bạn xử lý nội tuyến cho bạn [nếu nó hỗ trợ]
Thay vào đó, hãy viết nó như thế này
Take action now Sau đó, khi CSS của bạn được inlined, nó sẽ trông như thế này
Take action now 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ẻTake action now
9, vì vậy chúng tôi sẽ tô màu nền của ô trong bảng. Sau đó, thẻTake action now
9 sẽ chiếm không gian có sẵn trongTake action now
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 LitmusTake action now Đâ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
0Take action now Hã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ìnhTake action now điều kiện
Chú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
2Take action now Đ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
3Take action now Chúng tôi cũng có thể nhắm mục tiêu số phiên bản cụ thể của Outlook
4Take action now Chú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
5Take action now Hình ảnh và Truyền thông
Hình ảnh trong Email
Mộ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ở
- Outlook chặn kết xuất hình ảnh theo mặc định
- Apple Mail không
- Gmail không [nữa]
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ảnTake action now
03 cho những khách hàng tắt hình ảnh, như Email Monks đã làmTake action now 8Take action now GIF 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ạnTake action now Video trong Email
Video đượ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 Email
Hỗ 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ụ Gmail
Google 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
Take action now 06Văn bản tiêu đề trước
Mộ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
1Take action now Sử 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 email
Tô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
- Gửi email cho chính bạn và kiểm tra nó trên ứng dụng khách trên máy tính để bàn [Outlook], ứng dụng web [Gmail] và ứng dụng khách di động [iOS Mail]
- Tự động kiểm tra bằng Litmus hoặc Email on Acid
- Đọc lại nội dung và kiểm tra bố cục hiển thị
- Thử nghiệm A/B với nhiều loại nội dung, độ dài nội dung và dòng chủ đề
khả năng tiếp cận
Trê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
- Thêm
08 vào mỗi bảng để rõ ràng bảng đang được sử dụng để bố tríTake action now - Cung cấp văn bản
03 với các mô tả có ý nghĩaTake action now - Nếu bạn không cần hoặc muốn văn bản
03, thì hãy sử dụngTake action now
21 để trình đọc màn hình biết văn bản đó được để trốngTake action now - Sử dụng các thẻ HTML ngữ nghĩa, chẳng hạn như
22 vàTake action now
23, nếu cóTake action now - Sử dụng thuộc tính
24 cho các phần tử như đầu trang và chân trang [ví dụ:Take action now
25]Take action now
Thiết kế email đáp ứng
- Email mở trên di động ở mức 50% và đang tăng lên. Số liệu chính xác phụ thuộc vào báo cáo bạn kiểm tra và đối tượng bạn phục vụ, nhưng tôi nghĩ tất cả chúng ta đều có thể đồng ý rằng điều này quan trọng
- Thị phần ứng dụng email khách, tính đến tháng 8 năm 2016, đặt iPhone ở mức 33%, iPad ở mức 11% và Android ở mức 10% [tức là hơn 50%. ]
- MailChimp nhận thấy rằng số lần nhấp duy nhất giữa những người dùng thiết bị di động cho các chiến dịch phản hồi đã tăng từ 2. 7 đến 3. 1% — tăng gần 15%
“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ịch
Giả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
0Take action now Đáp ứng và thích ứng
Sử 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ốp
Kỹ 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ó
Take action now 1
2Take action now Hã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
26Take action now Hình ảnh phản hồi
Như đã đề 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
3Take action now Chú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 sauTake action now
4Take action now Tự động hóa quy trình làm việc của bạn
Quá 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 lai
Google 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ận
Thiế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ạoNhấp vào Tin nhắn EmailChọn mẫuChọn tab Đã lưuChọn một mẫu và nhấp vào Chọn. .Xác định các thuộc tính của email