Cách Tạo Email Marketing Bằng Html

  -  
Một vài ba điểm bọn họ cần để ý trong việc thiết kế Email Marketing. Điều này không hệt như thiết kế web. Thư điện tử có những chuẩn riêng về hình trạng dáng, hình hình ảnh và kích thước.

Bạn đang xem: Cách tạo email marketing bằng html


Trước khi bắt đầu bạn nên chú ý...

Thiết kế Email Marketing không hẳn là xây đắp web nếu bạn quan tâm về chuẩn chỉnh W3C, sử dụng công nghệ mới tuyệt nhất trong CSS,...bạn buộc phải quên toàn bộ chúng đi khi bắt đầu thiết kế Email.

Về bố cục tổng quan (layout)

Chiều rộng là 650px hoặc ngắn hơn Quy tắc phổ biến cho kích cỡ email là chiều rộng ở tầm mức 650px hoặc ngắn hơn. Điều này chất nhận được email hiển thị đúng bố cục tổng quan trong phần lớn các chương trình email client cũng tương tự các mailbox. Bố cục đơn giản và dễ dàng là giỏi nhất Với xây cất email thì cha cục đơn giản dễ dàng là tốt. Nếu như khách hàng thử kiến tạo phức tạp thì có khả năng sẽ bị lỗi cùng mất rất nhiều lúc hiển thị trên những mailbox hay thư điện tử client. Sử dụng HTML table dễ dàng và đơn giản bạn cần tuân theo các chuẩn table của HTML. Những kỹ thuật phức tạp sử dụng CSS cùng layout sẽ không hiển thị đúng trong số đông các email client. Tránh áp dụng colspans="" trong table một trong những email client không hỗ trợ hoàn toàn số đông điều này. Sẽ sở hữu vấn đề về việc hiển thị ở một trong những sell nếu bạn sử dung colspan.

CSS

Không thực hiện stylesheet bên ngoài đa số sẽ không thao tác làm việc trong các email client và bạn nên đưa nó vào trong mã HTML của email sử dụng inline CSS. Không sử dụng CSS class - luôn luôn áp dụng inline CSS một trong những email clients không cung ứng CSS classe. Cố vì sử dụng CSS class, bạn nên thực hiện inline CSS. Ví dụ thực hiện
nội dung
thay vì
nội dung
Không áp dụng CSS shortcut CSS chất nhận được bạn set trực thuộc tính thành nhóm. Ví dụ style="font: 12px, Arial" thay do nhóm những thuộc tính lại, chúng ta nên phân thành các phần chưa có người yêu như style="font-size:12px; font-family:Arial" Tránh thực hiện CSS float tốt position option một số email client không hiển thị tốt đối với tất cả 2 dạng float và position CSS option. Thay vị đó bạn nên sử dụng table.

Images & Video

Sử dụng ảnh với nguồn là URL tuyệt vời Thay bởi vì chèn ảnh ảnh như() chúng ta phải thực hiện url tuyệt vời và hoàn hảo nhất () Luôn thực hiện thẻ alt (alt="Company ABC">) đa số các email clien thì khoác định không hiển thị ảnh. Nếu khách hàng không áp dụng thẻ alternative text thì nó sẽ không còn hiển thị gì cả. Không nhúng đoạn phim hay Flash chưa phải là ý tưởng giỏi nếu nhúng video hay flash trực tiếp vào e-mail của bạn. Một số trong những email client không hỗ trợ code nhúng của người tiêu dùng và phần đông các cỗ lọc spam rất có thể đánh dấu bạn như là 1 trong email spam. Thay bởi vì nhúng video, flash vào trong email, bạn nên chèn ảnh chụp video hay flash và sinh sản một liên kết tới video, flash tới ảnh đó. Người đọc sẽ có thể click vào với xem bọn chúng trên trình duyệt. Không phải email client như thế nào cũng cung cấp hoàn toàn hình ảnh Gif động Hãy coi xét vấn đề sử dụng ảnh gif động. Trong những lúc phần lớn hỗ trợ gif cồn thì Outlook 2007 không hỗ trợ, rất có thể chỉ hiển thị khung đầu tiên của anh gif. Cẩn thận với việc chia nhỏ dại hình ảnh nếu khách hàng có một cái ảnh lớn với chia bé dại ra để ghép bằng HTML áp dụng table cess, img tag thì bạn phải test cẩn thận. Một số trong những email client sẽ tự động hóa thêm vào thời gian trống giữa các ảnh của bạn. Kiểm tra email của bạn trong ngôi trường hợp hình ảnh bị ẩn Vì đa phần email client sẽ mặc định ẩn hình ảnh của bạn. Nên sẽ rất đặc biệt nếu chúng ta kiểm tra chúng trước khi gửi. Xem xét size file của bạn thư điện tử hay hình ảnh càng nhẹ thì càng dễ tải về. Nếu bạn không ý muốn người nhận phải chờ 30 giây để đọc được email của chúng ta thì hãy để mắt tới lại form size ảnh, email của bạn.

Backgrounds

