如何将移动优先,性能导向的WordPress主题整合在一起[第1部分]

如何将移动优先,性能导向的WordPress主题整合在一起[第1部分]

如何将移动优先,性能导向的WordPress主题整合在一起[第1部分]
СОДЕРЖАНИЕ
02 июня 2020

从本质上讲,将WordPress主题组合在一起是一项非常简单的任务。 WordPress提供了一个真正友好的环境,并清楚说明了沿目的使用哪些PHP函数.


然而。即使很简单, 这远非易事, 特别是如果您希望主题针对移动设备进行优化.

如果要最终获得高质量的产品,可以快速加载,以可预测的方式运行,并且(最重要的是)用户友好并且使用不同设备的用户可以访问,那么您应该解决一系列独特的问题和屏幕尺寸.

这份由两部分组成的指南将分十步引导您完成该过程,列出构建移动优先,性能导向的WordPress主题时要注意的最重要的事情。.

对于第2部分,请参见此处:如何将移动优先,性能导向的WordPress主题整合在一起[第2部分]

1.内容至上

移动设备上实际上没有太多空间来展示很多设计细节或仅使用外观漂亮的元素.

即使现代设备能够显示高达1136×640像素的图形(iPhone 5s),也不要忘记屏幕仍然只有四英寸。这不是很多与之合作的房地产.

值得做的事情:

  • 摆脱对内容表示而言并非必不可少的所有额外设计元素,
  • 确保主要内容块在设计画布上尽可能高(由于移动设备的屏幕尺寸不同,我们无法预测 "折" 会来的),
  • 着重于排版并使其内容可读(增加字体大小,但请注意不要使一行文字太短从而不可读),
  • 引入良好的对比度-文字与背景(这对于移动设备至关重要,尤其是当有人站在阳光充足的地方尝试阅读页面时).

2.优化图像

对于移动设备而言,图像优化比其他任何情况都更为重要。事实是,当有人尝试通过移动设备访问站点时,他们可能处于缓慢的3G连接状态。因此,无论这个事实如何,您都需要确保主题可以使图像相对快速地加载.

您可以执行的特定操作:

  • 考虑集成延迟加载功能。延迟加载本身就很棒(仅当访客滚动到图像时才加载图像)。但是问题在于最终用户可能最终会在最终站点上自己安装一些延迟加载插件。这可能会干扰您已经集成到主题中的任何内容。但是,如果您想冒险,最好通过jQuery及其解决方案等解决方案来实现该功能。 延迟加载插件. WordPress插件也倾向于使用该库,因此,当有两个不同的脚本都试图达到相同的结果时,您将发生错误的可能性降到最低。另外,还可以停用主题设置中的延迟加载.
  • 优化图像的大小和质量。图像通常占一般站点带宽消耗的大部分,因此,作为主题创建者,您需要确保图像尽可能优化。您可以做两件事来实现此目的:(1)确保图像的尺寸不超过所需的尺寸(请参阅#3)–此处多余的像素会很快增加,(2)优化通过像这样的工具获取所有图像 擎天柱 要么 小小PNG 在向公众发布主题之前.
  • 尽可能使用图标字体。在任何设计中都包含图标的传统是,仅在Photoshop中构建它们,然后将所有内容转换为PNG或GIF并将其推出。但是,如今,它并不是最优化的解决方案。使用诸如 字体很棒, 我们可以使用数百种精美设计的字体丰富我们的设计,同时保持非常出色的性能.

3.使设计成为视网膜就绪(针对高DPI屏幕进行了优化)

这些天几乎所有新设备都配备了高DPI显示器。这些屏幕使所有内容看起来都非常清晰,但前提是所讨论的内容已针对高DPI观看进行了优化。否则,用户将看到很多像素点,这将使体验整体上没有吸引力.

您可以采用两种主要的快捷方式来进行高DPI优化:

  • 使用图片字体–如上所述;图像字体会自动缩放并在每台设备上看起来都很棒.
  • 创建所有其他图像的替代版本(大小是其两倍),并在使用高DPI设备查看内容时与CSS交换它们. 这是一个指南 关于如何做到这一点.

最后,您还应该注意主题中的图标图标(并且可能还允许用户对其进行更改,但这是另一回事).

回想过去,您只需要一张16×16 PNG图像,然后将其转换为ICO,一切就绪。现在要复杂得多。例如,新的Apple设备将尝试搜索较大的图标,然后尝试将其用作书签.

iOS希望找到的网站图标大小为:76×76、120×120、152×152。这是一个 Apple.com上的完整列表.

您可以手动创建这些图标,也可以使用类似的工具 真正的图标生成器. 它只需要一个启动器映像,它将用作生成所有其他版本的基础。最重要的是,您还获得了将图标嵌入主题的正确HTML代码.

4.优化攻丝

我们必须记住,那里的大多数移动设备都支持触摸界面或完全基于触摸屏。这意味着我们需要将每个可轻敲的元素设置为足够大,以便用户可以轻松访问它.

例如,文本链接的触摸效果不是很理想,因为文本链接需要用户集中精力才能准确点击它们。主题界面的按钮是一个更好的设计选择。本身相对较大且触摸区域较大的按钮.

要记住的另一件事是,用户大部分用拇指轻敲,因此最好将主 "呼吁采取行动" 易于访问的拇指区域上的按钮。例如,这是 它如何在iPhone上播放.

5,让主题具有响应能力并不重要

在本指南的第一部分中,以人们在设计手机主题时常犯的最常见错误结束。错误是将响应式设计视为最终的最终游戏.

当然,让您的主题具有响应能力是一个巨大的优势,尤其是在处理非标准设备和屏幕尺寸时,但远非魔术般的解决方案。仅仅因为设计具有响应能力,并不意味着它将在移动设备上表现良好。例如,它不能解决任何图像优化问题,也不能解决按钮难以准确点击的事实,等等。.

因此,是的,请尽一切努力使主题具有响应性,但是同时,请注意本指南中要涉及的其他元素,以实现最大程度的移动友好型设计.

我邀请您收看第二部分,以获取列表的其余部分(我们将探讨UX设计,导航,使用JS优化加载时间,利用一些鲜为人知的WordPress功能,和更多)。同时, 为手机设计时最大的挑战是什么?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector