CDS 網站由 Google 自家的 Paul Lewis 內部建構，展示如何為會議訪客打造絕佳的行動網路體驗。
幕後花絮
Remarkable 可讓網站在不同行動瀏覽器中執行時流暢運作。它會盡可能利用瀏覽器的版面配置和繪製週期。
使用的新網路平台功能
- Service Worker
- 資訊清單
- 主題色彩
模式
- 信用卡
- 回應式格線
- 質感設計
原始碼
訪談
開發
當 Paul 決定建構網站時，首要之務是導入漸進式強化。與其針對電腦設計，他會先針對小螢幕建構應用程式，再擴充至較大的螢幕，藉此逐步進行放大，而非優雅降級。這需要進行大量媒體查詢，但同時也有一點自由，在關鍵中斷點之間找出細微變動。透過追蹤不同螢幕大小的方式，他可以瞭解內容何時會中斷，以便快速修正。
產品專家的另一個重點是盡可能確保回溯相容性。因為小寶選擇在 Flexbox 上使用浮動值，因為他認為這樣會增加可用於網站的瀏覽器數量。而對於網站的特定版面配置，這種做法完全沒問題。如果他需要 Flexbox 就必須請 PE 新增該功能
網站最大的挑戰是資訊卡展開及收合功能，因此必須想出全新的動畫運作方式。小羅想出一項策略，他呼叫 FLIP，這包括將元素設為最終狀態的動畫。接著，您可以套用轉換和不透明度等合成屬性，以反轉變更，並將元素傳回起始位置。最後，完成轉換和不透明度的轉換功能，並移除這些變更。如此一來，元素就會再次移至最後的位置！保羅會承認這是一個令人意想不到的事，但這樣做非常好，還能提升效能。
效能
Paul Lewis 是他自己的表演大師，很快就發現力量是打造網站時要考慮的一項重要因素。他極度仰賴 WebPageTest 盡可能降低 Speed Index 的值。如未嵌入 YouTube，Paul 將其透過有線網路連接降至 1,000 以下，這表示多數使用者會「不到一秒」得到初始轉譯。
為實現此目標，大部分的工作都是在 Grunt 工作中完成，盡可能串連、縮小及壓縮圖片。網站也會將非必要的圖片延遲載入至網頁載入後，讓實際內容更快顯示在畫面上。
為了改善頁面載入時間，Paul 捨棄了服務工作站。有了它，無論您是否連上網路，系統都會從快取提供網頁瀏覽資料，如此一來，即使連線不穩 (透過會議 Wi-Fi 連線) 也能存取內容。CDS 網站是率先採用這項新功能的生產網站之一，Paul 遇到了許多「早期採用者問題」，但效能大幅提升，他說，這就一直讓我這麼做。事實上，他現在要加到自己建構的每個網站！
當然，效能不只影響網站載入速度，也提升了運作效能。他明白動畫會帶來挑戰，因此他採用 FLIP 拍攝動畫。此外，他也竭盡所能，確保沒有任何東西受到觸控輸入或捲動的影響。儘管網站並不很複雜，但他還是為版本採用經過修改的 RAIL 方法 (他實際不需要用到太多閒置時間)，而這協助了很多人！
設計
由於網站遭到單一人員的偽造，這表示 Paul 是專案的設計人員和開發人員，導致對彼此在這兩個「團隊」的疑慮的理解程度達到前所未見的程度。他喜歡將桌面設計 (也就是他在開發期間用到的進步強化功能，也就是在開發期間用到的增強功能)，因為這讓他知道進入專案需要的項目。之後，Paul 就會選擇到行動裝置檢視畫面，這有助於他大幅修改內容，確保最重要的事情獲得最多關注。並告知桌面版本，因為很多資訊架構和優先順序都需要更新。
一切都不太順暢。時至今日，Material Design 指南不清楚如何製作內容網站，所以有些部分他會覺得很短。這項設計也無法將時間表和工作階段資訊納入考量，最終導致使用者無法上課，也無法直接查看工作階段資訊，因而感到困擾。
話雖如此，我認為 Paul 確實完成了將 Material Design 規格傳輸至內容網站，並且我很滿意畫面中的影像和動態效果。它具有獨特的 Material Design 風格，而資訊與外觀鼓勵互動與階層。
成功
- 在 GitHub 上 (超過 200 顆星) 成功發布整個網站，為網頁程式開發人員提供樣板和靈感。
- 整合了最新、最棒的網路平台：Service Worker、網路資訊清單和動態主題色彩。在 Android 裝置上執行時，網路效果會感覺與平台緊密整合。新增至使用者的主畫面後，感覺就像是他們要用的應用程式，這真的是很棒的。
- 目前網頁瀏覽次數~73.7k，而網站子區段的點擊數為 ~73.7k次，意味著使用者實際使用並與其互動，成效遠超出預期。
總而言之，這對當今的網頁開發人員來說 都是很棒的靈感，還有成功的會議網站