Advertisement
  1. Web Design
  2. Email

Hướng dẫn đầy đủ để thiết kế cho email

Scroll to top

() translation by (you can also view the original English article)

Thiết kế cho email là về việc đi đến điểm và tận dụng tối đa cơ hội ngắn ngủi mà bạn có với những người đăng ký. Bạn chỉ nhận được một lần bắn, vì vậy, đáng để sử dụng càng nhiều thủ thuật trong sách càng tốt để đảm bảo thông điệp của bạn được thông qua. Các nguyên tắc cơ bản là tất cả về việc tôn trọng độc giả của bạn bằng cách cung cấp cho họ một cái gì đó có giá trị để đổi lấy thời gian của họ, đó là lý do họ đã đăng ký để nghe từ bạn ngay từ đầu.

Lưu ý trước khi chúng tôi bắt đầu

Một số gợi ý mà tôi sẽ đưa ra sẽ không áp dụng cho mọi danh sách, công ty hoặc sản phẩm. Như mọi khi với email, hãy kiểm tra mọi thứ mới và xem nó hoạt động như thế nào để xác định những gì tốt nhất cho người đăng ký của bạn.

Quy tắc số 1: Hãy minh bạch

Điều này thực sự quan trọng. Tránh sử dụng tên người gửi khó hiểu hoặc khó hiểu, dòng chủ đề, tiêu đề hoặc bản sao. Điều này sẽ chỉ gây nhầm lẫn cho độc giả của bạn và làm cho họ có nhiều khả năng xóa email của bạn hoặc đánh dấu nó là rác.

Nói cho độc giả của bạn biết bạn là ai, chính xác lý do tại sao bạn gửi email cho họ và chính xác những gì họ sẽ rút ra khỏi trải nghiệm. Có tất cả những thứ này gần với đầu email nhất mà bạn có thể nhận được. Điều này có nghĩa là ngay khi email của bạn được mở, ý định và danh tính của bạn sẽ rõ ràng và đề xuất của bạn sẽ không bị bỏ qua.

Đảm bảo tên người gửi, dòng tiêu đề, tiêu đề và nội dung 'trên màn hình đầu tiên của bạn đều có ý nghĩa và phù hợp với lý do bạn liên hệ với độc giả của mình.

Try this Clear and obvious sender name subject line logo and opening contentTry this Clear and obvious sender name subject line logo and opening contentTry this Clear and obvious sender name subject line logo and opening content
Thử đi! Tên người gửi rõ ràng và rõ ràng, dòng chủ đề, logo và nội dung mở.

Quy tắc số 2: Rõ ràng, Công ước Embrace

Nó có vẻ nhàm chán, nhưng thông thường thực sự có ích với email. Email rất nhỏ và chúng được mở trong một khoảng thời gian rất ngắn, vì vậy chức năng của mọi yếu tố cần phải rõ ràng.

Làm cho liên kết của bạn rõ ràng

Tạo các nút đẹp, lớn, dễ bấm và dễ bấm cho các liên kết của bạn. Trên thiết bị di động, làm cho chúng 100% chiều rộng để có thể dễ dàng chạm bằng ngón tay cái (không cần phải cố hết sức).

Nếu bạn cũng muốn có các liên kết văn bản trong bản sao của mình, hãy đảm bảo chúng được in đậm và có màu tương phản để chúng nổi bật. Cố gắng không để quá nhiều liên kết gần nhau, điều này có thể khiến người dùng vô tình chạm nhầm vào liên kết.

Khoảng 50% số lần mở là trên các thiết bị cảm ứng hiện nay, vì vậy hãy tránh ngôn ngữ không có ý nghĩa, chẳng hạn như "bấm vào đây".

email-graphemail-graphemail-graph
Từ Justine Jordan trên litmus.com

Đừng ngần ngại thêm một mũi tên, các nghiên cứu đã chỉ ra rằng họ hiệu quả hơn nhưng, như mọi khi, thử nghiệm trên các thuê bao của chính bạn.

Làm cho lợi ích của nhấp chuột rõ ràng

Các nút tốt nhất kết hợp lợi ích của việc nhấp qua với chính hành động đó. Ví dụ: Bắt đầu sử dụng tài khoản mới của bạn.

Quy tắc số 3: Nói ít hơn

Đừng viết nhiều. Người nhận của bạn sẽ quét email để tìm những thứ mà họ quan tâm thay vì đọc toàn bộ email, vì vậy hãy chia nó thành các miếng có kích thước nhỏ nhất có thể.

Mục đích của bạn với email tiếp thị là khiến mọi người nhấp vào trang web của bạn, vì vậy không cần phải trì hoãn điều đó bằng một cuộc độc thoại dài, đặc biệt là một email có vẻ dài sẽ khiến độc giả của bạn mệt mỏi về tinh thần và khiến họ dễ bị tổn thương hơn để nhấn "Xóa".

Try this Short and punchy bites with clear calls to actionTry this Short and punchy bites with clear calls to actionTry this Short and punchy bites with clear calls to action
Thử đi! Cắn ngắn và đấm, với lời kêu gọi hành động rõ ràng.

Làm cho nó có thể quét được

Thiết kế email của bạn để được punchy. Văn bản sẽ xuất hiện trong các đoạn rõ ràng, phân định mà đi đến điểm.

Sử dụng các tiêu đề rõ ràng và gọi ra các khái niệm chính theo kiểu in đậm để người đọc quét của bạn có thể có được ý chính, ngay cả khi họ không đọc mọi thứ (mà hầu hết trong số họ sẽ không).

Try this Short punchy sentences with obvious buttons Try this Short punchy sentences with obvious buttons Try this Short punchy sentences with obvious buttons
Thử đi! Câu cú đấm ngắn với các nút rõ ràng.

Bạn có thể nói nhiều hơn về sau

Nếu bạn đang kinh doanh trong việc gửi nội dung dài hơn mà độc giả của bạn thích, tôi chắc chắn không nói rằng không có chỗ cho nó trong tiếp thị qua email.

Mọi người đọc email trong tất cả các loại kịch bản khác nhau. Một số người sẽ 'di chuyển' và giữa các cuộc họp quan trọng, những người khác có thể vô cùng buồn chán trong phòng chờ của nha sĩ và tôi rất tiếc phải nói với bạn rằng những người khác vẫn sẽ ở trong nhà vệ sinh. Các kịch bản này rất khác nhau, nhưng thật dễ dàng để phục vụ mọi người bằng cách tuân theo một hệ thống phân cấp logic.

Trước tiên hãy cung cấp thông tin ngắn nhất và mạnh nhất, sau đó bao gồm nội dung dạng dài hơn của bạn bên dưới. Bằng cách này, bạn không buộc bất kỳ ai phải lội qua nội dung dài hơn ngoại trừ những người đang tích cực làm việc theo cách của họ thông qua email của bạn.

Lặp lại lời kêu gọi hành động chính của bạn

Nếu email của bạn dài và người dùng đã cuộn toàn bộ nội dung của bạn, hãy đảm bảo họ có quyền truy cập dễ dàng vào một cuộc gọi hành động khác mà không cần phải di chuyển ngược lên đầu email của bạn.

Try this Prioritise your main proposition then include secondary andor lengthier content underneathTry this Prioritise your main proposition then include secondary andor lengthier content underneathTry this Prioritise your main proposition then include secondary andor lengthier content underneath
Thử đi! Ưu tiên đề xuất chính của bạn, sau đó bao gồm nội dung thứ cấp và / hoặc dài hơn bên dưới.

Email và thông báo quảng cáo

Những mẹo này áp dụng cho các thông điệp tiếp thị trong đó thường có một hoặc hai điều chính mà bạn đang liên hệ với người đăng ký của mình.

Đừng pha loãng tin nhắn của bạn

Nếu bạn đang viết cho độc giả của bạn về một điều, hãy cố gắng không làm loãng thông điệp bằng cách thêm nhiều thứ khác bên dưới hoặc trong một thanh bên. Với mỗi tùy chọn bổ sung, bạn sẽ có nguy cơ bị trật bánh.

