跨屏站点的最佳实践：Web Fundamentals

   传统新闻媒体在面临社交媒体的冲击的同时，也遇到多屏、跨屏传播的挑战。这种挑战从某种意义上来说，也是扩大传播范围、增强传播效果的机遇。这种机遇就是同一篇新闻内容在互联网技术的帮助下，既可以出现在智能手机上，也能够在平板电脑上，还可以在普通PC，甚至是智能电视上看到。

广义上来说，所谓“跨屏”，并不是像字面看起来的那样仅仅是简单把图像转移到另一个屏幕上，而是更大的一个范畴：内容转移，包括图像、资料、习惯使用的软件等等，在很多特定情况下甚至不局限于单纯的数据迁移层面，而是类似设备间无缝转接的“同步”效果。比如，坐在车上用手机看新闻，突然看到一条有意思或者较长的内容，想标记下来一会儿放到桌面电脑上细细品味。

实现这样的愿景，需要新闻媒体在制作内容时要充分考虑到多屏、跨屏的传播、阅读需求。随着网络技术的不断发展，除桌面计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验是一种必然的趋势。在早前的一篇内容中，我们介绍过针对跨屏和移动化的趋势，云适配（-R/yunshipei）提供了一种解决方案。今天我们介绍另外一种实现多屏、跨屏的技术，来自谷歌的现代化网页应用设计与开发指导手册和最佳实践（Web Fundamentals，-R/d2SY ），旨在帮助开发者做出体验更好的跨设备的站点。

图 谷歌的Web Fundamentals

    Web Fundamentals是一套针对目前Web开发的最佳实践和指导原则。在进行多屏、跨屏的网页应用设计之前，谷歌的开发小组和AnswerLab实验室开展了关于网页应用设计的研究（-R/Y2Sk ），试图回答什么才是好的网页设计，尤其是对移动应用来说。这些研究发现已融入到Web Fundamentals的设计实践中。除了指导与建议外，Web Fundamentals还包括以下方面的HTML、CSS 和 JavaScript 的样例代码（2）。

1.工具：选择一个编辑器，建立开发工具，建立一个构建流程，使用Chrome DevTools调试，在设备上、模拟器上或者云端进行调试。

2.内容布局：谷歌建议响应式的Web站点设计使用CSS3 Media Queries，不同的屏幕尺寸具有不同的CSS规则，响应式的Web设计模式--Fluid Layout、 Column Drop、Layout Shifte等，再加上一些导航和行为模式，如App、Tab页、底部工具条、Navigation Drawer。

3.表单和用户输入：选择适用于移动设备的表单、实时表单验证、处理触控和实现自定义的手势。

4.图片/音频/视频：关于使用< img>标签、CSS背景、 SVG来处理图标、图像的性能问题、视频处理、老平台兼容问题、可访问性问题等等的建议。

5.性能优化：优化了关键的渲染路径，使用了PageSpeed规则，通过消除不必要的下载内容优化了内容性能，优化了文本资源编码和图像，使用HTTP缓存等等。

6.设备传感器和功能：关于访问用户位置、朝向和移动、打电话的建议。

图 外观、多屏布局、用户输入、音视频等组件列表

除了以上手册内容外，谷歌还提供了Web Starter Kit (WSK) ——一套样例代码和工具，用于创建自适应多种设备的网站。Web Starter Kit包括创建移动HTML页、响应式布局的代码，一个可视化组件风格指南和可选的gulp.js构建工具。

                                                                                                          (研究院 刘振兴整理）