9 thủ thuật để thiết kế bản tin HTML hoàn hảo

Một bản tin email là cách hoàn hảo để giữ liên lạc với khách hàng hoặc người theo dõi của bạn. Thông thường công ty hoặc trang web của bạn sẽ có nhiều cập nhật sản phẩm hoặc có thể các sự kiện sắp tới mà bạn muốn chia sẻ. Bạn luôn có thể đăng thông tin mới lên blog hoặc các luồng phương tiện truyền thông xã hội, nhưng khán giả của bạn chỉ có thể đi xa để tiếp cận bạn. Trong trường hợp này, e-mail chắc chắn không phải là công nghệ chết, chỉ là tiềm năng chưa được khai thác.

Quá trình tạo và gửi bản tin dễ dàng hơn nhiều so với người ta tưởng, nhưng để thiết kế một mẫu tùy chỉnh và xây dựng mã của riêng bạn - việc này có thể mất nhiều thời gian hơn.

Chúng tôi đã biên soạn một số mẹo tuyệt vời để giúp bạn thiết kế các bản tin HTML chất lượng cao hơn bao giờ hết. Ngay cả khi bạn là người mới tham gia chủ đề, chắc chắn bạn sẽ tìm thấy một số thông tin vô giá để giúp bạn bắt đầu trong quy trình tiếp thị email.

Mục tiêu của một bản tin

Trước khi đi vào các khía cạnh thiết kế, chúng ta nên làm rõ mục đích của bạn để xây dựng một bản tin. Tùy thuộc vào loại trang web bạn điều hành, thông tin trong bản tin của bạn có thể thay đổi đáng kể so với các trang web khác, nhưng mục đích cốt lõi của bản tin là cung cấp các cập nhật tiện lợi ngay cho Hộp thư đến của người đọc.

Người dùng Internet nặng có thể kiểm tra e-mail của họ nhiều hơn hai lần một ngày. Ngay cả những người thường xuyên bận rộn cũng sẽ dành thời gian để xem qua tin nhắn của họ ít nhất một lần một ngày. Đây là thời điểm hoàn hảo để thu hút sự chú ý thậm chí không yêu cầu truy cập vào trang web của bạn. Ngay cả khi không có ai nhấp qua liên kết của bạn, thông tin là vẫn nhận được, đó là tuyệt vời để xây dựng một thương hiệu.

Xem xét một số chủ đề bạn sẽ cần cung cấp trong thiết kế của bạn. Bạn có bao gồm các liên kết để đăng ký dịch vụ của bạn; có thể liên kết blog, hoặc các bài báo được xuất bản gần đây nhất trên trang web của bạn? Bố cục của bản tin của bạn sẽ phản ánh cách bạn muốn độc giả phản hồi, nhưng cuối cùng bạn đang tìm cách thu hút sự quan tâm và chuyển xung quanh một số thông tin thú vị cho công chúng.

1. Sử dụng các bảng trong Bố cục của bạn

Điều này có vẻ hơi mâu thuẫn với các tiêu chuẩn web hiện đại ngày nay, nhưng e-mail vẫn còn cổ xưa trong các công cụ kết xuất của chúng, do đó bạn phải xây dựng theo các mô hình cũ hơn. Thật không may là bảng cách dễ nhất để có được mọi thứ hoạt động đúng trong số các khách hàng e-mail khác nhau. Tùy thuộc vào kiến thức của bạn về việc xây dựng bố cục dựa trên bảng, điều này thực sự có thể là tin tốt!

Bạn cũng có thể tự hỏi tại sao div và các yếu tố khối khác không phải là một ý tưởng tốt. Hầu hết các khách hàng email là được xây dựng để loại bỏ bất kỳ CSS ngoại lai nào Nội dung. Điều này có nghĩa là bạn sẽ không thể sử dụng nhiều thứ ngoại trừ CSS nội tuyến (và thậm chí hỗ trợ đầy đủ là kém chất lượng). Các khách hàng như Microsoft Outlook 2007 và Gmail của Google có sự hỗ trợ rất kém cho các yếu tố nổi và định vị trực tiếp.

