早在 2000 年代初期,800 X 600 和 1024 X 768 的显示分辨率分别占网站访问者的 56% 和 25%。从网页设计的角度来看,几乎不需要容纳大量的分辨率,因为几乎每个人都属于两个类别之一或介于两者之间。
快进到今天,显示分辨率和屏幕尺寸无处不在。您可能正在办公室的 30 英寸显示器上查看网站,或者在晚餐时使用 4 英寸 iPhone。像素分辨率同样全面,移动设备的尺寸最低为 340×240,在视网膜级别的 iPad 上最高可达 1536×2048。
好像这还不够具有挑战性,您还必须考虑设备的纵横比。如果您想到台式显示器,它们通常比它们高。另一方面,手机(除非您旋转手机)的屏幕高度大于宽度。当然还有平板电脑,它可以垂直放置用于阅读,水平放置用于观看视频。
作为设计师和企业主,问题就变成了:“我们如何应对这些显示挑战,并继续为我们的网站访问者提供最佳浏览体验,无论使用何种设备?
一年前,我建议 自适应网站 是最好的选择。我这样做的原因有两个:
更快的加载体验
更好的功能集成。
今天,对于我们的大多数客户来说,我们认为响应式设计是最佳选择。为什么?除了不太可能很快停止的屏幕尺寸的激增之外,响应式设计还提供了在很大程度上赶上了自适应设计的灵活性和功能。
顾名思义,响应式设计响应正在查看网站的设备,并显示为该设备适当格式化的页面。当在手机上查看时,它通常还会在页面顶部包含一个“点击通话”链接。这是您现在正在查看的网站主页的屏幕截图,就像在我的 30 英寸显示器上看到的那样:
您可以看到在网站顶部水平显示的完整菜单栏、全尺寸图像,并且一切看起来都应有尽有。
现在,这是我的 iPhone 上 没有 响应式设计的屏幕截图:
您可以看到查看的难度,更不用说导航了。
现在这是我的 iPhone 上使用 响应式设计的屏幕截图:
您可以看到图形元素变得更小,并且格式已经改变以迎合手机的纵横比(高而不是宽)。原本水平展开的信息框现在叠放在一起,更容易阅读。此外,还会出现一个新的菜单按钮,就像单击呼叫按钮一样。单击菜单按钮时,会出现一个易于导航的菜单,如下所示:
您是否应该担心您的网站在移动设备上的外观?一句话,是的。
根据越来越多的关于互联网消费趋势的报告,消费者在互联网上花费的时间有一半以上是在手机和平板电脑等移动设备上。甚至 B2B 流量也变得越来越移动,全天绑在办公桌前的人越来越少。因此,正确实施的 响应式网站设计可以提高转化率。
最后,主要通过桌面访问互联网的人数创历史新低:约 11%。鉴于未来移动浏览(和购买)增加的趋势,现在是时候采取行动以保持竞争优势。正确实施的响应式设计将确保您的网站访问者无论使用何种设备都能够查看和参与您的网站。