响应式网页设计的下一章

响应式网页设计一直是过去几年的热门话题。那么为何不?灵活网格,灵活的图像和媒体查询的成分是一个强大的方法,可以帮助我们为不同大小的屏幕提供网站服务。

但我们不应该止步于此。要真实响应,我们必须满足我们的用户。真正响应的网站不仅可以调整设备的屏幕尺寸,还可以调整其更广泛的功能和设置。我们的网站应该处理任何规模的屏幕。但他们也应该处理多个屏幕,或者根本不处理任何屏幕。他们需要处理更多。黑白显示?来吧。没音频?没问题。没有JavaScript,CSS,甚至图像支持?当然可以。移动连接速度慢?提供网站的轻量级版本。不寻常的输入设备?这对我们来说都是一样的。

我们怎么去那里?我看到了五个基本构建块:语义,可访问性,焦点,媒体查询和效率。

1.语义学

我们在设计网站时考虑到了用户,但这些用户的体验取决于他们的浏览器所理解的内容。为了确保具有不可预测功能的设备能够理解我们的文档和应用程序,我们需要为它们提供强大的语义基础。语义HTML是其中的支柱,即使是最基本的浏览器也能理解它。 HTML5为具有类似元素的最新浏览器添加了额外的语义含义文章时间。最初为可访问性而开发的ARIA角色和地标为设备增加了额外的背景和含义。此结构有助于确保设备了解并正确呈现Web。

但是,语义还有另一个方面。我们需要仔细检查我们的内容管理系统,并评估它们是否满足其目的。将内容视为无差别的文本和媒体块将无法正常工作,因为我们将其提供给更广泛的设备和设备功能。相反,我们应该将语义构建到内容创建过程中,从新闻和NPR的“创建一次,发布无处不在”模型中借鉴思想。除非我们用来发布内容的系统强化语义结构,否则它将无法持续。只有在网站生命周期内保留语义才能使响应成功。

2.可访问性

可访问性通常被视为要检查的盒子,或仅仅因为它是“正确的事情”而引起注意的事物。但可访问性技术使网站对每个人都更有用,并且更适合各种设备。

为聋人用户创建的指南使网站能够更好地为那些已经静音设备的用户提供服务。在考虑色盲的情况下开发的对比度设置可确保在具有有限或无色彩功能的设备上可读取网站。通过屏幕阅读器使网站为盲人用户工作的技术也使它们可用,因为语音控制和音频输出进入主流。以简明的语言呈现内容并为清晰而设计对每个人都有好处。

ARIA实时区域让我们可以控制浏览器如何以及何时通知用户对页面部分所做的更改,这里有一个特殊的角色。实时区域对屏幕阅读器和其他仅音频环境有明显的影响,但它们对于在像Google Glass这样的HUD驱动设备以及具有更多和更小屏幕的设备上提供良好的用户体验非常重要。交互式,数据驱动的实时网站越来越普遍;那些没有为一系列设备做准备的人将会落后于曲线。

3.专注

用户从整体上考虑网站,但浏览器一次只关注一个元素。精心管理重点对于体验至关重要。在具有小屏幕的设备上,它确保在用户执行操作后显示正确的屏幕部分。在纯音频设备或具有非鼠标,非触摸输入的设备上,它可能是唯一可以使体验可用的东西。

4.媒体查询

媒体查询已经是一颗冉冉升起的新星,但是现在我们几乎没有表面上看。除了屏幕和视口大小之外,媒体查询还可以告诉我们设备的宽高比,颜色功能,方向(纵向与横向),是逐行扫描还是隔行扫描等。充分利用这些功能可以帮助控制各种设备上的体验,而不仅仅是移动设备,平板电脑和桌面设备。

5.效率

所有这些技术都带来诱惑,为用户提供更多代码和更大的资产,让他们的浏览器弄明白。但是,为缓慢或计量连接的用户提供资产和代码的每种可能组合都不起作用。用户不必下载您网站的每一部分,只是为了获得他们需要的网站。

完全实践响应式设计还意味着采用渐进式增强技术来控制用户下载的代码和资产。如果JavaScript库或代码是特定于功能的,则仅在测试设备的功能后加载它们。不是将所有媒体查询CSS加载到一个大文件中,而是使用媒体查询仅加载必要的CSS。我们还应该致力于技术,以帮助我们提供响应用户连接及其设备的图像和代码。

这将很困难。整个团队 - 内容创建者,设计者,前端和服务器端开发人员 - 需要协作和合作。但最终目标(真正响应式网页设计)将意味着我们的网站将适用于所有用户,无论他们访问的位置,时间或设备。

有关进一步使用响应式网页设计的更多信息,请查看Paul Robert Lloyd关于如何在一周内建立响应式网站的教程的最后一部分



翻译字数超限