网站设计尺寸一般多少

没有最佳的屏幕尺寸来设计。网站应该能够在不同的浏览器和平台上以不同的屏幕分辨率快速转换。可达性。手机友好。首先为你的访问者设计。设计从360×640到1920×1080。

适用于1024×768至1920×1080的桌面显示器、适用于360×640至414×896的移动显示器和适用于601×962至1280×800的平板显示器的设计。检查统计数据，并针对目标受众的最常见分辨率进行优化。不要设计单一的显示器尺寸或屏幕分辨率。屏幕大小和浏览器窗口状态因访问者而异。设计应该具有响应性。使用可以转换为当前用户窗口大小的自适应或响应布局。监测网站管理员工具的移动设备友好性和可用性警告说，它应该仍然看起来很好，并且在所有尺寸下都工作良好。现在我们的建议是建立一个适应性/响应性网站。

针对特定屏幕尺寸优化页面布局的三个主要标准是:

网页的初始可见性:所有的关键信息都在屏幕的顶部可见吗，这样用户就可以不用滚动就能看到了？这是在显示多少项目和为每个项目显示多少细节之间的权衡。网页可读性:给定页面宽度，是否容易阅读每一列中的文本？审美:元素大小和屏幕大小合适的情况下，页面是什么样子的？所有元素都正确对齐了吗？是图片旁边的标题等？可用性指南还建议您考虑所有规模的所有三种情况。检查浏览器窗口的屏幕分辨率是否为360×640到1920×1080。

在整个分辨率范围内，您的网页在所有条件下都应该获得高分。

您的页面也应该在更大或更小的尺寸下工作，尽管这种极端情况不太重要。

虽然这样的用户当然应该能够访问你的网站，但有时为他们提供比设计更小的外观也是一种可以接受的妥协。

十大最常见的屏幕分辨率

在2020年的前六个月，对451，027名游客进行了游客分析:

响应式网站模板是个不错的选择。

响应式Web设计:在同一个URL上提供相同的HTML代码，不管用户的设备是什么，但是可以根据屏幕大小呈现不同的显示。建议使用响应式Web设计，因为这是最容易实现和维护的设计模式。

当今世界，许多人都在使用手持设备浏览网页，响应式网站设计已经成为解决屏幕尺寸挑战的一个非常可能的方案。

这种方法不使用固定宽度的网站，而是使用CSS样式表中的“媒体查询”来创建一个网站，该网站响应手持设备的不同视口和人们在大小上使用的更小的屏幕。

因此，无论人们使用什么设备来查看你的网站，你都可以为他们提供最完整的体验。

移动设备的首选网站

如果你想让竞争激烈的关键词获得高排名，你需要一个适合移动设备的网站。

网站对移动设备的友好程度如何影响网站上各种设备的排名效果。如果你为小企业创建网站，你会知道他们想要一个在自然搜索中表现良好的网站。

目前，从本质上来说，这意味着网站设计对移动设备的响应和友好，尤其是对于。

全球桌面屏幕分辨率统计，2019年5月-2020年5月

以下是目前记录的全球顶级屏幕分辨率列表，供参考:

366× 768–23.49% 1920× 1080–19.91% 1536× 864–8.65% 1440× 900–7.38% 1280× 720–4.89% 1600× 900–4.01% 1280

30×640–17.91% 375×667–7.61% 414×896–6.52% 360×780–5.56% 360×760–5.06% 414×736–3.74% 2000年全球平板电脑屏幕分辨率统计

78×1024–51.98% 1280×800–7.11% 800×1280–5.34% 601×962–4.47% 600×1024–2.85% 1024×1366–1.96%台式机和手机

手机–50.48%台式机–46.51%平板电脑–3.0%如何设计一个在每种浏览器和分辨率下看起来都一样的网站？

你不能。不可能把网站设计成每个浏览器、平台、屏幕分辨率都一样，所以请避免尝试。

你可以选择没有表格的平滑布局，它的宽度百分比可以扩展和收缩，以适应访问者浏览器的设置，或者你可以考虑研究可以达到同样效果的响应式设计方案。

搜索引擎更喜欢响应式设计，这对那些采用它的人来说是个好消息。移动技术正在兴起——因此，如果你想开发一个新的网站——你必须从一开始就考虑你的网站对移动设备的友好程度。

