Nếu bạn gửi bản tin qua email, có khả năng ngày càng nhiều người đăng ký đọc tin nhắn của bạn trên iPhone, máy tính bảng hoặc thiết bị di động khác. Theo một cuộc khảo sát gần đây do Litmus công bố, điện thoại di động đã trở nên phổ biến nhất, với 42% tổng số email được đọc trên thiết bị di động, theo sát là webmail với 40% và máy tính để bàn với tỷ lệ đáng nể là 18%. iPhone của Apple chiếm 28%, cộng thêm 9% nếu tính cả iPad
Điều này có ý nghĩa gì đối với các nhà thiết kế và nhà phát triển email là để bản tin email của bạn hiển thị tối ưu trên thiết bị di động cũng quan trọng như khả năng xem trên các nền tảng truyền thống hơn như Outlook và Gmail. Trên thực tế, khi thiết kế email, bạn nên bắt đầu với thiết kế dành cho thiết bị di động, bởi vì nếu nó trông đẹp trên thiết bị di động thì nó sẽ trông tuyệt vời trên máy tính để bàn. Không nghĩ rằng ưu tiên thiết bị di động có thể làm giảm tỷ lệ phản hồi hoặc như Đường dẫn trả về đã tóm tắt
…những người không theo dõi người đăng ký của họ đang đọc email của họ trên thiết bị nào hoặc tối ưu hóa email hoặc trang web của họ cho thiết bị di động sẽ thua cuộc. Trải nghiệm người dùng kém có thể có nghĩa là không có phản hồi, không có hành động hoặc nói một cách rõ ràng là không có ROI.
'Email đang chuyển động. Điện thoại di động đang dẫn đầu cuộc cách mạng email như thế nào’ – Đường dẫn trở lại
Không chỉ có những cách bạn có thể cải thiện trải nghiệm email di động—chẳng hạn như sử dụng truy vấn phương tiện khi mã hóa bố cục phản hồi, cho đến các kỹ thuật nâng cao hơn như nhắm mục tiêu các thiết bị cụ thể. Nhưng cũng có những cân nhắc về thiết kế khi lập kế hoạch nhận bản tin và đăng ký biểu mẫu cho người dùng điện thoại thông minh
Ngày thứ nhất. Những thiết bị di động nào nên được xem xét?
Bạn có thể thiết kế cho thiết bị di động nào?
Một báo trước nhanh chóng. Các kỹ thuật được liệt kê ở đây không được hỗ trợ rộng rãi bởi tất cả các ứng dụng email di động. Như bạn có thể biết, không phải tất cả ứng dụng email đều giống nhau—ngay cả trên cùng một thiết bị, cách hiển thị email HTML có thể thay đổi hoàn toàn từ hộp thư đến đến hộp thư đến
Rất may, iPhone và các thiết bị iOS khác của Apple không chỉ tự hào về khả năng hiển thị email gần như không gặp sự cố mà còn chiếm một tỷ lệ lớn email di động được mở. Tuy nhiên, với bản phát hành iOS 13 mới nhất, chế độ tối của Apple sẽ đặt ra những thách thức mới về thiết kế và mã hóa để vượt qua, vì vậy hãy luôn nhớ kiểm tra email của bạn
Với suy nghĩ này, chúng tôi trình bày cho bạn một danh sách không đầy đủ các ứng dụng email di động và sự hỗ trợ của chúng đối với các truy vấn phương tiện. Đối với ngữ cảnh, hỗ trợ truy vấn phương tiện cho phép bạn sử dụng nhiều kỹ thuật đáp ứng mà chúng tôi sẽ trình bày trong hướng dẫn này
Ứng dụng email khách trên thiết bị mặc định
Hỗ trợ truy vấn ClientMediaAmazon Kindle Fire Có Amazon Kindle Fire HD Có Android 2. 1 Eclair Không Android 4. x ứng dụng khách gốc Có Apple iOS Có Ứng dụng Gmail dành cho Android Có Ứng dụng Gmail dành cho iOS Có Yahoo Android và iOS Có Outlook Android và iOS Có Gmail Android IMAP Không Microsoft Windows Phone 7. 5 Có Microsoft Windows Phone 8 Không Microsoft Surface Không Windows Mail Có Email Samsung 6x Khôngứng dụng email của bên thứ 3
Hỗ trợ Truy vấn ClientMedia Ứng dụng bên thứ ba của Microsoft Outlook Exchange [Android] Không Ứng dụng Gmail dành cho thiết bị di động [tất cả các nền tảng]Có giới hạn. xem các thuộc tính CSS được hỗ trợ Có Yahoo. Ứng dụng thư dành cho thiết bị di động [tất cả các nền tảng] Không
Hãy cùng tìm hiểu khía cạnh trực quan của việc tạo bản tin email được tối ưu hóa cho thiết bị di động và tìm hiểu sâu về mã hóa. Điều này không chỉ giúp bạn đưa ra các quyết định thiết kế sáng suốt khi thiết kế bản tin email của mình mà còn giúp bạn khái niệm hóa các kỹ thuật mà chúng ta sẽ thảo luận sau này dễ dàng hơn nhiều
Chúng tôi đã bắt đầu nói về thiết kế email đáp ứng. Nếu bạn đã quen với việc sử dụng thuật ngữ này trong bối cảnh thiết kế web, thì bạn sẽ rất vui khi biết rằng chúng tôi sẽ sử dụng các khái niệm và kỹ thuật tương tự ở đây cho email. Nếu những thứ như bố cục thích ứng còn mới đối với bạn, thì tôi thực sự khuyên bạn nên đọc phần hướng dẫn này của A List Apart
Đối với hướng dẫn này, chúng tôi sẽ thiết kế hai bố cục CSS của cùng một bản tin. một bố cục trông tuyệt vời trong ứng dụng webmail và máy tính để bàn và một bố cục khác có thể dễ dàng đọc trên màn hình thiết bị di động nhỏ hơn
Ví dụ: đây là email HTML trong Outlook
Dưới đây là cùng một email, chỉ lần này được xem trong iPhone Mail của Apple. Như bạn có thể thấy, có sự khác biệt đáng kể giữa hai bố cục. Phiên bản dành cho thiết bị di động mỏng hơn, không có sự lộn xộn về hình ảnh và dễ đọc như phiên bản dành cho máy tính để bàn. Điều này có thể là do việc sử dụng CSS dành riêng cho thiết bị di động
Để so sánh, hình ảnh bên phải là cùng một email, không có biểu định kiểu này. Xem văn bản nhỏ và không thể đọc được như thế nào?
Bố cục thân thiện với thiết bị di động và các yếu tố thiết kế
Thiết kế cho thiết bị di động không chỉ đơn giản là vấn đề viết CSS dành riêng cho thiết bị di động. Dưới đây là một số cân nhắc khác
- Bố cục một cột không rộng hơn 600 đến 640 pixel hoạt động tốt nhất trên thiết bị di động. Chúng dễ đọc hơn và nếu chúng bị tách rời, chúng sẽ làm điều đó một cách duyên dáng hơn
- Các liên kết và nút phải có vùng mục tiêu tối thiểu là 44 × 44 pixel, theo hướng dẫn của Apple. Không gì khó sử dụng hơn đám mây liên kết nhỏ trên các thiết bị màn hình cảm ứng
- Kích thước phông chữ tối thiểu hiển thị trên iPhone là 13 pixel. Hãy ghi nhớ điều này khi tạo kiểu cho văn bản, bởi vì mọi thứ nhỏ hơn sẽ được nâng cấp và có thể phá vỡ bố cục của bạn. Ngoài ra, bạn có thể ghi đè hành vi này trong biểu định kiểu của mình—hãy cẩn thận
- Hãy nhớ giữ cho thông điệp của bạn ngắn gọn và đặt tất cả các yếu tố thiết kế quan trọng ở phần trên của email nếu có thể. Tuy nhiên, vì kích thước màn hình đã trở nên lớn hơn và có nhiều không gian hơn bao giờ hết, nên bạn nên khám phá và thử nghiệm các định dạng khác nhau [e. g. nội dung dạng dài so với. nội dung dạng ngắn]. Luôn ghi nhớ thương hiệu của bạn. Những gì có thể làm việc cho một thương hiệu có thể không làm việc cho bạn
- Khi thích hợp, bạn có thể sử dụng
9 để ẩn nội dung trong bố cục di động của mình. Thận trọng khi ẩn nội dung trên thiết bị di động. Hãy tự hỏi bản thân, nếu nội dung của bạn không đáng để hiển thị trên thiết bị di động, thì nó có nên được đưa vào phiên bản dành cho máy tính để bàn của bạn không?@media only screen and [max-device-width: 640px] { /* mobile-specific CSS styles go here */ .tablescale { width: 440px !important; margin: } .imgscale { width: 100% !important; } } @media only screen and [max-device-width: 479px] { /* mobile-specific CSS styles go here */ .tablescale { width: 325px !important; margin: 0 !important; } .imgscale { width: 100% !important; height: auto !important; margin: auto !important; } }
Khi mô phỏng một email hoặc mẫu HTML, lời khuyên của chúng tôi là tạo ba bản phác thảo hoặc khung dây. một trong các bố cục dành cho máy tính để bàn và webmail, một dành cho bố cục máy tính bảng và một dành cho bố cục di động. Việc xây dựng ba bố cục này sẽ cho phép bạn xem nội dung của mình sẽ phá vỡ như thế nào trên các thiết bị khác nhau và nó sẽ giúp xác định những truy vấn phương tiện nào bạn sẽ cần
Khi các nhà thiết kế hoặc nhà phát triển web nói về biểu định kiểu hoặc CSS [Cascading Style Sheets], họ thường đề cập đến một biểu định kiểu bên ngoài. Và trong khi nó hoạt động cho các trang web thì nó không phải là tốt nhất cho email
Một số ứng dụng email lớn chặn biểu định kiểu bên ngoài, chúng tôi đã đưa CSS của mình theo hai cách
- Các kiểu được nhúng nằm trong
Column Left Content Trong ví dụ này, chúng tôi đã áp dụng lớp tablescale cho các bảng HTML chứa văn bản và hình ảnh. Dưới đây là đoạn mã chứa hai truy vấn @media, tạo hai điểm ngắt cho thiết bị di động
Column Left Content Trong ví dụ trên, chúng tôi có một bảng chứa rộng 640px, với hai bảng rộng 300px được lồng vào bên trong để tạo thành các cột, tương tự như các ví dụ trước của chúng tôi. Các cột lồng nhau này đã áp dụng
Column Left Content Nếu bảng vùng chứa rộng 640px, bạn sẽ có bố cục hai cột. Nhưng con nào gầy hơn cột bên phải sẽ quấn dưới cột bên trái. Làm cho nó có cùng chiều rộng với các bảng cột [320px] và bạn đã có bố cục một cột phẳng, phù hợp chính xác với màn hình iPhone mà không cần thu phóng
Chúng tôi có thể đạt được điều này bằng cách thêm một truy vấn phương tiện một dòng đơn giản vào mã HTML của chúng tôi
Column Left Content Tuy nhiên, trên ứng dụng khách di động, chúng tôi chỉ muốn tiêu đề hiển thị, cùng với nút hiển thị/ẩn [chuyển đổi văn bản]. Điều này biến email thành một mục lục tương tác, rút ngắn đáng kể độ dài thư
Để làm điều này, trước tiên chúng ta cần chuyển sang mã HTML của mình và tạo một bài viết có tiêu đề, một số văn bản và nút hiển thị/ẩn. Chúng tôi cũng sẽ thêm một vài lớp để hiển thị các nút hiển thị/ẩn riêng trên thiết bị di động. Đây là phiên bản đơn giản hóa của mã được sử dụng cho mỗi bài viết
Column Left Content Và đây là ví dụ tương tự với tỷ lệ 120 DPI
Sự cố này xảy ra khi Microsoft Word được sử dụng để hiển thị email và phổ biến nhất trong các phiên bản Outlook 2007 đến 2013. Vấn đề mở rộng quy mô này tiếp tục là một cái gai đối với nhiều nhà phát triển và thiết kế email vì chế độ xem phóng to này thường kéo dài hình ảnh của bạn, phóng to văn bản của bạn và tạo ra trải nghiệm người dùng kém
Sử dụng các ví dụ mã trước đây của chúng tôi, hãy tạo một mẫu đáp ứng thực sự hoạt động trên cả thiết bị di động và máy tính để bàn
Bước đầu tiên là kích hoạt VML hoặc Vector Markup Language và chia tỷ lệ hình ảnh trong
Column Left Content Văn bản và hình ảnh lớn hơn, nhưng mọi thứ hiện đã được căn chỉnh phù hợp
Nếu bạn muốn tìm hiểu thêm về các sự cố thay đổi quy mô Outlook, hãy xem bài viết của Courtney Fantinato “Khắc phục sự cố thay đổi quy mô DPI của Outlook. ”
Bạn có thể nhận thấy rằng chúng tôi đã sử dụng hai truy vấn phương tiện tiêu chuẩn trong hướng dẫn này.
Column Left Content Chúng tôi có một bài đăng blog chi tiết đi sâu vào cơ chế bổ sung bố cục linh hoạt cho email HTML và chương tiếp theo sẽ đề cập đến cách hình ảnh có chiều rộng linh hoạt có thể được sử dụng hiệu quả trong bản tin của bạn
Cuối cùng, một lời khuyên. Mặc dù rất dễ trở nên cuồng tín về việc điều chỉnh thiết kế email đáp ứng của bạn cho các thiết bị cụ thể, nhưng đừng đánh mất bức tranh toàn cảnh
Nếu 85% người đăng ký trên thiết bị di động của bạn đang xem email của bạn ở chế độ xem 320px x 480px, thì bạn không cần phải tạo truy vấn
Column Left Content Column Left Content Hình nền trong Outlook. nền chống đạn
Người giám sát chiến dịch Stig Morten Myhre đã phát triển một kỹ thuật phổ biến để tạo những hình nền chống đạn này và thậm chí còn tạo ra một trình tạo hình nền tiện dụng. VML bổ sung, Ngôn ngữ đánh dấu Vector của Microsoft, sẽ cho phép hình nền của chúng tôi hiển thị chính xác trong Outlook, cụ thể là 2007-2019
Nếu hình ảnh của bạn là một mẫu lặp lại đơn giản hoặc không bắt buộc phải xếp hàng theo một cách cụ thể, thì hãy sử dụng cùng một liên kết url cho cả
Column Left Content Trong so sánh này, một url khác được sử dụng trong
Column Left Content Mặc dù cả hai ví dụ đều cho phép có đủ khoảng trống xung quanh văn bản trực tiếp, nhưng ví dụ thứ hai nổi bật hơn về mặt trực quan và sẽ mô phỏng chính xác hơn bố cục và thiết kế dự định
Hãy phá vỡ những gì đang xảy ra ở đây. Đầu tiên, chúng ta sẽ tạo một câu lệnh điều kiện
Embedded styles /* regular CSS styles go here */ @media only screen and [max-device-width: 640px] { /* tablet-larger phone CSS styles go here */ } @media only screen and [max-device-width: 479px] { /* smaller-mobile-specific CSS styles go here */ Inline styles
Content Example Tiếp theo, chúng tôi sẽ khai báo rằng đây là VML và đặt kiểu có chiều rộng và chiều cao phù hợp với hình ảnh đã chọn của bạn. Chúng tôi sẽ sử dụng thẻ
Embedded styles /* regular CSS styles go here */ @media only screen and [max-device-width: 640px] { /* tablet-larger phone CSS styles go here */ } @media only screen and [max-device-width: 479px] { /* smaller-mobile-specific CSS styles go here */ Inline styles
Content Example Cuối cùng, chúng tôi sẽ sử dụng thẻ
Embedded styles /* regular CSS styles go here */ @media only screen and [max-device-width: 640px] { /* tablet-larger phone CSS styles go here */ } @media only screen and [max-device-width: 479px] { /* smaller-mobile-specific CSS styles go here */ Inline styles
Content Example Đây là những gì nó sẽ trông giống như
Column Left Content Column Left Content Một lợi thế khi sử dụng kỹ thuật này là bạn có thể rút ngắn độ dài của email bằng cách cung cấp hình ảnh ngắn hơn đáng kể. Hoặc bạn có thể định kiểu lại hình ảnh và văn bản của mình để nâng cao trải nghiệm trên thiết bị di động. Khi nói đến email di động, càng ngắn càng tốt
Thay đổi kích thước hình ảnh cho bố cục linh hoạt
Vấn đề với phương pháp hoán đổi hình nền ở trên là nó thực sự chỉ hiệu quả với các thiết kế email có chiều rộng tĩnh
Ngày nay, các thiết bị di động có thể có đủ loại hình dạng và kích cỡ, do đó, bố cục email linh hoạt trở thành một lựa chọn phổ biến. Mặc dù giải pháp rõ ràng dường như là đặt
Embedded styles /* regular CSS styles go here */ @media only screen and [max-device-width: 640px] { /* tablet-larger phone CSS styles go here */ } @media only screen and [max-device-width: 479px] { /* smaller-mobile-specific CSS styles go here */ Inline styles
Content Example Embedded styles /* regular CSS styles go here */ @media only screen and [max-device-width: 640px] { /* tablet-larger phone CSS styles go here */ } @media only screen and [max-device-width: 479px] { /* smaller-mobile-specific CSS styles go here */ Inline styles
Content Example Column Left Content Hàng trăm người đã thể hiện sự ủng hộ của họ đối với những thay đổi này và cùng chúng tôi vận động hành lang Twitter để cải thiện thông báo của họ. Kết quả đáng mừng là Twitter đã lắng nghe chúng tôi và tiến hành thiết kế lại các thông báo email của họ vào tuần sau
Chủ Đề