WordPress 响应式网页设计指南

已发表: 2022-09-29

前言
为什么响应式网页设计至关重要
- 非响应式网站设计的问题包括:
如何检查您网站的移动友好性
- 以下是检查您的网站是否适合移动设备的方法:
如何为 WordPress 实现响应式网页设计
- 选择一个响应主题
- 修改您现有的主题或设计
WordPress 中响应式设计的注意事项
- 检查您的插件
- 小心弹出窗口
- 注意菜单长度
主机质量如何影响移动友好性

奇怪的是,您网站一半以上的流量来自移动设备。 您是否在为 WordPress 使用响应式网页设计?

您在构建网站时可能犯的最大错误之一是仅针对桌面浏览器进行设计和构建。 我们懂了。 我们以前都为此感到内疚。 我们大多数人不会在手机上建立网站。 无论是在电视前的笔记本电脑上,还是在有两个巨大的并排显示器的办公室里,我们都根据自己喜欢的设置来构建它们。

但是为桌面构建并将移动设备视为事后的想法会疏远您的大多数网站访问者。 你不会经营一家快餐店,大多数顾客都在得来速餐厅里,然后把所有的时间都花在餐厅里等人上。 您一半以上的收入将来自得来速餐厅,因此您需要优化那里的运营,同时还要为就餐的顾客提供服务。

这篇文章展示了您的网站如何以及为什么必须适用于所有屏幕尺寸的人。 您还将学习为 WordPress 网站整合响应式网页设计的最佳方法。

为什么响应式网页设计至关重要

您知道使用小物件(例如试图捏开项链扣环或在芭比娃娃上穿鞋)的挫败感吗? 当您的网站没有响应时,这就是移动访问者的情况。

当您的网站不适应屏幕大小时,访问者更有可能遇到困难。 响应式设计是一种构建网站的方式,使设计和布局适应用户屏幕的大小。

非响应式网站设计的问题包括:

  • 按钮和网站导航太小而无法点击
  • 文字太小无法阅读
  • 图片、表格或其他内容对于屏幕来说太宽并且被截断

网站访问者可能曾一度忽略了这些挑战。 但是现在人们希望您的网站能够在他们的手机上完美运行。 如果您的网站不适合移动设备,访问者会离开并找到可以在他们的手机上运行的竞争对手网站。

客户并不是唯一会因为缺乏移动优化而惩罚您的人。 搜索引擎还定期检查网站的移动友好性。 如果您的网站不是为在小屏幕上工作而设计的,他们会以较低的搜索排名惩罚您的网站。

如何检查您网站的移动友好性

Google 非常重视移动设备的友好性,因此他们制作了一种特殊的工具,您可以使用它来测试您的网站。

以下是检查您的网站是否适合移动设备的方法:

  1. 转到https://search.google.com/test/mobile-friendly
  2. 输入您的网站域
  3. 点击测试网址
  4. 等待你的结果。 这可能需要几分钟。
  5. 查看您的报告。 如果该工具发现错误,它将列出您应该修复的内容以使您的网站适合移动设备。

如何为 WordPress 实现响应式网页设计

为您的 WordPress 网站使用响应式网页设计很简单。 您可以选择响应式主题或修改现有主题或设计以响应式。

选择响应式主题

如果您选择定期更新的现代主题,那么它很可能是响应式主题。 主题开发人员不会浪费时间创建非响应式主题。 他们知道大多数 WordPress 用户想要一个适用于不同屏幕尺寸的主题。

预览主题时,不要只在桌面上查看它们。 使用您的手机或模拟器查看它在移动设备上的外观。

修改现有主题或设计

您可以通过调整主题的 CSS 来修改非响应式主题或设计。 这个来自 W3Schools 的教程是学习如何编写自己的 CSS 来实现响应式网页设计的好地方。

如果您使用自定义 CSS,请阅读这篇文章,了解如何在更新主题时保留自定义 CSS

WordPress 中响应式设计的注意事项

无论您选择响应式主题还是自己编写代码,都要注意可能使您的网站在移动设备上不友好的事情。

检查你的插件

插件可以修改您网站的设计或布局。 当您使用新插件向您的站点添加功能时,请在小屏幕上对其进行测试。 不要让您的插件选项取消您的主题的响应能力。

小心弹出窗口

弹出窗口可能是移动设备上的一个问题。 任何在网上搜索食谱的人都可以证明他们造成的问题。 当您滚动浏览与食谱无关的漫无边际的故事时,弹出窗口会鼓励您订阅新闻通讯或下载食谱。 问题是弹出窗口比你的手机屏幕大,你看不到关闭选项。 不要成为那个人。 在较小的屏幕上禁用大型弹出窗口以保持移动友好性。

注意菜单长度

许多主题默认是响应式的,但这并不意味着所有桌面设计都可以轻松转换为移动响应式网站。 导航菜单会产生多个问题。 如果您的菜单非常长,有多个级别,那么在移动下拉菜单中使用可能会很麻烦。 考虑为移动设备使用精简版的导航。

主机质量如何影响移动友好性

除了响应式网页设计之外,您的网站速度在移动访问者对您网站的看法中也起着重要作用。 当未连接到 Wi-Fi 时,移动浏览器通常会处理慢得多的互联网连接。 一个加载缓慢、互联网连接速度慢的网站是灾难的根源。

您无法解决缓慢的互联网连接和较差的小区覆盖范围,但您可以确保您的网站尽可能快。 您的网站加载速度在很大程度上取决于您的虚拟主机的质量。 在 Pressable,我们的服务器是由 WordPress.com、WordPress VIP 和 WooCommerce 背后的同一位天才构建的。 我们对 WordPress 了如指掌,并为 WordPress 网站构建了最好、最快的服务器

立即注册并开始体验 Pressable 的不同之处。

网络性能

加载时间很重要! 你知道你的网站有多快吗?

学到更多