DIY:测试你的手机网站!

打开你的手机浏览器,进入你的网站。看看它是什么样子。你没料到会有这样的建议,对吧?我知道有些企业主从来没有这样做过。他们花了大量的钱来创建一个移动网站,但是在他们的设计师展示了设计之后却没有去看它。就像耐克说的:做就好。看看你少了什么。也感受一下表演吧。

你需要检查的东西在你的手机网站:

最高任务。确保访问者能在瞬间找到你的主页。询问那些可以使用你网站的人。从朋友和家人开始。

地址和电话号码。例如,人们使用商店的手机网站来设置导航。如果你想让顾客找到你的商店,列出你的地址。如果你想让人们给你打电话,这是你手机网站上的主要号召。可点击的。

一个工作菜单和一个搜索选项。添加一个汉堡菜单很好,因为它节省了空间,但请确保它可以折叠起来。添加一个搜索选项作为菜单的备份。

手机设计和用户体验。确保你的手机网站不只是你的整个网站挤在小屏幕没有适当的响应缩放。一定要确保你的手机站点提供与桌面站点相同的内容,也就是手机站点相同的内容。

按钮和链接。确保它们很容易被发现,而且足够大,可以点击。

可读性。从屏幕上阅读是困难的,确保你的排版是有序的。

的性能。网站速度如何?那么页面体验呢?

请在我们的手机用户体验文章中找到更多信息。

注意,不同的手机展示你的网站的方式是不同的。正因为如此,我们建议用其他方式检查手机版网站,以发现手机网站的缺陷。

谷歌的页面测试

手机友好性是一个排名因素。Mobile-first就是游戏。谷歌创建了一个测试工具,可以很容易地查看谷歌如何查看您的网站。必应也有一个类似的移动友好测试。

测试结果为一个网站没有优化的移动

谷歌移动友好测试显示移动页面的呈现。如果这个页面看起来像上面的那个,我猜还有工作要做。即使谷歌告诉你你的网站是移动友好的。记住这是自动支票。请手动检查本文中的所有内容,以确保您没有遗漏任何内容。有时候常识比谷歌告诉你的更有价值

Web开发人员工具栏

您还可以直接从浏览器测试您的移动站点。在你的Chrome浏览器中,只需访问你自己的网站,然后右键单击浏览器屏幕上的某个地方。点击“检查”。您还可以从菜单栏Tools > Developer Tools中打开它。然后,点击检查器菜单栏的第二个图标:

web浏览器中的各种开发工具都附带了一个有用的响应性设计检查器

这将打开网站,就像上面的截图。它可以让你看到你的网站是否适合多种屏幕尺寸。Firefox也有类似的特性,称为响应式设计模式。

例如,当你在这个下拉菜单中选择任何一部iPhone时,它会显示整个网站缩小到适合屏幕,你就知道你的手机网站对移动设备不友好。

性能测试

移动友好不仅仅是检查你的移动站点在浏览器中的外观。性能扮演着重要的角色。所以,如果你想让你的手机站点成功,你需要把性能放在首位。同样,有很多工具可以帮助您洞察站点的性能。其中一个工具是谷歌的Web.dev/measure。只需添加您的URL并点击运行审计。

如果你得了这样的分数,你就有麻烦了

该工具将显示一些指标和提高这些分数的方法。看看这些建议,看看你能做些什么来改进你的手机网站。另外,也要留意像PageSpeed Insights这样的工具,它能让你更好地了解手机站点的站点速度。

这些来自Web.de/measure的SEO增强都与不适合移动设备的页面呈现有关

测试你的手机站点:结论

如果您想检查您的移动站点是否工作,请使用浏览器中的Inspect工具和谷歌的移动友好测试。检查一下你的网站是否适合移动设备,比如最重要的任务和按钮的大小。如果您想获得更多关于如何分解设计以适应多个屏幕的指导,请阅读我们开发博客上的这篇文章。

滚动至顶部