Nghiên cứu các bậc thầy về thiết kế đáp ứng trong tiếp thị qua email và trang đích

Thiết kế đáp ứng

El Thiết kế đáp ứng ngày nay rất quan trọng do các định dạng khác nhau mà người dùng phải đối mặt từ máy tính bảng, thiết bị di động và thậm chí cả máy tính của họ. Thiết kế đáp ứng này trong tiếp thị qua email và trang đích quan trọng hơn cả đối với giao tiếp đa kênh với khách hàng của chúng tôi.

Vì vậy, bạn phải nghiêm túc xem xét các mẫu khác nhau với chiều rộng khác nhau để có được thiết kế tốt nhất có thể những bản tin đó hoặc trang đích mà khách hàng tương lai mà chúng tôi muốn họ chuyển đổi từ quảng cáo của chúng tôi trên Google hoặc Facebook sẽ đến.

Thiết kế đáp ứng trong tiếp thị qua email

Tiếp thị qua email là một trong những cách để thông báo chào hàng sản phẩm hoặc những bài đăng mới được tạo trên blog của chúng tôi để do đó thu hẹp một cách sâu sắc hơn với tất cả những người theo dõi của chúng tôi.

Việc các bản tin này phản hồi có nghĩa là chúng có thể được nhìn thấy hoàn hảo từ điện thoại di động, máy tính bảng hoặc máy tính. Vì vậy chúng tôi phải cố gắng trang bị các công cụ cần thiết để tất cả các yếu tố hình ảnh được hài hòa, đủ cho việc đọc bản tin một cách dễ dàng.

IKEA

Bản tin IKEA

Đáp ứng có nghĩa là việc hiển thị một trang trên các thiết bị khác nhau luôn chính xác. Đối với điều này, chúng tôi có các công cụ email marketing giúp chúng tôi kiểm tra bản tin được tạo ở các định dạng khác nhau và do đó sửa đổi các giá trị như đệm hoặc lề để chúng được định vị lại một cách hoàn hảo khi chúng tôi giảm chiều rộng của trình duyệt.

Trong thiết kế web với CSS "Truy vấn phương tiện" được sử dụng để thiết kế một trang web theo định dạng. Lên đến 360px sẽ dành cho điện thoại di động và từ 360px đến 650px, chúng tôi có thể thực hiện sửa đổi cho tất cả những người dùng xem trang web của chúng tôi từ máy tính bảng.

Một số nguyên tắc cho bản tin tiếp thị qua email của chúng tôi là:

  • Hệ thống phân cấp trực quan rõ ràng: một tiêu đề trong H2 để để văn bản ở dạng đoạn văn.
  • Hai nguồn khác nhau: một cho tiêu đề và một cho văn bản làm cho bản tin của chúng tôi dễ đọc hơn.
  • El sử dụng màu sắc để phân biệt tiêu đề, văn bản và các yếu tố khác: chúng ta có thể chuyển dần từ màu xám đậm sang màu nhạt hơn.
  • Un CTA (Kêu gọi hành động) rõ ràng và dễ phân biệt: nếu logo của công ty chúng tôi có màu đỏ, CTA có thể có màu này trong khi phần còn lại có màu bổ sung.

Chúng tôi cung cấp cho bạn một ví dụ rõ ràng về một thiết kế đáp ứng trong một bản tin do Filmin thực hiện và bạn có thể thấy trong hình ảnh được cung cấp. Kiểu chữ rõ ràng bằng màu trắng, và văn bản có màu xám nhạt nhưng điều đó cho phép chúng ta hình dung nhanh các không gian khác nhau mà chúng ta được mời đọc nếu chúng ta muốn. CTA không phải là nó đến từ một thế giới khác, nhưng nó giúp ích cho biểu tượng chơi đó và điều đó khiến chúng tôi thấy những gì đang chờ đợi chúng tôi.

Phản hồi trong Filmin

Có đủ khoảng trống ở lề, màu trắng làm màu chính cho văn bản và hoàn toàn phù hợp với logo Của thương hiệu; được bao quanh bởi màu xám đó làm cho nó nổi bật. Hình ảnh bắt mắt tạo điểm nhấn cho bản tin hấp dẫn ngay từ giây phút đầu tiên. Các khoảng trắng cũng được chừa ra hai bên để toàn bộ chiều rộng của màn hình không bị "ăn".

Trong phiên bản máy tính để bàn duy trì những nguyên tắc đó, thậm chí để lại nhiều không gian hơn trong văn bản và để lại một lề lớn ở mỗi bên:

Responsive

Thiết kế đáp ứng trên trang đích

Các các nguyên tắc tương tự có thể được sử dụng trong thiết kế đáp ứng của một trang đích. Điều cực kỳ quan trọng là dành mọi thời gian trên thế giới để chọn đúng mẫu và tuân theo một số quy tắc trong thiết kế:

  • Đơn giản trực quan: Chúng tôi đang nói về việc giữ khoảng trống để tập trung vào CTA.
  • Hình ảnh đẹp và hấp dẫn cho người đọc mà không quên độ phân giải và chúng trông hoàn hảo.
  • Tầm quan trọng của màu sắc và chúng tôi nhấn mạnh lại.

Chúng tôi phải làm việc trên thiết kế đáp ứng của trang đích cho điện thoại di động, máy tính bảng và máy tính để bàn. Đi theo thời gian cần thiết để thử lại sau mỗi lần thay đổi nó được nhìn thấy ở ba định dạng đó, vì chúng ta có thể tin tưởng vào bản thân và quên rằng những thay đổi được thực hiện trong CSS sẽ trông rất kinh khủng trên thiết bị di động.

Hotjar

Trang đích Hotjar

Đó là công việc có thể tẻ nhạt, nhưng điều quan trọng là chúng ta phải dành thời gian để kiểm tra từng thay đổi. Các sử dụng lợi nhuận bên lề và cố gắng, càng nhiều càng tốt, không bỏ lỡ các quy tắc trong CTA hoặc nút hành động:

  • Đó khoảng cách liên quan đến văn bản và lề nút tăng dần ở cả ba định dạng. Nó không nhỏ cũng không lớn và nó ở cùng một độ cao.
  • La tỷ lệ trong kích thước nút CTA với phần còn lại của các yếu tố nơi nó được đặt phải được cung cấp.

Một ví dụ rõ ràng về điều này là công việc được thực hiện bởi Shopify trên trang đích của bạn trên máy tính để bàn và trong đó bạn có thể thấy trong phiên bản di động. Chú ý đến việc sử dụng màu sắc, khoảng trắng và các văn bản đó với kích thước và kiểu chữ thích hợp của chúng:

Phản hồi trong Shopify

Một loạt mẹo cần có một trang đích tốt hơn cho doanh nghiệp hoặc cửa hàng trực tuyến của bạn và những bản tin đó rất quan trọng để nhận các bản cập nhật và các quảng cáo đó cho người dùng của bạn.


Nội dung bài viết tuân thủ các nguyên tắc của chúng tôi về đạo đức biên tập. Để báo lỗi, hãy nhấp vào đây.

Hãy là người đầu tiên nhận xét

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố.

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.