Google 已经发布了大量的跨平台、响应式 web 站点设计的指导说明和实例代码。
当意识到大量设备的存在给开发者带来了巨大挑战,尤其是移动设备,于是,Google 就发布了 Web Fundamentals ,它是一套针对目前 web 开发的最佳实践和指导原则。Web Fundamentals 除了指导建议外,还包括以下方面的 HTML、CSS 和 JavaScript 的样例代码:
- 工具:选择一个编辑器,建立开发工具,建立一个构建流程,使用 Chrome DevTools 调试,在设备上、模拟器上或者云端进行调试。
- 内容布局:****Google 建议响应式的 Web 站点设计使用 CSS3 Media Queries,不同的屏幕尺寸具有不同的 CSS 规则,响应式的 Web 设计模式–Fluid Layout、 Column Drop、Layout Shifte、 Off Canvas,再加上一些导航和行为模式,如 App、Tab 页、底部工具条、Navigation Drawer。
- ** 表单和用户输入:选择适用于移动设备的表单、实时表单验证、** 处理触控和实现自定义的手势。
- 图片**/音频/**** 视频:关于使用 < img> 标签、CSS 背景、 SVG 来处理图标、图像的性能问题、视频处理、老平台兼容问题、** 可访问性问题等等的建议。
- 性能优化:优化了关键的渲染路径,使用了PageSpeed规则,通过消除不必要的下载内容优化了内容性能,优化了文本资源编码和图像,使用 HTTP 缓存等等。
- 设备传感器和功能**:关于访问用户位置、朝向和移动、打电话的建议。**
除了以上手册内容外,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 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。
评论