HTML trong email

Tài liệu tham khảo này giả định rằng bạn là nhà thiết kế web giao diện người dùng có kiến ​​thức làm việc trung cấp về HTML và CSS. Bạn cảm thấy thoải mái khi viết mã và sử dụng các bảng HTML cho cấu trúc cũng như làm việc theo các tiêu chuẩn viết mã tiên tiến nhất vào năm 1999. Vui lòng tạo một chút TLC hoặc Goo Goo Dolls để hòa nhập vào tinh thần của mọi thứ

Thực hành tốt nhất. Thiết kế

Có một số điều cần lưu ý khi thiết kế các chiến dịch email HTML

• Email phải có chiều rộng tối đa 600-800 pixel. Điều này sẽ làm cho chúng hoạt động tốt hơn trong kích thước khung xem trước do nhiều khách hàng cung cấp
• Thiết kế cho sự đơn giản. Sử dụng các lớp dựa trên lưới và tránh các phần tử phức tạp yêu cầu định vị hoặc thả nổi HTML
• Giả sử ban đầu các hình ảnh sẽ bị chặn bởi các ứng dụng email hoặc một số hình ảnh nhất định—chẳng hạn như hình nền—sẽ hoàn toàn không tải được
• Đừng thiết kế một email về cơ bản là một hình ảnh lớn, được cắt lát. Mặc dù những loại email này trông đẹp mắt nhưng chúng hoạt động kém
• Sử dụng các phông chữ cơ bản, đa nền tảng như Arial, Verdana, Georgia và Times New Roman
• Tránh các yếu tố yêu cầu Flash hoặc JavaScript. Nếu bạn cần chuyển động trong một email, một. gif là đặt cược tốt nhất của bạn
• Đừng quên trải nghiệm di động. Email của bạn có thể đọc được trong tầm tay trên một màn hình nhỏ không?

Thực hành tốt nhất. Sự phát triển

Cũng giống như thiết kế, có những phương pháp hay nhất để tuân theo khi mã hóa email HTML

