Cách làm email html gmail

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.

Media Queries: Chỉ là một nửa giải pháp

Có 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:

Chú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:

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}

Cũ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:

@media only screen and [min-device-width: 601px] {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}

Chúng ta sẽ thêm phong cách cần thiết cho footer của chúng ta với CSS:

.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}

Tối ưu hóa Button cho Mobile

Trê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ẻ Unsubscribe from this newsletter instantly

và thêm CSS sau đây vào Media Queries:

body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}

body[yahoo] .hide {display: none!important;}