Loại bỏ tất cả các yếu tố không cần thiết

Đánh giá thiết kế email của bạn, xác định bất cứ điều gì không cần thiết để truyền tải thông điệp của bạn, sau đó xóa nó. Ít phiền nhiễu hơn có nghĩa là giao tiếp rõ ràng hơn.

Don mệnh đưa ra quá nhiều lựa chọn

Quá nhiều lựa chọn làm tăng tải nhận thức cho độc giả của bạn, khiến họ ít có khả năng đưa ra quyết định.

Hãy suy nghĩ về yêu cầu tối thiểu là gì để khiến ai đó nhấp vào trang web của bạn, sau đó dần dần giới thiệu thêm chi tiết cần thiết. Quá tải những người có quá nhiều sự lựa chọn khi bắt đầu chỉ nhằm khuyến khích từ bỏ nhiệm vụ.

Nếu bạn đang cố gắng để người đăng ký của bạn chọn một sản phẩm và mua, đừng trình bày tất cả các tùy chọn trong email. Chỉ cần đưa chúng qua trang web của bạn và bắt đầu giới thiệu sự phức tạp cần thiết ở đó.

Thử dần dần thu hút mọi người

Đôi khi thật đáng sợ khi nhận được một email ngay lập tức, "MUA NÓ! ĐĂNG KÝ! CAM KẾT !!"

Thay vào đó, hãy cố gắng đưa mọi người đến trang web của bạn ở bước trước của hành trình, chẳng hạn như "chọn cỡ giày của bạn để xem các kiểu có sẵn" thay vì "mua những đôi giày này".

Có một đầu mối

Thực hiện cuộc gọi chính để hành động trở thành tiêu điểm chính của email của bạn. Đảm bảo độc giả của bạn không phải tìm kiếm lời kêu gọi hành động trong một biển giống nhau.

Tạo một tiêu điểm là dễ dàng. Trước hết, hãy chắc chắn rằng bạn có một mục tiêu chính. Sau đó, bạn chỉ cần làm cho nó lớn hơn mọi thứ khác và đảm bảo có đủ không gian xung quanh nó để mắt được thu hút vào khu vực này trước tiên. Điều này áp dụng nhiều hơn cho thiết kế máy tính để bàn của bạn khi người dùng sẽ thấy khá nhiều email cùng một lúc.

Sử dụng khoảng trắng xung quanh các phần tử

Nếu bạn có nhiều thứ có kích thước và trọng lượng tương tự nhau mà không có khoảng trắng xung quanh chúng, chúng sẽ xuất hiện dưới dạng một khối lớn, vô định hình mà mắt sẽ đơn giản bỏ qua. Sử dụng khoảng trắng xung quanh các yếu tố để giúp thu hút mọi thứ quan trọng.

Try this A clear focal point and a structure that guides the readerTry this A clear focal point and a structure that guides the readerTry this A clear focal point and a structure that guides the reader
Thử đi! Một tiêu điểm rõ ràng và một cấu trúc hướng dẫn người đọc.

Lời khuyên phổ quát

Nếu mọi người muốn rời đi, hãy để họ đi

Don Tiết chôn, giấu hoặc che khuất thông tin hủy đăng ký của bạn. Ngoài việc nó là bất hợp pháp ở nhiều quốc gia, nó còn thô lỗ và phản tác dụng. Nếu ai đó muốn hủy đăng ký nhận bản tin của bạn và bạn không thể làm như vậy, họ sẽ quay trở lại làm thuê bao hạnh phúc. Nó sẽ tạo ra ý chí xấu đối với thương hiệu của bạn vì họ sẽ buộc phải tiếp tục xử lý email của bạn (hoặc thiết lập bộ lọc để gửi thư của bạn vào thùng rác).

Tránh có quá nhiều sự phân chia theo chiều dọc

Càng có nhiều phân chia theo chiều dọc trong bố cục, nó càng gây mất tập trung cho mắt. Dán hai hoặc ba bộ phận dọc trong một lưới.

Đường viền rắn cũng rất dễ gây rối mắt, vì vậy hãy giữ chúng ở mức tối thiểu.

Try this Fewer vertical divisions make it easier on the eyeTry this Fewer vertical divisions make it easier on the eyeTry this Fewer vertical divisions make it easier on the eye
Thử đi! Ít phân chia theo chiều dọc làm cho nó dễ nhìn hơn.

Cân nhắc thực tế

Giữ nó dưới 600px

Đây thường là chiều rộng tối đa an toàn nhất cho thiết kế máy tính để bàn của bạn để đảm bảo người dùng sẽ không phải cuộn theo chiều ngang.

Sử dụng tăng cường tiến bộ

Trước khi đưa ra mỗi hộp góc tròn và thả bóng, hãy suy nghĩ về cách bố trí của bạn sẽ hoạt động mà không có những cải tiến này. Hãy coi đó là thiết kế 'cơ sở' của bạn, theo đó bạn sẽ thêm các góc và bóng tròn của mình làm cải tiến.

Tạo các hình in đậm với các cạnh vuông trông cũng tuyệt vời và người dùng trên các ứng dụng email mới hơn sẽ thấy các góc tròn của bạn như một phần thưởng bổ sung.

Cách tiếp cận này sẽ giúp bạn tiết kiệm rất nhiều thời gian khi xây dựng email của bạn. Nếu bạn phải tạo một hộp văn bản được làm tròn góc với bóng đổ và nó phải hoạt động trên mọi ứng dụng email, bạn sẽ phải xây dựng các hiệu ứng bằng hình ảnh, có thể rất tốn thời gian, đặc biệt là khi tạo các mẫu có thể sử dụng lại.

Cung cấp cho thiết kế của bạn một số phòng thở

Nắm bắt thực tế rằng không phải lúc nào cũng có thể khiến mọi thứ trông giống hệt nhau trong mỗi ứng dụng email xuống đến pixel cuối cùng. Thiết kế với điều này trong tâm trí để giảm bớt đau đầu xuống theo dõi.

Tạo các thiết kế có một chút phòng thở, nơi sẽ không có vấn đề gì nếu một khách hàng thêm 7 pixel không gian bí ẩn bên dưới. Ít nhất, hãy kiềm chế những chi tiết nhỏ cực kỳ khó nhìn sẽ bị hỏng nếu chúng là một pixel.

Hãy xem xét toàn bộ trải nghiệm

Email của bạn là một tổng thể gắn kết, vì vậy hãy suy nghĩ về cách mọi thứ hoạt động cùng nhau. Người dùng sẽ thấy email trong hộp thư đến của họ trước và đọc tên người gửi, chủ đề và tiêu đề của bạn. Sau đó, họ có thể sẽ thấy một phiên bản email của bạn với hình ảnh bị tắt, mặc định cho hầu hết các ứng dụng email. Cuối cùng, họ sẽ thấy email của bạn như bạn dự định, nếu họ kích hoạt hình ảnh.

Đảm bảo rằng mọi thứ liên kết tốt với nhau và người đăng ký vẫn có thể hiểu tin nhắn của bạn, ngay cả khi hình ảnh bị tắt.

In the email inbox left and with images off rightIn the email inbox left and with images off rightIn the email inbox left and with images off right
Trong hộp thư đến email (trái) và tắt hình ảnh (phải).

Donith bao gồm thông điệp chính của bạn trong một hình ảnh. Nó sẽ bị chặn theo mặc định và nhiều ứng dụng email won won hiển thị thẻ alt của bạn.

Trong ví dụ dưới đây, bạn có thể thấy hầu hết mọi thứ trong tin nhắn sẽ bị bỏ qua nếu không bật hình ảnh, bởi vì tất cả văn bản được chứa trong hình ảnh và văn bản thay thế không được tạo kiểu để có thể đọc được.

A Velocity Frequent Flyer email with images off left and images onA Velocity Frequent Flyer email with images off left and images onA Velocity Frequent Flyer email with images off left and images on
Một email Flyocity thường xuyên có hình ảnh tắt (trái) và hình ảnh trên (phải).