Không hoàn toàn hỗ trợ ảnh nền nếu như bạn đang sử dụng hình ảnh làmbackground thì hãy lưu ý là một trong những email client sẽ không hiển thị chúng. Nếu khách hàng vẫn mong mỏi sử dụng thì hãy dùng thẻHTML núm vì sử dụng CSS. Full toàn thân background colors một vài email client (như Gmail) không hiển thị background màu sắc mà bạn set sinh sống thẻ nếu như khách hàng đang cấu hình màu nền mang đến background thì nên dùng một thẻ div bao với color nền. Vì nếu body background color không hiển thị thì bạn sẽ vẫn hiển thị được một màu tương tự.

Một số chăm chú khác

Không nhập nội dung ko kể thẻ tất cả nội dung các bạn nhập vào trên thẻ toàn thân sẽ ko được thực hiện Không chèn javascript hầu hết các cỗ lọc sẽ xác minh chúng như là mã ô nhiễm và vấn đề email của người tiêu dùng bị coi như spam là không tránh khỏi. Tránh áp dụng Microsoft Office MãHTML được tạo ra bởi MS Office sẽ có rất nhiều vấn đề lúc hiển thị trên e-mail client. Nếu như khách hàng có ý muốn copy trường đoản cú MS Office thì rất có thể sử dụng Dreamweaver để đơn giản hóa thẻ html của bạn.

*


Trong lúc Microsoft đã bao gồm những cách tân lớn về những tiêu chuẩn web ở IE, thì bên cạnh đó họ đã đi trái lại trong việc cung ứng email HTML ở Outlook. Vào phiên phiên bản Outlook 2007, họ đang chuyển chính sách dàn trang HTML từ bởi nhân IE sang bằng nhân Word (có lẽ là vì vì sao bảo mật), điều đó làm tê liệt hoàn toàn các email HTML đối với trước. Đối với bất kỳ ai có tác dụng mail kinh doanh và quan trọng kế, lập trình các email HTML hấp dẫn, đưa ra quyết định này chằng khác gì buộc họ nên giơ cầm cố đấm và nguyền rủa Bill Gates.

Và tất cả đều mong muốn rằng, trong phiên phiên bản Outlook 2010, Microsoft sẽ trở về với nhân IE, nhưng mà rốt cuộc, họ vẫn đính thêm bó cùng với nhân Word. Các chiếc đinh tía và ngọn đuốc khó tính đang vung lên, nhưng hình như chúng ta vẫn đề xuất chung sinh sống với nhân Word trong vô số năm nữa. Thậm chí nếu tới đây Microsoft đưa sang cần sử dụng nhân IE mang đến phiên phiên bản Outlook 2012, họ sẽ vẫn còn những quý khách đang dùng Outlook 2007, 2010. Vậy là nếu bạn chưa từng học tập cách kiến tạo email HTML cho Outlook, hiện thời là lúc để học.

BlinkContact đang thiết kế không ít email HTML mang đến các người tiêu dùng quan trọng, và chúng tôi đã thực hiện hàng nghìn chiến dịch trong vô số năm, vì thế chúng tôi có rất nhiều kinh nghiệm trong việc test thư điện tử HTML với những chương trình đọc không giống nhau và thu được không ít kỹ thuật đề xuất thiết. Cùng với Outlook 2007, bọn họ đang đối mặt với chương trình đọc email giận dữ nhất, cùng nói chung, nếu email HTML của bạn hiển thị giỏi trên Outlook thì ngay sát như chắc chắn rằng nó hiện xuất sắc ở tất cả các chương trình khác.

Hạn chế của Outlook với email HTML

Điều đầu tiên bạn phải hiểu khi thi công và code cho Outlook là những quy tắc thường thì thông thể vận dụng được ở đây. Hãy quên đi tất cả những thói quen dùng CSS – tưởng tưởng bạn đang trở về năm 2001 với mọi tag HTML cơ hội đó. Chú ý rằng một số trong những thứ vào CSS hoàn toàn có thể vẫn chạy được trong Outlook, nhưng tôi khuyên các bạn tránh dùng chúng do theo kinh nghiệm tay nghề của tôi, bọn chúng thường ko hiển thị độc nhất vô nhị quán, với thật hổ thẹn khi nhận ra một thư điện tử phản hồi từ khách hàng của khách hàng hỏi rằng nguyên nhân email HTML lại bị vỡ khi họ gởi đi. Vậy đề nghị hãy tin cẩn và làm theo những gì tôi nói.

Xem thêm: Bắt Lỗi Form Đăng Ký Bằng Javascript Như Thế Nào? Validate Form Bằng Javascript Cơ Bản

Những kinh nghiệm chung cùng với Outlook 2007

