CÁCH TẠO EMAIL MARKETING BẰNG HTML

      17
Một vài ba điểm bọn họ phải để ý trong Việc xây cất E-Mail Marketing. Điều này không giống như xây đắp website. Thư điện tử bao gồm chuẩn riêng biệt về mẫu mã, hình ảnh với form size.

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


Trước khi bước đầu bạn phải để ý...

Thiết kế E-Mail Marketing không hẳn là kiến tạo web Nếu bạn quan tâm về chuẩn W3C, sử dụng technology mới nhất trong CSS,...bạn phải quên toàn bộ chúng đi Khi ban đầu xây đắp E-Mail.

Về Bố cục (layout)

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

CSS

Không thực hiện stylesheet mặt ngoài Phần lớn sẽ không còn thao tác làm việc trong những email client và bạn nên chuyển nó vào trong mã HTML của email sử dụng inline CSS. Không áp dụng CSS class - luôn luôn luôn luôn thực hiện inline CSS Một số gmail clients không hỗ trợ CSS classe. Thay vị áp dụng CSS class, chúng ta nên thực hiện inline CSS. Ví dụ thực hiện
nội dung
nắm vị
nội dung
Không áp dụng CSS shortcut CSS được cho phép các bạn set trực thuộc tính thành nhóm. lấy một ví dụ style="font: 12px, Arial" nuốm vị nhóm các thuộc tính lại, chúng ta nên phân thành những phần trơ trọi như style="font-size:12px; font-family:Arial" Tránh áp dụng CSS float giỏi position option Một số gmail client không hiển thị xuất sắc với cả 2 dạng float cùng position CSS option. Tgiỏi vị đó chúng ta nên sử dụng table.

Images và Video

Sử dụng ảnh cùng với mối cung cấp là URL tuyệt vời và hoàn hảo nhất Ttuyệt bởi cnhát hình họa hình ảnh như() chúng ta buộc phải thực hiện url tuyệt đối () Luôn áp dụng thẻ alt (alt="Company ABC">) Hầu hết các gmail clien thì khoác định không hiển thị ảnh. Nếu chúng ta không sử dụng thẻ alt thì nó sẽ không còn hiển thị gì cả. Không nhúng Video hay Flash Không đề nghị là phát minh xuất sắc nếu như nhúng video xuất xắc flash trực tiếp vào tin nhắn của doanh nghiệp. Một số gmail client không cung cấp code nhúng của doanh nghiệp với hầu hết các cỗ thanh lọc spam hoàn toàn có thể ghi lại bạn nhỏng là một trong những tin nhắn spam. Tgiỏi do nhúng Clip, flash vào trong gmail, chúng ta nên chèn hình ảnh chụp Clip xuất xắc flash với chế tạo một link cho tới video clip, flash cho tới ảnh đó. Người phát âm vẫn có thể clichồng vào với xem chúng trên trình cẩn thận. Không bắt buộc tin nhắn client nào thì cũng cung cấp hoàn toàn hình họa Gif động Hãy để ý Việc sử dụng hình họa gif rượu cồn. Trong khi phần nhiều cung cấp gif động thì Outlook 2007 ko cung ứng, có thể chỉ hiển thị form trước tiên của anh ý gif. Cẩn thận với vấn đề phân tách nhỏ dại hình ảnh Nếu chúng ta gồm một cái hình ảnh mập cùng chia nhỏ tuổi ra nhằm ghxay bởi HTML sử dụng table cess, img tag thì bạn phải thử nghiệm cẩn trọng. Một số gmail client đã auto thêm vào khoảng trống giữa những ảnh của công ty. Kiểm tra gmail của người sử dụng trong ngôi trường hòa hợp hình họa bị ẩn Vì nhiều phần email client đang khoác định ẩn ảnh của doanh nghiệp. Nên sẽ tương đối đặc trưng nếu khách hàng soát sổ chúng trước lúc gửi. Xem xét kích cỡ tệp tin của bạn Email tuyệt hình họa càng vơi thì sẽ càng dễ thiết lập về. Nếu bạn không muốn bạn nhận buộc phải hóng 30 giây nhằm gọi được email của doanh nghiệp thì nên để ý lại form size hình ảnh, gmail của bạn.

Backgrounds

Không hoàn toàn cung ứng ảnh nền Nếu bạn đang thực hiện hình họa làmbackground thì hãy chú ý là một số trong những email client sẽ không còn hiển thị bọn chúng. Nếu bạn vẫn hy vọng thực hiện thì hãy dùng thẻHTML nuốm bởi vì áp dụng CSS. Full body background colors Một số email client (nlỗi Gmail) ko hiển thị background color mà lại các bạn phối sinh sống thẻ Nếu bạn đang cấu hình color nền mang đến background thì nên cần cần sử dụng một thẻ div bao cùng với màu sắc nền. Vì nếu body toàn thân background color không hiển thị thì bạn sẽ vẫn hiển thị được một màu sắc tựa như.

