Cách thiết kế email html đơn giản nhất

Nhanluu1294 Nhanluu1294 @Nhanluu1294

Cách thiết kế email html đơn giản nhất

19/04/2015 01:07 PM
2,482
Một vài điểm chúng ta cần chú  ý trong việc thiết kế Email Marketing. Điều này không giống như thiết kế web. Email có những chuẩn riêng về kiểu dáng, hình ảnh và kích thước.




Thiết kế Email Marketing với HTML

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

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

Về Bố cục (layout)

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

CSS

  • Không sử dụng stylesheet bên ngoài
    Phần lớn sẽ không làm việc trong các email client và bạn nên đưa chúng vào trong mã HTML của email sử dụng inline CSS.
  • Không sử dụng CSS class - luôn luôn sử dụng inline CSS
    Một số email clients không hỗ trợ CSS classe. Thay vì sử dụng CSS class, bạn nên sử dụng inline CSS. Ví dụ sử dụng
    nội dung
    thay vì
    nội dung

  • Không sử dụng CSS shortcut
    CSS cho phép bạn set thuộc tính thành nhóm. Ví dụ style="font: 12px, Arial" thay vì nhóm các thuộc tính lại, bạn nên chia thành các phần riêng lẻ như style="font-size:12px; font-family:Arial"
  • Tránh sử dụng  CSS float hay position option
    Một số email client không hiển thị tốt với 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 đối
    Thay vì chèn ảnh ảnh như() bạn phải sử dụng url tuyệt đối ()
  • Luôn sử dụng thẻ alt (alt="Company ABC">)
    Hầu hết các email clien thì mặc định không hiển thị ảnh. Nếu bạn không sử dụng thẻ alt thì nó sẽ không hiển thị gì cả.
  • Không nhúng  Video hay Flash
    Không phải là ý tưởng tốt nếu nhúng video hay flash trực tiếp vào email của bạn. Một số email client không hỗ trợ code nhúng của bạn và hầu hết các bộ lọc spam có thể đánh dấu bạn như là một email spam. Thay vì nhúng video, flash vào trong email, bạn nên chèn ảnh chụp video hay flash và tạo một liên kết tới video, flash tới ảnh đó. Người đọc sẽ có thể click vào và xem chúng trên trình duyệt.
  • Không phải email client nào cũng hỗ trợ hoàn toàn ảnh Gif động
    Hãy xem xét việc sử dụng ảnh gif động. Trong khi phần lớn hỗ trợ gif động thì Outlook 2007 không hỗ trợ, có thể chỉ hiển thị khung đầu tiên của anh gif.
  • Cẩn thận với việc chia nhỏ hình ảnh
    Nếu bạn có một cái ảnh lớn và chia nhỏ ra để ghép bằng HTML sử dụng table cess, img tag thì bạn cần phải test cẩn thận. Một số email client sẽ tự động thêm vào khoảng trống giữa các ảnh của bạn.
  • Kiểm tra email của bạn trong trường hợp ảnh bị ẩn
    Vì phần lớn email client sẽ mặc định ẩn ảnh của bạn. Nên sẽ rất quan trọng nếu bạn kiểm tra chúng trước khi gửi.
  • Xem xét kích cỡ file của bạn
    Email hay ả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 bạn thì hãy xem xét lại kích thước ảnh, email của bạn.

Backgrounds

  • Không hoàn toàn hỗ trợ ảnh nền
    Nếu bạn đang sử dụng ảnh làm background thì hãy để ý là một số email client sẽ không hiển thị chúng. Nếu bạn vẫn muốn sử dụng thì hãy dùng thẻ HTML thay vì sử dụng CSS.
  • Full body background colors
    Một số email client (như Gmail) không hiển thị background color mà bạn set ở thẻ Nếu bạn đang cấu hình màu nền cho background thì nên dùng một thẻ div bao với màu 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ú ý khác

  • Không nhập nội dung ngoài thẻ 
    Tất cả nội dung bạn nhập vào bên trên thẻ body sẽ không được sử dụng
  • Không chèn javascript
    Hầu hết các bộ lọc sẽ xác định chúng như là mã độc hại và việc email của bạn bị coi như spam là không tránh khỏi.
  • Tránh sử dụng Microsoft Office
    Mã HTML được tạo ra bởi MS Office sẽ có rất nhiều vấn đề khi hiển thị trên email client. Nếu bạn có ý định copy từ MS Office thì có thể sử dụng Dreamweaver để đơn giản hóa thẻ html của bạn.

