```
### Thực hành tốt nhất về hình hero
Hình hero đặt tông hình ảnh cho toàn bộ email của bạn:
**Thông số kỹ thuật:**
- Chiều rộng: 600px (tự thu nhỏ trên mobile)
- Chiều cao: 200-400px
- Dung lượng: dưới 200KB
- Chữ chồng lên hình: tránh đặt chữ quan trọng trong hình
**Mẫu hình hero:**
```
HERO IMAGE
(Lifestyle/product shot)
Overlay text in HTML, not
embedded in image
```
### Hình nền
Hình nền tăng sức hấp dẫn thị giác nhưng có mức hỗ trợ hạn chế:
**Ma trận hỗ trợ:**
| Ứng dụng | Hỗ trợ hình nền |
| --- | --- |
| Apple Mail | Đầy đủ |
| iOS Mail | Đầy đủ |
| Gmail | Đầy đủ |
| Outlook (Windows) | Không |
| Yahoo Mail | Đầy đủ |
**Luôn kèm màu nền đặc làm dự phòng** cho người dùng Outlook.
### Hướng dẫn về hình ảnh sản phẩm
Với email ecommerce giới thiệu sản phẩm:
- Kích thước nhất quán cho mọi sản phẩm
- Nền trắng hoặc trung tính
- Nhiều góc chụp khi có thể
- Chiều rộng tối thiểu 300px cho hình sản phẩm
- Liên kết thẳng đến trang sản phẩm
## Phần 4: Thiết kế email cho mobile
Hành vi trên mobile khác nhau theo từng danh sách và ngành, nhưng mọi chương trình email hiện đại đều cần thiết kế an toàn cho mobile. Hãy xem báo cáo về ứng dụng email của chính bạn, rồi đưa QA mobile thành bước bắt buộc trước khi gửi.
### Nguyên tắc thiết kế mobile
**Cách tiếp cận ưu tiên mobile:**
1. Thiết kế cho màn hình nhỏ nhất trước
2. Xếp nội dung theo chiều dọc
3. Phóng to vùng chạm
4. Đơn giản hóa điều hướng
5. Kiểm thử trên thiết bị thật
### Kỹ thuật thiết kế responsive
**Media query cho mobile:**
```css
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}
```
### Thiết kế thân thiện với thao tác chạm
**Kích thước vùng chạm tối thiểu:**
| Thành phần | Kích thước tối thiểu |
| --- | --- |
| Nút bấm | 44 x 44 pixel |
| Liên kết | chiều cao 44px |
| Khoảng cách liên kết | 10px giữa các liên kết |
**Mẫu nút CTA:**
```
MUA NGAY
44px minimum height
```
### Typography trên mobile
**Điều chỉnh font cho mobile:**
- Thân bài: tối thiểu 16px (tránh bị phóng to trên iOS)
- Tiêu đề lớn: 24-28px
- Chiều cao dòng: tăng 10% trên mobile
- Khoảng cách đoạn: tăng lên cho thao tác cuộn bằng ngón cái
### Cân nhắc về hình ảnh trên mobile
- Dùng chiều rộng linh hoạt (max-width: 100%)
- Giảm số lượng hình trên mobile
- Cân nhắc ẩn hình trang trí
- Tải phiên bản hình nhỏ hơn khi có thể
### Checklist kiểm thử mobile
- Kiểm thử trên iOS Mail
- Kiểm thử trên app Gmail (iOS và Android)
- Kiểm thử trên app Outlook
- Xác nhận hình ảnh tải được qua mạng di động
- Kiểm tra thời gian tải dưới 3 giây
- Xác nhận vùng chạm đủ lớn
- Kiểm thử hiển thị dark mode
## Phần 5: Màu sắc trong thiết kế email
Màu sắc truyền tải cảm xúc, dẫn hướng sự chú ý và củng cố bản sắc thương hiệu. Sử dụng màu có chiến lược giúp cải thiện hiệu quả email.
### Tâm lý màu sắc trong email
| Màu | Liên tưởng | Dùng tốt nhất cho |
| --- | --- | --- |
| Xanh dương | Tin cậy, điềm tĩnh | B2B, tài chính, công nghệ |
| Xanh lá | Tăng trưởng, sức khỏe | Sinh thái, chăm sóc sức khỏe, thành công |
| Đỏ | Khẩn cấp, năng lượng | Sale, CTA, cảnh báo |
| Cam | Thân thiện, hành động | CTA, điểm nhấn |
| Tím | Cao cấp, sáng tạo | Hàng xa xỉ, làm đẹp |
| Vàng | Lạc quan, chú ý | Cảnh báo, điểm nhấn |
### Yêu cầu về độ tương phản màu
**Chuẩn WCAG 2.1 AA:**
- Chữ thường: tỷ lệ tương phản tối thiểu 4,5:1
- Chữ lớn (từ 18px): tỷ lệ tương phản tối thiểu 3:1
- Thành phần giao diện: tỷ lệ tương phản tối thiểu 3:1
**Dùng công cụ kiểm tra tương phản** để xác minh khả năng tiếp cận:
| Tổ hợp | Tỷ lệ tương phản | Đạt/Không đạt |
| --- | --- | --- |
| Đen trên trắng | 21:1 | Đạt |
| Trắng trên xanh dương (#0066CC) | 4,8:1 | Đạt |
| Xám (#777) trên trắng | 4,48:1 | Sát ngưỡng |
| Xám nhạt (#AAA) trên trắng | 2,32:1 | Không đạt |
### Cân nhắc về dark mode
Hành vi dark mode khác nhau theo hệ điều hành, app và ứng dụng email. Hãy thiết kế cho cả hai chế độ:
**Chiến lược dark mode:**
1. **Hình trong suốt:** dùng PNG với nền trong suốt
2. **Đảo màu:** kiểm tra màu sắc khi bị đảo ngược
3. **Phiên bản logo:** chuẩn bị biến thể logo sáng và tối
4. **Định hình bằng viền:** thêm viền mảnh để tránh bị hòa vào nền
**Thẻ meta cho dark mode:**
```html
```
### Màu nút CTA
CTA phải nổi bật so với nội dung xung quanh:
**Hướng dẫn màu CTA:**
- Dùng màu thương hiệu chính khi nó vẫn đạt yêu cầu tương phản.
- Dùng màu nhấn tương phản khi bảng màu thương hiệu có độ tương phản nút thấp.
- Kiểm thử các màu khuyến mãi khẩn cấp so với hành vi hủy đăng ký và khiếu nại.
- Đừng chỉ dựa vào màu sắc; hãy làm nội dung CTA thật rõ ràng.
**Thông số thiết kế nút:**
```
BUTTON TEXT (ALL CAPS) Background: Brand color
Text: White or dark contrast
Padding: 15px 30px
Border radius: 4-8px
```
## Phần 6: Khả năng tiếp cận trong thiết kế email
Thiết kế email dễ tiếp cận đảm bảo mọi người đều có thể tương tác với nội dung của bạn, bất kể khả năng. Điều này vừa đúng về đạo đức vừa thực tế, vì email dễ tiếp cận hoạt động tốt hơn với mọi người dùng.
### Nền tảng về khả năng tiếp cận
**Nguyên tắc cốt lõi (WCAG 2.1):**
1. **Có thể cảm nhận**: mọi người dùng đều cảm nhận được nội dung
2. **Có thể thao tác**: giao diện điều hướng và sử dụng được
3. **Có thể hiểu**: nội dung và thao tác rõ ràng
4. **Bền vững**: nội dung hoạt động trên các công nghệ hỗ trợ
### Tương thích với trình đọc màn hình
Trình đọc màn hình diễn giải email của bạn cho người dùng khiếm thị:
**Thực hành tốt nhất:**
- Dùng HTML ngữ nghĩa (h1, h2, p, ul)
- Thêm role=“presentation” cho các bảng bố cục
- Kèm thuộc tính lang trong thẻ HTML
- Cung cấp văn bản liên kết có ý nghĩa (không phải “bấm vào đây”)
- Dùng aria-label cho các thành phần phức tạp
**Ví dụ:**
```html
Summer SaleShop our biggest discounts of the season. Shop the Sale |