• Mã hóa tất cả cấu trúc bằng phần tử bảng. Đối với các bố cục phức tạp hơn, bạn nên lồng các bảng để xây dựng các cấu trúc phức tạp
• Sử dụng các thuộc tính phần tử [chẳng hạn như cellpadding, valign và width] để đặt kích thước bảng. Điều này buộc một cấu trúc mô hình hộp
• Giữ CSS của bạn đơn giản. Tránh khai báo kiểu phức hợp [IE. "nét chữ. #000 12px Arial, Helvetica, sans-serif;”], mã tốc ký [IE. #000 thay vì #000000], thuộc tính bố cục CSS [IE. vị trí, vị trí, rõ ràng, khả năng hiển thị, v.v. ], bộ chọn phức tạp [IE. bộ chọn hậu duệ, con hoặc anh chị em và các phần tử giả]
• Nội tuyến tất cả CSS trước khi gửi. [Mailchimp sẽ tự động làm việc này cho bạn. ]
• Chỉ sử dụng các liên kết tuyệt đối cho hình ảnh và lưu trữ những hình ảnh đó trên một máy chủ đáng tin cậy. [Mailchimp cung cấp dịch vụ lưu trữ hình ảnh miễn phí. ]
• Đừng bận tâm đến JavaScript hoặc Flash—những công nghệ đó phần lớn không được ứng dụng email hỗ trợ
• Tính thân thiện với thiết bị di động, nếu có thể. Sử dụng truy vấn phương tiện để tăng kích thước văn bản trên màn hình nhỏ, cung cấp các vùng nhấn có kích thước bằng ngón tay cái [~46x46px] cho các liên kết. Tạo phản hồi email nếu thiết kế cho phép
• Kiểm tra, kiểm tra, kiểm tra. Tạo tài khoản email trên nhiều dịch vụ khác nhau và gửi email cho chính bạn. Làm điều này kết hợp với các dịch vụ như Litmus

đọc tiếp

• Hợp nhất các thẻ
• Ngôn ngữ mẫu
• Sử dụng Mailchimp

Trở lại đầu trang

❮ Thuộc tính kiểu HTML

Thí dụ

Xác định trường cho địa chỉ email [tự động xác thực khi gửi]

Nhập email của bạn

Tự mình thử »

Định nghĩa và cách sử dụng

xác định một trường cho một địa chỉ e-mail

Giá trị đầu vào được tự động xác thực để đảm bảo đó là địa chỉ email được định dạng đúng

Để xác định trường e-mail cho phép nhiều địa chỉ e-mail, hãy thêm thuộc tính "multiple"

Mẹo. Luôn thêm thẻ để có các phương pháp tiếp cận tốt nhất

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 đủ phần tử

Thuộc tínhtype="email"5. 010. 04. 05. 010. 1

cú pháp

❮ Thuộc tính kiểu HTML

Phát triển mã email HTML gần giống như biến nòng nọc thành ếch. Nó trải qua rất nhiều thay đổi ngay từ khi lên ý tưởng cho đến khi phân phối mẫu email HTML cuối cùng. Sau khi nhà tiếp thị email xác định mục đích gửi email, người viết quảng cáo sẽ phác thảo nội dung email theo wireframe. Sau đó, người thiết kế email tiến hành thiết kế email theo wireframe. Sau khi thiết kế được phê duyệt, nó sẽ được giao cho nhà phát triển email, người chuyển đổi tệp PSD hoặc AI hoặc PDF thành email HTML hoàn hảo pixel. Tệp này được tải trong ESP và được triển khai sau khi kiểm tra kỹ lưỡng để hiển thị hoàn hảo. Hầu hết các nhà tiếp thị gửi email HTML thay vì email văn bản thuần túy vì tính thẩm mỹ nâng cao của nó

Vì một số người tham gia vào việc tạo HTML email, ngay cả một thay đổi nhỏ cũng có thể mất quá nhiều thời gian để giải quyết. Trên thực tế, mất khoảng 4-6 giờ để phát triển một mẫu email. Sự phức tạp của quy trình làm tăng thêm thời gian phát triển một mẫu email HTML duy nhất. Tất nhiên, bạn có thể tạo email HTML miễn phí từ các tùy chọn có sẵn trực tuyến nhưng email tùy chỉnh hoạt động tốt hơn các mẫu miễn phí đó

MUỐN XEM CÁC EMAIL HTML CỦA CHÚNG TÔI HOÀN HẢO NHƯ THẾ NÀO?

Tải xuống các mẫu email mẫu miễn phí để xem chất lượng mã của chúng tôi

TẢI XUỐNG GÓI MẪU

Tải xuống Mẫu

Thông qua bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo mẫu email HTML đơn giản, bạn có thể tham khảo để khắc phục sự cố cơ bản cho mã HTML mẫu email của mình

P. S. Bạn có thể tạo email HTML miễn phí trên trình chỉnh sửa DIY, nhưng tốt hơn hết là bạn nên dựa vào các chuyên gia như Email Uplers để đảm bảo rằng người đăng ký của bạn nhận được email tuyệt vời và được mã hóa hoàn hảo. Chúng tôi thực sự khuyên bạn không nên chỉnh sửa email HTML trên Microsoft FrontPage, Word hoặc Publisher vì nó sẽ thêm mã bổ sung vào mẫu email của bạn. Sử dụng trình soạn thảo văn bản cơ bản như Notepad hoặc chỉnh sửa mã HTML mẫu email trong trình chỉnh sửa mã của ESP của bạn

Mục lục

• Làm cách nào để Chuẩn bị mẫu email HTML đơn giản của bạn?
• Làm thế nào để Phong cách và thiết kế email HTML?
• What does the Final code look like
• How to build your Email
• Những điểm cần nhớ khi tạo mẫu email HTML

Khái niệm cơ bản về HTML. Cách tạo mẫu email HTML đơn giản?

Mẫu email HTML cơ bản bao gồm hai phần

1. Header section: Any code placed between and is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.
2. Body: Any code placed between and is the body section and the rendering engine uses the code to create HTML email structure.

Step 1: How to Prepare your HTML template?

Phần đầu của mẫu email HTML đơn giản giống với đoạn mã sau

Thẻ đầu cho một email mẫu

 

 

 

 

 

 

 

 

1

2

3

4

5

6

7

8

9

10

11

Kiểm tra Email Sample

được sử dụng để thông báo cho công cụ hiển thị thẻ HTML nào sẽ mong đợi và bộ quy tắc nào mà HTML và CSS tuân thủ. Mặc dù một số ứng dụng email [ứng dụng webmail như Gmail, Google Apps, Yahoo. Thư và Outlook. com] loại bỏ mã và áp dụng mã của riêng họ, nên đưa mã này vào mã HTML mẫu email của bạn

Mặc dù bạn được tự do lựa chọn giữa XHTML 1. 0, XHTML chuyển tiếp 1. 0 và HTML5 nghiêm ngặt, hầu hết các nhà phát triển email đáng để họ sử dụng XHTML chuyển tiếp XHTML 1. 0

specifies how to process text and special characters in your email. The “text/html” instructs the rendering engine to consider the following strings of text as HTML.

instructs the device, on which the email is viewed, to set the viewable area of the email as per the screen width.

The title of the email is written between the tag. When a subscriber clicks on “view online”, the title of the email is displayed on the browser tab.

Bước 2. Làm cách nào để tạo kiểu HTML cho email của bạn?

Phong cách là mát mẻ, nhưng nó khó khăn

Whatever styling you are going to implement in your email such as text formatting, image size, media queries go between the tags as different classes. The basic format for adding tag is where in “text/css” specifies the media type as CSS. Placement of the tag is tricky as 6 out of 36 email clients do not support tag in and Gmail doesn’t support it in the email body.

định dạng văn bản

Trong trường hợp bạn cần thêm điều kiện định dạng tập trung [hiển thị bên dưới] cho bất kỳ văn bản nào, bạn có thể chỉ định các thuộc tính trong lớp cụ thể của mẫu email HTML cơ bản

e. g. để tắt trang trí văn bản trong siêu liên kết, hãy thêm

Mã để loại bỏ trang trí văn bản

 

 

 

 

 

 

 

 

1

2

3

4

.em_ liên kết mặc định a {

màu. kế thừa . quan trọng;

văn bản–trang trí. không có . quan trọng;

}

Truy vấn phương tiện truyền thông

Trong trường hợp bạn đang mã hóa một mẫu email đáp ứng, các truy vấn phương tiện cần được thêm vào theo định dạng sau

Cấu trúc của một truy vấn phương tiện

 

 

 

 

 

 

 

 

1

2

3

4

5

6

7

@phương tiện chỉ màn hình và [min–width: ___px] và [max . –width: ___px]

{

.[tên_lớp]

{

[thuộc tính để được triển khai]

}

}

Ví dụ: hãy xem xét truy vấn phương tiện sau trong mã HTML email

 

 

 

 

 

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

@phương tiện chỉ màn hình và [min–width:481px] và [max . –width:699px] {

.em_main_ bảng {

chiều rộng. 100% . quan trọng;

}

.em_ trình bao bọc {

chiều rộng. 100% . quan trọng;

}

.em_ ẩn {

hiển thị. không có . quan trọng;

}

.em_ img {

chiều rộng. 100% . quan trọng;

chiều cao. tự động . quan trọng;

}

.em_ h20 {

chiều cao. 20px . quan trọng;

}

.em_ padd {

phần đệm. 20px 10px . quan trọng;

}

}

Khi thiết kế email HTML được xem trong một thiết bị có chiều rộng màn hình từ 481 đến 699px

• Chiều rộng của email [em_main_table] buộc phải là 100% do “chiều rộng. 100%. quan trọng;"
• Phần được liên kết với em. lớp ẩn sẽ bị ẩn do “hiển thị. không ai. quan trọng;"
• Phần được liên kết với em. lớp h20 sẽ có chiều cao cố định là 20px do “chiều cao. 20px. quan trọng;"
• Bất kỳ phần tử nào được liên kết với lớp em_padd sẽ có phần đệm cố định là 20px [ngang] và 10px [dọc]

P. S. . quan trọng buộc công cụ kết xuất không thực hiện bất kỳ thay đổi nào đối với truy vấn phương tiện

Để tạo ví dụ email HTML phản hồi, các truy vấn phương tiện riêng biệt được chỉ định để kích hoạt ở độ rộng màn hình nhỏ hơn 480px

Các truy vấn phương tiện mà bạn đã học cho đến bây giờ sẽ hiển thị trong một số bố cục trên thiết bị di động. Tuy nhiên, việc hiển thị trong một số bố cục yêu cầu một bộ truy vấn phương tiện cụ thể và chỉ nhà phát triển chuyên gia mới có thể giúp bạn thực hiện điều đó. Bạn có thể tìm hiểu thêm về những thách thức và cơ hội của mẫu email đáp ứng trong blog này

Mã hóa email có thể cồng kềnh

Nhóm hơn 150 chuyên gia của chúng tôi có thể trợ giúp với các mẫu email phù hợp

• mã hóa bằng tay
• Phản ứng nhanh nhẹn
• Pixel hoàn hảo

LIÊN LẠC

Tính tương tác trong email
Trong trường hợp bạn muốn gửi ví dụ về email HTML với các tính năng tương tác, phần CSS của mã sẽ được thêm vào trước khi bạn đóng phần

Tính tương tác trong email HTML rất khó viết mã và cần nhiều thử nghiệm để hiển thị hoàn hảo trong ứng dụng email. Có thể có sẵn mã HTML email trên internet, nhưng vẫn cần nhiều kinh nghiệm mã hóa để tạo email tương tác. Bạn có thể tìm hiểu thêm về các email HTML tương tác trong đồ họa thông tin của chúng tôi – Các yếu tố thiết kế email tương tác. Tại đây, bạn cũng sẽ có thể tải xuống các mẫu của từng thành phần tương tác có thể được thêm vào trong mã mẫu email HTML

Muốn chúng tôi tạo các email tương tác tuyệt vời cho bạn?

Step 3: What does the Final code look like?

So, our final in the HTML email template code looks like

 

 

 

 

 

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

Kiểm tra Email Sample

decoration removed –>

.em_defaultlink a {

màu. kế thừa . quan trọng;

trang trí văn bản. không có . quan trọng;

Query for desktop layout –>

@màn hình chỉ phương tiện và [chiều rộng tối thiểu. 481px] và [chiều rộng tối đa. 699px] {

.em_main_table {

chiều rộng. 100% . quan trọng;

}

.em_wrapper {

chiều rộng. 100% . quan trọng;

}

.em_hide {

hiển thị. không có . quan trọng;

}

.em_img {

chiều rộng. 100% . quan trọng;

chiều cao. tự động . quan trọng;

}

.em_h20 {

chiều cao. 20px . quan trọng;

}

.em_padd {

phần đệm. 20px 10px . quan trọng;

}

}

@màn hình phương tiện và [chiều rộng tối đa. 480px] {

.em_main_table {

chiều rộng. 100% . quan trọng;

}

.em_wrapper {

chiều rộng. 100% . quan trọng;

}

.em_hide {

hiển thị. không có . quan trọng;

}

.em_img {

chiều rộng. 100% . quan trọng;

chiều cao. tự động . quan trọng;

}

.em_h20 {

chiều cao. 20px . quan trọng;

}

.em_padd {

phần đệm. 20px 10px . quan trọng;

}

.em_text1 {

cỡ chữ. 16px . quan trọng;

chiều cao dòng. 24px . quan trọng;

}

u +. em_body. em_full_wrap {

chiều rộng. 100% . quan trọng;

chiều rộng. 100vw . quan trọng;

}

}

có làm bạn đau đầu không? Chúng tôi có thể là liều thuốc giảm đau cho bạn. Nói chuyện với chúng tôi ngay bây giờ

Step 4: How to build your Email ?

Phạm vi 600px cho thiết kế email HTML đã được tính cho Windows Outlook hoạt động trên màn hình máy tính để bàn 1024px, 10 năm trước. Giờ đây, các thiết bị có chiều rộng màn hình tối thiểu 800px đang tràn ngập thị trường;

Vì vậy, chúng tôi bắt đầu với phần thân có chiều rộng 100% với màu #efefefef

 

 

 

 

 

 

 

1

Trong phần này, chúng tôi thêm một bảng được căn giữa ở 700px trong thiết kế email HTML

Bảng được căn giữa có chiều rộng 700px

 

 

 

 

 

 

 

 

1

Bây giờ, chúng tôi sẽ bao gồm văn bản tiêu đề trước và “xem trực tuyến” như một phần của ô, được tạo bằng cách lồng một bảng khác vào bảng nêu trên

Bảng lồng nhau để xem trực tuyến

 

 

 

 

 

 

 

 

1

2

3

4

5

6

7

Test Email Sample | Xem Trực tuyến

Bây giờ, chúng tôi thêm hình ảnh anh hùng ở định dạng email HTML

 

 

 

 

 

 

 

1

2

3

4

5

6

7