quên đi việc bóc tách nội dung bởi CSS. Chỉ tạo e-mail HTML với những table và ảnh GIF trống. Ko thẻ
. Hãy xem ví dụ dưới đây… Không sử dụng background, chỉ dùng màu nền.Nếu bạn muốn đặt text lên trên ảnh trong thư điện tử HTML, bạn sẽ phải tạo nên một vùng vùng phía đằng sau phần text với một màu nền duy nhất, rồi cắt nhỏ hình ảnh theo tía cục. Chúng ta có thể dùng các style cơ bản, nhưng lại hãy sử dụng chúng thẳng trong từng tag, đừng để trong phần header. Đừng nắm tưởng tượng, rất nhiều thứ chạy xuất sắc trên trình coi xét nhưng ko chạy được bên trên Outlook. Đừng sử dụng padding, chỉ dùng margin. Padding sẽ không hiển thị chuẩn. Sử dụng code càng đơn giản dễ dàng càng tốt. Tối ưu hóa email HTML của chúng ta cho cơ chế ‘tắt ảnh’, này thường là chế độ mặc định khi tín đồ nhận mở email. Nếu như bạn không khai báo độ cao của ảnh, thư điện tử HTML có khả năng sẽ bị co lại theo hướng dọc, đẩy phần câu chữ text lên phía trên,dù cho bạn đã khẳng định chiều rộng lớn ảnh.

Hãy liếc qua ví dụ bên dưới đây:



*

Hãy xem đoạn text trước tiên để đọc cách email HTML nên được code cho phù hợp với Outlook.

*

”"Budgets are tight, yet your custohostingvietnam.vnrs’ demands for high performance from your online service are growing. The good news is that you don’t need khổng lồ spend a lot of money khổng lồ make your website applications faster… if you know where to lớn look!

”"

Lưu ý rằng chúng ta đang cần sử dụng table để phân chia bố cục, không cần sử dụng CSS, và họ đang dãn những ô bằng các ảnh GIF trống. Tất cả các style được chuyển thẳng vào từng tag tương ứng, không gửi vào tag phổ biến toàn cục. Cũng lưu ý rằng chúng ta đang bố trí khoảng trống dọc bởi margin, không cần sử dụng padding.

Nhiều người thiết kế website chê cười những phép tắc như Dreamweaver bởi vì nó không cung cấp chế độ design chính xác cho CSS nâng cao. Nhưng lại Dreamweaver thực sự là 1 trong công cụ giỏi cho email, với nó hoàn toàn có thể hiển thị e-mail khá chủ yếu xác. Thuở đầu nó có phong cách thiết kế để sản xuất website trước cả khi các web nhiều màu sắc được phổ biến, tức là rất phù hợp với mục tiêu của chúng ta. Nó chắc chắn rằng sẽ giúp đỡ bạn tạo các table, bắt buộc đừng ngại dùng nó.

Test thư điện tử HTML của bạn

Có 3 cách để test email HTML:

gởi nó đến chính các bạn và xem trên các máy tính khác nhau với phần nhiều chương trình đọc không giống nhau sử dụng thương mại dịch vụ test như Litmus và sử dụng mẹo ‘Send page as Email’ (chỉ cùng với Window/IE).

Cách trước tiên đem lại kết quả đúng đắn nhất nhưng có trở ngại là khó thực hiện, về cơ bản bạn có thể dùng hai cách sau.

Nếu bạn đang sử dụng Windows và bao gồm cài Outlook trong trong máy, bí quyết test nhanh nhất có thể dù cẩu thả là mở mẫu thư điện tử HTML của người tiêu dùng trong IE, và lựa chọn File > Send > Page by email. Một cửa sổ thư điện tử Outlook đã mở ra, các bạn chèn code đúng chuẩn vào đó. Đừng tin vào gần như gì hiển thị khi bạn đang biên soạn email, hãy gửi nó cho thiết yếu bạn, sau đó bạn cũng có thể xem thư điện tử trông như thế nào.

Nếu chúng ta là một người dùng Mac, mẹo này sẽ không làm được, chúng ta cũng có thể sẽ mong muốn dùng một dịch vụ test trình để ý có bao hàm cả test email HTML. Tôi sử dụng Limus, nó cho phép bạn test thư điện tử HTML với mặt hàng tá webmai và lịch trình đọc e-mail để có lẽ email HTML của doanh nghiệp hiển thị đúng. Nó cũng có thể chấp nhận được bạn test email HTML vào chế đọ bật hoặc tắt ảnh. Thương mại dịch vụ này đắt, nhưng nếu như bạn dùng nhiều, nó thật đáng giá. Những chương trình đọc email HTML có khá nhiều vấn đề về tương thích hơn cả các phiên bản sao mô bỏng chúng trên trình duyệt, có thể bạn sẽ cần test những hơn.


Cấu trúc phổ biến cho một mẫu email kinh doanh template thường bao gồm: banner, tiêu đề, ngôn từ thông điệp cùng phần chân email.

Xem thêm: Nên Dùng Win 7 Ultimate Hay Professional, Win 7 Profesional Và Ultimate Có Gì Khác Biệt


Bạn có thể chèn phần nhan đề ngay bên trên cùng, làm cho logo nhỏ dại hơn và cùng nằm trên và một hàng cùng với tiêu đề. Cũng cần thống độc nhất về một cấu trúc chung.