Triển vọng hiển thị dưới dạng html
|
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 Show
Đ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. 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 địnhHỗ 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ứ 3Hỗ 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
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
|