Increase your website traffic with Attracta.com


Thủ thuật và Kinh nghiệm thiết kế email HTML cho Outlook 2007, 2010

Trong khi Microsoft đã có những cải tiến lớn về các tiêu chuẩn web ở IE, thì dường như họ đang đi ngược lại trong việc hỗ trợ email HTML ở Outlook. Trong phiên bản Outlook 2007, họ đã chuyển chế độ dàn trang HTML từ bằng nhân IE sang bằng nhân Word (có lẽ là vì lý do bảo mật), điều đó làm tê liệt hoàn toàn các email HTML so với trước. Đối với bất kỳ ai làm  mail marketing và cần thiết kế, lập trình các email HTML hấp dẫn, quyết định này chẳng khác nào buộc họ phải giơ nắm đấm và nguyền rủa Bill Gates.

thiết kế email html cho outlook 2010



Và tất cả đều hy vọng rằng, trong phiên bản Outlook 2010, Microsoft sẽ quay trở lại với nhân IE, nhưng rốt cuộc, họ vẫn gắn bó với nhân Word. Những cái đinh ba và ngọn đuốc giận dữ đang vung lên, nhưng dường như chúng ta vẫn phải chung sống với nhân Word trong nhiều năm nữa. Thậm chí nếu sắp tới Microsoft chuyển sang dùng nhân IE cho phiên bản Outlook 2012, chúng ta sẽ vẫn còn những khách hàng đang dùng Outlook 2007, 2010. Vậy là nếu bạn chưa từng học cách thiết kế email HTML cho Outlook, bây giờ là lúc để học.

BlinkContact đã thiết kế rất nhiều email HTML cho các khách hàng quan trọng, và chúng tôi đã thực hiện hàng nghìn chiến dịch trong nhiều năm, vì thế chúng tôi có nhiều kinh nghiệm trong việc test email HTML với các chương trình đọc khác nhau và thu được nhiều kỹ thuật cần thiết. Với Outlook 2007, chúng ta đang đối mặt với chương trình đọc email khó tính nhất, và nói chung, nếu email HTML của bạn hiển thị tốt trên Outlook thì gần như chắc chắn nó hiện tốt ở 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 cần phải hiểu khi thiết kế và code cho Outlook là các quy tắc thông thường thông thể áp 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 quay trở lại năm 2001 với những tag HTML lúc đó. Lưu ý rằng một số thứ trong CSS có thể vẫn chạy được trong Outlook, nhưng tôi khuyên bạn tránh dùng chúng vì theo kinh nghiệm của tôi, chúng thường không hiển thị nhất quán, và thật xấu hổ khi nhận được một email phản hồi từ khách hàng của bạn hỏi rằng tại sao email HTML lại bị vỡ khi họ gửi đi. Vậy nên hãy tin tưởng và làm theo những gì tôi nói.

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

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

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



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

<tr>
<td width=”20″>
<img src=”http://client.muralconsulting.com/neustar/7ways/spacer.gif” width=”20″ height=”1″ border=”0″ alt=”" />
</td>
<td bgcolor=”#ffffff” width=”530″>
<p style=”font: 14px/20px Arial, Helvetica, sans-serif; color: #002765; margin-bottom:10px;”>
<strong>Budgets are tight, yet your customers’ demands for high performance from your online service are growing.</strong> The good news is that you don’t need to spend a lot of money to make your web applications faster&hellip; if you know where to look!</p>
</td>
<td width=”20″>
<img src=”http://client.muralconsulting.com/neustar/7ways/spacer.gif” width=”20″ height=”1″ border=”0″ alt=”" />
</td>
</tr>

