构建自适应网站的策略

如今的网站趋向于在各种设备上都可以使用,随着针对 Windows 8 而优化的所有新型平板电脑和个人电脑投放市场,更会加快这一趋势。能够很好地适应不同显示特征和用户输入方法的网站可以为最广泛的受众提供最佳体验。此处我们将探查使用 Internet Explorer 中功能的策略,帮助你构建外观漂亮的网站和 Web 应用程序,它们能够跨各种 Windows 8 设备外形尺寸和用户输入方法无缝运行。

自适应设计的概述

你可能已了解有关响应网页设计(也称为自适应设计)的知识。实际上,响应网页设计在实践中就是将网站的功能与用户用来查看网站的设备的功能尽可能紧密地匹配起来—就是使你的网站“适应”用户。响应设计采用诸如级联样式表 (CSS) 媒体查询、基于流体网格的布局和灵活的可调整图像大小的技术来实现丰富而又流畅的设计,这种设计跨多种设备和浏览器均可以正常运行。不妨对比一下响应设计与针对特定屏幕大小和用户代理而构建目标站点的体验,后者可导致设计难看又混乱,令用户感到沮丧,或者更糟 — 网站无法使用。

自从 Ethan Marcotte 于 2010 年制定设计规范以来,术语“响应设计”在 Web 社区中已扩大了其含义,包括提供优美、稳重的网站体验的任何方法,无论用户屏幕尺寸、连接速度、触摸功能和其他设备特征如何。

如果要查找常用的响应网页设计资源,有许多优秀的文章和具有启发性的演示可供参考,例如下面提供的资源:

本主题的其余部分介绍支持在 IE 中构建响应式自适应网站的新功能和使 IE 和 Windows 8 设备适用于大型自适应网站设计规划的策略。

构建自适应网站的两个注意事项:显示和输入

网站的用户体验不仅包括访问者查看的内容,而且包括他们执行的操作。他们与网站的交互方式在总体可用性上与布局本身一样重要。用户最终看到的内容和与网站交互的方式在很大程度上取决于他们用来浏览的特定设备的显示特征和输入功能。

为每个用户受众设计和测试想像中的平台是不可能的,并且许多网站所有者已选择创建网站的若干版本,这些版本围绕市场上一些具体的“Web 平台 + 设备”组合而创建。 面对如此繁多的可供 Web 使用的计算设备,作为 Web 开发人员,你可以做哪些准备来迎接新的 Windows 8 设备生态系统呢?答案在很大程度上取决于你的网站的内容策略、开发资源和总体目标。但是,如果你的总体目标是为最广泛的受众提供最佳体验,就很有必要考虑用户受众用来浏览和使用 Web 内容的设备的各种不同显示特征和用户输入功能。尽管布局和用户输入处理是整个 Windows 8 交互设计方程中的关联因子,但是触摸支持不一定暗指某些显示特征,反之亦然。例如,请考虑以下不同的体验:

  • 未将触摸支持升级到 Windows 8 的宽屏便携式计算机可以采用新的已调整为最小宽度的 Windows UI 运行 Internet Explorer,其显示的视区宽度类似于典型的移动设备
  • 不带触摸支持升级到 Windows 8 的上网本的屏幕大小与流行的触摸平板电脑设备类似
  • 可以单独使用带有 24 英寸触摸屏的 Windows 8 一体机运行 Windows 8 Windows 应用商店应用(如 Internet Explorer 10),且不需要插入鼠标和键盘

同样,尽管 Windows 8 上的 IE 提供两种风格—采用 Windows UI 的 Internet Explorer 和适用于桌面版的 Internet Explorer—但使用显示特征和触摸支持都不能可靠地指示用户正在使用哪一种 IE 体验进行浏览。采用 Windows UI 的 Internet Explorer 可以调整为从 320 像素的最小宽度到主机设备显示的完整宽度之间的任何大小,适用于桌面版的 Internet Explorer 可以在切入或切出全屏模式之间切换(通过按 F11);通过支持触摸的硬件,两种视图都支持触控输入。更一般地说,无法通过任何编程方法检测用户是在运行采用 Windows UI 的 Internet Explorer 还是在运行适用于桌面版的 Internet Explorer。

通常,为确保网站获得跨浏览器的最佳兼容性,在决定向用户提供哪一种网站体验时,最佳做法是检测功能而不是检测浏览器。Windows 8 中的两个 IE 浏览体验适用同一策略。最好将网站受众使用的不同显示特征和用户输入方法作为两个主要考虑事项,然后构建用户友好型布局和可选触控输入增强功能,从而跨各种 Windows 8 设备正常运行。

Windows 8 设备自适应网站设计的策略

总之,下面是一些使用 Windows 8 中的 IE 构建自适应网站的常用最佳做法。

使用功能检测而不是对特定的浏览器或设备功能做假设。 Windows 8 中的 IE 是一个单一 Web 平台,提供两种独立的 UI 体验,并且没有任何方法来检测用户正在使用哪一种体验进行浏览。使用媒体查询和触摸检测方法可以确定有关用户的显示特征和设备输入功能的信息。

适应在显示特性和设备输入功能方面的网站体验。避免特定视区宽度或宽度范围等同于输入功能或限制的设计假定。而应独立考虑网站的布局和用户输入处理;或者尽量记住 Windows 8 用户受众可能拥有的各种屏幕和输入方法的组合,这样更好。使用媒体查询和媒体查询侦听器跨显示特征范围调整网站布局和风格,并且不要忘记使用 CSS 设备适应覆盖自动缩放。按照触摸的设计准则,利用 IE 的指针模型可以方便地处理鼠标、触笔、触摸和多点触控输入,并通过手势事件增强网站的触摸体验。

在一组不同宽度和输入方法的矩阵间进行测试。在设计和构建自适应网站时,请确保跨至少一组基本变量和组合进行连续测试,如下图中建议的测试矩阵。

由 x 分隔的两个表:视区宽度表列出 320 像素、768 像素和 1024+ 像素,而输入方法表则列出鼠标和键盘、触摸和触笔

如果你的网站已具有几种特定格式,请根据某些通用启发为这些格式提供服务,并向用户提供切换选项。如果已经围绕市场上特定设备类创建了网站的若干版本,请使用上表来帮助你将现有手机、平板电脑和台式机体验映射到 Windows 8 的 IE 中的不同视区尺寸和用户输入方法。

如果你的平板电脑和台式机体验在功能上等效,请选择带触摸支持的平板电脑体验。(否则可在平板电脑与台式机体验之间自行选择。) 为确保向用户提供最佳网站体验,可以为他们提供了一个选项,以便从默认体验切换到其他格式的体验。

相关主题

显示和布局
设备自适应
设备方向事件
弹性框(“Flexbox”)布局
网格布局
媒体查询和侦听器
多列布局
屏幕方向 API
输入处理
让你的站点支持触控操作

 

 

显示:
© 2015 Microsoft