Phong cách thẻ Alt của bạn

Bạn có thể thêm các kiểu CSS vào hình ảnh (hoặc ô cha hoặc thẻ liên kết của chúng) để đảm bảo rằng chúng hiển thị độc đáo trong các máy khách hỗ trợ thẻ alt. Điều này thực sự có thể cải thiện trải nghiệm tổng thể cho các thuê bao của bạn.

Kiểm tra mù màu

Nếu bạn đang sử dụng Photoshop, điều này được tích hợp sẵn. Ngoài ra còn có rất nhiều công cụ sẽ cho phép bạn xem thiết kế của bạn sẽ trông như thế nào đối với 10% người bị một số dạng thiếu thị lực màu.

Liên kết mọi thứ

Khi xây dựng, không chỉ liên kết các nút của bạn. Hãy chắc chắn rằng bạn liên kết mọi thứ để người dùng có thể nhấp vào bất cứ đâu. Liên kết hình ảnh, nút và tiêu đề. Heck, thậm chí liên kết văn bản nếu nó hoạt động.

Cách thiết kế email thân thiện với thiết bị di động

Có một số cách mà bạn có thể tiếp cận để tạo một email thân thiện với thiết bị di động.

1. Cột đơn, Thiết kế không tin tưởng thiết bị

Đây là cách dễ nhất để có một email thân thiện với thiết bị di động. Sử dụng phương pháp này, hình ảnh và văn bản được đặt ở mức khá lớn để cho dù email được xem trên máy tính để bàn hay điện thoại di động, phông chữ đều có thể đọc được và hình ảnh đã đủ lớn.

EmailTypes-DeviceAgnosticEmailTypes-DeviceAgnosticEmailTypes-DeviceAgnostic

Lợi ích của kiểu thiết kế này là bạn chỉ cần mã một bố cục duy nhất. Đó chắc chắn là lựa chọn nhanh nhất và dễ dàng nhất của bạn. Các ứng dụng khách điện thoại thông minh hỗ trợ chia tỷ lệ sẽ thu nhỏ email của bạn xuống tới 100% chiều rộng và trên những ứng dụng không có, sẽ có rất ít cuộn ngang.

Nhược điểm là phiên bản dành cho máy tính để bàn có quy mô rất lớn (mà cá nhân tôi không xem là nhược điểm).

Để đạt được bố cục này:

  1. Thiết kế email của bạn rộng khoảng 450px
  2. Tiêu đề nên có ít nhất 30px
  3. Bản sao cơ thể nên có ít nhất 20px

2. Thiết kế email hoàn toàn đáp ứng

Một email HTML đáp ứng đầy đủ sử dụng các truy vấn phương tiện để hiển thị email theo một cách nhất định, tùy thuộc vào kích thước của thiết bị mà nó đang được xem. Hầu như không có ứng dụng khách máy tính để bàn và webmail nào hỗ trợ truy vấn phương tiện, nhưng nhiều ứng dụng thư điện thoại thông minh và máy tính bảng thì có. Điều này có nghĩa là các email phản hồi mã hóa hơi ngược so với các trang web phản hồi mã hóa, trong đó phiên bản máy tính để bàn của bạn là phiên bản 'cơ sở' của bạn và bạn sử dụng truy vấn độ rộng tối đa để điều chỉnh bố cục cho các thiết bị nhỏ hơn.

EmailTypes-ResponsiveEmailTypes-ResponsiveEmailTypes-Responsive

Lợi ích của kiểu thiết kế này là bạn có thể tạo một email nhiều cột tuyệt vời để dịch sang phiên bản di động một cột dễ đọc, dễ đọc. Truy vấn phương tiện cũng linh hoạt vì bạn có thể nhắm mục tiêu kích thước màn hình cụ thể và cả màn hình mật độ pixel cụ thể (để hiển thị hình ảnh có độ phân giải cao).

Nhược điểm là ứng dụng Gmail dành cho Android (ứng dụng thư khách phổ biến nhất trên Android) không hỗ trợ truy vấn phương tiện và có thể tạo ra một số kết quả bất thường khi hiển thị các bản dựng email đáp ứng đầy đủ của bạn. Các email phản hồi đầy đủ cũng mất nhiều thời gian để mã hơn so với anh em họ không biết thiết bị của họ.

3. Thiết kế email hoàn toàn trôi chảy

Hãy nghĩ về điều này như là phản ứng nhanh mà không cần truy vấn phương tiện truyền thông.

EmailTypes-FluidEmailTypes-FluidEmailTypes-Fluid

Phương pháp này liên quan đến việc tạo ra một thiết kế chất lỏng, rộng 100%, với chiều rộng tối đa khoảng 600px được đặt ở bảng bên ngoài. Nhận xét có điều kiện là bắt buộc (đối với Outlook) cũng như truy vấn phương tiện (đối với Apple Mail, vui nhộn, không hỗ trợ thuộc tính chiều rộng tối đa).

Lợi ích của kiểu thiết kế này là nó sẽ đáp ứng trong mọi ứng dụng email, bao gồm cả ứng dụng Gmail dành cho Android. Phương pháp này cũng có thể được sử dụng cùng với các truy vấn phương tiện để tinh chỉnh thêm những thứ như kích thước văn bản và các nút trên các máy khách hỗ trợ chúng.

Nhược điểm là nó sẽ chỉ hoạt động tốt với các thiết kế khá đơn giản và thường không có nhiều hơn một cột. Nội dung hai cột vẫn ổn miễn là nó đủ nhỏ để trông ổn trong một cột hẹp trên màn hình điện thoại thông minh.

Bạn cũng phải có thể sử dụng độ rộng phần trăm cho hình ảnh của mình, điều này không phải lúc nào cũng có thể khi tạo mẫu (thường hình ảnh trong mẫu phải có chiều rộng pixel được đặt).

Tăng cường hơn nữa thiết kế email của bạn

Và cuối cùng, có một vài điều lạ mắt mà bạn có thể sử dụng tốt để bắt đầu tạo những email thực sự lạ mắt thực sự nổi bật.

Hinh nên

Hình ảnh nền từng là thứ gì đó cho đống "Quá cứng", nhưng nhờ có Stig Morten Myre và những người trong Chiến dịch giám sát, giờ đây đã có một trình tạo hình nền Bulletproof Email siêu dễ dàng giúp loại bỏ mọi rắc rối. Không còn cần phải giữ lại việc thêm hình nền vào các chiến dịch của bạn.

Phông chữ web

Sử dụng phông chữ web cũng là một cách thực sự tuyệt vời để làm cho thiết kế của bạn nổi bật so với phần còn lại. Với một chút cân nhắc thiết kế bổ sung và thêm một chút thời gian xây dựng, thật dễ dàng để thực hiện các phông chữ web sẽ hiển thị thực sự tốt trong một số lượng khách hàng email đáng ngạc nhiên.

Hoạt hình CSS3

Các ứng dụng email hiện đại (như Apple Mail và các ứng dụng trên thiết bị iPhone và Android) thực sự hỗ trợ CSS3 Animation, có nghĩa là bạn có thể bắt đầu suy nghĩ về việc thêm một số nội dung thú vị vào chiến dịch của mình. Các hiệu ứng chuyển tiếp, cũng như hình động của khung hình chính, hiển thị khá tốt và có thể là một sự bổ sung tuyệt vời cho email (miễn là chúng giảm xuống một cách duyên dáng) vì chúng không làm tăng kích thước tệp nhiều như một GIF hoạt hình.

Tổng kết

Có rất nhiều điều cần tính đến khi thiết kế cho email! Các mẹo được liệt kê trong bài viết này sẽ cung cấp cho bạn một khởi đầu vững chắc và xem thêm các bài đăng trong loạt bài này sẽ đi sâu vào các khía cạnh khác nhau (như sử dụng phông chữ web và thiết kế đáp ứng) chi tiết hơn.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.