Bản tin E-mail (E-mail newsletters) thường là một suy nghĩ sau khi có các trang web. Tuy nhiên, E-mail newsletters có thể là một liên kết quan trọng trong mối quan hệ giữa bạn - chủ sở hữu trang web và khách hàng của bạn.
E-mail là một trong những cách phổ biến nhất người dùng tương tác với bạn. Nó
không chỉ là e-mail trên máy tính để bàn - một số lượng đáng kể khách
hàng của chúng tôi truy cập với chúng tôi qua e-mail client di động của
họ. Chỉ
có khoảng một nửa số người sử dụng dùng các dịch vụ
Webmail lớn (Gmail , Yahoo, và Hotmail / Outlook.com ) . Nửa còn lại dùng một cái đuôi dài của e-mail client , tất cả mọi thứ từ AOL đến Live.com.
Các nhà thiết kế đều biết rằng thiết kế cho e-mail không chỉ là biết HTML và CSS mới nhất . Nhiều khách hàng dùng e -mail có định dạng khủng khiếp, vì vậy không chỉ
người ta cần phải làm quen với kỹ thuật thiết kế hiện đại , người ta
cũng cần để có thể hạ cấp định dạng một cách hiệu quả .
 |
| Thiết kế email newsletter responsive |
Dưới đây là mô tả ba khía cạnh chú ý đến để giữ cho e-mail responsive, duyên dáng có thể giảm cấp được , và đẹp mắt trên tất cả các độ phân giải và tất cả khách hàng.
Bạn muốn thực hiện một bản tin tiếp thị có chứa nội dung biên tập. Bạn cần có một hình ảnh có chiều rộng đầy đủ, một tiêu đề và nội dung chính .
Chúng ta hãy nhìn những e-mail được xử lý trên những chiếc điện thoại khác nhau xem thế nào. Độc
lập với khách hàng, không có thiết kế responsive (đáp ứng), iPhone quy định nội dung
của nó trượt xuống để làm cho nó phù hợp với chiều rộng thiết bị.
Trái
ngược với điều đó, Android duy trì các thiết lập chiều rộng e-mail và
làm cho người sử dụng di chuyển theo chiều ngang cho các nội dung để đọc. Cả
hai, bên trái và bên phải cũng cho thấy những gì các bản tin có vẻ như
nếu nó được mã hoá với nguyên tắc đáp ứng, mà hãy cho chúng tôi giữ cho
cả hai lợi ích: e -mail phù hợp với chiều rộng điện thoại để đọc dòng
chảy tự nhiên hơn và dễ dàng điều hướng và các bản sao ở cùng một kích thước lớn hơn và do đó dễ đọc hơn.
Hạn chế được biết đến
Gmail trải CSS trong header có nghĩa là truy vấn phương tiện truyền thông không thể được sử dụng mà người ta có thể dễ dàng chăm sóc các yếu tố đáp ứng như làm cho kích thước phông chữ điều chỉnh trên điện thoại so với máy tính để bàn xem. Vì lý do đó, chúng tôi ở SumAll làm cho mã e-mail của chúng tôi làm việc mà không cần truy vấn phương tiện truyền thông.
Đối với tất cả các trình duyệt khác mà cho phép CSS trong header, xem xét bao gồm các truy vấn phương tiện truyền thông giống như bạn sẽ định dạng kiểu của một trang web, ví dụ:
@media only screen and (max-width: 480px) { … }
"Responsive" nghĩa là gì?
Ý tưởng bao gồm cả phản ứng có nghĩa lànội dung kết xuất có khả năng được đọc tối ưu hóa cho các thiết bị khác nhau, nội dung phù hợp vào công cụ của mình một cách linh hoạt, ví dụ như một cột bên của một trang web có thể thu gọn bên dưới nội dung chính để chừa không gian rộng khôn ngoan trên điện thoại cho nội dung chính.
Bước 1: Không cố định Chiều rộng
Để đạt được điều đó, các phần khác nhau của nội dung có thể gấp lại, điều cần thiết là thẻ table không có chiều rộng cố định, vì vậy thay vì định nghĩa:
<table style=”width: 600px;”>
mà hãy viết
<table style=”width: 100%;”>
Hãy chắc chắn để thêm các styles cho mỗi ô trong bảng có chứa nội dung:
<td style=”max-width: 600px; display: block; clear: both;”>
Đối với hình ảnh, điều quan trọng là không được thiết lập chiều rộng trong thẻ hình ảnh, nếu không Android sẽ căng ra container của hình ảnh với độ rộng nhất định. Đó là yêu cầu để có style tối đa chiều rộng cho hình ảnh:
<img src=”twitter-engagement.png” alt=”" style=”max-width:100% !important;”>
Bước 2: Thiết lập table (bảng)
Để làm cho sự thu hẹp của khối nội dung body, bạn có thể sử dụng một table trong một thiết lập bảng như thế này:
<body>
<table width: 100%;”>
<tr>
<td></td>
<td style=”max-width: 600px; display: block; clear: both;”>
<table style=”width: 100%;”>
<tr>
<td>Content Block 1</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
<table width: 100%;”>
<tr>
<td></td>
<td style=”max-width: 600px; display: block; clear: both;”>
<table style=”width: 100%;”>
<tr>
<td>Content Block 2</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
</body>
Bước 3: Viewport
Cuối cùng, hãy chắc chắn khung nhìn của bạn được thiết lập như sau:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
RSS Feed
Twitter
11:55 AM
Unknown
