Những thẻ html được hỗi trợ trong gmail
Show
Đôi khi bạn gửi thư với dịch vụ Gmail đính kèm các tập tin và gặp thông báo lỗi Attachment failed, cho biết file không thể gửi kèm được. Sau đây là những cách giúp khắc phục lỗi này. 1. Kiểm tra lại phiên bản Adobe Flash Tính năng đính kèm dữ liệu của hộp thư Gmail hoạt động dựa trên nền Flash nên khi gặp phải thông báo lỗi trên, trước tiên bạn nên kiểm tra lại phiên bản Adobe Flash đã cài đặt cho trình duyệt. Nếu phiên bản Flash của trình duyệt quá cũ thì có thể đây là nguyên nhân gây lỗi trong quá trình đính kèm file, vì các phiên bản cũ của Adobe Flash không hỗ trợ tốt tính năng nói trên của Gmail. Truy cập vào địa chỉ http://get.adobe. com/flashplayer/ để tải và cài đặt phiên bản mới nhất của Adobe Flash. Sau khi cài đặt thành công bạn thử khởi động lại trình duyệt và thực hiện thao tác đính kèm file vào thư. Nếu chức năng này chưa hoạt động bạn chuyển qua bước tiếp theo. 2. Kiểm tra lại trình duyệt Đôi khi những thông báo lỗi khó chịu kia lại chính do trình duyệt bạn đang dùng gây ra. Hãy kiểm tra và chắc chắn rằng: - Trình duyệt của bạn đang sử dụng là phiên bản mới nhất, truy cập vào trang chủ của trình duyệt để xem thêm thông tin về phiên bản mới. - Xem kỹ lại trình duyệt của bạn có đang hoạt động ở chế độ Offline (nhất là đối với trình duyệt web IE). - Kiểm tra xem bạn có dùng các proxy để truy cập Internet hay không? Nếu có bạn hãy tắt chế độ này đi. - Cuối cùng nếu vẫn không được, bạn nên thử với một trình duyệt khác. 3. Cấu hình lại trình đính kèm fi le của Gmail Nếu các bước khắc phục nói trên vẫn chưa đạt hiệu quả thì bạn có thể thử cài đặt lại trình đính kèm dữ liệu của Gmail bằng cách bấm vào biểu tượng Mail Settings trong hộp thư, tiếp theo, cuộn chuột xuống cuối trang, tại mục Attachments bạn chuyển dấu chọn từ dòng Advanced attachment features xuống dòng Basic attachment features để chọn trình đính kèm file cơ bản của Gmail thay cho trình đính kèm đa năng hiện tại. Bấm Save Changes để lưu thiết lập. 4. Kiểm tra phiên đăng nhập Nếu máy tính bạn đang hoạt động song song với một máy tính khác cùng thời điểm thì cũng là một nguyên nhân gây ra lỗi đính kèm file. Bạn chỉ việc di chuyển xuống cuối hộp thư, nếu thấy thông báo This account is currently being used in 1 other location at this IP... thì tài khoản Gmail của bạn đang được sử dụng trên một máy tính khác. Lúc này bạn bấm vào liên kết Details bên cạnh và bấm tiếp nút Sign out all other sessions để đăng xuất tất cả các phiên đăng nhập khác. Sau đó, cập nhật lại hộp thư và thử đính kèm lại dữ liệu. 5. Tắt HTTPS của Gmail Truy cập vào trang cài đặt của Gmail, tìm đến đề mục Browser connection trong thẻ General. Sau khi tìm được đề mục nói trên bạn đánh dấu vào dòng Don’t always use https để tắt kết nối https. Bấm Save Changes để lưu, sau đó hãy thử lại thao tác đính kèm file. Thông thường, sau khi thực hiện một trong các bước nói trên thì trình đính kèm dữ liệu của Gmail đã có thể hoạt động bình thường trở lại. Nhưng nếu tất cả các bước nói trên đều vô hiệu, bạn hãy liên hệ ngay với bộ phận hỗ trợ của Gmail qua địa chỉ http://goo.gl/uv6By, trong trang này bạn cần khai báo chính xác các thông tin cá nhân cũng như lỗi gặp phải trong quá trình sử dụng Gmail, rồi chờ hồi âm từ Google. 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á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 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. 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ẻ Ẩ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..Ở 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. .col425 {width: 425px!important;} Bây giờ bên trong ô của chúng ta, chúng ta sẽ bổ sung thêm heading.
Tô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: .subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} .h2 {font-size: 33px; line-height: 38px; font-weight: bold;} .h2, .h2, .bodycopy {color: #153643; font-family: sans-serif;} Header 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.
CSS của chúng ta cho phần này: .innerpadding {padding: 30px 30px 30px 30px;} .borderbottom {border-bottom: 1px solid #f2eeed;} .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} .bodycopy {font-size: 16px; line-height: 22px;} Tạ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.
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;} } Tạ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. Trong CSS của chúng ta: img {height: auto;} Tạ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:
Tạ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.
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 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 Bâ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! Nế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: và thêm CSS sau đây vào 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. 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: |