Một số để ý khác

Không nhập văn bản không tính thẻ Tất cả nội dung bạn nhtràn vào bên trên thẻ toàn thân sẽ không còn được thực hiện Không chèn javascript Hầu không còn những cỗ thanh lọc đã xác minh bọn chúng như thể mã ô nhiễm và việc gmail của người tiêu dùng bị coi như spam là không tránh khỏi. Tránh sử dụng Microsoft Office MãHTML được tạo thành vị MS Office đã có không ít sự việc Lúc hiện trên tin nhắn client. Nếu chúng ta gồm ý định copy từ bỏ MS Office thì hoàn toàn có thể áp dụng Dreamweaver nhằm đơn giản hóa thẻ html của bạn.

*


Trong Lúc Microsoft đã gồm có cách tân Khủng về các tiêu chuẩn web nghỉ ngơi IE, thì hình như chúng ta sẽ đi trở lại vào Việc hỗ trợ email HTML ngơi nghỉ Outlook. Trong phiên bản Outlook 2007, chúng ta vẫn gửi cơ chế dàn trang HTML từ bỏ bởi nhân IE sang bằng nhân Word (có lẽ rằng là do nguyên nhân bảo mật), điều đó có tác dụng tê liệt trọn vẹn các tin nhắn HTML so với trước. Đối cùng với ngẫu nhiên ai làm mail kinh doanh với quan trọng kế, lập trình những email HTML thu hút, đưa ra quyết định này chẳng khác nào buộc bọn họ đề nghị giơ vậy đnóng và nguyền rủa Bill Gates.

Và tất cả đa số mong muốn rằng, vào phiên bạn dạng Outlook 2010, Microsoft sẽ trở về cùng với nhân IE, tuy thế chung cuộc, họ vẫn đính bó cùng với nhân Word. Những cái đinc ba cùng ngọn gàng đuốc khó tính sẽ vung lên, tuy thế có thể họ vẫn nên tầm thường sinh sống với nhân Word trong vô số nhiều năm nữa. Thậm chí nếu như sắp tới đây Microsoft gửi sang trọng cần sử dụng nhân IE đến phiên bạn dạng Outlook 2012, họ vẫn vẫn còn đó số đông khách hàng sẽ sử dụng Outlook 2007, 2010. Vậy là nếu như bạn trước đó chưa từng học tập cách xây dựng tin nhắn HTML mang đến Outlook, bây giờ là lúc để học tập.

BlinkContact vẫn xây đắp không hề ít email HTML cho các quý khách đặc biệt, và Cửa Hàng chúng tôi đã thực hiện hàng trăm chiến dịch trong tương đối nhiều năm, vì thế công ty chúng tôi có khá nhiều kinh nghiệm tay nghề vào việc test tin nhắn HTML với các công tác đọc khác nhau cùng thu được không ít nghệ thuật cần thiết. Với Outlook 2007, chúng ta đang đương đầu với chương trình đọc tin nhắn khó chịu tốt nhất, với nói chung, giả dụ tin nhắn HTML của khách hàng hiển thị giỏi trên Outlook thì gần như chắc hẳn rằng nó hiện nay xuất sắc ở tất cả những chương trình khác.

Hạn chế của Outlook với tin nhắn HTML

Điều thứ nhất bạn cần phải hiểu Khi xây dựng với code mang lại Outlook là các luật lệ thường thì thông thể vận dụng được ở đây. Hãy gạt bỏ tất cả các kinh nghiệm cần sử dụng CSS – tưởng tưởng nhiều người đang quay trở lại năm 2001 cùng với đông đảo tag HTML thời gian đó. Lưu ý rằng một số đồ vật vào CSS có thể vẫn chạy được trong Outlook, cơ mà tôi khulặng các bạn tách cần sử dụng bọn chúng vị theo tay nghề của tôi, bọn chúng thường không hiển thị đồng bộ, cùng thiệt xấu hổ Lúc cảm nhận một email phản hồi trường đoản cú quý khách hàng của người tiêu dùng hỏi rằng vì sao tin nhắn HTML lại bị tan vỡ lúc họ gửi đi. Vậy nên hãy tin cẩn cùng làm theo hồ hết gì tôi nói.

Xem thêm: 3 Bước Thêm Địa Điểm Trên Facebook Bằng Máy Tính Và Điện Thoại

Những tay nghề phổ biến cùng với Outlook 2007