Giải pháp tốt nhất là lồng nhiều bàn vào nhau. Đệm và lề không được đặt thành một tỷ lệ cụ thể giữa nhiều ứng dụng khách email. Đây là một lý do để sử dụng chiều rộng = "giá trị" trên tất cả các yếu tố tế bào bảng của bạn. Chúng sẽ luôn hiển thị cùng chiều rộng cho dù ứng dụng khách của bạn đang sử dụng email nào, vì vậy nó rất nhiều an toàn hơn và phù hợp hơn để đặt phần đệm và lề bằng các ô bảng trống.

2. Định vị chiều rộng cố định

Bạn có một vài lựa chọn khi xây dựng bản nháp bố cục bản tin của mình, tuy nhiên tùy chọn tốt nhất để làm theo là để đặt chiều rộng cố định cho bảng chứa của bạn. Có nhiều độ phân giải màn hình khác nhau - bạn sẽ không thể làm hài lòng tất cả mọi người. Nếu bạn không có các yếu tố cụ thể với độ rộng tĩnh, bạn luôn có thể sử dụng chiều rộng = "100%" trên bàn chứa của bạn. Điều này sẽ cho phép nội dung của bạn lấp đầy toàn bộ chiều rộng của tất cả các ứng dụng khách email.

Tuy nhiên, đối với nhiều người phương pháp này hơi lỏng lẻo. Bản tin xây dựng sẽ yêu cầu độ rộng cố định trong hầu hết các trường hợp, đặc biệt nếu bạn sẽ sử dụng biểu ngữ và hình ảnh được đặt ở một kích thước cụ thể. Tôi khuyên bạn nên làm việc với Chiều rộng tài liệu tối đa 500px - 600px. Kích thước màn hình ngang của iPhone và một số kiểu BlackBerry được giới hạn ở 320px, do đó, ngay cả ở 500px, mẫu e-mail của bạn sẽ là thu nhỏ lại để phù hợp.

Xem xét rằng nhiều người dùng di động chọn xem e-mail mà không cần HTML, đây không phải là một vấn đề lớn. Người dùng của máy khách máy tính để bàn và webmail sẽ có thể trải nghiệm một thiết lập tương tự bất kể Hệ điều hành họ sử dụng. Khi nghi ngờ tạo một vài mẫu thiết kế và chọn những người bạn thích nhất!

3. Đơn vị pixel

Trừ khi bạn sẽ sử dụng các yếu tố chất lỏng trong bản tin của mình, có thể bạn sẽ cần phải thay đổi kích thước một vài thứ. Cố gắng giữ nó trong pixel (px) thay vì trong một loại đơn vị khác. Tỷ lệ có thể dễ dàng bị lẫn lộn với nhiều máy khách webmail và cửa sổ phần mềm. Với ít thành phần trang hơn, bố cục chất lỏng có thể không bị ảnh hưởng, mặc dù có một vài lỗi.

Nhưng pixel luôn là một điều chắc chắn. Hoạt động trong giới hạn chiều rộng tối đa 600px, bạn thực sự có thể phù hợp với nhiều nội dung bên trong. Phơi sáng sẽ dễ dàng hơn nếu bạn chia bố cục của mình thành hai hoặc ba cột và luôn viết kích thước của bạn bằng pixel. Ngoại lệ duy nhất có thể là cỡ chữ Ở đâu trẻ em có thể hỗ trợ độc giả của bạn tốt hơn, nhưng em kích thước sẽ khác nhau theo cách tương tự tỷ lệ phần trăm - vì vậy vì đơn giản, hãy tuân theo sự sắp xếp dựa trên pixel.

4. Khả năng với CSS

Có vẻ như thiết kế e-mail đã bị phá hủy để sử dụng các kiểu CSS. Mặc dù có rất nhiều tính năng không được hỗ trợ, CSS vẫn hoàn toàn chấp nhận được trong nhiều trường hợp. Trình giám sát chiến dịch có một bảng tuyệt đẹp các thuộc tính CSS được hỗ trợ được liệt kê bởi ứng dụng khách email. Tất cả sẽ hỗ trợ những điều cơ bản như phông chữ gia đình và kiểu chữ, vì vậy bạn có thể bỏ qua nếu bạn muốn.

