Bạn đang xem. Phát triển email HTML cho Gmail. 14 mẹo viết mã. Email Về Axit Tại HTTLEN. Chia Sẻ Bài Viết Hay
trong khi triển vọng có xu hướng bị chỉ trích nhiều nhất vì tính khí thất thường, thì gmail có những vấn đề riêng khiến các nhà phát triển email html phải đau đầu
gmail là một trong những nền tảng email phổ biến nhất trên thế giới, với hơn 1. 8 tỷ người dùng. Nó cũng là ứng dụng email phổ biến thứ hai, chiếm 28% thị phần toàn cầu. xem phân tích email của bạn và xem có bao nhiêu phần trăm địa chỉ là gmail [có thể là rất nhiều]. Nếu email HTML của bạn không hiển thị chính xác trong Gmail, bạn có thể bỏ lỡ các khách hàng tiềm năng và doanh thu quan trọng
Đọc. Email Html không hiển thị đúng trong gmail
Tuy nhiên, việc đảm bảo email html của bạn trông đẹp mắt trong ứng dụng khách gmail có thể khó. nhớ kiểm tra email của bạn có thể giúp bạn phát hiện ra một số trong số này, nhưng bắt đầu với mã phù hợp và một số kiến thức về các sự cố cụ thể của gmail sẽ tiết kiệm hàng giờ khắc phục sự cố
Khi lập trình cho người dùng gmail, có một số điều cần lưu ý
chuyển đến một phần để biết thêm thông tin
- gmail có nhiều ứng dụng email
- ứng dụng gmail cho tài khoản không phải gmail [mặc cả] không hỗ trợ hình nền
- gmail cắt các tin nhắn từ hơn 102 kb hoặc nếu có các ký tự đặc biệt
- gmail only supports in the
- gmail remove all the block if error
- gmail không hỗ trợ phông chữ web ngoài roboto và google sans
- gmail hiển thị văn bản tiêu đề trước trong bản xem trước email
- gmail không hỗ trợ bộ chọn thuộc tính và hầu hết các lớp giả
- gmail hiển thị biểu tượng tải xuống hình ảnh trên các hình ảnh lớn chưa được liên kết
- gmail không cho phép giá trị lề css âm
- gmail tự động chuyển đổi số điện thoại, email và url thành liên kết
- gmail sử dụng loại tài liệu html5
- loại tài liệu gmail có thể tạo thêm không gian bên dưới hình ảnh
- gmail có sự không thống nhất về chế độ tối giữa android và ios
1. gmail có nhiều ứng dụng email
Mặc dù gmail đã đơn giản hóa giao diện của nó trong những năm qua, nhưng vẫn có một số ứng dụng email khác nhau với các mức hỗ trợ css khác nhau và các biến thể kỳ quặc khác khi xử lý email html
- gmail webmail cho máy tính để bàn
- hộp thư điện tử gmail cho di động
- gmail cho ios
- gmail cho android
- [không có phiên bản máy tính để bàn độc lập]
Vấn đề lớn nhất là ứng dụng khách gmail android khi được định cấu hình để truy cập pop/imap [xem mẹo #2], nhưng sự cố gmail với chế độ tối trên ios cũng là một vấn đề lớn [xem mẹo #2]. #14]
2. ứng dụng gmail cho các tài khoản không phải gmail [giá rẻ] không hỗ trợ kiểu nhúng
The Gmail apps for Android and iOS contain a feature to access non-gmail accounts [eg yahoo! mail, proton mail, etc.] via pop and imap. Unfortunately, emails accessed through this setting do not support embedded styles []. As of 2017, both apps added support for background images. however, background images still require a bit of extra effort because background size is not supported.
Để tránh điều này, bạn có thể sử dụng css tốc ký, được hỗ trợ
Nếu bạn thử điều này và thấy rằng hình nền của bạn vẫn không hiển thị cho các email mặc cả trong ứng dụng gmail android hoặc ios, thì đó có thể là do một lỗi kết xuất nhỏ khác. Trong cả hai ứng dụng, theo mặc định, hình ảnh bị chặn đối với các email mặc cả
Thông thường, bạn sẽ thấy một liên kết để hiển thị các hình ảnh bị chặn, nhưng nếu email của bạn chỉ sử dụng một hình nền và không bao gồm bất kỳ hình ảnh nào khác, thì liên kết này sẽ không được hiển thị. đảm bảo rằng nếu bạn đang sử dụng hình nền, bạn cũng bao gồm một hình ảnh thông thường để liên kết "hiển thị hình ảnh" xuất hiện
3. gmail cắt các thư lớn hơn 102 kb hoặc nếu có các ký tự đặc biệt
nếu kích thước email của bạn vượt quá 102kb, gmail sẽ hiển thị 102kb đầu tiên cùng với thông báo cho biết
[tin nhắn đã cắt] xem toàn bộ tin nhắnKhi người đăng ký nhấp để xem toàn bộ tin nhắn, email của họ sẽ được hiển thị trong một cửa sổ mới
nếu bạn gần 102 kb, bạn có thể tiết kiệm một số byte bằng cách xóa khoảng trắng, ngắt dòng hoặc nhận xét không cần thiết. bạn cũng muốn tránh hình ảnh và tài liệu được nhúng khi gửi email html
Xem thêm. Catalog Giáng sinh miễn phí qua thư - Kim mua sắm
Ngoài ra, nếu email của bạn có các ký tự đặc biệt không được mã hóa chính xác, gmail sẽ cắt nó. đảm bảo tất cả các ký tự đặc biệt được mã hóa chính xác để ngăn điều này xảy ra. dưới đây là một số ví dụ về mã hóa các ký tự đặc biệt
- biểu tượng bản quyền ©. ©
- n dấu gạch ngang. –
đọc thêm về cách ngăn cắt email
4. gmail only supports in the
gmail supports embedded styles []. however, support for gmail style tags is limited to the header of your html document. gmail, android and ios apps do not support at all when processing emails retrieved through non-gmail accounts [bargain].
5. gmail deletes all your block if it finds an error
gmail xóa hoàn toàn định dạng html nếu tìm thấy một lỗi. ví dụ: gmail không thích câu lệnh '@' trong câu lệnh '@'. Có một số tình huống mà bạn có thể thấy mình khai báo '@' bên trong '@'. khi khai báo web font và khi khai báo viewport cho windows phone 8. 1. nếu bạn đang sử dụng các khai báo này trong mã của mình, hãy bọc chúng trong các thẻ kiểu của riêng bạn và đặt các kiểu an toàn cho gmail ở khối trên cùng
ví dụ về khai báo phông chữ web
ví dụ khai báo viewport
gmail cũng xóa khối kiểu của bạn nếu vượt quá 8192 ký tự. nếu khối kiểu của bạn vượt quá giới hạn ký tự này, hãy chia nó thành hai phần. gmail sẽ xóa khối đầu tiên vượt quá ngưỡng 8192 ký tự và mọi khối tiếp theo [số ký tự bao gồm tất cả các khối kiểu của bạn]
6. gmail không hỗ trợ các phông chữ web khác ngoài roboto và google sans
Ý tưởng phông chữ web của google không hoạt động trong gmail có vẻ đáng ngạc nhiên và khó hiểu, nhưng đó là sự thật. các phông chữ web duy nhất được gmail hỗ trợ là roboto và google sans. Tất nhiên, bạn vẫn có thể sử dụng phông chữ web trong email của mình, chỉ cần nhớ sử dụng ngăn xếp phông chữ để khai báo phông chữ theo thứ tự ưu tiên và tính đến hỗ trợ phông chữ thay đổi trong ứng dụng email
ví dụ ngăn xếp nguồn
Xem thêm. Cách gửi tệp ảnh lớn qua Gmail [2 cách dễ dàng]
Tìm hiểu thêm về ngăn xếp phông chữ và phông chữ tốt nhất cho email
7. văn bản tiêu đề trước của gmail được hiển thị trong bản xem trước email
Giống như nhiều ứng dụng khách hiện đại, tiêu đề trước của email được tự động hiển thị sau chủ đề trong văn bản xem trước của gmail mà người nhận không cần phải mở thư. văn bản tiêu đề trước có thể là một phần hiển thị trong nội dung email của bạn hoặc nó có thể được thiết kế đặc biệt để chỉ hiển thị trước khi người đăng ký mở email của bạn [tiêu đề trước ẩn]
tìm hiểu thêm về cách mã hóa tiêu đề ẩn
8. gmail không hỗ trợ bộ chọn thuộc tính và hầu hết các lớp giả
gmail css không hoạt động bình thường? . Mặc dù bộ chọn thuộc tính [như bộ chọn bên dưới] cho phép linh hoạt hơn khi chọn các phần tử trong css, nhưng gmail không hỗ trợ chúng
gmail cũng không hỗ trợ các lớp giả như. kiểm tra và. hoạt động và chỉ hỗ trợ. di chuột trong ứng dụng webmail của nó. do đó hỗ trợ email tương tác trong gmail rất hạn chế hoặc không tồn tại trừ khi bạn sử dụng amp cho email
Trong khi amp email có hỗ trợ hạn chế trong các ứng dụng khách khác [gmail, yahoo. , và thư. ru hỗ trợ nó, nhưng triển vọng đã ngừng hỗ trợ vào năm 2020], đây vẫn là một lựa chọn tuyệt vời nếu bạn có nhiều người đăng ký sử dụng gmail. Yahoo. và thư. ru
xem một số ví dụ về email tương tác sử dụng amp cho email. thì bạn có thể sử dụng hướng dẫn này từ dự án bộ khuếch đại mã nguồn mở để bắt đầu với email bộ khuếch đại
9. gmail hiển thị biểu tượng tải xuống hình ảnh trên các hình ảnh lớn chưa được liên kết
nếu một hình ảnh không được bọc trong một url, gmail sẽ phủ lên một biểu tượng cho phép người nhận tải xuống hình ảnh. Trong trường hợp xấu nhất, biểu tượng này có thể ẩn thông tin quan trọng trên hình ảnh của bạn. tốt nhất, nó chỉ có vẻ mất tập trung
Xem thêm. Yahoo Mail Tạo tài khoản Đăng nhập và đăng ký
Giải pháp đơn giản nhất là đảm bảo hình ảnh lớn hơn 300 × 150 được bọc bằng một liên kết, nhưng có một số tùy chọn khác mà bạn có thể thử để tránh nút tải xuống hình ảnh gmail trong email html
10. gmail không cho phép giá trị lề css âm
nếu bạn đang cố gắng phủ các thành phần trang trong email html của mình bằng các giá trị lề âm, bạn sẽ thấy rằng gmail css không hoạt động như mong đợi. Mặc dù các giá trị lề âm thường được sử dụng trong CSS để phát triển web, nhưng chúng không được hỗ trợ bởi hầu hết các ứng dụng webmail như Gmail, Outlook. com, hoặc Yahoo. email
Để làm cho các phần tử chồng lên nhau, bạn có thể thử sử dụng định vị tuyệt đối giả, mặc dù phương pháp này sẽ không hoạt động đối với các ứng dụng gmail có tài khoản không phải gmail [mặc cả]
11. gmail tự động chuyển đổi số điện thoại, địa chỉ email và url thành liên kết
gmail tự động chuyển đổi số điện thoại, địa chỉ email và url thành liên kết, có lẽ để thuận tiện cho người dùng email. nhưng đối với các nhà phát triển email, đó là một mục khác cần thêm vào danh sách dài những thứ không hiển thị như mong đợi trong gmail. ví dụ: gmail sẽ chuyển đổi [email được bảo vệ] thành
Tệ hơn nữa, các liên kết sẽ mặc định có màu xanh lam và được gạch chân, đây thực sự là tin xấu nếu nền của bạn có màu xanh lam. Phần lớn, vấn đề tự động liên kết này hơi khó chịu, nhưng nó có thể gây ra sự cố nếu bạn đang sử dụng tên miền giả cho mục đích thể hiện sáng tạo [ví dụ: dabomb. com] hoặc nếu bạn không muốn một phần thông tin có thể được thực hiện, hãy nhấp vào
đây là ba giải pháp khả thi, tùy thuộc vào kết quả bạn đang tìm kiếm
sử dụng một thực thể html mà gmail không nhận ra
Nếu bạn không muốn một số số điện thoại, email hoặc url nhất định trong email của mình được tự động đưa vào liên kết, hãy sử dụng một html mà gmail không nhận dạng được, chẳng hạn như. điều này sẽ ngăn gmail nhận ra văn bản là thứ sẽ được liên kết tự động
đối với số điện thoại, bạn sẽ chèn thực thể này trước mỗi dấu gạch nối. vì vậy số điện thoại 212-389-3934 sẽ được mã hóa thành
212-389-3934
đối với địa chỉ email như [email được bảo vệ], bạn có thể thêm thực thể trước dấu chấm trước loại miền
[email được bảo vệ]. com
Để ngăn một url tự động trở thành một liên kết, tôi sẽ mã hóa nó như một địa chỉ email và thêm thực thể vào dấu chấm trước loại tên miền. vì vậy www. tên miền của tôi. com sẽ được viết là
www. tên miền của tôi. com
nếu bạn sử dụng url đầy đủ với http hoặc https, hãy thêm thực thể sau http. hoặc https. sau đó http. //www. tên miền của tôi. com sẽ được mã hóa thành
http. //www. tên miền của tôi. com
chèn thẻ neo xung quanh văn bản của bạn và tạo kiểu cho nó
Nếu bạn chỉ muốn văn bản của mình trông giống như nó chưa được chuyển đổi thành một liên kết, bạn luôn có thể bọc nó trong một thẻ neo và tạo kiểu cho nó khớp với văn bản xung quanh. Ví dụ
sẽ vẫn là một liên kết có thể nhấp khi di chuột, nhưng nó sẽ không giống như một liên kết và sẽ ít có khả năng được nhấp hơn nhiều
tạo kiểu toàn cầu cho tất cả các liên kết tự động
Xem thêm. 5 cách thay đổi kích thước hộp soạn thư gmail
nếu bạn không phiền khi gmail tự động áp dụng các liên kết, nhưng muốn thay đổi giao diện của chúng để phù hợp với các liên kết khác của bạn, bạn có thể sử dụng css sau
Ghi chú. gmail cũng sẽ áp dụng liên kết màu xanh lam được gạch chân mặc định cho các liên kết nút của bạn nếu kiểu của chúng không được căn chỉnh
12. gmail sử dụng loại tài liệu html5
nếu bạn chỉ định loại tài liệu không phải html5 trong email của mình, bạn sẽ thấy rằng nó sẽ không hiển thị trong gmail giống như trong trình duyệt hoặc ứng dụng email tôn trọng loại tài liệu của bạn. điều này là do gmail xử lý tất cả các email bằng loại tài liệu html5
đây là sự cố không chỉ xảy ra với gmail. nhiều ứng dụng email khác buộc html5, bao gồm cả yahoo. thư, triển vọng. com và yandex trên webmail trên máy tính để bàn và thiết bị di động; . thư trên ios; . apple mail và triển vọng hỗ trợ bất kỳ loại tài liệu nào bạn muốn sử dụng, nhưng vì hầu hết các ứng dụng email khác chỉ hỗ trợ html5, nên tốt nhất bạn nên sử dụng loại tài liệu html5 cho email của mình
Xem thêm. Hướng dẫn kết án của liên bang. hình phạt. Bào chữa tội phạm
Một lợi ích khác của việc sử dụng loại tài liệu html5 là mã ngắn hơn nhiều so với html4. Trong thế giới phát triển email, điều quan trọng là giữ cho mã của bạn càng ngắn càng tốt đối với lượng nội dung bạn cần truyền tải
html4
html5
13. loại tài liệu gmail có thể tạo thêm không gian bên dưới hình ảnh
loại tài liệu html5 của gmail có thể tạo thêm khoảng trống bên dưới hình ảnh của bạn. điều này đặc biệt có vấn đề nếu bạn đang sử dụng hình ảnh được chia nhỏ [mặc dù tốt nhất là bạn nên tránh sử dụng hình ảnh được chia nhỏ]. không gian thừa mà bạn không muốn nó cũng có thể làm giảm tính thẩm mỹ của email của bạn và khiến nó khó đọc
Để tránh vấn đề này, đây là một số giải pháp [cũng hoạt động trên triển vọng. com và yahoo. ]
1. thêm màn hình. chặn phong cách thành phần tử hình ảnh
2. thêm căn chỉnh absbottom trên phần tử hình ảnh
3. thêm căn chỉnh đầu văn bản vào thành phần hình ảnh
4. thêm chiều cao dòng từ 10px trở xuống vào vùng chứa td
5. thêm kích thước phông chữ từ 6px trở xuống vào vùng chứa td
Bạn vẫn gặp sự cố với khoảng cách hình ảnh và các cách khắc phục ở trên không hoạt động?
14. gmail có sự không thống nhất về chế độ tối giữa android và ios
có một số vấn đề mà gmail gặp phải với chế độ tối giữa android và ios. vấn đề lớn nhất là gmail buộc bất kỳ văn bản màu sáng nào chuyển thành màu văn bản tối trên ios. Vì vậy, nếu bạn đã tạo một email có văn bản màu trắng trên nền đen, Chế độ tối của iOS sẽ thực sự chuyển đổi nó thành văn bản màu đen trên nền trắng [điều này đánh bại mục đích của Chế độ tối]
Bởi vì gmail làm điều này không chỉ với văn bản màu trắng mà còn với bất kỳ văn bản màu sáng nào, điều này có thể tạo ra một số vấn đề nghiêm trọng về khả năng truy cập và khả năng đọc
rémi parmentier đã viết một bài viết rất toàn diện về cách chống lại sự không nhất quán của chế độ tối trong gmail cho android và ios bằng cách sử dụng các chế độ kết hợp css. Mã mẫu cho nó được bao gồm bên dưới
Giải pháp chỉ giới hạn ở văn bản màu trắng, nhưng nó vẫn hữu ích nếu bạn cần tìm giải pháp cho các vấn đề về chế độ tối trên ios
Tìm hiểu thêm về những thách thức của việc phát triển email ở chế độ tối và cách giải quyết chúng
thêm mẹo và thủ thuật để viết mã cho gmail
Trên đây chỉ là một vài ví dụ về các vấn đề lớn nhất mà các nhà phát triển email gặp phải khi viết mã cho gmail. Bạn có thể nhận thêm các cách giải quyết khác và các mẹo hữu ích trong các phần mẹo và thủ thuật của chúng tôi dành cho ứng dụng gmail và google cũng như ứng dụng gmail
Tất nhiên, bối cảnh về những gì gmail hỗ trợ và không hỗ trợ thay đổi định kỳ, vì vậy nếu bạn có bất kỳ thủ thuật hoặc giải pháp nào khác cho gmail, vui lòng chia sẻ chúng trong phần nhận xét bên dưới. Hoặc, nếu bạn là thành viên của kênh chuyên viên máy tính về email, bạn có thể liên hệ với nhà phát triển email của chính chúng tôi, megan boshuyzen
có được sự tự tin với kiểm tra email
Bất kể bạn có kinh nghiệm phát triển email html như thế nào, điều quan trọng là phải kiểm tra email của bạn để đảm bảo rằng nó hiển thị chính xác trong gmail và tất cả các ứng dụng email chính khác
Với Email on Acid, bạn nhận được các bản xem trước và bằng chứng email không giới hạn trên hơn 70 ứng dụng khách và thiết bị. danh sách kiểm tra trước khi triển khai của chúng tôi sử dụng quy trình chuẩn bị email bao gồm kiểm tra nội dung, khả năng gửi và xem trước từ đầu đến cuối để hợp lý hóa quy trình kiểm tra của bạn và giúp bạn gửi email nhanh hơn, ít căng thẳng hơn và luôn trông đẹp mắt
Bài đăng này đã được cập nhật vào ngày 23 tháng 3 năm 2022. Nó cũng được cập nhật vào tháng 4 năm 2018 và tháng 3 năm 2017. Nó được xuất bản lần đầu vào tháng 6 năm 2013