如何使您的博客更适合移动设备的提示

已发表: 2017-02-25

谷歌最近宣布,他们将使用移动友好算法更新来检查所有博客是否对移动友好,并将惩罚那些不适合移动设备的博客。 这让许多博主想知道,如何让他们的网站更适合移动设备,以及如何知道您的博客是否适合移动设备。 这就是为什么我们汇总了最重要的信息,说明为什么让您的博客更适合移动设备如此重要以及如何实际做到这一点。

如今,大部分博客访问者都在使用他们的移动设备而不是计算机来这样做。 由于谷歌已经发誓要提高适合在移动设备上查看的网站的排名,因此确保您的博客或网站对移动设备友好比以往任何时候都更加重要。

当然,这不仅仅是关于谷歌想要什么。 使您的博客对移动设备友好也符合您和您的读者的最大利益,因为由于有这么多人使用他们的移动设备上网,这将使他们更方便地阅读您的博客。 根据皮尤互联网项目的研究,超过三分之一的手机用户使用手机而不是台式机或笔记本电脑访问互联网。 因此,如果您希望在任何智能手机上轻松查看您的博客并增加博客的读者群,那么您需要考虑移动友好性。 它实际上比人们想象的更容易实现。

移动友好性测试

由于谷歌提出了这种移动友好算法,他们还让每个人都可以使用他们的移动友好测试工具来测试他们的博客和网站的这个指标。 只需在“输入要测试的网址”框中输入您博客的网址,点击“运行测试”,该工具就会告诉您您的博客是否适合移动设备。

如果您的网站适合移动设备,您可以放松一下,因为您无需执行任何操作。 但是,如果此 Google 工具确定您的博客在移动设备上不是最容易阅读的,那么您需要尽快在该部门进行一些改进。

对于那些使用内容管理软件 (CMS) 来运行博客的人,例如 WordPress、Joomla!、Drupal、Blogger、Tumblr、Google Sites、Bitrix 等,定制应该不是问题,因为这些软件系统中的大多数提供工具,这将自动使您的网站适合移动设备。 但是,如果您不使用任何 CMS 软件来制作您的网站,或者您确实使用了 CMS,但您的网站仍然不符合移动标准,那么这里有一些关于如何改进的提示您网站的移动友好性。

1.更新CMS到最新版本,使用手机主题

如果您使用 CMS,您可能需要做的就是更新您的软件或更改您用于博客的主题。 大多数 CMS 已经提供了使您的网站适合移动设备的所有工具,但您必须确保将您的 CMS 更新到最新版本。 例如,Joomla 提供移动支持,只有当它更新到最新版本的软件时。 但是,其他软件可能需要您更改网站的主题以使其对移动设备友好,因为一些较旧的主题在移动设备上看起来不太好,因此它们也不适合它们。 为此,请转到 CMS 的管理面板,在仪表板上找到主题选项卡,然后将博客的主题更改为响应式且适合移动设备的主题。 例如,WordPress 提供了数百个不同的主题,其中很大一部分是免费且响应迅速的。 可悲的是,如果您使用的是不提供移动支持的 CMS,则需要进行更多改进,并且只切换您的内容管理软件可能会更聪明。

2.使用副标题

对于方便移动用户的博客内容,一条经验法则是让他们吸收较小段落中的文本,而不是将您的文章放在一个长文本中。 因此,您的博客文章的文本应该结构良好,以便读者可以轻松地在文本中定位。 这可以通过使用副标题轻松完成。 当您使用副标题时,文本会自动分成许多子章节,读者在阅读文章时失去位置的可能性较小。 并且由于在智能手机上阅读内容时丢失位置对于许多移动设备用户来说是一个很常见的问题,因为移动滚动使阅读长而单调的文本变得困难,因此可以通过使用标题来解决它。

使用标题标签可以轻松插入标题。 最大和最重要的标题的标签是 <h1>。 这个标签最常用于文本的标题。 其他标题具有从 <h1> 到 <h6> 的自上而下的层次结构,这是一个几乎不引人注意的标题,但仍然可以帮助您拆分内容并使其更易于阅读。

3.为图片选择合适的尺寸

博主通常会根据正常的电脑屏幕尺寸来选择他们将在博客文章中使用的图片大小,但是当在较小的屏幕上查看博客文章时,比如手机屏幕,图片通常会全部结束大小相同。 这意味着移动设备用户看不到适当比例的图像。 所以让你的图片不仅尺寸更小,通常低于 1500 x 2500 像素的图片是最好的,而且尺寸也更小——建议低于 500 KB。 除了拥有适合移动设备的照片之外,缩小图像的文件大小还可以让用户更快地加载页面,因为较小的图片使用更少的数据来加载。

要使您的图片更小,请使用您手头的任何照片编辑器,因为您不需要 Photoshop 就可以做到这一点。 我们建议使用JPEGminiPixlr ,因为使用这些照片编辑器,您可以在不影响质量的情况下减小图像的大小。

4.使用响应式设计

博客或网站的响应式设计提供了从许多不同平台和设备以不同屏幕尺寸查看它的机会,因为它会自动使您的网站适应浏览器窗口的宽度。 并且,为了方便博客访问者阅读,在此适配期间,博客的设计通常会发生变化,例如图片缩小,栏目垂直排列,菜单也会发生变化。 但是,如果这些更改不是自己发生的,那么您可以使用一些工具自己进行更改。