Hãy thận trọng về các kiểu phông chữ của bạn để không đẩy ranh giới quá xa. Nếu bạn cảm thấy không thoải mái với các kiểu nội tuyến, bạn luôn có thể sử dụng thẻ phông chữ HTML mặc dù nó không được dùng nữa. Nếu bạn là nhà thiết kế CSS, bạn không cần thoát khỏi hệ thống, nhưng bất kỳ mã hóa CSS tốc ký nào cũng có thể dẫn đến các thiết kế có lỗi. Như một ví dụ phông chữ: 12px / 14px Arial, sans-serif; tốc ký có thể giúp tiết kiệm rất nhiều không gian, nhưng nó không được chấp nhận hoàn toàn cho thiết kế e-mail, ngay cả khi nó được sử dụng với các kiểu nội tuyến.

Ngay cả lựa chọn màu sắc của bạn nên viết ra từ lâu. Các màu lục giác như #ccc hoặc là # e3f phải được viết đầy đủ như #cccccc hoặc là # ee33ff, tương ứng. Nếu bạn có thể xây dựng những gì bạn cần mà không cần CSS, tôi sẽ khuyên bạn nên sử dụng đường dẫn đó, nhưng đừng hoàn toàn né tránh CSS trong các thiết kế email vì trái với niềm tin phổ biến, nó được hỗ trợ trong hầu hết các trường hợp.

5. Liên kết neo Thực tiễn tốt nhất

Bạn chắc chắn sẽ muốn bao gồm một số liên kết vào bản tin của bạn. Đây có thể là các liên kết ngoài với các trang khác trên web hoặc có thể là các liên kết dẫn đến các trang phổ biến nhất trên trang web của bạn. Ngoài ra, hầu hết các chân trang sẽ chứa một liên kết hủy đăng ký để người đọc của bạn từ chối quy trình email, nhưng bạn nên xử lý tất cả các liên kết này trong thiết kế của bạn như thế nào?

Vâng, cần lưu ý đầu tiên rằng các khách hàng e-mail rất khó tính với thiết kế của họ. Nhiều người sẽ chọn ghi đè lên các kiểu liên kết của bạn, ngay cả với CSS nội tuyến. Một mẹo nhỏ là bao gồm cả màu nội tuyến và thẻ span bổ sung trong phần tử neo. Nếu màu sắc và kiểu dáng của các liên kết của bạn là quan trọng đối với thiết kế tổng thể, bạn sẽ muốn đề phòng thêm. Tôi đã thêm một ví dụ mã nhỏ bên dưới:

một số văn bản liên kết

Hiệu ứng di chuột là không được hỗ trợ trong Outlook 2007/2010, Gmail, iOS hoặc Android. Bạn vẫn có thể muốn bao gồm a: di chuột phong cách cho tất cả các khách hàng hỗ trợ: Outlook 2000/2003, Hotmail, Apple Mail và Yahoo! thư, nhưng cá nhân tôi không thấy nhiều lợi ích trong trải nghiệm người dùng một phần, vì các công cụ chọn neo không được hỗ trợ nhiều, tôi khuyên bạn nên chỉ cung cấp 2-3 màu liên kết để sử dụng trong suốt thiết kế của bạn.

Như một giả định, người dùng cũng sẽ mong đợi các liên kết của bạn sẽ mở trong một tab hoặc cửa sổ mới. Lý tưởng nhất là mục tiêu = "_ trống" thuộc tính phải đủ để tất cả các trình duyệt nhận ra chức năng này và việc đưa thuộc tính này vào các liên kết neo của bạn không nên ảnh hưởng tiêu cực đến phần mềm e-mail như Lotus Notes hoặc Outlook.

6. Thử nghiệm ở tất cả các khách hàng lớn

Một nghiên cứu gần đây về hầu hết các ứng dụng khách email phổ biến (được thực hiện bởi Trình giám sát chiến dịch) cho thấy mười ứng dụng khách email phổ biến nhất trong năm qua. Có vẻ hơi tẻ nhạt nhưng các nhà thiết kế nên tập thói quen kiểm tra các bản tin của họ trên tất cả các máy khách email chính, ít nhất là trên một số khách hàng phổ biến hơn như Gmail, Hotmail hoặc Yahoo! Thư.

Điều này không chỉ bao gồm webmail mà còn bao gồm phần mềm vận hành trên cả Mac OS X và Windows. Cũng theo sơ đồ của họ Thư iOS và Android cả hai đã lọt vào danh sách top 10 trong vài năm qua. Trên thực tế, iPhone, iPod Touch và iPad Mail xếp thứ 2 phổ biến nhất ngay trong Outlook! Thật không may, không có cách nào để kiểm tra những thứ này mà không sở hữu một trong các thiết bị - vì vậy bạn sẽ phải giải quyết với các tùy chọn khác.