Lưu ý rằng chúng ta đang dùng table để phân chia bố cục, không dùng CSS, và chúng ta đang dãn các ô bằng các ảnh GIF trống. Tất cả các style được đưa thẳng vào từng tag <p> tương ứng, không đưa vào tag <p> chung toàn cục. Cũng lưu ý rằng chúng ta đang bố trí khoảng trống dọc bằng margin, không dùng padding.

Nhiều người thiết kế website chê cười những công cụ như Dreamweaver vì nó không cung cấp chế độ design chính xác cho CSS nâng cao. Nhưng Dreamweaver thực sự là một công cụ tốt cho email, và nó có thể hiển thị email khá chính xác. Ban đầu nó được thiết kế để tạo 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 đích của chúng ta. Nó chắc chắn sẽ giúp bạn tạo các table, nên đừng ngại dùng nó.

Test email HTML của bạn

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

  • gửi nó cho chính bạn và xem trên các máy tính khác nhau với những chương trình đọc khác nhau
  • sử dụng dịch vụ test như Litmus
  • và dùng mẹo ‘Send page as Email’ (chỉ với Window/IE).

Cách thứ nhất đem lại kết quả chính xác 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à có cài Outlook trong trong máy, cách test nhanh nhất dù cẩu thả là mở mẫu email HTML của bạn trong IE, và chọn File > Send > Page by email. Một cửa sổ email Outlook sẽ mở ra, bạn chèn code chính xác vào đó. Đừng tin vào những gì hiển thị khi bạn đang soạn email, hãy gửi nó cho chính bạn, sau đó bạn có thể xem email trông như thế nào.

Nếu bạn là một người dùng Mac, mẹo này không làm được, bạn có thể sẽ muốn dùng một dịch vụ test trình duyệt có bao gồm cả test email HTML. Tôi dùng Limus, nó cho phép bạn test email HTML với hàng tá webmai và chương trình đọc email để chắc rằng email HTML của bạn hiển thị đúng. Nó cũng cho phép bạn test email HTML trong chế đọ bật hoặc tắt ảnh. Dịch vụ này đắt, nhưng nếu bạn dùng nhiều, nó thật đáng giá. Các chương trình đọc email HTML có nhiều vấn đề về tương thích hơn cả các bản sao mô phỏng chúng trên trình duyệt, có thể bạn sẽ cần test nhiều hơn.

Chắc chắn đây không phải là một bài viết đầy đủ về thiết kế email HTML cho Outlook, nhưng nó sẽ tạo cho bạn một nền tảng tốt. Giống như mọi thứ trên web, bạn chắc chắn sẽ tìm thêm nhiều thói quen khác, nhưng làm theo các hướng dẫn trên đây sẽ giúp bạn 90% đó trong việc thiết kế email HTML.

MỜI BẠN THAM KHẢO THÊM:

Cách thiết kế Email Marketing chuyên nghiệp.


Cấu trúc chung trong mẫu email marketing template :

