2018-12-03

什么是响应式网页设计?



起初,网站是为一个屏幕大小,即桌面而设计和建造的,因为人们就是这样上网的。今天,随着不同类型设备的激增,屏幕大小差异很大,所以一个固定大小的网站已经不够用了。为了解决这一问题,并使用户体验良好的所有设备,现代网站现在创建,以适应屏幕大小可用。这被称为“响应性网页设计”。

当小牛视觉开始为客户建立网站时,我们所有的网站都被设计成一个固定的大小,这样它在桌面显示器上看起来就很棒了。当然,人们有不同的显示器大小,所以我们会使用最低的屏幕大小。回到从前,我们将使用800个像素,然后移动到960像素作为显示器改进。这意味着每个网站总是以同样的方式显示,更大的显示器将在每个大小的网站上有更多的空间。

随着移动电话的启用和人们开始使用他们的手机访问网站,这个桌面设计的网站必须调整大小,以适应小屏幕。这导致字体非常小,必须放大页面来读取内容和单击链接是有问题的。第一个解决方案是创建该网站的移动版本。因此,同样的内容,但显示的手机屏幕优化。移动网站倾向于托管在Mobilee.website.com或M.website.com如果用户开始访问桌面网站,可能会提示他们查看移动网站。这是可行的,但它意味着维护两个单独的代码库,从而增加了开发成本。

真正的解决方案是拥有一个足够聪明的网站,让它知道如何向用户显示设备。第一个选择是找出正在使用的设备,因此iPhone、平板电脑、启用网络的电视机、诺基亚(Nokia)或者三星(Samsung)手机都很难找到,但由于设备数量过多,很难保持最新的设备列表。有一些商业服务可以用来做这件事。然而,使用的设备最终并不重要,因为网站只是需要知道屏幕大小可用。因此,现在使用的方法是网站的样式表(用于控制字体、布局和颜色等样式)具有基于用户浏览器宽度的开关-通常分为3或4个范围。如此庞大的台式机,平板电脑和移动设备。

内容排序
随着屏幕大小的减少,可以在任何时候显示在屏幕上的内容的数量被减少,所以优先显示什么变得非常重要。然而,在桌面版本上,基于图像的大滑块可能是一种高效的移动营销设备,通过调用行动传递关键信息可能更好。

作为网站设计者,我们可以决定是显示还是隐藏页面上的所有元素,甚至是显示特定于移动的元素-特别是对于那些较小和更高压缩图像将帮助页面加载时间的图像来说非常有用。一个非常常见的事情,你会注意到,有时平板电脑版本的网站是,导航是隐藏起来,直到你需要它,只有当菜单按钮被按下显示。

用户交互是非常不同的。
移动设备或平板设备与桌面计算机之间的另一个重要考虑是我们与网站的交互方式。在许多网站上,鼠标悬停都会触发一个动作,比如导航下拉。在移动设备上,不存在悬停状态-这就是所谓的触摸设备。正因为如此,在设计高度互动性的网站时,触摸与鼠标的交互对网站的工作至关重要!

摘要
我们现在小牛视觉建立的几乎所有的网站都是响应性的,虽然不需要在较小的屏幕上工作,但它们确实使用户更容易使用。最终,响应性网站由于额外的设计和开发时间,使得网站的建设变得更加困难。