Hướng dẫn outlook html email template - outlook mẫu email html
|
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. Show 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ínhTrướ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ẻ
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ẽ để
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.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
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.
Bây giờ chúng ta sẽ thêm màu sắc dựa theo thiết kế. Vì
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 PaddingKhi 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à
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
Đồ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
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.: 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. Tạo khu vực nội dung Tạo khu vực nội dungTrướ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. 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. 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. 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.
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
Chúng ta cũng sẽ thiết
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
FooterBây giờ, chúng ta sẽ thêm padding vào dòng footer của chúng ta.
Bên trong ô đó, chúng ta sẽ lồng vào một table để có được hai cột của chúng ta.
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
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ậnHã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. 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: Định phong cách văn bản của chúng taDòng đầu tiên của chúng ta là heading. Chúng ta sẽ sử dụng thẻ
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ẻ
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
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.
Và chúng ta đã xong! Bạn đã sẵn sàng cho một bài kiểm tra cuối cùng. 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:
|
