Không có gì tệ hơn việc có một trang web trên máy tính để bàn đẹp mắt và một trang web dành cho thiết bị di động hoạt động khô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 phải chú ý nếu bạn muốn khách truy cập ở lại trang web của mình trong khi duyệt trên thiết bị di động.
Bài viết này sẽ nêu bật bảy vấn đề về trang web thân thiện với thiết bị di động và cách khắc phục chúng.
- Các thay đổi đã 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
- Phản ứng nhanh nhẹn Layout Dừng hoạt động đột ngột
- Mất quá nhiều thời gian để tải hình ảnh
- 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ỏ
Nội dung bài viết
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 dành nhiều thời gian để cập nhật trang web của mình. Chúng trông tuyệt vời trên máy tính để bàn của bạn nhưng 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ể đang 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 phải xóa bộ nhớ cache để tải xuống phiên bản sửa đổi. Một plugin bộ nhớ đệm chẳng hạn như WP Super Cache, Tổng bộ nhớ đệm W3, hoặc là WP Bộ nhớ đệm nhanh nhất có thể giúp giải quyết vấn đề này.
Dưới đây là bốn bước giúp bạn xóa bộ nhớ cache và trình duyệt trang web của mình để 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.
- Làm mới trình duyệt của bạn nhiều lần trên máy tính để bàn và thiết bị di động của bạn.
- Kiểm tra trang web của bạn trên các thiết bị di động khác nhau.
- Xóa trang web của bạn bằng một plugin bộ nhớ đệm.
- Kiểm tra với công ty lưu trữ của bạn để xem liệu có hệ thống bộ nhớ đệm nào khác trên máy chủ của bạn cần được xóa hay không.
Điều hướng không thân thiện
Việc tạo menu điều hướng hoạt động tốt trên thiết bị di động có thể là một thách thức. Nếu điều hướng trang web của bạn có nhiều mục và menu con, việc ép mọi thứ trên một màn hình nhỏ hơn thậm chí còn khó khăn 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 đẹp trên thiết bị di động. Tuy nhiên, nếu bạn có nhiều mục 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 một 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 khối elements, vì vậy chúng xuất hiện theo chiều dọc.
- Sử dụng biểu tượng menu có thể được bật tắt để chiếm ít dung lượng hơn.
- Tạo menu điều hướng trên thiết bị 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.)
Phản ứng nhanh nhẹn Layout Dừng hoạt động đột ngột
Nếu trang web thân thiện với thiết bị di động của bạn đột nhiên ngừng hoạt động, có thể là do một plugin trên trang web của bạn.
Việc cài đặt một plugin mới hoặc một bản 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 và ảnh hưởng đến phản hồi của bạn layout.
Bắt đầu bằng cách tắt từng plugin một để xem liệu đó có phải là nguyên nhân hay không. Đừng hủy kích hoạt tất cả chúng cùng một lúc nếu không 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 vô tình hay cố ý sửa đổi bất kỳ mã nào, hãy khôi phục lại codebase ban đầu và xem liệu trang web đáp ứng của bạn có bắt đầu hoạt động trở lại hay không.
Khi kiểm tra trang web của bạn về khả năng đáp ứng trên thiết bị di động, bạn phải luôn kiểm tra trang web đó 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àn hình 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ã trong tệp tiêu đề HTML, nó có thể phá vỡ thiết kế đáp ứng. Một 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 khung nhìn (kích thước của khu vực 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.
Mất quá nhiều thời gian để tải hình ảnh
Tối ưu hóa hình ảnh và giảm kích thước tệp 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.
Phiên bản WordPress 4.4 trở lên tự động cung cấp phiên bản nhỏ nhất của hình ảnh trên máy chủ của bạn.
Nếu bạn đang chạy phiên bản mới nhất của WordPress, nhưng trang web của bạn vẫn tải không đủ nhanh, bạn có thể:
Nội dung quan trọng nhất không được hiển thị
Một số trang web được tải với rất nhiều nội dung không cần thiết để lấp đầy không gian 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 loại 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 không đượ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 phải cuộn nhiều.
Hầu hết thời gian, một phần tử trên trang web của bạn sẽ giống một cách trên máy tính và hoàn toàn khác trên thiết bị di động.
Ví dụ: một trang định giá có ba columns 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, columns đượ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 được mong đợi.
Đảm bảo bảng định giá của bạn ở vị trí hàng đầu trên trang web của bạn để bảng này 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ảng 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 những phần nội dung quan trọng nhất lên đầu 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, có thể họ sẽ không.
Quá nhiều thông tin
Các trang web có giao diện người dùng phức tạp elements chẳng hạ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.
Những elements chứa quá nhiều thông tin có thể che khuất màn hình di động và cản trở người dùng tìm kiế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 những du khách muốn truy cập vào những elements.
Để tránh vấn đề 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, loại bỏ bất kỳ elements 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ỏ
Bảng phức tạp với nhiều hàng và columns có thể là một vấn đề khi xem trên màn hình di động nhỏ. Cách khắc phục tốt nhất là sử dụng các bảng đáp ứng.
Một plugin như Bảng đáp ứng WP có thể giúp bạn dễ dàng thực hiện điều này.
Như với bảng giá ở trên, khi xem trên thiết bị di động, columns 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 mà không có lưới layout để tránh nhu cầu cuộn ngang.
- Lật mặt bàn để vừa với 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 đến phiên bản đầy đủ.
- Chuyển đổi bảng thành biểu đồ hình tròn.
Khi việc sử dụng thiết bị di động đang tăng lên theo cấp số nhân, bắt buộc 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 mất chức năng bằng cách làm theo các bước ở trên.
Bạn cũng phải luôn theo dõi hiệu suất trang web của mình và thực hiện các chỉnh sửa khi cần thiết để cải thiện hiệu suất và trải nghiệm người dùng.
