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 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 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ác bản sửa lỗi cho chúng.

• Các^(Are) thay đổi đã thực hiện không hiển thị trên thiết bị di động^(Mobile)
• Điều hướng không thân thiện
• Bố cục đáp ứng^{(Responsive Layout)} ngừ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 được hiển thị
• 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ị^{(Mobile Friendly Website Updates Not Showing Up)}

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 trên điện thoại 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 như WP Super Cache , W3 Total Cache hoặc WP Fastest Cache 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 của 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 máy tính để bàn và thiết bị di động của bạ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 một plugin bộ nhớ đệm.
4. 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^{(Unfriendly Navigation)}

Có thể là một thách thức để tạo một menu điều hướng hoạt động tốt trên 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ì 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^(Below) 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 các phần tử khối, để 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^{( use a plugin)} .)

Bố cục đáp ứng ngừng hoạt động đột ngột^{(Responsive Layout Stops Working Suddenly)}

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 plugin khác và ảnh hưởng đến bố cục đáp ứng của bạn.

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ã^(Code) 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 khả năng đáp ứng trên thiết bị di động của trang web, bạn phải luôn kiểm tra trang web đó trên thiết bị di động. 

Đôi khi nó 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. Thiếu một dòng mã 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 đề:

<meta name=”viewport” content=”width=device-width”>

Đô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^{(Images Are Taking Too Long to Load)}

Tối ưu hóa hình ảnh và giảm kích thước tệp hình ảnh^{(reducing image file size)} 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^(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 WordPress mới nhất , nhưng trang web của bạn vẫn tải không đủ nhanh, bạn có thể:

• Cài đặt một plugin như Smush Image Optimization, Compression và Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} để 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 , Compress JPEG hoặc Online Image Optimizer .

Nội dung quan trọng nhất không được hiển thị^{(Most Important Content Isn’t Obvious)}

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 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 chiều 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 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 được mong đợi.

Đảm^(Make) bảo bảng định giá của bạn ở vị trí trên cùng 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 thiết bị di động sẽ phải cuộn xuống để xem và có thể không.

Để có trải nghiệm người dùng trên thiết bị di động tối ưu nhất, hãy đưa 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^{(Too Much Information)}

Các trang web có các yếu tố giao diện người dùng phức tạp 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 yếu tố này 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à một giải pháp lý tưởng cho những du khách muốn tiếp cận với những yếu tố này.

Để 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, hãy loại bỏ bất kỳ yếu tố không cần thiết nào 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ỏ^{(Data For Small Screens)}

Các bảng phức tạp với nhiều hàng và cột 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ư WP Responsive Table có thể giúp bạn dễ dàng thực hiện điều này.

Cũng như bảng giá ở trên, khi 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 mà không có bố cục lưới để 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, điều bắt buộc là các trang web doanh nghiệp 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^(Enhance) trải nghiệm người dùng mà không phải hy sinh 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.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking dеsktoр website and a mobile site that doesn’t work correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

<meta name=”viewport” content=”width=device-width”>

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• Cách thiết lập trang web giống Twitter của riêng bạn bằng chủ đề P2 của WordPress

• 10 Plugin WordPress cần thiết cho một trang web doanh nghiệp nhỏ

• Cách tạo WordPress Site Secure

• Đánh giá sách: Xây dựng trang web của riêng bạn: Hướng dẫn truyện tranh về HTML, CSS và Wordpress

• Wix Vs WordPress: Cái nào tốt nhất để tạo trang web của bạn?

• Cách lưu GIF động vào thiết bị di động và máy tính

• 10 mẹo và thủ thuật Gboard để cải thiện tính năng gõ trên thiết bị di động

• Cách dừng / biến Off Reddit Notifications trên Mobile and Desktop

• Danh sách bộ xử lý máy tính bảng và thiết bị di động

• Tạo một trang web cá nhân một cách nhanh chóng bằng cách sử dụng Google Sites

• 8 chủ đề Premium WordPress miễn phí để cài đặt

• Protect và WordPress website an toàn từ hacker

• 7 Mẹo tối ưu hóa kỹ thuật SEO cho bất kỳ trang web nào

• Cách theo dõi các thay đổi trong Word (Trực tuyến, Di động và Máy tính để bàn)

• Lưu trữ trang web giá rẻ và đáng tin cậy cho các doanh nghiệp nhỏ

• Mẹo để mua tân trang Mobile Phones và Laptops

• Cách giám sát khi trang web được cập nhật

• Sử dụng chức năng “Chèn dữ liệu từ ảnh” mới của Excel Mobile

• Change Quick Chat Voice trên PUBG Mobile

• Cách xóa Queue bằng Spotify trên Desktop & Mobile