Cấu trúc chung cho một mẫu email marketing template thường bao gồm: banner, tiêu đề, nội dung thông điệp và phần chân email.
Bạn có thể chèn phần đầu đề ngay trên cùng, làm logo nhỏ hơn và cùng nằm trên cùng một hàng với tiêu đề. Cũng cần thống nhất về một cấu trúc chung.
1. Hình nền
Vấn đề đầu tiên được nhắc tới là việc hình nền rất khó được hiển thị trong hộp thư đến – gồm trong cả Outlook 2010. Nếu bạn muốn sử dụng hình nền, hãy cố gắng thiết kế sao cho mẫu email marketing template vẫn giữ được vẻ đẹp khi hình nền không được hiển thị, có thể làm việc này bằng cách sử dụng một màu nền phù hợp.
2. Tên đầu đề
Đây là dòng chữ nhỏ nhằm ngay phía trên đầu của email thường được gọi là “Chữ tạo lòng tin” và cũng là dòng chữ đầu tiên người nhận đọc được khi mở email, dù hình ảnh có hiển thị hay không.
Sử dụng dòng tiền đầu đề
Chèn thêm đường link “xem trên trình duyệt web” để người xem có thể truy cập vào nội dung được lưu trữ trên trang web
Chèn thêm đường link opt out (đăng ký hủy bỏ nhận tin), giống như phần ở chân email
3. Kích thước banner nên nhỏ gọn và nhằm trong phạm vi vùng hiển thị (preview pane)
Có thể đặt logo ngay phần đầu email để người xem dễ dàng nhìn thấy và nhận biết được thương hiệu của bạn. Tuy nhiên, điều này có thể trở nên vô nghĩa khi chúng không thể được hiển thị và người nhận dường như đang đọc một email trống rỗng. Do đó logo không nên có kích thước quá lớn và nên đặt tiêu đề chính ngay kế bên logo, thay vì phía bện dưới.
Như bạn đã biết, người xem thường có xu hướng nhìn từ phía tay trái trên cùng, do đó bạn có thể tùy nghi trong việc đặt logo phía bên trái và tiêu đề phía bên phải (theo cách truyền thống) hay ngược lại.
Nếu kích thước banner không lớn, bạn có thể đưa thêm một số nội dung copy vào trong phạm vi vùng hiển thị (preview pane). Việc này cho phép người đọc tương tác với nội dung mẫu email marketing template trong thời gian ngắn nhất thậm chí trước khi hình ảnh được hiển thị, nếu nội dung kêu gọi hành động đủ thu hút.
4. Quyền hủy bỏ đăng ký nhận email marketing template
Cuối cùng, bạn cần tích hợp một đường link đăng kí hủy bỏ việc nhận mail. Đường link này nên là chữ, tránh sử dụng hình ảnh để phòng khi chúng không được hiển thị và người nhận không thể thực hiện được chức năng trên. Khi người nhận muốn đăng kí không tiếp tục nhận email và không biết làm sao để thực hiện, khả năng họ bấm vào nút spam là rất lớn.

Một số lời khuyên khi viết nội dung
Một khi bắt tay viết nội dung, bạn cần chú ý rằng chúng phải được trình bày rõ ràng nhằm giúp người đọc dễ dàng theo dõi.
1. Xây dựng cấu trúc dựa trên bảng (table)
Dù việc sử dụng bảng (table) không phải là xu hướng thiết kế web mới nhất, nhưng chúng được xem là cách tốt nhất hình thành nên cấu trúc của một email, và hơn nữa chúng tạo ra sự thuận tiện khi điều chỉnh mẫu email marketing template.
Thông thường bạn hay đặt hình ảnh ở phía bên trái hay bên phải một đoạn nội dung. Bạn thâm chí có thể thay đổi luân phiên vị trí giữa hình ảnh và nội dung trong toàn bộ email.
Một số người có thể click vào hình ảnh còn số khác thì không, do đó khi có hình ảnh, bạn có thể biến chúng thành link tới phần còn lại của bài viết trên trang web.
2. Đừng quên các thiết bị di động
Ngày càng có nhiều người sử dụng các thiết bị di động cho việc nhận và đọc email. Điểm bất lợi nằm ở chỗ là người đọc cần phải phóng to hay thu nhỏ khi đọc thông tin. Nên bố cục phần nội dung theo dạng cột và giữ đều kích thước từng cột từ trên xuống dưới, việc này sẽ tạo sự dễ dàng hơn cho người đọc.
3. Chia sẻ thông tin
Một khi email đã nằm ngay trước mắt người nhận, hãy tạo điều kiện thuận lợi nhất cho phép họ có thể chia sẻ thông tin này cho bạn bè và người thân ngay lập tức.

Tránh rơi vào hộp thư rác

1. Tỉ lệ giữa chữ và hình ảnh
Để tránh rơi vào hộp thư rác, tỉ lệ giữa chữ và hình ảnh nên là 60% : 40%, với ít nhất 3 hình trên một trang.
2. Kích cỡ chữ
Nếu bạn chọn kích cỡ chữ quá lớn, khả năng email rơi vào hộp thư rác sẽ rất lớn. Chỉ khi gửi kiểm tra, bạn mới biết được liệu kích cỡ chữ đã ổn hay chưa.
3. Từ ngữ được xem là spam
Bất cứ nhà cung cấp dịch vụ gửi email (ESP) nào cũng sử dụng công cụ kiểm tra spam trong đó có chỉ định những từ ngữ được liệt vào spam. Tuy nhiên chỉ khi gửi thử, bạn mới biết được email sẽ nằm trong hộp thư đến hay trong hộp thư rác.