Quên đi Việc bóc tách câu chữ bởi CSS. Chỉ tạo nên gmail HTML với những table và hình ảnh GIF trống. Không thẻ
. Hãy coi ví dụ bên dưới đây… Không cần sử dụng background, chỉ sử dụng color nền.Nếu bạn có nhu cầu đặt text lên trên mặt hình họa trong tin nhắn HTML, bạn sẽ phải tạo một vùng vùng sau phần text với cùng 1 màu nền độc nhất, rồi giảm nhỏ tuổi hình ảnh theo bố cục tổng quan. Quý Khách rất có thể cần sử dụng các style cơ bạn dạng, cơ mà hãy cần sử dụng chúng thẳng vào từng tag, đừng nhằm vào phần header. Đừng ráng tưởng tượng, không ít đồ vật chạy tốt bên trên trình chú ý nhưng lại không chạy được trên Outlook. Đừng sử dụng padding, chỉ dùng margin. Padding sẽ không còn hiển thị chuẩn chỉnh. Dùng code càng dễ dàng và đơn giản càng tốt. Tối ưu hóa email HTML của công ty cho chế độ ‘tắt ảnh’, đó thường là cơ chế khoác định lúc bạn dấn mlàm việc email. Nếu bạn không khai báo chiều cao của ảnh, gmail HTML có khả năng sẽ bị thu hẹp theo theo hướng dọc, đẩy phần ngôn từ text lên phía bên trên,mặc dù cho chính mình đã xác định chiều rộng hình ảnh.

Hãy xem qua ví dụ dưới đây:



*

Hãy coi đoạn text đầu tiên nhằm đọc cách tin nhắn HTML nên được code mang lại phù hợp với Outlook.

*

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

”"

Lưu ý rằng chúng ta đã sử dụng table để phân loại bố cục tổng quan, ko sử dụng CSS, và chúng ta sẽ dãn những ô bằng những hình họa GIF trống. Tất cả những style được chuyển trực tiếp vào từng tag tương ứng, ko chuyển vào tag thông thường cục bộ. Cũng để ý rằng chúng ta đang sắp xếp khoảng trống dọc bằng margin, không sử dụng padding.

phần lớn người xây đắp trang web cười chê gần như giải pháp nlỗi Dreamweaver vị nó không cung ứng cơ chế design đúng đắn mang đến CSS cải thiện. Nhưng Dreamweaver thực thụ là một trong công cụ xuất sắc đến email, và nó có thể hiển thị gmail tương đối đúng mực. Ban đầu nó có thiết kế nhằm tạo thành trang web trước cả khi các web nhiều Color được phổ biến, Có nghĩa là siêu phù hợp cùng với mục tiêu của chúng ta. Nó chắc hẳn rằng để giúp đỡ bạn chế tác các table, yêu cầu đừng mắc cỡ sử dụng nó.

Test gmail HTML của bạn

Có 3 cách để chạy thử email HTML:

gửi nó cho bao gồm các bạn với coi bên trên các máy vi tính khác biệt cùng với phần nhiều công tác hiểu khác nhau áp dụng các dịch vụ demo nlỗi Litmus với cần sử dụng mẹo ‘Skết thúc page as Email’ (chưa đến Window/IE).

Cách thứ nhất đem lại công dụng chính xác nhất nhưng gồm trnghỉ ngơi hổ thẹn là khó triển khai, về cơ phiên bản bạn cũng có thể cần sử dụng nhì phương pháp sau.

Nếu bạn đang sử dụng Windows và bao gồm sở hữu Outlook trong vào vật dụng, biện pháp kiểm tra nkhô cứng duy nhất dù cẩu thả là mở mẫu gmail HTML của doanh nghiệp trong IE, với chọn File > Send > Page by email. Một cửa sổ email Outlook đang lộ diện, chúng ta cyếu code đúng chuẩn vào kia. Đừng tin vào phần nhiều gì hiển thị khi chúng ta sẽ biên soạn gmail, hãy gửi nó cho thiết yếu bạn, tiếp đến chúng ta có thể xem gmail trông ra làm sao.

Nếu các bạn là một trong người dùng Mac, mẹo này không làm cho được, chúng ta có thể đã mong mỏi cần sử dụng một dịch vụ chạy thử trình xem xét có bao hàm cả test email HTML. Tôi sử dụng Limus, nó cho phép chúng ta thử nghiệm tin nhắn HTML cùng với sản phẩm tá webmai và chương trình gọi gmail để có lẽ rằng email HTML của người sử dụng hiển thị đúng. Nó cũng được cho phép các bạn kiểm tra email HTML trong chế đọ bật hoặc tắt ảnh. Thương Mại Dịch Vụ này mắc, nhưng lại nếu bạn cần sử dụng những, nó thiệt đáng giá. Các chương trình phát âm gmail HTML có không ít vụ việc về tương thích rộng cả những phiên bản sao mô bỏng bọn chúng trên trình để mắt tới, có thể bạn sẽ phải kiểm tra nhiều hơn.


Cấu trúc phổ biến cho 1 chủng loại gmail kinh doanh template hay gồm những: banner, tiêu đề, ngôn từ thông điệp với phần chân gmail.
Quý khách hàng có thể cnhát phần nhan đề ngay bên trên thuộc, có tác dụng biệu tượng công ty nhỏ rộng với thuộc vị trí và một sản phẩm với tiêu đề. Cũng phải thống tuyệt nhất về một cấu tạo phổ biến.