Các nhà thiết kế responsive từ lâu đã tìm cách xây dựng các chiến dịch cho mọi thiết bị. Đặc biệt là ngày nay, khi gần một nửa tổng số email được mở xảy ra trên thiết bị di động, điều quan trọng là phải thiết kế trải nghiệm hoạt động tốt trên các hệ số dạng khác nhau. Mặc dù đây từng là một nhiệm vụ khó khăn (và vẫn là đối với một số ứng dụng email), nhưng các @Media có thể làm cho nhiệm vụ này dễ dàng hơn.
Tuy nhiên, trừ khi bạn đã say mê trong thế giới thiết kế web, bạn có thể không biết @Media là gì và tại sao bạn nên sử dụng chúng. Trong bài đăng trên blog này, chúng ta sẽ phân tích @Media truyền thông luôn hữu ích và xem tại sao nó lại là điều cần phải sử dụng trong mọi email.
Các bài viết liên quan:
Truy vấn @Media là gì?
@Media là một thành phần của biểu định kiểu xếp tầng (CSS), ngôn ngữ được sử dụng để tạo kiểu cho các trang web và chiến dịch email. Ở cấp độ cơ bản nhất, @Media hoạt động như một công tắc để kích hoạt các kiểu dựa trên một bộ quy tắc. Vậy, công tắc đó hoạt động như thế nào?
@Media bao gồm ba phần: loại Media, biểu thức và quy tắc kiểu có trong chính @Media.
Loại Media cho phép chúng tôi khai báo loại Media nào mà các quy tắc sẽ được áp dụng. Có bốn tùy chọn bạn có thể khai báo: tất cả, in, màn hình và lời nói. Đối với mục đích của email, bạn gần như luôn có thể sử dụng loại màn hình.
Biểu thức cho phép bạn nhắm mục tiêu thêm các thiết bị dựa trên các điều kiện cụ thể mà bạn chuyển @Media. Biểu thức kiểm tra các tính năng của Media, mô tả các tính năng khác nhau của một thiết bị, chẳng hạn như chiều rộng, chiều cao, tỷ lệ khung hình và màu sắc. Mặc dù có nhiều tính năng đa Media mà bạn có thể thử nghiệm, nhưng hầu hết các nhà thiết kế responsive đều dựa vào những điều sau:
- chiều rộng tối đa và chiều rộng tối thiểu
- chiều rộng thiết bị tối đa và tối thiểu
- thiết bị-pixel-tỷ lệ
Các tính năng Media cũng có thể được kết hợp trong @Media để cung cấp khả năng kiểm soát tốt hơn đối với các thiết bị và ứng dụng khách nhắm mục tiêu. Chúng ta sẽ thấy một ví dụ về điều này khi chúng ta nói về việc sử dụng @Media nâng cao.
Cuối cùng, trong dấu ngoặc nhọn của @Media, các quy tắc CSS có thể được bật tắt khi email được mở trên thiết bị đáp ứng cả loại Media và biểu thức.
Các @Media cần được bao gồm trong một khối kiểu thường nằm trong phần đầu của HTML của bạn. Điều này có ý nghĩa khi nói đến cách chúng tôi viết các quy tắc CSS và hỗ trợ cho các @Media, cả hai điều này chúng ta sẽ thảo luận sau.
Lợi ích của @Media
Sử dụng @Media, chúng tôi có thể tinh chỉnh các thiết kế responsive để chúng có thể sử dụng được nhiều hơn trên nhiều loại thiết bị. Hãy xem xét một kịch bản chung.
Trong một thời gian dài, các nhà thiết kế responsive đã xây dựng email của họ bằng cách tiếp cận chỉ dành cho máy tính để bàn. Email sử dụng chiều rộng bảng cố định và mọi thứ được tối ưu hóa để trông đẹp mắt trên máy tính để bàn và ứng dụng email trên web. Tuy nhiên, khi xem trên thiết bị di động, thiết kế bị phá vỡ: email được phóng to cho vừa vặn, làm cho văn bản và các nút quá nhỏ so với tab; bố cục bị hỏng và không sử dụng được; hoặc phần bên phải của email bị ẩn khỏi chế độ xem, làm cho việc cuộn theo chiều ngang là cần thiết.
Trước khi sử dụng các @Media, người thiết kế có thể làm rất ít để khắc phục những vấn đề này. Giờ đây, chúng tôi có thể sử dụng các @Media để nhắm mục tiêu các thiết bị di động và điều chỉnh phong cách của mình cho phù hợp.
Một ví dụ nhanh
Nếu bạn đã đọc hướng dẫn của chúng tôi về các phương pháp tiếp cận trên thiết bị di động, bạn biết rằng email có chiều rộng cố định thường được thu nhỏ trên thiết bị di động, dẫn đến văn bản nhỏ, khó đọc. Email linh hoạt, sử dụng độ rộng dựa trên tỷ lệ phần trăm, cho phép nội dung chảy và lấp đầy các kích thước màn hình khác nhau.
Vì vậy, giả sử chúng ta có một bảng vùng chứa với chiều rộng cố định là 600 pixel. Trong trường hợp này, chúng tôi muốn chuyển chiều rộng cố định 600 pixel trong các chế độ xem trên máy tính để bàn thành chiều rộng linh hoạt, dựa trên phần trăm (100%) trên màn hình nhỏ hơn.
<table border = "0" cellpadding = "0" cellspacing = "0" width = "600" class = "container-table">
Bạn sẽ nhận thấy rằng một class đã được thêm vào bảng. Chúng tôi có thể đạt được sự chuyển đổi cố định sang linh hoạt bằng cách sử dụng các lớp để đặt tên và nhắm mục tiêu các phần tử HTML, đồng thời sử dụng @Media của chúng tôi để ghi đè các kiểu được áp dụng cho bảng. Mỗi lớp đều cần một cái tên và trong trường hợp này, chúng tôi đã đặt tên là .container-table của chúng tôi. Chúng tôi khuyên bạn nên đặt tên rõ ràng cho các lớp nói lên mục đích của chúng trong @Media của bạn.
.container-table {}Khi chúng tôi đã thêm tên lớp vào thẻ bảng, chúng tôi sẽ cần thêm @Media vào HTML của chúng tôi, cùng với một biểu thức và cùng một tên lớp. Biểu thức chúng tôi đã sử dụng, max-width: 600px, yêu cầu @Media áp dụng các quy tắc bất cứ lúc nào kích thước màn hình rộng dưới 600px.
@media screen and (max-width: 600px) {
.container-table {
}
}
Bây giờ, chúng tôi sẽ thêm các quy tắc kiểu điều chỉnh giá trị của thuộc tính chiều rộng CSS cho bảng đó. Giờ đây, bảng vùng chứa của chúng ta trở nên linh hoạt trên bất kỳ chế độ xem nào hẹp hơn 600 pixel.
@media screen and (max-width: 600px) {
.container-table {
width: 100%! important;
}
}
Cách tiếp cận tương tự này có thể được sử dụng để điều chỉnh các breakpoint phổ biến trên thiết bị di động như kích thước văn bản, hình ảnh và nút. Ví dụ: nếu chúng tôi muốn điều chỉnh kích thước văn bản của bản sao của mình trên thiết bị di động, chúng tôi có thể làm như vậy theo cách gần giống như vậy:
@media screen and (max-width: 600p
NS) {
.mobile-text {
font-size: 18px! important;
}
}
Bằng cách nhắm mục tiêu các tên lớp hoặc các phần tử cụ thể, chúng tôi có thể thao tác thiết kế của mình và làm cho chúng dễ đọc hơn và có thể sử dụng được trên các thiết bị nhỏ hơn.
Cần lưu ý rằng, trong hầu hết các trường hợp, chúng tôi đang sử dụng các @Media để ghi đè các kiểu nội tuyến. Nếu bạn đã quen với cách hoạt động của CSS, thì phân tầng sử dụng thứ tự khai báo các quy tắc CSS để xác định kiểu nào nên được hiển thị. Vì các @Media tự nhiên nằm ở đầu tài liệu HTML, nên bất kỳ kiểu nội tuyến nào được áp dụng cho nội dung của email sẽ được ưu tiên. Do đó, chúng ta cần một cách để ghi đè các kiểu nội tuyến đó.
Điều này có thể được thực hiện bằng cách sử dụng khai báo! Important:
td {font-size: 24px! important; font-weight: bold! important; }Rất nhiều nhà thiết kế web chống lại việc lạm dụng khai báo! Important nhưng đối với các nhà thiết kế responsive, đó là người bạn tốt nhất của chúng tôi.
Nhắm mục tiêu nâng cao
Trong khi nhiều nhà thiết kế responsive sẽ chỉ sử dụng các @Media để điều chỉnh kiểu cho thiết bị di động, chúng cũng có thể được sử dụng theo những cách nâng cao hơn.
Có rất nhiều kỹ thuật code và thiết kế chỉ đơn giản là không hoạt động trong một số ứng dụng email. Những thứ như SVG, hoạt ảnh CSS và video thật tuyệt vời khi bạn có thể sử dụng chúng nhưng khi thực hiện kém, có thể làm hỏng trải nghiệm của người đăng ký khi xem trong các ứng dụng email lỗi thời. Một trong những cách sử dụng có giá trị nhất của @Media là nhắm mục tiêu đến các ứng dụng khách hoặc nền tảng email cụ thể và nâng cao dần nội dung, để những kỹ thuật tiên tiến đó có thể được sử dụng mà không phải lo lắng về việc phá vỡ trải nghiệm cho những người khác.
Nhờ @Media sau, các ứng dụng dựa trên Webkit đã thấy một video có chiều rộng đầy đủ đang phát trong nền:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/ * Chèn các kiểu ở đây * /
}
Các biểu thức tương tự có thể được sử dụng để nhắm mục tiêu toàn bộ thiết bị dựa trên các tính năng của chúng. Ví dụ: nếu bạn muốn nhắm mục tiêu iPhone X ở chế độ xem tiêu chuẩn, bạn có thể sử dụng như sau:
@media screen and (device-width: 375px) và (device-height: 812px) và (-webkit-device-pixel-ratio: 3) {
/ * Chèn các kiểu ở đây * /
}
Việc sử dụng các @Media truyền thông để nhắm mục tiêu các nền tảng hoặc ứng dụng email cụ thể cho phép các nhà thiết kế responsive trước đây chưa từng nghe đến quyền kiểm soát các thiết kế của họ. Khi kết hợp với những thứ như hoạt ảnh CSS, các nhà thiết kế có thể mang đến những trải nghiệm thực sự đáng kinh ngạc ngay trong hộp thư đến.
