没有什么比拥有一个漂亮的桌面网站和一个无法正常运行的移动网站更糟糕的了。
大多数设计修复都很简单，但如果您希望访问者在移动设备上浏览时留在您的网站上，则需要注意。
本文将重点介绍七个移动友好型网站问题及其修复。
- 所做的更改未(Are)显示在移动设备上(Mobile)
- 不友好的导航
- 响应式布局(Responsive Layout)突然停止工作
- 图片加载时间过长
- 最重要的内容并不明显
- 过多的信息
- 小屏幕数据
移动友好的网站更新未显示(Mobile Friendly Website Updates Not Showing Up)
您刚刚花了很多时间更新您的网站。它们在您的桌面上看起来很棒，但不会出现在您的移动设备上。
最常见的原因之一是缓存。您的移动浏览器可能会显示您之前下载的旧版本网站。另一个原因可能是您的网站保留了旧版本的页面并且没有显示您的更改。
如果这是问题所在，您将需要清除缓存以下载修订版。WP Super Cache、W3 Total Cache或WP Fastest Cache等缓存插件可以帮助解决这个问题。
以下是帮助您刷新网站缓存和浏览器以使新版本显示在您的移动友好网站上的四个步骤。
- 在您的桌面和移动设备上多次刷新浏览器。
- 在不同的移动设备上测试您的网站。
- 使用缓存插件清除您的网站。
- 请咨询您的托管公司，看看您的服务器上是否还有其他缓存系统需要清除。
不友好的导航(Unfriendly Navigation)
创建一个在移动设备上运行良好的导航菜单可能具有挑战性。如果您的网站导航有许多项目和子菜单，那么将所有内容都压缩在较小的屏幕上会更加棘手。
例如，如果您的网站导航中只有三个或四个项目，那么在移动设备上应该看起来不错。但是，如果您有更多的项目和子菜单，它们会堆叠在一起，看起来很拥挤。
以下(Below)是为移动友好型网站解决此问题的几种方法：
- 将您的导航变成移动设备的下拉菜单。
- 将导航菜单显示为块元素，以便它们垂直显示。
- 使用可以切换的菜单图标以占用更少的空间。
- 使用 jQuery 创建移动导航菜单。
- 使用汉堡(Hamburger)菜单（许多主题都包含此选项，或者您可以使用插件( use a plugin)。）
响应式布局突然停止工作(Responsive Layout Stops Working Suddenly)
如果您的移动友好网站突然停止工作，可能是由于您网站上的插件。
安装新插件或更新现有插件可能会导致与其他插件发生冲突，从而影响您的响应式布局。
首先一次停用每个插件，看看是否是原因。不要一次全部停用它们，否则您将不知道哪个插件可能是罪魁祸首。
代码(Code)更改是另一个可能的原因。如果您无意或有意修改了任何代码，请恢复原始代码库并查看您的响应式网站是否重新开始工作。
在检查您的网站的移动响应能力时，您应该始终在移动设备上对其进行测试。
有时，在桌面上调整浏览器窗口大小时它似乎可以工作，但在移动设备上无法正确显示。
如果HTML(HTML)头文件中缺少一行代码，则可能会破坏响应式设计。缺少的这一行代码将导致您的移动设备假定您正在查看的网站是一个完整大小的网站。
呈现的站点将是视口的大小（用户可见的网页区域的大小）。
要修复您的移动友好网站，请将以下代码行添加到标题部分：
<meta name=”viewport” content=”width=device-width”>
有时当更新主题时，此代码可能会消失。
图片加载时间过长(Images Are Taking Too Long to Load)
优化图像和减小图像文件大小(reducing image file size)是有意义的。未优化的大图像会减慢网页的加载速度。这可能会让移动用户感到沮丧。
WordPress 4.4 及更高版本会自动在您的服务器上提供最小版本的图像。
如果您已经在运行最新版本的WordPress，但您的网站加载速度仍然不够快，您可以：
最重要的内容并不明显(Most Important Content Isn’t Obvious)
有些网站在桌面上打开时会加载很多不必要的内容来填补空白。
在没有意识到移动用户的情况下开发的网站通常属于这一类。这些站点需要更多的时间和带宽来加载。
如果页面的设计不适合移动设备，那么如果没有大量滚动，部分内容可能不会出现在移动设备上。
大多数情况下，网页上的元素在计算机上看起来是一种方式，而在移动设备上则完全不同。
例如，包含三列的定价页面将在计算机上并排显示它们。
但是，在移动设备上，由于屏幕尺寸较小，这些列彼此堆叠在一起。这种行为是意料之中的。
确保(Make)您的定价表位于网页的顶部位置，以便在移动设备上查看时首先出现。如果您的表格上有很多文本，移动用户将不得不向下滚动才能看到它，并且可能不会。
为了获得最佳的移动用户体验，请将最关键的内容放在页面顶部。如果用户需要大量滚动才能查看您的内容，他们可能不会。
过多的信息(Too Much Information)
具有复杂用户界面元素（如表格、多步骤表单和高级搜索功能）的网站可能会产生较差的移动用户体验。
这些元素包含太多信息，可能会挤满移动屏幕并干扰用户查找所需信息。
一种方法是从移动用户那里删除或隐藏一些内容。但是，对于想要访问这些元素的访问者来说，这并不是一个理想的解决方案。
为避免此问题，请尽可能优化您的移动友好网站。此外，删除任何不必要的元素，同时专注于您网站的核心结构。
小屏幕数据(Data For Small Screens)
当在小型移动屏幕上查看时，具有许多行和列的复杂表格可能会成为问题。最好的解决方法是使用响应式表格。
诸如WP Responsive Table之类的插件可以使这很容易实现。
与上面的定价表一样，在移动设备上查看时，列将被堆叠以适应较小的屏幕。
在移动设备上显示数据的其他方式包括：
- 创建一个没有网格布局的较小表格以避免需要水平滚动。
- 翻转桌子以更好地适应较小的屏幕。
- 用链接到完整版本的较小的表替换较大的表。
- 将表格转换为饼图。
随着移动设备的使用呈指数增长，企业网站必须使用适合移动设备的版本进行优化。按照上述步骤在不牺牲功能的情况下增强用户体验。(Enhance)
您还应该始终监控您网站的性能，并在必要时进行调整以提高性能和用户体验。
7 WordPress Tips For a Mobile Friendly Website
Τhere iѕ nothing worse than havіng a great-looking desktop 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.
- Refresh your browser several times on your desktop and mobile device.
- Test your website on different mobile devices.
- Clear your site with a caching plugin.
- 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:
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.
