programming html

Cách đổi gmail từ html trên iphone

Mặc dù Outlook có xu hướng bị chỉ trích nhiều nhất vì tính khí thất thường, nhưng Gmail có một số 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. Đây 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ể mất đi các khách hàng tiềm năng và doanh thu quan trọng.

Tuy nhiên, việc đảm bảo rằng các email HTML của bạn trông đẹp mắt trong ứng dụng khách Gmail có thể khó khăn. Việc nhớ kiểm tra email của bạn có thể giúp bạn nắm bắt được một số vấn đề này, nhưng việc bắt đầu với mã phù hợp và một số kiến thức về các vấn đề cụ thể của Gmail sẽ giúp bạn tiết kiệm hàng giờ khắc phục sự cố.

Khi mã hóa cho người dùng Gmail, có một số điều cần lưu ý

Chuyển đến một phần để tìm hiểu thêm

1. Gmail có một số ứng dụng email

Mặc dù Gmail đã đơn giản hóa giao diện của mình 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 hiển thị email HTML.

Gmail webmail cho máy tính để bàn
Thư điện tử Gmail dành cho điện thoại di động
Gmail dành cho iOS
Gmail dành cho Android
[Không có phiên bản máy tính để bàn độc lập]

Vấn đề nan giải nhất là ứng dụng khách Android của Gmail khi được định cấu hình để truy cập POP/IMAP [xem mẹo #2], nhưng các sự cố của Gmail với chế độ tối trong iOS cũng là một vấn đề lớn [xem mẹo #14].

2. Ứng dụng Gmail dành cho tài khoản không phải Gmail [GANGA] không hỗ trợ kiểu nhúng

Both Android and iOS Gmail apps contain a feature for accessing non-Gmail accounts [e.g. Yahoo! Mail, Proton Mail, etc.] using POP and IMAP. Unfortunately, emails accessed through this setup lack support for embedded styles []. As of 2017, both apps added support for background images. However, background images still require a little extra effort because background-size is not supported.

Để giải quyết vấn đề này, bạn có thể sử dụng CSS tốc ký, được hỗ trợ

background: url[‘image.jpg’] center / cover no-repeat #3ab97d;

Nếu bạn kiểm tra đ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 GANGA trong ứng dụng Android hoặc iOS của Gmail, thì đó có thể là do một sự cố hiển thị nhỏ khác. Trên cả hai ứng dụng, hình ảnh bị chặn theo mặc định đối với email GANGA.

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 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 "hình ảnh hiển thị" sẽ xuất hiện

3. Gmail cắt thư lớn hơn 102kB hoặc nếu 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 có nội dung

[Tin nhắn đã cắt bớt] Xem toàn bộ tin nhắn

Khi người đăng ký nhấp vào để xem toàn bộ tin nhắn, email của bạn sẽ được hiển thị trong một cửa sổ mới

Nếu gần 102kB, bạn có thể tiết kiệm một vài byte bằng cách xóa mọi 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 nhúng hình ảnh và tài liệu khi gửi email HTML

Ngoài ra, nếu email của bạn có các ký tự đặc biệt không được mã hóa đúng cách, 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 vài ví dụ về mã hóa ký tự đặc biệt

Biểu tượng bản quyền ©. ©
dấu gạch ngang. –

Đọc thêm về cách tránh bị cắt email

4. Gmail only supports in the

Gmail does support embedded styles [

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

6]. However, Gmail style tags support is limited to the head of your HTML document. Gmail, Android, and iOS apps do not support at all when rendering emails retrieved through non-Gmail accounts [GANGA].

5. Gmail removes your entire block if it encounters an error

Gmail loại bỏ hoàn toàn định dạng HTML nếu nó gặp dù chỉ một lỗi. Ví dụ: Gmail không thích khai báo '@' trong khai báo '@'. Có một số trường hợp bạn có thể thấy mình đang khai báo '@' trong '@' – khi khai báo phông chữ web và khi khai báo chế độ xem 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 chúng 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.

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

Ví dụ về khai báo khung nhìn

@media only screen and [max-width:320px] { @viewport { width:320px; } }

Gmail cũng loại bỏ khối kiểu của bạn nếu nó 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 khối đó 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 sau đó [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 chính 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 mà 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 sự hỗ trợ phông chữ khác nhau giữa các ứng dụng email

Ví dụ về ngăn xếp phông chữ

style=“font-family: ‘Roboto’, Helvetica, Arial, sans-serif;”

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 tạo đặ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 viết mã 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 chính xác? . 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

div[class="content"]{ color: red }

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 họ. 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.

Mặc dù email AMP có hỗ trợ hạn chế trên các ứng dụng khách khác [Gmail, Yahoo. , và Thư. ru hỗ trợ nó, nhưng Outlook đã loại bỏ 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. Sau đó, bạn có thể sử dụng hướng dẫn này từ dự án AMP mã nguồn mở để bắt đầu với email AMP.

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

name@test.com

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à một tin xấu nếu nền của bạn có màu xanh lam. Hầu hết, vấn đề liên kết tự động này chỉ hơi chướng mắt, nhưng nó có thể gây ra vấn đề nếu bạn đang sử dụng tên miền giả cho mục đích thể hiện sáng tạo [e. g. quả bom. com] hoặc nếu bạn chỉ đơn giản là không muốn một phần thông tin có thể nhấp được.

Dưới đây là ba cách khắc phục tiềm năng, tùy thuộc vào kết quả bạn đang theo đuổi

Sử dụng 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 tự động được bao bọc trong một liên kết, hãy sử dụng 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 dạng văn bản là nội dung cần đượ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 ngang. Vì vậy, số điện thoại 212-389-3934 sẽ được mã hóa thành

212-389-3934

Đối với một địa chỉ email như name@test. com, bạn có thể thêm thực thể trước khoảng thời gian trước loại miền

tên @ kiểm tra. com

Để ngăn một URL tự động được chuyển đổi thành một liên kết, bạn sẽ mã hóa nó giống như một địa chỉ email và thêm thực thể vào khoảng thời gian 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 sử dụng url đầy đủ với http hoặc https, hãy thêm thực thể sau http. hoặc https. Vì vậy 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 như thể nó chưa được chuyển đổi thành 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ụ

name@test.com

Nó 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 vào hơn nhiều

Phong cách toàn cầu tất cả các liên kết tự động

Nếu bạn không phiền khi Gmail tự động áp dụng các liên kết, nhưng bạn chỉ 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 mình, thì bạn có thể sử dụng CSS sau

________số 8

Ghi chú. Gmail cũng sẽ áp dụng liên kết được gạch chân, màu xanh lam 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 gạch chân.

12. Gmail sử dụng LOẠI TÀI LIỆU HTML5

Nếu bạn chỉ định một loại DOCTYPE khác vớ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 trong ứng dụng email tôn trọng DOCTYPE của bạn. Điều này là do Gmail hiển thị tất cả các email bằng cách sử dụng HTML5 DOCTYPE.

Đây là sự cố không dành riêng cho Gmail. Nhiều ứng dụng email khác buộc HTML5, bao gồm cả Yahoo. Thư, Outlook. com và Yandex trên Webmail dành cho thiết bị di động và máy tính để bàn; . Thư trên iOS; . Cả Apple Mail và Outlook đều hỗ trợ bất kỳ DOCTYPE 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 chỉ nên sử dụng DOCTYPE HTML5 cho email của mình.

Một lợi ích bổ sung khác của việc sử dụng HTML5 DOCTYPE là mã ngắn hơn nhiều so với HTML4. Trong thế giới phát triển email, việc 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 là rất quan trọng.

HTML4

HTML5

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

13. DOCTYPE của Gmail có thể tạo thêm không gian dưới hình ảnh

DOCTYPE HTML5 của Gmail có thể tạo thêm không gian 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 cắt lát [mặc dù có lẽ tốt nhất là vẫn nên làm như vậy]. Khoảng cách thừa ở những nơi không mong muốn cũng có thể làm giảm tính thẩm mỹ của email và khiến việc đọc trở nên khó khăn hơn.

Để tránh sự cố này, dưới đây là một số giải pháp thay thế [những giải pháp này hoạt động trong Outlook. com và Yahoo. cũng]

1. Thêm kiểu hiển thị. chặn thành phần hình ảnh

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

2. Thêm căn chỉnh absbottom trong thành phần hình ảnh

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

3. Thêm văn bản căn chỉnh vào thành phần hình ảnh

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

4. Thêm line-height 10px hoặc thấp hơn trong TD chứa

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

5. Thêm cỡ chữ 6px hoặc thấp hơn vào TD chứa

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

Bạn vẫn gặp sự cố về 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ó chế độ tối không nhất quán 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 đề rắc rối 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 trong 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 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].

Vì Gmail làm điều này không chỉ với văn bản màu trắng mà 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 kỹ lưỡng về cách chống lại sự không nhất quán của chế độ tối trong Gmail dành cho Android và iOS bằng chế độ hòa trộn CSS. Mã ví dụ của anh ấy được bao gồm bên dưới.

@media { @font-face {font-family: 'Roboto'; src: url['roboto-regular-webfont.woff'] format['woff'], url['roboto-regular-webfont.ttf'] format['truetype']; font-weight: normal; font-style: normal; color:#3ab97d; } }

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 đưa ra giải pháp thay thế cho các sự cố chế độ tối trong iOS

Tìm hiểu thêm về các thách thức phát triển email ở chế độ tối và cách giải quyết chúng

Các mẹo và thủ thuật khác để viết mã cho Gmail

Trên đây chỉ là một số 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ể tìm hiểu thêm các giải pháp thay thế và gợi ý hữu ích trong phần Mẹo và Thủ thuật của chúng tôi dành cho Gmail và Google Apps 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 theo đị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 Email Geeks Slack, bạn có thể liên hệ với nhà phát triển email của chúng tôi, Megan Boshuyzen

Có được sự tự tin với kiểm tra email

Cho dù 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 sẽ được kiểm tra và xem trước 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 làm việc sẵn sàng gửi email bao gồm kiểm tra nội dung từ đầu đến cuối, khả năng gửi và xem trước để hợp lý hóa quy trình kiểm tra của bạn và giúp bạn gửi email ra khỏi cửa 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

Làm được nhiều việc hơn trong thời gian ít hơn với Email trên Acid

Ngừng chuyển đổi qua lại giữa các nền tảng trong quá trình triển khai trước và QA. Với Email on Acid, bạn có thể tìm và khắc phục tất cả sự cố ở một nơi. Kiểm tra kỹ mọi thứ từ nội dung đến khả năng truy cập và khả năng cung cấp. Ngoài ra, với Bản xem trước email chính xác trên các ứng dụng khách và thiết bị phổ biến nhất, bạn có thể tự tin cung cấp email hoàn hảo mọi lúc

Bắt đầu miễn phí

Tác giả. Email về nhóm axit

Nhóm nội dung Email on Acid được tạo thành từ các nhà tiếp thị kỹ thuật số, người tạo nội dung và những người chuyên sâu về email.

Kết nối với chúng tôi trên LinkedIn, theo dõi chúng tôi trên Facebook và tweet tại @EmailonAcid trên Twitter để biết thêm nội dung thú vị và các hội nghị tuyệt vời về tiếp thị qua email.