Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Xây dựng một Template Email bằng HTML từ đầu

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Cách tốt nhất để hiểu quá trình bất kỳ là tự mình thực hiện nó, từ đầu đến cuối. Hôm nay, chúng ta sẽ làm điều đó với thiết kế email, bằng cách xây dựng một template email HTML từ đầu.

Nguyên liệu

Để bắt đầu, cần lưu ý nơi mà tôi đã tải về một số nguồn.

Bây giờ, như chúng ta thảo luận trong bài trước, bạn sẽ cần phải bắt đầu tài liệu HTML email của bạn với một doctype XHTML:

Sau khi thực hiện xong điều đó, chúng ta có thể bắt đầu xây dựng phần còn lại của cấu trúc.

Tạo Body và Table chính

Trước tiên, chúng ta sẽ thêm một cấu trúc tổng thể cho email của chúng ta, bắt đầu với một thẻ <body>. Chúng ta sẽ thiết lập margin và padding trên thẻ body để tránh bất kỳ khoảng trắng không mong muốn.

Chúng ta cũng sẽ thêm một table có chiều rộng 100%. Điều này đóng vai trò như một thẻ body thật cho email của chúng ta, bởi vì phong cách của thẻ body không được hỗ trợ đầy đủ. Nếu bạn muốn thêm một màu nền cho 'body' của email, bạn sẽ cần phải áp dụng nó vào table lớn này để thay thế.

Thiết lập cellpadding và cellspacing thành 0 để tránh bất kỳ khoảng trắng không mong muốn trong table của bạn.

Lưu ý: Chúng ta sẽ để border="1" trên tất cả các table của chúng ta, do đó chúng ta có thể nhìn thấy bộ khung của layout của chúng ta khi chúng ta thực hiện tiếp. Chúng ta sẽ loại bỏ chúng ở phần cuối với một Find & Replace đơn giản.

1

Nếu một thuộc tính tồn tại trong HTML, sử dụng nó thay vì CSS

Bây giờ đặt một table được canh giữa rộng 600 pixel bên trong table container. 600 pixel là chiều rộng tối đa an toàn cho email của bạn để hiển thị một cách thoải mái trong hầu hết các máy tính để bàn và webmail trên hầu hết các độ phân giải màn hình.

Thiết lập chiều rộng này bằng cách sử dụng HTML thay vì CSS, sử dụng các thuộc tính width. Quy tắc vàng trong phát triển email HTML là: nếu một thuộc tính tồn tại trong HTML, hãy sử dụng nó thay vì CSS.

Chúng ta sẽ thay thế tiêu đề chúc mừng 'Hello!' bằng table này:

Chúng ta cũng đã thêm một thuộc tính phong cách trực tiếp thiết lập border-collapse thành collapse. Nếu chúng ta không làm điều này, các phiên bản mới hơn của Outlook sẽ thêm một khoảng trắng nhỏ giữa table của chúng ta và border.

2

Tạo ra cấu trúc và tiêu đề

Trong thiết kế của chúng ta, chúng ta có thể thấy rằng email được chia thành ba phần hợp lý, vì vậy chúng ta sẽ tạo ra một dòng cho mỗi phần.

Chúng ta nhân đôi một dòng mà chúng ta đã tạo để mà chúng ta có tất cả là ba cái. Tôi đã thay đổi văn bản bên trong chúng, do đó chúng ta có thể dễ dàng xác định mỗi dòng.

3

Bây giờ chúng ta sẽ thêm màu sắc dựa theo thiết kế. Vì bgcolor là một thuộc tính HTML hợp lệ, nên chúng ta sẽ sử dụng nó để thiết lập màu nền thay vì CSS. Hãy luôn nhớ sử dụng đầy đủ sáu ký tự của mã hex, vì ba ký tự viết tắt sẽ không phải lúc nào cũng làm việc.

4

OK, tiếp theo chúng ta sẽ tập trung vào Row 1. Chúng ta cần điều chỉnh padding trên ô và sau đó chèn hình ảnh của chúng ta.

Sử dụng Padding

Khi sử dụng padding trong email, bạn phải luôn luôn xác định mỗi một giá trị (top, right, bottom và left) nếu không bạn có thể không thể đoán trước được kết quả. Tôi thấy rằng bạn vẫn có thể sử dụng cách viết tắt, tức là padding: 10px 10px 8px 5px; nhưng nếu bạn đang gặp rắc rối bạn có thể viết nó ra dạng đầy đủ, tức là padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Nếu bạn đang gặp nhiều khó khăn hơn với padding (ví dụ, nếu nền tảng mà bạn gửi loại bỏ CSS của bạn), thì không sử dụng nó luôn. Chỉ cần sử dụng các ô trống để tạo ra khoảng trắng. Không cần phải sử dụng spacer GIFs, chỉ cần chắc chắn rằng bạn thêm style="line-height: 0; font-size: 0;" vào ô, đặt một &nbsp; bên trong và cho nó một chiều cao hoặc chiều rộng rõ ràng. Dưới đây là một ví dụ:

Đồng thời lưu ý rằng bạn có thể an tâm sử dụng padding trên các thẻ TD mà không phải trên thẻ P hoặc DIV. Chúng hành xử thất thường hơn rất nhiều.

Vì vậy, chúng ta sẽ sử dụng một số CSS trực tiếp để thêm padding vào ô. Sau đó chúng ta sẽ chèn hình ảnh của chúng ta, thêm văn bản alt và thêm style="display: block;" đó là một cách khắc phục phổ biến ngăn chặn một số trình đọc email thêm khoảng trắng bên dưới hình ảnh của bạn. Chúng ta sẽ canh giữa hình ảnh bằng cách thêm align="center" vào thẻ td của chúng ta. Chúng ta cũng sẽ thêm một thẻ alt, nó là quan trọng nhất khi email của chúng ta mới được nạp, trong hầu hết các trường hợp, là khi việc hiển thị hình ảnh bị tắt.

Lưu ý: Nếu nội dung của tiêu đề của bạn thực sự quan trọng đối với thông điệp của bạn, thì đừng sử dụng một tiêu đề chỉ có hình ảnh. Hãy nhớ rằng, hình ảnh mặc định bị chặn trên hầu hết các trình đọc email, do đó nếu có một khía cạnh của email của bạn là rất quan trọng, thì đừng bao giờ thêm nó như là một hình ảnh. Tuy nhiên, trong ví dụ này, tiêu đề của tôi là không quan trọng.

6

Tạo khu vực nội dung

Trước hết, chúng ta sẽ thêm một số padding vào ô ở giữa do đó table bên trong có một số khoảng trắng xung quanh nó, như thiết kế của chúng ta.

7

Bây giờ chúng ta sẽ thêm một table với ba dòng cho nội dung chính của chúng ta — một cho headline, một cho văn bản giới thiệu, và một cho một dòng với hai cột. Chúng ta sẽ thiết lập chiều rộng của table này là 100% chứ không phải là sử dụng một giá trị pixel, vì điều này sẽ giúp chúng ta linh hoạt nếu chúng ta muốn làm cho email của chúng ta có tính đáp ứng. Nếu bạn luôn để chiều rộng ở dạng pixel trên tất cả mọi thứ, bạn có thể gặp vấn đề với rất nhiều giá trị phải thay thế với các Media Query. Nếu chiều rộng của table lồng nhau của bạn dựa trên tỷ lệ phần trăm, thì khi bạn điều chỉnh độ rộng của các phần tử cha, tất cả mọi thứ sẽ điều chỉnh tương ứng.

8

Bây giờ, chúng ta sẽ thêm nội dung của chúng ta vào, và thêm một số padding cho ô ở giữa.

9

Bây giờ chúng ta sẽ thêm hai cột nội dung vào Row 3. Bởi vì chúng ta muốn có một 'margin' giữa hai ô, nhưng margin không được hỗ trợ, nên chúng ta sẽ tạo ra một table ba cột với một ô trống giữa hai cột ngoài cùng.

Càng nhiều càng tốt, tôi chỉ muốn sử dụng tỷ lệ phần trăm, khi bạn có nội dung với một kích thước cụ thể, có thể khó khắn để chuyển nó thành một tỷ lệ phần trăm (trong ví dụ này, các cột sẽ là 48.1%, nó có thể làm cho bạn bối rối). Vì lý do này, vì hai hình ảnh của chúng ta là rộng 260px, nên chúng ta sẽ tạo các cột cũng rộng 260px, với một cellmargin 20px ở giữa. (Nó sẽ tổng cộng 540px, trong đó 600px chiều rộng của table của chúng ta trừ padding 30px hai bên.) Hãy chắc chắn thiết lập font-size và line-height thành 0 và thêm một ký tự khoảng trắng &nbsp; trong cellmargin.

Chúng ta cũng sẽ thiết valign thành "top" cho cả hai ô để chúng sẽ canh theo chiều dọc phía trên, ngay cả khi một cột có nhiều văn bản hơn các cột khác. Canh mặc định theo chiều dọc là "middle".

10

Bây giờ hãy thêm hình ảnh và nội dung của chúng ta vào các cột đó. Vì chúng ta cần nhiều dòng, chúng ta sẽ lồng một table khác bởi vì chúng ta không thể sử dụng bất kỳ thẻ colspan hoặc rowspan. Chúng ta cũng sẽ thêm một số padding vào giữa hình ảnh và sao chép vào mỗi cột.

Ở đây chúng ta đã thiết lập chiều rộng của những hình ảnh bằng cách sử dụng HTML chiều rộng cột 100%. Điều này, một lần nữa, là nếu chúng ta làm cho email này có tính đáp ứng, chúng ta chỉ cần sử dụng Media Query để thay đổi chiều rộng của phần tử cha. Chúng ta sẽ phải thay thế chiều cao bằng pixel vì sử dụng style="height: auto" bây giờ không có tác dụng nữa (ho ho, Outlook). Vì vậy, chúng ta sẽ thiết lập nó bằng cách sử dụng pixel. Điều này có nghĩa là chúng ta sẽ phải thiết lập height: auto !important trên những hình ảnh đó bằng cách sử dụng Media Query để thay thế giá trị pixel, nhưng chúng ta có thể làm điều đó với một lớp. Vì chúng ta thiết lập chiều rộng là tỷ lệ phần trăm, nên chúng ta sẽ không cần phải thay thế nó. Càng ít thứ để thay thế, thì càng tốt.

13

Footer

Bây giờ, chúng ta sẽ thêm padding vào dòng footer của chúng ta.

14

Bên trong ô đó, chúng ta sẽ lồng vào một table để có được hai cột của chúng ta.

15

Chúng ta sẽ tạo một table nhỏ khác cho các biểu tượng mạng xã hội của chúng ta. Chúng ta sẽ thiết lập ô cha thành align="right". Hãy chắc chắn rằng bạn thiết lập border="0" trên các liên kết hình ảnh này (để tránh liên kết có viền màu xanh) và đừng quên display:block.

17

Bây giờ, chúng ta sẽ thêm văn bản của chúng ta và thêm chiều rộng vào các ô của chúng ta, chỉ để an tâm, mặc dù có rất nhiều khoảng trắng giữa chúng. Chúng ta sẽ thiết lập ô này thành 75% và cái còn lại 25%.

Và chúng ta đã có nó! Layout của chúng ta đã hoàn tất.

Xác nhận

Hãy chạy nó thông qua W3C Validator để đảm bảo rằng không có gì tệ hoặc bị hỏng. Nếu bạn đã làm theo một cách chính xác, nó sẽ nói rằng nó đã vượt qua.

email-build-valid

Tiếp theo chúng ta sẽ chạy một thử nghiệm thông qua Litmus để đảm bảo rằng cấu trúc của email hoạt động tốt. Dưới đây là một bản tóm tắt về thử nghiệm của tôi:

email-build-litmus
Hãy xem nó trực tuyến

Định phong cách văn bản của chúng ta

Dòng đầu tiên của chúng ta là heading. Chúng ta sẽ sử dụng thẻ <b> để tạo ra văn bản in đậm, bởi vì, như chúng ta đã biết, nếu nó tồn tại trong HTML, chúng ta sử dụng nó thay vì CSS.

Chúng ta cũng sẽ thêm phong cách trực tiếp này vào tất cả các ô khác của văn bản:

Tiếp theo chúng ta cần định phong cách văn bản footer, và chúng ta cũng sẽ làm gọn gàng liên kết Unsubscribe của chúng ta. Chúng ta sẽ định phong cách liên kết Unsubscribe của chúng ta sử dụng cả CSS và thẻ <font>  của HTML. Điều này nhằm đảm bảo cách tốt nhất để các liên kết không bao giờ hiển thị màu xanh mặc định.

20

Và chúng ta đã có nó! Tất cả mọi thứ đã xong. Đây là lúc để tắt các border và xem nó đẹp như thế nào. Hãy tìm và thay thế mỗi sự xuất hiện của border="1" bằng border="0".

21

Tại thời điểm này, nó trông như đang nổi trong không gian màu trắng, vì vậy hãy đi đến table rộng 600px đầu tiên của chúng ta, và thêm:

Bây giờ nó không giống như là đang nổi nữa. Thêm một hoàn thiện cuối cùng, tôi sẽ thêm 30px padding vào dưới cùng của ô đầu tiên, để ngăn chặn email của chúng ta bị ngắt đột ngột ở dưới cùng trong một số trình đọc email trực tuyến (như Apple Mail), và 10px padding ở phía trên, để header màu xanh chúng ta có thêm một ít không gian.

23

Và chúng ta đã xong! Bạn đã sẵn sàng cho một bài kiểm tra cuối cùng.

email-build-litmus-finished
Xem nó trực tuyến

Tổng kết!

Trước khi chúng ta kết thúc công việc và trở về nhà, nếu bạn đã sử dụng bất kỳ chú thích nào, hãy loại bỏ chúng. Một số trình đọc email có thể bị nghẹt vì những chú thích vì vậy không nên có bất kỳ mã không cần thiết nào ở bất cứ đâu trong các tập tin của bạn.

Bây giờ là lúc tốt nhất để làm một bài kiểm tra cuối cùng, và sau đó, email HTML của bạn sẽ sẵn sàng để gửi!

Để nâng cao những gì bạn đã học được, hãy kiểm tra các hướng dẫn sau:

Advertisement
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.