当实际编写代码时，我们的目标是让事情变得简单。我们从经验中知道的是，对你来说，确定你的受众和它使用的设备，建立一个整体上适合这个受众的网站是至关重要的。受众还包括搜索引擎。

您的手机网站是否被重定向到另一个网址和网站版本？

嗯，那不理想。其实从来没有这样过。

回到今天——有些人使用网站的纯文本版本为不支持他们网站元素的用户/浏览器生成内容——试图让他们的内容更易访问。

W3C甚至推荐过一次，我们认为如果其他方法都失败了:

根据访问者的目的向他们提供URL总是最理想的，如果你正在考虑创建一个“移动”版本的网站，那么在提供移动或智能手机内容时没有区别。

可能会在不久的将来对您的移动体验进行重大评估——因此，我们所有人都需要意识到，我们可能很快就会看到SERP的巨大变化。

作为一个“访问者”，由于搜索引擎典型的URL挑战，通常只提供一个URL更加重要——这是前段时间实现标准化链接元素之前的情况。

因此，最好总是提供一个URL。

给出了这方面的建议:“如果你有“智能手机”内容，可以用rel = canonical指向你的桌面版本。这有助于我们专注于桌面版的网络搜索。当用户使用智能手机访问此桌面版本时，您可以将他们重定向到移动版本。这种方法不管URL结构如何都有效，所以智能手机移动网站不需要使用子域/子目录。但是，更好的方法是使用相同的URL并显示适当版本的内容，而不进行重定向。

下面的提示也是用来检查你的网站是否准备好使用移动优先索引，但是本质上，如果你正在为你的网站使用响应式网页设计模板，这种改变的问题应该是最小的:

确保手机版网站也有重要的优质内容。这包括文本、图像和视频——以通常的可搜索和可索引的格式。结构化数据对于用户喜欢的索引和搜索功能很重要:它应该在网站的移动版本和桌面上。确保结构化数据中的URL已在移动页面上更新为移动版本。元数据应该存在于网站的两个版本中。它提供了关于索引和发布页面内容的提示。例如，确保网站上所有页面的两个版本的标题和元描述是相同的。不需要改变与单独的移动URL的链接。对于使用单独移动URL的网站，请在这些版本之间保留现有的link rel = canonical和link rel = alternate元素。请查看单独手机网址上的hreflang链接。当link rel = hreflang元素用于国际化时，移动URL和桌面URL是分开链接的。您的移动URL的hreflang应该指向其他移动URL上的其他语言/区域版本，并且类似地使用hreflang link元素将桌面与其他桌面URL链接起来。确保托管网站的服务器有足够的容量来处理可能增加的爬行速度。这不会影响那些使用响应式网页设计和动态服务的网站，只会影响那些移动版本位于不同主机上的网站，比如m.example.com。用户希望向下滚动页面。

在过去，网络用户通常不需要滚动，但这种情况多年来已经发生了变化。

所以设计的时候要考虑用户只滚动一个全屏还是两个屏幕能看到多少内容。超过五个屏幕的长度可能表示页面上的内容太多。当然，用户希望等待更短的时间来查看更全面的内容。

滚动的初始可见性显然取决于屏幕大小:屏幕越大，在屏幕顶部显示的内容越多，需要的滚动就越少。

响应式移动网站的改变会带来更多的流量吗？

不一定，但有可能。

很多与优化相关的事情——建立一个适合移动设备的网站，或多或少能保证你保持已经获得的访问量，但不一定能为你提供更多来自。

而它的用户又提高了质量标准，这是小企业要想在更有竞争力的SERP中竞争，需要克服的又一个障碍。

从长期来看，这种移动端的转化只是对你的用户是一件好事，但从短期来看，对小企业的转化率影响不大，因为通过移动设备获得的转化率通常低于桌面端。

表示这种针对移动设备的算法对SERP的影响更大，随着时间的推移，我们会发现更多的信息。

如何在你的网站上检查重要的移动可用性问题

网站管理员工具

您应该能够在网站管理员工具中跟踪移动设备错误，如果您的网站配置正确，这些错误会随着时间的推移而消失。