CDS 网站由我们自己的 Paul Lewis 内部构建，展示了如何为与会者打造出色的移动网络体验。
幕后花絮
值得注意的是，网站在各种移动浏览器中的运行流畅性。 它以最佳方式利用浏览器的布局和绘制周期。
使用了新的网络平台功能
- Service Worker
- 清单
- 主题颜色
模式
- 支出卡
- 自适应网格
- Material Design
源代码
访谈
开发
在 Paul 着手构建网站时，首要任务是采用渐进式增强功能。他不是针对桌面设备进行设计，而是先针对小屏幕进行构建，然后针对大屏幕进行构建 - 逐渐增强，而不是优雅降级。这需要进行大量的媒体查询，但还需要一定的自由度，让您能够轻松关注关键断点之间的细微变化。通过在屏幕尺寸之间来回跟踪，他可以了解内容会在何处中断，以便快速修复此问题。
PE 的另一个重要方面是尽可能向后兼容。Paul 选择在 Flexbox 上使用浮动元素，因为他觉得这会增加网站支持的浏览器数量。就网站的具体布局而言，这完全不是问题。如果他需要 Flexbox，他会用产品专家加它。
该网站的一大挑战是卡片展开和收起功能，这需要思考一种全新的动画工作方式。Paul 想出的策略是他称为“翻转”，涉及将动画元素设置为其最终状态。然后，您可以应用对合成器友好的属性（如变形和不透明度），以反转变化并将元素恢复到其起始位置。最后，在转换和不透明度上启用转换，并移除这些更改。这会导致元素再次移动到其最终位置！Paul 承认这有点出人意料，但它非常好用，可以提升性能。
性能
我知道 Paul Lewis 是一位性能高手，在构建这个网站时，我惊讶地发现功效是一个非常重要的考虑因素。他非常依赖 WebPageTest 来尽可能降低速度指数值。在没有使用 YouTube 嵌入的情况下，Paul 通过有线连接成功使视频加载速度不到 1000，这意味着大多数用户在一秒内就能完成初步渲染。
为实现这一目标，大部分工作是在 Grunt 任务中完成的，以尽可能连接、缩减和压缩图片。网站还会将非必要的图片推迟到网页加载后，以便实际内容更快地呈现到屏幕上。
为了缩短网页加载时间，Paul 使用了 Service Worker。这样，无论您是否在线，都可以从缓存中传送网页访问，从而确保即使在连接不稳定的情况下您也能访问内容（在视频会议 Wi-Fi 上尤为重要！）。CDS 网站是首批使用新功能的生产网站之一，Paul 遇到过一堆“早期使用者问题”，但他告诉我，如此巨大的性能提升弥补了这些问题。事实上，他现在已经在他构建的每一个网站上投放广告了！
当然，性能不仅关乎网站的加载情况，还关乎网站的运行情况。Paul 知道动画将具有挑战性，因此选择小菲。除此之外，他还不遗余力地确保触摸输入或滚动不会受到任何妨碍。尽管网站并不是非常复杂，但他为构建采用了改良的 RAIL 方法（实际上不需要太多的空闲时间），这有很多帮助！
设计
由于网站是由一人打造的，这意味着 Paul 既是该项目的设计人员，又是开发者，这使得对两个“团队”中彼此关切的认知达到了前所未有的了解。他喜欢向下设计桌面（这与他在开发期间使用的渐进式增强相反），因为这会让他大致了解项目中需要什么。之后，Paul 继续使用移动视图，这让他可以对内容进行大幅优化，并确保最重要的内容获得最多的关注。然后，它会通知桌面版，因为信息架构和优先级不可避免地需要更新。
有些过程并非很顺利。当时的 Material Design 指南并不明确如何制作内容网站，因此他在一些方面有所欠缺。该设计也未考虑时间表和会议信息的相关性，这最终会导致用户进入日程表并因无法直接获取会议信息而感到沮丧。
话虽如此，但我认为 Paul 在将 Material Design 规范 带到内容网站中方面做得很出色，我对视觉和运动效果真的很满意。它具有独特的 Material Design 风格，信息和外观鼓励互动和层次结构。
成功
- 我们在 GitHub 上成功发布了整个网站（超过 200 星），用作供 Web 开发者参考的样板和灵感。
- 融合了最新、最强大的网络平台：Service Worker、Web 清单和动态主题颜色。在 Android 设备上运行时，实际效果会感觉与平台紧密集成。如果添加到用户的主屏幕，就会感觉到就像一个用户会使用的应用，非常棒。
- ~73.7k 次网页浏览，~73.7k次点击进入网站子版块，意味着用户实际使用过并与之互动，远远超出预期。
总而言之，它为当今 Web 开发者提供了绝佳的灵感，并且是一个非常成功的会议网站。