Một lỗi với sự hỗ trợ di động xuất hiện ở nhiều mẫu iPhone và Android. Kết xuất e-mail di động thường sẽ Thay đổi kích thước văn bản bên trong mẫu của bạn. Điều này có thể không ảnh hưởng đến thiết kế của bạn rất nhiều, nhưng nó có thể gây khó chịu cho một số độc giả. Sử dụng CSS -webkit-text-size-điều chỉnh: không có;, sẽ đảm bảo kích thước văn bản mặc định trong tất cả các công cụ phân tích cú pháp mà không cần phải kiểm tra nó.

Nếu bạn biết bất kỳ bạn bè hoặc đồng nghiệp nào sử dụng phần mềm thay thế, bạn có thể muốn yêu cầu sự giúp đỡ của họ trong việc kiểm tra bản tin. Bạn có thể gửi cho họ một bản sao của e-mail để kiểm tra trên thiết bị của họ hoặc mượn thiết bị để chủ động xóa các lỗi mã hóa. May mắn thay, Outlook cung cấp phiên bản cài đặt Mac, do đó bạn sẽ không cần theo dõi người dùng Windows để biết những tối ưu hóa đó, nhưng khi nói đến Lotus Notes hoặc Windows Mail, bạn có thể không gặp may.

Thay thế là trả tiền cho một giải pháp chẳng hạn như Xem trước E-mail của tôi, thật không may, họ không cung cấp bất kỳ tài khoản demo miễn phí nào, nhưng dịch vụ của họ nổi tiếng vì cung cấp các bản xem trước tuyệt vời cho thiết kế của bạn. E-mail trên Acid là một dịch vụ tương tự cung cấp một tài khoản miễn phí nhưng không cho phép bạn kiểm tra trên tất cả các khách hàng, loại nào đánh bại mục đích. Dịch vụ kết xuất trực tuyến sẽ hữu ích nếu bạn cần kiểm tra nhiều mẫu bản tin trong thời gian dài mà không sử dụng máy tính thay thế, tuy nhiên chúng không phải là cơ bản, vì vậy đừng căng thẳng nếu bạn không thể kiểm tra tất cả!

7. Luôn cung cấp chế độ xem dựa trên web

Người đọc sẽ không luôn luôn có thể (hoặc sẵn sàng) để xem e-mail của bạn nguyên bản. Cung cấp một phiên bản khác ở đâu đó trên Web sẽ cho một cảm giác dễ dàng và tương thích. Quá trình này không thể hoàn toàn tự động trừ khi bạn muốn bao gồm một văn bản thô phiên bản.

Bằng cách này, bạn sẽ tước tất cả các thẻ HTML từ cách bố trí bản tin. Bạn sẽ không thể bao gồm các liên kết hoặc phong cách cho bất cứ điều gì. Tất cả nội dung sẽ chỉ đơn giản là được đặt dưới dạng một tệp văn bản đơn giản cho độc giả mà không có khả năng kết xuất. Đây chắc chắn là một lựa chọn tốt, nhưng khi bạn cung cấp một phiên bản Web đầy đủ của cùng một bản tin thì nó lấy đi thiệt hại do bất kỳ lỗi kết xuất nào. Hầu hết người đọc sẽ chạy một trình duyệt Web cập nhật mà bạn có thể tạo kiểu và xây dựng bản tin của mình và hoàn thiện.

Cách bạn thiết lập trang là hoàn toàn là sự lựa chọn của bạn. Một số trang web sẽ dành toàn bộ một bài đăng trên blog để sao chép nội dung của e-mail, có thể với một số thông tin thêm. Những người khác sẽ tạo một trang riêng biệt khỏi trang web chính mà không có bất kỳ liên kết trực tiếp nào trong điều hướng. Phương pháp này có thể có lợi vì người đọc sẽ không bị phân tâm bởi mẫu trang web chính hoặc nội dung thanh bên của bạn.

8. Thêm nội dung hình ảnh

Hình ảnh là một lý do khác để cung cấp cho độc giả của bạn một giải pháp dựa trên web. Theo mặc định, ứng dụng email khách được thiết lập để loại bỏ hình ảnh ra khỏi nội dung. Nếu địa chỉ của bạn được thêm vào danh sách an toàn, tất cả hình ảnh sẽ được hiển thị theo mặc định, nhưng người dùng phải chấp nhận thiết lập này Vì vậy, nó chắc chắn không phải là một sự đảm bảo. Chỉ đảm bảo hình ảnh không bắt buộc là một phần của nội dung chính, nhưng bao gồm như một topping bổ sung cho thẩm mỹ trang.

Khi bạn có thể xuất đồ họa, có một vài mẹo để xây dựng hình ảnh cụ thể cho e-mail. Bạn sẽ luôn muốn đặt cả thuộc tính chiều rộng và chiều cao trên của bạn img thẻ. Không có các thông số kỹ thuật theo thứ tự, một số khách hàng sẽ bóp méo nội dung hình ảnh. An alt Thẻ cũng sẽ hữu ích, vì vậy khách truy cập sẽ biết nội dung hình ảnh chứa gì trước khi được tải.

Như đã đề cập trước đó, việc định vị hình ảnh trong e-mail của bạn có thể gặp khó khăn. Tránh sử dụng phao bằng mọi giá! Bức hình align = "trái" thuộc tính sẽ hoạt động tốt hơn nhiều, hoặc cách khác vạch ra các ô bảng chính xác để phù hợp với hình ảnh của bạn dọc theo phía trên, bên trái hoặc bên phải của bản tin của bạn. Bạn sẽ không thể có được một trận đấu hoàn hảo với rất nhiều khách hàng ngoài kia (đặc biệt là các khách hàng di động), nhưng tối ưu hóa hình ảnh của bạn và giữ kích thước tệp nhỏ để có kết quả tốt nhất.

Đối với lưu trữ hình ảnh, bạn nên giữ tất cả các tệp trong máy chủ Web của riêng bạn. Đây là tùy chọn tốt hơn thay vì sử dụng máy chủ hình ảnh khác hoặc tải tệp lên dịch vụ bản tin trực tuyến. Ngoài ra, bạn nên tách nội dung cho các bản tin của bạn khỏi phần còn lại của hình ảnh trong cấu trúc thư mục như vậy / img / email hoặc là / img / email / 2011.

9. Tránh thư mục thư rác!

Điều này có thể khó nghe, nhưng không phải tất cả các khách hàng email đều thân thiện với các bản tin. Có hàng tỷ email được gửi mỗi ngày và phần lớn có chứa nội dung spam hoặc độc hại, do đó, các biện pháp bảo mật này được tích hợp trong Hộp thư rõ ràng là để phòng ngừa an toàn.

Tuy nhiên, khi nói đến tiếp thị trên Internet, bạn có thể dễ dàng nản lòng khi thấy bản tin mới nhất của bạn kết thúc với tin rác. Để giảm khả năng điều này xảy ra, bạn nên làm sạch thiết kế của bạn cho đơn giản. Đừng làm những hình ảnh khó chịu hoặc là thổi tung văn bản tiêu đề của bạn với hàng trăm từ khóa.

Cũng cố gắng để giữ cho nội dung của bạn ngắn gọn và về chủ đề. Bạn không cần phải bao gồm đầy đủ nội dung cho tất cả các bài viết hoặc trang của bạn. Hãy thử thêm một hoặc hai câu với một liên kết thay thế ra trang web của bạn thay cho một danh sách dài. Các Hình ảnh e-mail của bạn càng ngắn gọn, càng có nhiều khả năng nó sẽ vượt qua kiểm tra thư rác.

Thư viện thiết kế bản tin

Điều gì thú vị mà một bài viết bản tin email sẽ không có một số ví dụ tuyệt vời? Có rất nhiều mẫu thiết kế bản tin email để kiểm tra trong Google. Thư viện thư điện tử HTML là một nguồn cảm hứng rất phổ biến.

Bên dưới tôi đã bao gồm các ảnh chụp màn hình từ nhiều bản tin trong bộ sưu tập của Monitor Monitor. Hy vọng rằng những bố trí tuyệt vời này có thể cung cấp cho bạn một số ý tưởng tuyệt vời cho thiết kế của riêng bạn.

Hãy vui vẻ thiết kế các bản tin lý tưởng của bạn!

Cảnh báo cho doanh nghiệp