Hướng dẫn template email html css - mẫu email html css
|
Trong bài này, tôi sẽ hướng dẫn cho bạn cách để tạo ra một email HTML có tính đáp ứng cao, đơn giản mà sẽ hoạt động trong mọi ứng dụng email, bao gồm tất cả các trình đọc email và ứng dụng trên thoại thông minh. Nó sử dụng Media Queries tối thiểu và một chiều rộng không cố định để đảm bảo khả năng tương thích tối đa. Show
Media Queries: Chỉ là một nửa giải phápCó những khi Media Queries là khá đủ để có được các email có tính đáp ứng, hoạt động trong iOS và các ứng dụng email trên Android, cả hai đều hỗ trợ Media Queries. Kể từ đó, đã có một sự gia tăng của các ứng dụng email được tạo ra cho cả iOS và nền tảng Android, với các mức độ hỗ trợ khác nhau cho các phương pháp phát triển email có tính đáp ứng. Đáng chú ý nhất là bản cập nhật mới nhất cho ứng dụng Gmail cho Android, được sử dụng nhiều trên Android (chiếm 11% trong tổng số). Nó chưa bao giờ hỗ trợ Media Queries, và vẫn chưa hỗ trợ, tuy nhiên hiện nay nó giảm dung lượng các email của bạn xuống bằng cách nén kích thước của bảng bao quanh để vừa với khu vực có thể xem của màn hình. Thật khó để kiểm soát, và khi toàn bộ email của bạn dựa trên Media Queries, thì nó cho ra một số kết quả rất khó chịu. Tại sao kích thước không cố định là giải pháp mới?Tin tốt là bạn có thể thiết kế và xây dựng một email trông tuyệt vời ở mọi ứng dụng mail, bao gồm cả những cái không hỗ trợ Media Queries. Bạn có thể làm điều này bằng cách sử dụng một layout không cố định. Tuy nhiên, có một vài nguyên tắt thiết kế mà bạn phải thực hiện. Những layout với các cột bằng nhau đó khi xếp chồng vào một cột không hoạt động tốt lắm khi sử dụng phương pháp này. Nếu bạn có thể học cách sống mà không có chúng, thì có một số thiết kế rất hiệu quả có thể làm việc rất tốt. Dưới đây là những gì chúng ta sẽ thực hiện trong ngày hôm nay:  Bắt đầuĐược rồi, chúng ta hãy bắt đầu từ đầu.
Những gì chúng ta đang tạo ra ở đây là trang cơ bản với body[yahoo] .class {}7, body[yahoo] .class {}8 và bảng container với một màu nền được áp dụng (cho cả body và một bảng lớn bao quanh, vì định phong cách cho thẻ body không được hỗ trợ đầy đủ). Để biết thêm thông tin về thiết lập cơ bản này, hãy xem Xây dựng một mẫu HTML Email từ đầu.Sau đó, tôi thêm bảng nội dung chính của chúng ta vào giữa với tên lớp 'content'. Hãy chú ýLưu ý: Bạn sẽ thấy rằng trong hướng dẫn này tôi sẽ đặt CSS trong phần head của tài liệu. Tôi thường đặt phong cách trong head khi tôi có dự định tái sử dụng chúng, và đặt trực tiếp các phong cách chỉ sử dụng một lần.: Bạn sẽ thấy rằng trong hướng dẫn này tôi sẽ đặt CSS trong phần head của tài liệu. Tôi thường đặt phong cách trong head khi tôi có dự định tái sử dụng chúng, và đặt trực tiếp các phong cách chỉ sử dụng một lần. Quan trọng: Bất cứ khi nào bạn sử dụng các quy tắc CSS trong phần head của tài liệu, bạn phải sử dụng một công cụ để mang tất cả chúng sang trực tiếp vào cuối của quá trình. Nếu bạn sử dụng một dịch vụ như MailChimp hay Campaign Monitor, chúng sẽ tự động cung cấp để mang các phong cách thành trực tiếp cho bạn khi bạn nhập thiết kế của bạn. Bạn phải làm điều này vì một số trình đọc email, chẳng hạn như Gmail, sẽ bỏ qua hoặc loại bỏ nội dung của thẻ body[yahoo] .class {}9, hoặc bỏ qua chúng. Bạn cũng có thể sử dụng một công
cụ như Premailer để mang CSS của bạn thành trực tiếp. Nếu bạn sử dụng Premailer hoặc một công cụ tương tự, hãy nhớ lấy Media Queries ra trước khi tiến hành (vì chúng ta muốn chúng vẫn còn nguyên vẹn), sau đó lại đưa chúng vào ở phần cuối. MailChimp và Campaign Monitor tự động thực hiện điều này cho bạn.Ẩn các phong cách Mobile khỏi Yahoo!Bạn sẽ thấy rằng thẻ body có một thuộc tính phụ. Yahoo Mail rất thích biên dịch Media Queries của bạn, do đó, để ngăn chặn điều này, bạn cần sử dụng bộ chọn thuộc tính. Tôi tìm thấy cách dễ nhất để làm điều này (theo đề nghị của Email on Acid) là chỉ cần thêm một thuộc tính tùy ý vào thẻ body. Tôi nói là 'yahoo' nhưng nó có thể là bất cứ điều gì mà bạn thích: Sau đó bạn có thể chọn các lớp cụ thể bằng cách sử dụng bộ chọn thuộc tính cho thẻ body của bạn trong CSS. body[yahoo] .class {}Hai thủ thuật cần để sử dụng tốt phương pháp chiều rộng không cố địnhNhư bạn có thể thấy, bảng 'content' của chúng ta được thiết lập độ rộng 100% để nó sẽ tự động chiếm toàn bộ chiều rộng của màn hình điện thoại và máy tính bảng. Chúng ta cũng sẽ thiết lập chiều rộng tối đa 600px để tránh email chiếm toàn bộ màn hình trên các thiết bị lớn hơn. Hiện nay, có hai điều hơi khó khăn mà chúng ta cần phải giải quyết để đảm bảo rằng tất cả mọi thứ hiển thị như dự tính trên tất cả các trình đọc email. Hai cách khắc phục nhờ vào hướng dẫn tuyệt vời của Tina Ye cho phương pháp này có ở trên trang blog FogCreek. 1. Giải quyết vấn đề thiếu hỗ trợ Max-WidthThật không may,
Chúng tôi sẽ bao quanh bảng của chúng ta bằng một số code có điều kiện:
2. Khắc phục cho Apple MailThật là thú vị, Apple Mail (thường là một ứng dụng email rất tiến bộ) không hỗ trợ thuộc tính max-width. Mặc dù vậy nó hỗ trợ Media Queries, vì vậy chúng ta có thể thêm một cái để nói với nó thiết lập chiều rộng trên bảng 'content' của chúng ta, miễn là khung nhìn có thể hiển thị toàn bộ 600px. Tạo HeaderBây giờ chúng ta sẽ thêm hàng đầu tiên của bảng—header. Thêm những thứ sau đây để định phong cách vào hàng mà chúng ta đã tạo ra:
Và sau đó trong CSS của bạn, thêm padding cho header: .header {padding: 40px 30px 20px 30px;}Thêm hàng có tính đáp ứng đầu tiênBây giờ chúng ta sẽ tạo ra hàng đáp ứng đầu tiên của chúng ta. Cái cách mà chúng ta làm điều này là để tạo ra hai bảng 'float' nằm bên cạnh nhau bằng cách sử dụng thuộc tính 'align' của HTML. Cột bên tráiThay thế tiêu đề chào mừng "Hello!" bằng:
Chúng ttai tạo ra bảng 70px và đồng thời thêm một số padding mà sẽ hoạt động như là gutter giữa hai cột. Padding ở phía dưới sẽ thêm khoảng cách khi hai cột xếp chồng lên nhau trên màn hình điện thoại. Cột bên phảiChúng ta sẽ tạo ra cột bên phải bằng cách một lần nữa canh một bảng về bên trái. Bảng này sẽ rộng 445px, mà sẽ để lại 25px dư thừa ở phía bên tay phải. Điều này rất quan trọng vì Outlook sẽ tự động xếp chồng các bảng của bạn nếu không có ít nhất 25px dư thừa trên bất kỳ hàng nào. Miễn là bạn cho phép trống ít nhất 25px, thì các bảng của bạn sẽ hiển thị như mong đợi. Cho phép ít nhất 25px khoảng trắng để ngăn Outlook khỏi xếp chồng các bảng của bạn Dừng lại! Mẹo khác để đối phó với OutlookĐể giải quyết điều này, bạn cũng có thể sử dụng code điều kiện để đánh lừa Outlook nghĩ rằng bạn đã đóng một ô và mở một cái ô mới. Sau thẻ đóng của bảng đầu tiên, và trước thẻ mở của bảng thứ hai, chỉ cần thêm: Tiếp tục..Tiếp tục..Ở trên cái rộng hơn, bên tay phải, chúng ta sẽ sử dụng phương pháp tương tự mà chúng ta sử dụng trên bảng container của chúng ta, bao gồm việc tạo ra một lớp và thêm code wrapper có điều kiện. Chúng ta muốn bảng này được rộng 100% trên điện thoại di động, nơi mà nó sẽ chuyển xuống bên dưới bảng bên trái. Ở đây bạn có thể thấy rằng tôi đã tạo ra một lớp gọi là 'col425' cho bảng này, cột rộng 425px của chúng ta. Tôi đã quấn bảng trong code có điều kiện sẽ bao bọc nó trong một bảng rộng 425px. Sau đó chúng ta cũng thêm lớp của chúng ta vào Media Query mà chúng ta đã tạo cho Apple Mail. 0Bây giờ bên trong ô của chúng ta, chúng ta sẽ bổ sung thêm heading. 1Tôi đã thêm một số lớp vào mỗi ô để tạo phong cách, cũng như một số phong cách mà tôi sẽ sử dụng cho các kiểu văn bản khác sau này: 2Header của chúng ta bây giờ đã hoàn tất, và bạn có thể thấy dưới đây hai cột sẽ xếp chồng trên điện thoại di động như thế nào. (Để xem điều này trong khi bạn đang làm việc, bạn sẽ cần phải tạm thời bỏ qua Media Queries min-device-width, bởi vì chúng đang thực thi một chiều rộng cố định trên máy tính để bàn). Tạo hàng với một văn bảnĐể tạo một dòng văn bản có một cột duy nhất, chúng ta chỉ cần thêm một hàng mới vào bảng '.content' của chúng ta . Chúng ta sẽ thêm một lớp 'innerpadding' vào các hàng này với một số giá trị padding có thể tái sử dụng. Chúng ta cũng sẽ thêm một lớp 'borderbottom' để áp dụng đường viền vào mỗi hàng. 3CSS của chúng ta cho phần này: 4Tạo Article hai cộtBây giờ chúng ta sẽ tạo ra một hàng có tính đáp ứng giống như header của chúng ta, nhưng với kích thước hơi khác để chúng ta có thể có một hình ảnh lớn hơn. 5Chúng ta đã thêm một button ở đây với lớp 'buttonwrapper'. Nó chứa một ô có padding với một nền được thiết lập màu sắc, và sau đó một liên kết văn bản bên trong. Tôi thích sử dụng phương pháp này vì nó cho phép bạn có các button có chiều rộng không cố định, điều mà rất hữu ích khi tạo template có thể tái sử dụng, nơi chiều rộng của mỗi button sẽ khác nhau mỗi khi nó được sử dụng. Nếu bạn có một chiều rộng cố định cho các button, bạn có thể cần sử dụng Bulletproof Button Generator tại Campaign Monitor. Các phong cách của chúng ta cho button: 6Cũng như chiều rộng thiết lập của chúng ta cho lớp mới này 'col380', chúng ta sẽ thêm kích thước của chúng ta vào danh sách các phong cách để xử lý Apple Mail. Nó bây giờ trông như thế này: 7Tạo hình ảnh một cộtTạo hình ảnh một cộtĐây là một hàng rất đơn giản; chúng ta sẽ chỉ cần thiết lập một hình ảnh rộng 100% của email và chắc chắn rằng chiều cao của nó được thiết lập tự động sử dụng CSS. 8Trong CSS của chúng ta: 9Tạo dòng văn bản cuối cùngCuối cùng chúng ta sẽ thêm một dòng văn bản mà không có đường viền ở phía dưới: body[yahoo] .class {}0Tạo FooterĐể tạo footer, chúng ta sẽ thêm một hàng mới với một bảng bên trong. Một trong các hàng sẽ chứa một bảng khác cho các biểu tượng mạng xã hội của chúng ta. body[yahoo] .class {}1Chúng ta sẽ thêm phong cách cần thiết cho footer của chúng ta với CSS: body[yahoo] .class {}2Tối ưu hóa Button cho MobileTrên di động, thật lý tưởng nếu toàn bộ button là một liên kết, không chỉ là văn bản, vì rất khó để nhấp vào một liên kết văn bản nhỏ với ngón tay của bạn. Bởi vì nó không có khả năng giống như trên máy tính để bàn (padding không được hỗ trợ đầy đủ trên thẻ
Chúng ta sẽ phải cắt bỏ màu sắc khỏi
Tôi sẽ sử dụng
body[yahoo] .class {}3Bây giờ, khi bạn nhấn bất cứ nơi nào trên nút được tô màu trên di động, thì đó là một liên kết! Cải tiến hơn nữa Với Media QueriesNếu bạn muốn, bây giờ bạn có thể bắt đầu thực hiện các cải tiến đối với layout của bạn bằng cách áp dụng các tên lớp vào các phần tử mà bạn muốn kiểm soát, và sau đó tạo ra các quy tắt mới trong Media Queries mà chúng ta vừa tạo ở trên. Ví dụ, chúng ta sẽ lần lượt chuyển liên kết hủy bỏ đăng ký của chúng ta thành một button, bằng cách thêm một lớp vào liên kết: body[yahoo] .class {}4và thêm CSS sau đây vào Media Queries: body[yahoo] .class {}5body[yahoo] .class {}6Bạn cũng có thể chọn lớp .innerpadding, .header và .footer để giảm padding trên các client mà hỗ trợ Media Queries.Bạn cũng có thể chọn lớp .innerpadding, .header và .footer để giảm padding trên các client mà hỗ trợ Media Queries. Kiểm tra thử!Cuối cùng, như mọi khi, hãy chắc chắn rằng bạn xác nhận (bằng cách sử dụng W3C validator — bạn sẽ chỉ có một lỗi cho thuộc tính 'yahoo' trên thẻ body) và kiểm tra thử trên các thiết bị thực và một dịch vụ trên web như Litmus hoặc Email on Acid. Hãy thưởng thức việc tạo email có tính đáp ứng trông tuyệt vời ở mọi email client! Để nâng cao những gì bạn đã học được lên cấp độ mới, hãy tìm hiểu các hướng dẫn sau:
|