例如, Foundation 3SkeletonBootstrap 。 这些框架会自动调整您的博客,因此在任何设备上都易于阅读。 使用这些比自己编写每个可能的组合要容易得多。 当然,您也可以通过使用 CSS3 的新相对长度单位来做到这一点,例如视口的宽度 (vw)、视口的高度 (vh)、视口的高度和宽度的最小值 (vmin) 以及视口的高度和宽度的最大值 (vmax)。 但是,编码需要技巧和时间,如果您不是经验丰富的程序员,我建议您选择前一种选择。

5.使用简单的设计

移动用户更喜欢简单的网站设计,因为大型而复杂的设计网站在移动设备上会变得很慢。 简单的设计还可以很容易地将读者的注意力集中在内容上,而不是用花哨的设计分散他们的注意力,因为从统计上讲,大多数移动用户的注意力持续时间都很短。

这意味着使您的网站布局简单易懂。 如果您使用的是服务提供商提供的主题,您只需将其更改为更简单的主题即可。 例如,WordPress 提供了许多优雅、简单的设计,它们不会压倒移动设备,但在桌面上仍然看起来不错。 但是,如果您的网站使用 HTML 制作,您可以下载简单的模板,这将使您的网站看起来很棒并且对移动设备友好。 例如, Envato Market提供许多不同的简单设计供您选择并在您的网站上使用。

6.使用标准字体

有趣的字体可以让博客看起来更有创意,但这些字体也会让博客的移动阅读者感到烦恼,因为并非所有移动设备都支持精美的桌面字体。 因此,要查看内容,移动设备用户将不得不将新字体下载到他们的手机上,这对许多人来说是不值得的麻烦。 最重要的是,即使它们预先安装了所有字体,由于尺寸较小,一些更具创意的字体可能难以在智能手机上阅读。

因此,请选择 Times New Roman、Verdana、Comic Sans MS、WildWest 或 Bedrock 等传统字体。 还要检查您决定使用的字体的可读性,以确保在智能手机的较小屏幕上查看文本后不会变得不可读。 一般的经验法则是,网站上的任何文本至少应为 14 像素,因为这样文本将足够大,即使您使用屏幕非常小的移动设备也可以轻松阅读。

7. 最小化每页内容

当页面加载到任何设备上时,无论是计算机、平板电脑还是智能手机,设备都会下载页面的所有内容。 如果您使用的是计算机,它通常不会造成任何问题,但大量数据可能会使移动设备不堪重负。 为避免这种情况,您应该尽量减少每个页面上的内容量,因为这将确保您的博客可以在每台移动设备上运行。

建议将页面上的内容减少到每页 5 MB 以下。 您可以在任何浏览器上轻松检查页面内容的大小。 只需使用在线提供的众多网页大小检查工具之一即可。 如果超过 5 MB,请手动减少页面的文本、图像和其他组件的大小和数量,或者使用博客摘录让访问者更容易查看您的博客。

8. 使用 YouTube 视频

如果您倾向于在博客上的文章中发布大量视频,则需要记住,它们在移动设备上的外观与在计算机上的外观大不相同。 此外,某些移动设备甚至不支持某些视频格式,因此为避免用户无法在您的网站上播放视频,请使用嵌入式 YouTube。 YouTube 为他们的每个视频提供的嵌入代码已经是响应式的,这意味着您将能够在几乎任何设备上观看视频,并且您不必再担心视频大小和格式。

您可以通过单击位于“订阅”按钮下方的“共享”按钮获取 YouTube 视频的嵌入代码,然后单击“嵌入”选项卡并将提供的代码复制到您的站点中。 而且您在帖子中拥有一个完美尺寸的视频,甚至无需转换或以其他方式调整它。

9.用可点击的按钮和菜单替换链接

很多时候,网站上的链接太小,移动用户无法用手指轻松准确地点击。 对于博客阅读者来说,这真的很烦人,当他们无法准确地点击内容时,他们想要查看。 这就是为什么您应该用至少 44 x 44 像素大小的按钮替换您网站上的所有链接。

如果您使用的是 CMS,例如 WordPress,您可以只使用插件来创建这些按钮。 转到您的 CMS 控制面板,找到合适的插件,安装它并按照说明正确使用它。 但是,如果您自己编写了网站代码,则可以使用其中一个免费的链接按钮生成器,这将节省您在自己编写按钮时使用的时间。

10. 继续测试

最后,当您完成所有改进并且您认为您的博客尽可能适合移动设备时,请使用 Google 测试工具或其他一些您可以在互联网上找到的移动设备友好性测试工具再次测试您的博客。 如果现在一切正常,并且该工具向您保证您的博客不会受到处罚,因为它不适合移动设备,那么您可以放松并通过创建出色的内容来继续发展您的网站。 但可以肯定的是,我建议您从多种不同的设备测试您的网站。

请朋友或家人通过手机和平板电脑查看您的博客。 从 Android 和 IOS 设备以及可能具有完全不同操作系统的设备测试您的站点。 并在这些设备上浏览您博客上的所有主页。 只有通过在现实生活中测试您博客的移动友好性,您才能确定您的网站实际上很容易从所有小工具中查看和阅读。

移动友好性不仅仅在于拥有一个漂亮的网站设计,还在于改善用户在您网站上的体验。 这就是为什么当您使您的博客对移动设备更友好时,更多的人会愿意回到您的网站,因为它很容易查看和理解。 由于使用手机作为主要上网设备的人数每年都会增加,因此确保您的网站对这些智能手机用户友好并将内容显示给它们以方便和易于阅读的方式。