Trong một nền kinh tế kỹ thuật số hơn bao giờ hết, một tuyên bố đặc biệt mạnh mẽ:
“Tính nhất quán của thương hiệu là chìa khóa để tồn tại trong nền kinh tế kỹ thuật số ngày nay” –Tuần lễ tiếp thị
Tính nhất quán của thương hiệu dẫn đến sự công nhận thương hiệu và sự công nhận thương hiệu dẫn đến sự tin tưởng thương hiệu. Bạn đã bao giờ tin tưởng một thương hiệu mà bạn không nhận ra?
Thách thức về tính nhất quán của thương hiệu trực tuyến
Một thương hiệu trực tuyến không chỉ là tổng các bộ phận của nó. Bạn đạt được sự nhất quán về thương hiệu trực tuyến khi tất cả các yếu tố xuất hiện trên tất cả các kênh mà một thương hiệu sử dụng, chẳng hạn như email, web và ứng dụng, đều nhất quán!
Thách thức để đạt được tính nhất quán của thương hiệu trực tuyến đi kèm với cách thức không nhất quán mà bạn phải tạo các yếu tố cho các kênh đó, dẫn đến sự không nhất quán về giao diện của các yếu tố đó và cách các yếu tố đó hoạt động.
Cách tạo tính nhất quán của thương hiệu trực tuyến
Chú ý đến những yếu tố đó giúp bạn đảm bảo tính nhất quán của thương hiệu trực tuyến trên các kênh của mình. Một số trong số đó có tầm quan trọng hàng đầu đối với tính nhất quán của thương hiệu trực tuyến. Chúng bao gồm logo, màu sắc và phông chữ.
Một số trong số chúng có tầm quan trọng thứ hai đối với tính nhất quán của thương hiệu, vì chúngnâng caosự nhận diện thương hiệu, nhưng không phải là chìa khóa của nó.Chúng bao gồm những thứ như nút, liên kết và hình dạng. Trong hướng dẫn này, tôi sẽ tập trung vào các yếu tố chính và phụ, trên hai trong số các kênh đó, email và web.
Thiết kế các yếu tố thương hiệu trực tuyến chính
Biểu trưng
Biểu trưng (hoặcbiểu trưng) được cho là yếu tố dễ nhận biết nhất trong số các yếu tố thương hiệu trực tuyến, vì chúng là duy nhất đối với mọi thương hiệu. Do đó, chúng cần nhất quán trên tất cả các nội dung thương hiệu, ngoại tuyến và trực tuyến, bản in, email, web và ứng dụng. Để đạt được sự nhất quán này, bạn nên:
- Sử dụng cùng một phiên bản hoặc các phiên bản biểu trưng của bạn. Bạn có thể có một phiên bản biểu trưng của mình để sử dụng cho thiết bị di động, máy tính bảng và máy tính để bàn. Bạn có thể có hai phiên bản biểu trưng của mình – một cho thiết bị di động, có thể có ít chiều cao hơn và nhiều chiều rộng hơn (ngang) và một cho máy tính bảng và máy tính để bàn, có thể có nhiều chiều cao hơn và ít chiều rộng hơn (dọc).
- Hiển thị biểu trưng của bạn với kích thước và tỷ lệ phù hợp trên các nội dung.
- Đảm bảo cả hai phiên bản biểu trưng của bạn đều có độ phân giải cao để chúng vẫn sắc nét và rõ ràng trên màn hình có độ phân giải cao, như Màn hình Retina của Apple. Biểu trưng mờ không đại diện cho thương hiệu tốt và người nhận có thể nghĩ rằng email hoặc trang web mà họ đang truy cập không xác thực.
Bạn có thể đảm bảo biểu trưng của mình có độ phân giải cao bằng cách tạo chúng ở chiều rộng lớn hơn (tính bằng pixel) và chiều cao lớn hơn (tính bằng pixel) và ởđịnh dạng hình ảnhphù hợp . GIF hoặc PNG-8 phù hợp với biểu trưng có màu đồng nhất, JPEG hoặc PNG-24 phù hợp với biểu trưng có màu chia độ hoặc nhiếp ảnh. SVGs phù hợp với các biểu trưng có màu đồng nhất hoặc màu chia độ.
Thực hiện: Email
- Tạo logo của bạn ở 200% kích thước dự định. Tạo logo của bạn ở kích thước này sẽ đảm bảo nó hiển thị sắc nét và rõ ràng trên các màn hình có độ phân giải cao, chẳng hạn như màn hình Retina của Apple khi được giảm xuống kích thước dự định.
- Lưu biểu trưng của bạn ở định dạng hình ảnh phù hợp (GIF hoặc PNG-8 đối với biểu trưng có màu đồng nhất, JPEG hoặc PNG-24 đối với biểu trưng có màu chia độ hoặc ảnh chụp).
- Chỉ định kích thước dự kiến của biểu trưng trong HTML và CSS của bạn. Trong HTML thuộc tính hình ảnh, chiều rộng và chiều cao (ví dụ
img width="200" height="100":). Trong CSS nội tuyến của hình ảnh, chiều rộng là 100%, chiều rộng tối đa (chiều rộng dự định của nó) và chiều cao là tự động (ví dụstyle="width:100%; max-width:200px; height:auto;":). Việc chỉ định CSS theo cách này đảm bảo biểu trưng sẽ hiển thị ở kích thước dự định, nhưng sau đó sẽ giảm kích thước hơn nữa để vừa với chiều rộng của màn hình nhỏ hơn nếu chúng quá nhỏ để hiển thị ở kích thước dự định.
Thực hiện: Web
- Lưu biểu trưng của bạn ở định dạng hình ảnh SVG.
- Chỉ định kích thước dự kiến của biểu trưng trong HTML và CSS của bạn. Trong HTML thuộc tính hình ảnh, chiều rộng và chiều cao (ví dụ
img width="200" height="100":). Trong CSS nội bộ của hình ảnh, chiều rộng là 100%, chiều rộng tối đa (chiều rộng dự định) và chiều cao là tự động (ví dụ.logo {width:100%; max-width:200px; height:auto;}:). Việc chỉ định CSS theo cách này đảm bảo biểu trưng sẽ hiển thị ở kích thước dự định, nhưng sau đó sẽ giảm kích thước hơn nữa để vừa với chiều rộng của màn hình nhỏ hơn nếu chúng quá nhỏ để hiển thị ở kích thước dự định. Vì định dạng ảnh SVG là định dạng ảnh vectơ, miễn là ảnh gốc có đủ chất lượng, nó sẽ vẫn sắc nét và rõ ràng khi tăng và giảm kích thước.
Nếu bạn từng sửa đổi biểu trưng của mình, hãy nhớ cập nhật từng phiên bản trên email và web. Tạo phiên bản chính và đặt chúng trong đoạn mã chính sẽ cho phép bạn cập nhật một lần và áp dụng ở mọi nơi.
Màu sắc
Việc đảm bảo màu sắc nhất quán là điều dễ hiểu, miễn là bạn đang sử dụng hệ thập lục phân, định dạngmã màuđược hỗ trợ cho email và web và áp dụng nó bằng cách sử dụng tất cả sáu ký tự. Trên web, đối với một số màu, có thể viết tắt nó thành ba ký tự, sử dụng phím tắt, khi ba ký tự đầu tiên và ba ký tự cuối cùng giống nhau (ví dụ:#ffffffff;to#fff;hoặc#ff0ff0;to#ff0;).
Trên email, CSS nên được áp dụng nội tuyến, đặc biệt là trên văn bản và liên kết,vì có một số ứng dụng email, ứng dụng webmail và ứng dụngkhông hỗ trợ CSS nội bộ. Ngoại lệ cho điều này là khi bạn tạo kiểu các phần tử, bạn phải tạo kiểu bằng CSS nội bộ, chẳng hạn nhưbảng mavà các phần tử được tạo kiểu theo hoặc phụ thuộc vào các truy vấn @media, như phông chữ web. Trên web, bạn có thể áp dụng CSS nội tuyến, mặc dù tốt nhất bạn nên áp dụng nó bên trong hoặc bên ngoài.
Thực hiện: Email
- Hệ thập lục phân sáu ký tự (ví dụ
#000000;🙂 - CSS nội tuyến. CSS nội bộ để tạo kiểu cho các phần tử trong bảng ma và các phần tử phụ thuộc vào các truy vấn @media.
Thực hiện: Web
- Hệ thập lục phân sáu ký tự (ví dụ
#000000;:). Hệ thập lục phân ba ký tự sử dụng phím tắt (ví dụ#000;) nếu có thể. - CSS nội bộ. CSS bên ngoài.
Điều quan trọng là phải lưu ý đến cách màu sắc của các yếu tố thương hiệu trực tuyến sẽ xuất hiện trên ‘Chế độ tối’ trên thiết bị Apple hoặc ‘Chủ đề tối’ trên thiết bị Android. Hình ảnh tối trên nền trong suốt có thể biến mất và hình ảnh được cắt xén chặt chẽ trên nền trắng có thể hiển thị kém và chưa hoàn thành!
Để nhất quán, tôi khuyên bạn nên thiết kế các yếu tố thương hiệu trực tuyến để hiển thị trênChế độ tốivàChủ đề tối,mà không cần dựa vào mã, vì tại thời điểm viết bài, cả Chế độ tối và Chủ đề tối đều tương đối mới, vì vậy bạn có thể thấy nhiều kết quả trên các kênh.
Phông chữ
Phương pháp dễ nhất để đạt được sự nhất quán với các phông chữ là sử dụngcác phông chữ an toànchoweb, như Arial và Georgia. Phông chữ an toàn cho web được cài đặt sẵn trên hầu hết các hệ điều hành, vì vậy có thể an toàn khi cho rằng (do đó là tên của chúng) rằng chúng sẽ hiển thị trên chúng.
Tuy nhiên, nếu bạn có phông chữ an toàn cho web trên email và phông chữ web trên trang web của mình, trải nghiệm thương hiệu trực tuyến sẽ không nhất quán. Tại thời điểm viết, phông chữ web có thể được triển khai thành email bằng CSS, sử dụng phông chữ webWOFF(Web Open Font Format). Chúng sẽ hiển thị trên nhiều hệ điều hành của Apple, bao gồm iOS, iPadOS và MacOS, vào tháng 12 năm 2020, chiếm 53%thị phần email toàn cầu– nhiều hơn cả Gmail, Outlook, Yahoo! Kết hợp Mail, Samsung Mail, Google Android và Outlook.com.
Phông chữ Web trên Envato Elements
Đăng ký Envato Elements sẽ cung cấp cho bạn quyền truy cập vào hàng nghìnphông chữ web tốt nhất. Nếu bạn là người yêu thích kiểu chữ, bạn cần xem xét lựa chọn của chúng tôi.
Tuy nhiên, thương hiệu của bạn có thể có nhiều hơn hoặc ít hơn 53% người nhận sử dụng các hệ điều hành này, vì vậy bạn sẽ phải chỉ định một phông chữ dự phòng an toàn cho web phù hợp trong ngăn xếp phông chữ khi chúng không hiển thị. Tất nhiên, bạn có thể triển khai các phông chữ web rộng rãi hơn trên web, mặc dù vậy bạn cần đảm bảo rằng chúng sẽ hiển thị trên các trình duyệt mà thương hiệu của bạn hỗ trợ.
Thực hiện: Email
- Phông chữ an toàn cho web.
- Phông chữ web (chỉ WOFF) (Giới hạn cho iOS, iPadOS và MacOS) được áp dụng với CSS.
Thực hiện: Web
- Phông chữ an toàn cho web.
- Phông chữ web (Chọn phông chữ web có sẵn dưới dạng WOFF để đảm bảo tính nhất quán với email) trên các trình duyệt được thương hiệu hỗ trợ.
nút
Mặc dù không phải là yếu tố xây dựng thương hiệu, nhưng bạn vẫn cần thiết kế các nút để người nhận nhận ra chúng và biết phải làm gì với chúng, dù họ đang ở đâu trên hành trình trực tuyến – email hoặc web. Hãy xem xét hình dạng của chúng (thứ mà tôi sẽ đề cập ở phần sau của hướng dẫn này) và các biểu tượng của chúng, chẳng hạn như chữ V và mũi tên của chúng.
Thật khó để triển khai các ký hiệu dưới dạng hình ảnh trong các nút email, vì vậy tôi khuyên bạn nên sử dụng các thực thể thay thế, như mũi tên bên phải (→).Vì các nút là yếu tố tương tác, hãy lưu ý đến cách chúng sẽ trông và hoạt động như thế nào khi người nhận cuộn qua hoặc chọn chúng. Việc triển khai kiểu cho điều này đạt được với CSS trên email và CSS và JavaScript trên web.
Thực hiện: Email
- HTML, CSS (Bao gồm cả hoạt ảnh CSS nếu được hỗ trợ).
Thực hiện: Web
- HTML, CSS, JavaScript.
Liên kết
Theo nhiều cách, các liên kết giống như các nút, vì vậy hãy tuân theo các “quy tắc” giống nhau để có tính nhất quán. Sự khác biệt ở đây là cách một số ứng dụng email, ứng dụng webmail và ứng dụng ép buộc tạo kiểu cho chúng, khiến chúng không nhất quán.
Các liên kết màu xanh lamnhư chúng được biết đến có thể tự xuất hiện khi ứng dụng email, ứng dụng webmail và ứng dụng, ghi đè lên bất kỳ CSS nội bộ nào có kiểu dáng màu xanh lam mặc định, điều này chắc chắn sẽ không có trên thương hiệu! Bạn có thể giải quyết vấn đề này, mặc dù nó yêu cầu các kỹ thuật khác nhau cho các ứng dụng email khách, ứng dụng email trực tuyến, ứng dụng và thiết bị khác nhau. Một hướng dẫn trong chính nó! Tuy nhiên, đây là một vài mẹo để bạn bắt đầu.
Apple Mail
- Chèn CSS nội bộ sau:
a[x-apple-data-detectors] {color:inherit !important;}
Gmail
- Chèn một
IDtrong sốbodyvào thẻ nội dung:<body id="body"> - Chèn CSS nội bộ sau:
u + #body a {color:inherit !important;}
Samsung Mail
- Chèn CSS nội bộ sau:
#MessageViewBody a {color:inherit !important;}
Các trường hợp khác
- Chèn một
classtrong sốblueLinkcác thẻ bị ảnh hưởng:<p class="blueLink">01234 567890</p> - Chèn CSS nội bộ sau:
.blueLinks a {color:inherit !important;}
Hình dạng
Hình dạng đóng một vai trò quan trọng trong việc xây dựng thương hiệu, mặc dù việc đạt được tính nhất quán có thể là một thách thức khi sử dụng HTML và CSS. Tạo bất kỳ thứ gì khác ngoài hình chữ nhật trên email, trong một lưới các hình chữ nhật sẽ rất phức tạp. Có thể tạo ra các hình chữ nhật tròn và thậm chí chồng chéo hình chữ nhật này lên hình chữ nhật khác, nhưng những kỹ thuật này đòi hỏi nhiều thời gian và thử nghiệm.
Bạn có thể tạo hình chữ nhật tròn đều trên các nút nếu bạn sẵn sàng đầu tư thời gian để phát triển nút Ngôn ngữ đánh dấu vectơ của Microsoft (VML). Microsoft Outlook không hỗ trợ thuộc tính CSSborder-radius, vì vậy việc sử dụngborder-radiussẽ dẫn đến bất kỳ phần tử nàoborder-radiusđược áp dụng, bao gồm cả các nút, có dạng hình chữ nhật trên Microsoft Outlook, mà không cần sử dụng VML.
Rất may, Campaign Monitor có mộtcông cụ hữu íchđể tạo các nút VML. Tuy nhiên, tùy thuộc vào số lượng người nhận thương hiệu của bạn sử dụng Microsoft Outlook vàchiến lược thiết kế và phát triển emailcủa bạn , bạn có thể quyết định chấp nhận họ sẽ không nhìn thấy hình chữ nhật tròn mà chỉ nhìn thấy hình chữ nhật hình chữ nhật! Tất cả phụ thuộc vào mức độ quan trọng của hình dạng đó đối với thương hiệu của bạn.
Thực hiện: Email
- CSS: Các góc được làm tròn với bán kính đường viền (Không hỗ trợ trên một số ứng dụng email, bao gồm cả Microsoft Outlook).
- VML: Các góc tròn trên các nút có thể được tạo dễ dàng bằng VML và bán kính đường viền, sử dụngcông cụ ‘Nút email chống đạn’của Campaign Monitor .
Thực hiện: Web
- CSS: Các góc được làm tròn với bán kính đường viền.
Như chúng ta đã thấy, có những trường hợp cần phải thỏa hiệp về tính nhất quán, trong đó chi phí nhất quán cao về thời gian và công sức. Câu hỏi đặt ra là bạn có hay không chấp nhận thỏa hiệp? Vấn đề là mức độ ảnh hưởng của sự thỏa hiệp đến tính toàn vẹn của thương hiệu của bạn.
Nếu người nhận của bạn chủ yếu sử dụng Microsoft Outlook và thương hiệu của bạn sử dụng nhiều hình chữ nhật tròn, có thể đáng đầu tư thời gian để tạo hình chữ nhật tròn bằng VML.
Nếu người nhận của bạn chủ yếu sử dụng iOS, thì điều đó sẽ không xảy ra và bạn có thể phải chấp nhận sự thỏa hiệp của việc có các hình chữ nhật cho bất kỳ người nhận nào sử dụng Microsoft Outlook.
Cuối cùng: Lập chiến lược thiết kế và phát triển email
Hiểu được hỗ trợ HTML và CSS trên ứng dụng email, ứng dụng email trên web và ứng dụng sẽ giúp bạn đạt được tính nhất quán chặt chẽ hơn trên email và web, đồng thời giúp bạn trong bất kỳ quyết định nào bạn cần đưa ra về sự thỏa hiệp.Lập chiến lược phát triển và thiết kế email.
Lập chiến lược phát triển và thiết kế email sẽ giúp bạn hiểu những ứng dụng email, ứng dụng webmail và ứng dụng mà người nhận của bạn đang sử dụng, vì vậy bạn có thể tập trung nỗ lực vào những nơi quan trọng. Thông tin chi tiết như vậy sẽ dẫn đến trải nghiệm xây dựng thương hiệu trực tuyến nhất quán cho người nhận của bạn, khi họ rời khỏi email của bạn và đến trang web của bạn.
Bài viết liên quan: