Google的 Web Fundamentals和Web Starter Kit工具包

Google已经发布了大量的跨平台、响应式web站点设计的指导说明和实例代码。

当意识到大量设备的存在给开发者带来了巨大挑战，尤其是移动设备，于是，Google就发布了Web Fundamentals，它是一套针对目前web开发的最佳实践和指导原则。Web Fundamentals除了指导建议外，还包括以下方面的HTML、CSS 和 JavaScript 的样例代码：

1. 工具：选择一个编辑器，建立开发工具，建立一个构建流程，使用Chrome DevTools调试，在设备上、模拟器上或者云端进行调试。
2. 内容布局：Google建议响应式的Web站点设计使用CSS3 Media Queries，不同的屏幕尺寸具有不同的CSS规则，响应式的Web设计模式--Fluid Layout、 Column Drop、Layout Shifte、 Off Canvas，再加上一些导航和行为模式，如App、Tab页、底部工具条、Navigation Drawer。
3. 表单和用户输入：选择适用于移动设备的表单、实时表单验证、处理触控和实现自定义的手势。
4. 图片/音频/视频：关于使用< img>标签、CSS背景、 SVG来处理图标、图像的性能问题、视频处理、老平台兼容问题、可访问性问题等等的建议。
5. 性能优化：优化了关键的渲染路径，使用了PageSpeed规则，通过消除不必要的下载内容优化了内容性能，优化了文本资源编码和图像，使用HTTP缓存等等。
6. 设备传感器和功能：关于访问用户位置、朝向和移动、打电话的建议。

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

WSK的目标是支持Chrome两个最新版本、Firefox、Safari、Opera、IE 10和11，同时也支持Android、IOS、Windows Phone和黑莓的内置移动浏览器。

Web Fundamentals相关代码和Web Started Kit代码在GitHub上已经开放源码，可供下载和学习。

查看英文原文：http://www.infoq.com/news/2014/06/google-web-design

感谢曹知渊对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。