Anonim

Hover đã được sử dụng trên các trang web trong nhiều năm như một cách để cung cấp một đoạn thông tin cho khách truy cập mà không kích hoạt một hành động. Khi điện thoại thông minh và máy tính bảng dần chiếm lĩnh internet, chúng ta phải tăng sự chú ý khi thiết kế trang web. Vì màn hình cảm ứng không thể xử lý di chuột, chúng ta cần xem xét các lựa chọn thay thế cho hiệu ứng di chuột. Nếu bạn đang thiết lập trang web của riêng mình hoặc không có tài nguyên để thuê một nhà thiết kế web chuyên nghiệp, hướng dẫn này là dành cho bạn.

Bạn có thể quản lý hiệu ứng di chuột bằng màn hình cảm ứng nhưng có thể hơi khó xử. Bạn có thể tốt hơn hết là thiết kế chúng hoàn toàn và sử dụng một cái gì đó hoàn toàn khác. Nếu bạn đã thiết lập sử dụng chúng trên trang web máy tính để bàn của mình, bạn thường có ba lựa chọn thay thế cho hiệu ứng di chuột trên các trang web di động:

  1. Loại bỏ chúng hoàn toàn và thay thế chúng bằng hành động chính.
  2. Thêm một menu phụ nơi bạn có thể nhấn một lần cho hiệu ứng di chuột và một lần nữa cho hành động chính.
  3. Đặt thông tin di chuột trên trang riêng của nó.

Tất cả sẽ hoạt động tốt trên màn hình cảm ứng và máy tính để bàn nhưng sẽ yêu cầu một số điều chỉnh thiết kế để thực hiện trong một thiết kế hiện có. Bạn cũng có thể làm việc xung quanh nó với JavaScript hoặc mã jQuery thông minh nếu bạn có các kỹ năng nhưng nếu bạn đang cố gắng tự mình tìm ra nó, bạn có thể sử dụng các lựa chọn thay thế thiết kế tốt hơn mã. Nếu bạn muốn khám phá các lựa chọn thay thế mã cho hiệu ứng di chuột, hãy truy cập trang này.

Xóa hiệu ứng di chuột khỏi thiết kế của bạn

Trừ khi bạn có thể thuê một nhà thiết kế web tự do để giúp bạn, bạn có thể loại bỏ hoàn toàn các hiệu ứng di chuột. Chắc chắn chúng trông gọn gàng và có thể cung cấp thông tin bổ sung hữu ích nhưng luôn có những cách khác để đạt được hiệu quả tương tự.

Bạn có thể giữ lại hành động menu là hành động chính và bao gồm thông tin bổ sung ở nơi khác trên trang. Bạn có thể sử dụng các hộp đột phá, cửa sổ bật lên, tăng nội dung mô tả cho điểm bạn đang cố gắng thực hiện hoặc một cái gì đó khác. Nếu bạn không có kỹ năng triển khai jQuery, đây có lẽ là tùy chọn đơn giản nhất.

Thêm một menu phụ

Một menu phụ bao gồm lần chạm đầu tiên sẽ mô phỏng hiệu ứng di chuột. Bạn có thể bao gồm thông tin trong menu và hiển thị menu thứ hai trong cùng một phần tử. Menu thứ hai đó hoạt động như lựa chọn thực tế như nó sẽ xảy ra trên máy tính để bàn. Lần nhấn đầu tiên mô phỏng sự di chuột của chuột và lần nhấn thứ hai mô phỏng người dùng thực hiện hành động chính.

Đây là một thay thế gọn gàng cho các hiệu ứng di chuột nhưng bị hạn chế bởi kích thước màn hình và giới hạn lượng thông tin bạn có thể thêm vào hiệu ứng của mình. Hiệu ứng di chuột bị giới hạn bởi bản chất của chúng nhưng bị hạn chế hơn trên thiết bị di động bởi bất động sản màn hình mà bạn đang xử lý. Nếu bạn thực sự muốn bao gồm dữ liệu bổ sung theo cách không chuẩn, đây có thể là nó.

Đặt thông tin di chuột trên trang của chính nó

Có lẽ một lựa chọn dễ dàng hơn sẽ bao gồm thông tin di chuột trong trang riêng của nó với một liên kết văn bản. Điều này đơn giản hóa menu của bạn và giữ điều hướng đơn giản. Siêu liên kết hoạt động trên các thiết bị và bạn có thêm một trang cho kích thước trang web và SEO. Nhược điểm là bạn sẽ phải tăng nội dung bổ sung ít nhất 300 từ hoặc lâu hơn để làm cho nó hoạt động.

Miễn là bạn có thể đệm thông tin đủ cẩn thận để nó đọc tốt và tăng giá trị cho người đọc, cá nhân tôi nghĩ rằng đây là cách thay thế tốt nhất. Quyết định nơi đặt các liên kết đó đến dữ liệu bổ sung là tùy thuộc vào bạn và sẽ phụ thuộc vào thiết kế của bạn nhưng các trang bổ sung cho bạn thêm cơ hội để thêm các cuộc gọi hành động, để thêm số điện thoại, địa chỉ email và bất kỳ thông tin bổ sung nào có thể được sử dụng để bán hàng

Ở lại với di chuột

Nếu bạn muốn sử dụng một số loại hiệu ứng di chuột trên trang web chính của mình, bạn sẽ cần phải đưa nó vào trang web di động của bạn hoặc ít nhất là phiên bản di động. Có các lựa chọn thay thế trình đơn hoặc giải pháp JavaScript nhưng chúng sẽ cần một chuyên gia để thực hiện. Trang này thảo luận về các lựa chọn thay thế của bạn nếu bạn muốn khám phá chúng thêm.

Một trong những cái bẫy dễ rơi vào nhất khi bạn tự mình bắt đầu hoặc xây dựng trang web đầu tiên của bạn là thiết kế cho chính bạn chứ không phải cho khán giả của bạn. Bạn chắc chắn phải thiết kế một cái gì đó bạn thích, nhưng khi xem xét khả năng sử dụng, bạn phải ưu tiên đối tượng. Bạn cũng phải tính đến các thiết bị họ sẽ sử dụng và cách họ có khả năng tương tác tốt nhất với trang web của bạn.

Nếu đối tượng của bạn còn trẻ, họ sẽ sử dụng điện thoại di động. Nếu họ sử dụng điện thoại di động, hiệu ứng di chuột và các tùy chọn thiết kế khác như đó không phải là lựa chọn tốt nhất của bạn.

3 lựa chọn thay thế cho hiệu ứng di chuột trên thiết bị di động