7 mẹo WordPress cho một trang web thân thiện với thiết bị di động


Không có gì tệ hơn là có một trang web máy tính để bàn tuyệt vời và một trang web di động không hoạt động chính xác.

Hầu hết các bản sửa lỗi thiết kế đều đơn giản nhưng cần có sự chú ý nếu bạn muốn khách truy cập ở lại trang web trong khi duyệt trên thiết bị di động.

Bài viết này sẽ nêu ra bảy sự cố và sửa lỗi trang web thân thiện với thiết bị di động.

  • Thay đổi được thực hiện không hiển thị trên thiết bị di động
  • Điều hướng không thân thiện
  • Giao diện đáp ứng Dừng hoạt động đột ngột
  • Hình ảnh mất quá nhiều thời gian để tải
  • Nội dung quan trọng nhất không rõ ràng
  • Quá nhiều thông tin
  • Dữ liệu cho màn hình nhỏ
  • Cập nhật trang web thân thiện với thiết bị di động không hiển thị

    Bạn vừa mất nhiều thời gian thực hiện cập nhật cho trang web của bạn. Chúng trông tuyệt vời trên máy tính để bàn của bạn nhưng don không hiển thị trên thiết bị di động của bạn.

    Một trong những lý do phổ biến nhất là bộ nhớ đệm. Trình duyệt di động của bạn có thể hiển thị phiên bản cũ của trang web mà bạn đã tải xuống trước đó. Một lý do khác có thể là trang web của bạn đang giữ phiên bản cũ của trang và không hiển thị các thay đổi của bạn.

    Nếu đây là sự cố, bạn sẽ cần xóa bộ nhớ cache để tải xuống phiên bản sửa đổi. Một plugin lưu đệm như Bộ nhớ cache siêu WP, Tổng bộ nhớ cache W3 hoặc Bộ nhớ cache nhanh nhất WP có thể giúp giải quyết vấn đề này.

    In_content_1 tất cả: [300x250] / dfp: [640x360]->

    Dưới đây là bốn bước để giúp bạn xóa bộ nhớ cache và trình duyệt trang web để cho phép phiên bản mới hiển thị trên trang web thân thiện với thiết bị di động của bạn.

    1. Làm mới trình duyệt của bạn nhiều lần trên
    2. Kiểm tra trang web của bạn trên các thiết bị di động khác nhau.
    3. Xóa trang web của bạn bằng plugin lưu trữ.
    4. Kiểm tra với công ty lưu trữ của bạn để xem có Có một hệ thống bộ nhớ đệm khác trên máy chủ của bạn cần được xóa.
    5. Điều hướng không thân thiện

      Việc tạo menu điều hướng có thể khó khăn hoạt động tốt trên các thiết bị di động. Nếu điều hướng trang web của bạn có nhiều mục và menu con, thậm chí còn khó hơn khi ép mọi thứ trên màn hình nhỏ hơn.

      Ví dụ: nếu bạn chỉ có ba hoặc bốn mục trong điều hướng trang web của mình, nó sẽ trông ổn trên di động. Tuy nhiên, nếu bạn có nhiều vật phẩm và menu con hơn, chúng sẽ xếp chồng lên nhau và trông đông đúc.

      Dưới đây là một số cách để khắc phục sự cố này cho trang web thân thiện với thiết bị di động:

      • Biến điều hướng của bạn thành menu thả xuống cho thiết bị di động.
      • Hiển thị menu điều hướng của bạn dưới dạng các thành phần khối, để chúng xuất hiện theo chiều dọc.
      • Sử dụng biểu tượng menu có thể là bật tắt để chiếm ít dung lượng hơn.
      • Tạo menu điều hướng di động bằng jQuery.
      • Sử dụng menu Hamburger (Nhiều chủ đề bao gồm tùy chọn này hoặc bạn có thể  sử dụng một plugin.)
      • Giao diện đáp ứng dừng hoạt động đột ngột

        Nếu thân thiện với thiết bị di động của bạn Trang web đột nhiên ngừng hoạt động, có thể là do một plugin trên trang web của bạn.

        Cài đặt một plugin mới hoặc cập nhật cho một plugin hiện có có thể gây ra xung đột với những người khác ảnh hưởng đến bố cục phản hồi của bạn.

        Bắt đầu bằng cách tắt từng plugin một lần để xem đó có phải là nguyên nhân không. Đừng tắt tất cả chúng cùng một lúc hoặc bạn sẽ không biết plugin nào có thể là thủ phạm.

        Thay đổi mã là một nguyên nhân có thể khác. Nếu bạn đã sửa đổi bất kỳ mã nào một cách vô tình hoặc cố ý, hãy khôi phục cơ sở mã gốc và xem trang web phản hồi của bạn có bắt đầu hoạt động trở lại không.

        Khi kiểm tra trang web của bạn để biết mức độ đáp ứng của thiết bị di động, bạn phải luôn kiểm tra nó trên thiết bị di động.

        Đôi khi nó có vẻ hoạt động khi thay đổi kích thước cửa sổ trình duyệt trên máy tính để bàn của bạn nhưng không hiển thị chính xác trên thiết bị di động.

        Nếu thiếu một dòng mã từ tệp tiêu đề HTML, thì nó sẽ bị thiếu có thể phá vỡ các thiết kế đáp ứng. Dòng mã bị thiếu này sẽ khiến thiết bị di động của bạn cho rằng trang web bạn đang xem là một trang web có kích thước đầy đủ.

        Trang web được hiển thị sẽ có kích thước của chế độ xem (kích thước của khu vực của trang web hiển thị cho người dùng).

        Để sửa trang web thân thiện với thiết bị di động của bạn, hãy thêm dòng mã sau vào phần tiêu đề:

        Đôi khi khi một chủ đề được cập nhật, mã này có thể biến mất.

        Hình ảnh mất quá nhiều thời gian để tải

        Tối ưu hóa hình ảnh và giảm kích thước tập tin hình ảnh có ý nghĩa. Hình ảnh lớn không được tối ưu hóa có thể làm chậm tốc độ tải trang web của bạn. Điều này có thể gây khó chịu cho người dùng di động.

        WordPress phiên bản 4.4 trở lên tự động phục vụ phiên bản hình ảnh nhỏ nhất trên máy chủ của bạn.

        Nếu bạn đang chạy phiên bản WordPress mới nhất , nhưng trang web của bạn vẫn không tải đủ nhanh, bạn có thể:

        • Cài đặt một plugin như  Tối ưu hóa hình ảnh, nén và tải lười biếng để thay đổi kích thước và tối ưu hóa hình ảnh của bạn
        • Sử dụng công cụ nén và tối ưu hóa trước khi tải hình ảnh lên trang web của bạn, chẳng hạn như TinyPNG, Nén JPEG hoặc Trình tối ưu hóa hình ảnh trực tuyến.
        • Nội dung quan trọng nhất không rõ ràng

          Một số trang web được tải rất nhiều nội dung không cần thiết để lấp đầy khoảng trống khi mở trên máy tính để bàn.

          Các trang web được phát triển mà không có ý thức của người dùng di động thường thuộc danh mục này. Các trang web này mất nhiều thời gian và băng thông hơn để tải.

          Nếu các trang được thiết kế phù hợp cho thiết bị di động, thì một phần nội dung có thể không xuất hiện trên thiết bị di động mà không cần cuộn nhiều.

          Hầu hết thời gian, một yếu tố trên trang web của bạn sẽ nhìn một chiều trên máy tính và hoàn toàn khác nhau trên thiết bị di động.

          Ví dụ: một trang định giá có ba cột sẽ hiển thị chúng cạnh nhau trên máy tính.

          Tuy nhiên , trên thiết bị di động, các cột được xếp chồng lên nhau vì kích thước màn hình nhỏ hơn. Hành vi này sẽ được mong đợi.

          Đảm bảo bảng giá của bạn ở vị trí hàng đầu trên trang web của bạn để nó sẽ xuất hiện đầu tiên khi được xem trên thiết bị di động. Nếu bạn có nhiều văn bản trên bàn của mình, người dùng di động sẽ phải cuộn xuống để xem và có thể không.

          Để có trải nghiệm người dùng di động tối ưu nhất, hãy đặt các phần nội dung quan trọng nhất lên trên cùng của trang. Nếu người dùng cần cuộn nhiều trước khi họ có thể xem nội dung của bạn, họ có thể sẽ không.

          Quá nhiều thông tin

          Các trang web có người dùng phức tạp- Các thành phần giao diện như bảng, biểu mẫu nhiều bước và các tính năng tìm kiếm nâng cao có thể tạo ra trải nghiệm người dùng di động kém.

          Các yếu tố này chứa quá nhiều thông tin có thể làm đám đông màn hình di động và gây trở ngại cho người dùng tìm thông tin họ muốn.

          Một cách tiếp cận là xóa hoặc ẩn một số nội dung khỏi người dùng di động. Tuy nhiên, đây không phải là giải pháp lý tưởng cho khách truy cập muốn có quyền truy cập vào các yếu tố này.

          Để tránh sự cố này, hãy tối ưu hóa trang web thân thiện với thiết bị di động của bạn càng nhiều càng tốt. Ngoài ra, hãy xóa mọi thành phần không cần thiết trong khi tập trung vào cấu trúc cốt lõi của trang web của bạn.

          Dữ liệu cho màn hình nhỏ

          Các bảng phức tạp có nhiều hàng và cột có thể được một vấn đề khi xem trên màn hình điện thoại di động nhỏ. Cách khắc phục tốt nhất là sử dụng các bảng phản hồi.

          Một plugin như  Bảng đáp ứng WP có thể giúp thực hiện điều này dễ dàng.

          Giống như bảng giá ở trên, khi được xem trên thiết bị di động, các cột sẽ được xếp chồng lên nhau vừa với màn hình nhỏ hơn.

          Các cách khác để hiển thị dữ liệu trên thiết bị di động bao gồm:

          • Tạo một bảng nhỏ hơn không có bố cục lưới để tránh phải cuộn ngang.
          • Lật một bảng ở bên cạnh phù hợp hơn trên màn hình nhỏ hơn.
          • Thay thế các bảng lớn hơn bằng các bảng nhỏ hơn liên kết với phiên bản đầy đủ.
          • Chuyển đổi bảng thành biểu đồ hình tròn.
          • Khi việc sử dụng điện thoại di động đang tăng theo cấp số nhân, điều bắt buộc là các trang web kinh doanh phải được tối ưu hóa với các phiên bản thân thiện với thiết bị di động. Nâng cao trải nghiệm người dùng mà không phải hy sinh chức năng bằng cách thực hiện theo các bước trên.

            Bạn cũng nên luôn theo dõi hiệu suất trang web của mình và thực hiện các điều chỉnh khi cần thiết để cải thiện hiệu suất và trải nghiệm người dùng. >

            25 Nguyên Tắc Thiết Kế Website Dành Cho Di Động được Google khuyên dùng

            bài viết liên quan:


            14.10.2019