Hướng dẫn soạn Email và chọn mẫu Email Marketing

     Sau khi bạn đã có tài khoản để gửi thư và một danh sách người nhận Email, công đoạn sau đó là Soạn nội dung mail để gửi đi. Việc soạn mail thì rất đơn giản nhưng để người đọc chú ý đến bức mail của bạn cũng như để bức mail của bạn trông chuyên nghiệp hơn, bạn nên soạn ra một mẫu mail có bố cục đẹp mắt, sử dụng hình ảnh và các hiệu ứng nền. Điều đó sẽ dễ dàng nếu bạn biết một chút kiến thức về HTML, Photoshop. Tuy nhiên nếu bạn không biết gì về design vẫn có thể dễ dàng lựa chọn lấy một mẫu trong các mẫu email marketing được design sẵn của chúng tôi.

Sau đây là các bước hướng dẫn soạn nội dung mail để gửi đi :


phan mem gui mail hang loat

B1. Bấm 'Soạn mail mới'
Ở cửa sổ chính của phần mềm, bấm nút 'Soạn mail mới' trên thanh công cụ.



phan mem gui mail hang loat

B2. Bấm 'Lựa chọn Template'
Bấm lựa chọn mẫu mail. Nếu bạn không cần lựa chọn mẫu mail có thể soạn mail bình thường và bỏ qua bước này.



phan mem gui mail hang loat

B3. Chọn mẫu email marketing và bấm 'Lựa chọn'
Bạn lựa chọn mẫu mail ưa thích tùy vào mục đích của bạn và bấm 'Lựa chọn'. Ví dụ bạn cần chưng bày nhiều sản phẩm, bạn có thể chọn mẫu MuaChung hoặc CungMua.



phan mem gui mail hang loat

B4. Sửa lại nội dung theo ý thích rồi bấm 'Thêm vào danh sách'
Bạn sửa lại nội dung bức mail theo ý thích :

- Bạn có thể chèn thêm tên người nhận vào bức mail bằng cách bấm vào ô Tùy biến trên thanh công cụ và chọn cú pháp ##Tên## hoặc gõ trực tiếp cú pháp ##Tên## vào bât kì đâu bạn muốn trên bức mail. Phần mềm sẽ tự động thay thế cú pháp ##Tên## thành tên người nhận mà bạn đã điền vào phần mềm. VD Xin chào ##Tên## => Xin chào CTY ULTRASOFT
- Để thay đổi hoặc chèn thêm hình ảnh, bấm vào nút hình bức tranh trên thanh công cụ.
- Bạn có thể soạn mail ở chế độ HTML bằng cách bấm vào nút [A/a] ở ngoài cùng trên thanh công cụ.
- Bạn có thể sử dụng các phần mềm thiết kế ngoài như DreamWeaver, Microsoft Fontpage, Microsoft Word, Notepad ++ để sửa / thiết kế mẫu mail rồi dán trực tiếp vào cửa sổ soạn thảo của UltraMailer.

Sau khi soạn xong nội dung bức mail, bấm Thêm vào danh sách. Quá trình soạn mail hoàn tất. Bạn có thể bấm Bắt đầu để bắt đầu gửi thư.

Nếu bạn gặp thắc mắc gì trong quá trình soạn mail, xin vui lòng liên hệ chúng tôi để được trợ giúp. Bộ phận hỗ trợ kĩ thuật luôn hoạt động vào toàn bộ các ngày trong tuần để giải đáp thắc mắc của bạn.




Hướng dẫn làm chữ ký trong gmail
Cách làm e-maketing chuyên nghiệp nhất
Cách thiết kế email marketing chuyên nghiệp
Cách thiết kế email quảng cáo hiệu quả
Cách viết thư quảng cáo hay thu hút khách hàng
Kế hoạch kinh doanh online làm giàu không khó



(ST)

Hỏi đáp, bình luận, trả bài:
*địa chỉ email của bạn được bảo mật

Hot nhất
Top xink
Bộ sưu tập
Chợ xink
Thanh lý