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.
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ụ:
Ý 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.
Để đạ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:
Để 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:
<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>
Cuối cùng, hãy chắc chắn khung nhìn của bạn được thiết lập như sau: