Paul Lewis が自社で開発した CDS ウェブサイトでは、会議の訪問者向けに優れたモバイルウェブ エクスペリエンスを構築する方法を紹介しました。
メイキング
注目すべき点は、さまざまなモバイル ブラウザでサイトがスムーズに動作していることです。ブラウザのレイアウト サイクルとペイント サイクルを可能な限り最適な方法で利用します。
使用するウェブ プラットフォームの新機能
- Service Worker
- マニフェスト
- テーマカラー
Patterns
- 開くカード
- レスポンシブ グリッド
- マテリアル デザイン
ソースコード
インタビュー
開発
Paul がサイトの構築に着手したときの最優先事項は、プログレッシブ エンハンスメントの導入でした。まずパソコン用に設計するのではなく、まず小さな画面向けに設計し、次に大きな画面向けにビルドし、グレースフル デグラデーションではなく段階的に強化することにしました。これには多数のメディアクエリが必要でしたが、主要なブレークポイント間の小さな変化にかなりの自由度を考慮する必要もあります。さまざまな画面サイズを行き来して追跡することで、コンテンツが壊れる場所を把握して、すぐに修正できました。
PE のもう一つの重要な側面は、可能な限り下位互換性があることです。Paul は Flexbox よりもフロートを使用することを選択したのは、サイトで機能するブラウザが増えると考えたからです。サイトの特定のレイアウトについては、まったく問題ありません。Flexbox が必要なら PE を使って追加しました
サイトの大きな課題はカードの展開と折りたたみ機能で、アニメーションを機能させるまったく新しい方法を考える必要がありました。ポールは、要素をアニメーション化して最終状態に設定するという、FLIP という戦略を思いつきました。そこから、変換や不透明度などのコンポジタに適したプロパティを適用して変更を反転し、要素を開始位置に返します。最後に、変換と不透明度の遷移を有効にして、これらの変更を削除します。これにより、要素がもう一度最終位置に移動します。Paul 氏は、これが少し予想外であることは認めていますが、非常にうまく機能し、パフォーマンスが向上しています。
パフォーマンス
Paul Lewis をパフォーマンスの達人として知っていた私は、サイトを構築する際にパワーフォーマンスが極めて重要な考慮事項であることに驚くことはありませんでした。Speed Index 値を可能な限り低く抑えるため、WebPageTest を大いに活用しました。YouTube 埋め込みなしでは、Paul はケーブル接続で 1,000 以下に到達できました。これは、ほとんどのユーザーが最初のレンダリングを 1 秒未満で行えることを意味します。
これを実現するための作業のほとんどは、可能な限り画像を連結、軽量化、圧縮する Grunt タスクで行われていました。また、サイトでは、重要でない画像をページの読み込み後に遅延して、実際のコンテンツがより迅速に画面にレンダリングされるようにしています。
ページの読み込み時間をさらに改善するために、Paul は Service Worker を採用しました。これを使用すると、オンラインかどうかにかかわらず、ページへのアクセスがキャッシュから提供され、不安定な接続でもコンテンツにアクセスできます（カンファレンスの Wi-Fi 接続時は非常に重要です）。CDS サイトは、この新機能を使用した最初の本番環境サイトの一つで、Paul は多数の「先行ユーザーに関する問題」に直面しました。しかし、パフォーマンスが大幅に向上したのはそのためです。今では、自分が構築するすべてのサイトに導入しています。
もちろん、パフォーマンスはサイトの読み込み速度だけでなく、サイトのパフォーマンスも重要です。Paul はアニメーションがいかに難しいかを認識していたため、FLIP を採用しました。それだけでなく、タップ入力やスクロールの妨げにならないようにも努めました。それほど複雑なサイトではないにもかかわらず、Arun は変更された RAIL 手法をビルドに採用し（アイドル時間はそれほど必要ありませんでした）、多くのサポートをしました。
デザイン
このサイトは 1 人で作られているため、Paul がプロジェクトのデザイナーと開発者の両方を兼ねて、2 つの「チーム」における互いの懸念事項についてかつてないほどの理解が深まりました。彼はデスクトップ設計を好んでおり（開発時に使用したプログレッシブ エンハンスメントとは逆の手段です）。なぜなら、どのような取り組みが必要かがわかるからです。その後、モバイル表示に切り替えます。これにより、要素を大幅に改善し、最も重要な情報に注目してもらうことができます。その後、情報アーキテクチャと優先度を常に更新する必要があるため、PC 版に反映されます。
すべてがスムーズに進みませんでした。当時のマテリアル デザイン ガイドラインではコンテンツ サイトの作り方が明確でなかったため、手が届かなかった部分がありました。また、この設計ではスケジュールとセッション情報の関連性も考慮されておらず、結局のところ UX はスケジュールに従ってセッション情報にたどり着けないとユーザーが不満を抱くことを意味していました。
とは言え、Paul はマテリアル デザインの仕様をコンテンツ サイトに移すことで素晴らしい仕事をしたと思います。映像と動きには本当に満足しています。独自のマテリアル デザインの雰囲気があり、情報と外観によってインタラクションと階層が促進されます。
成功
- GitHub（星 200 個以上）でサイト全体をリリースし、ボイラープレートとインスピレーションとしてウェブ デベロッパーに提供しました。
- 最新かつ優れたウェブ プラットフォームである Service Worker、ウェブ マニフェスト、動的なテーマカラーが統合されています。Android デバイスで実行すると、プラットフォームと完全に統合されているように感じられます。ユーザーのホーム画面に追加すると、ユーザーが使用するアプリのように感じられるので、とても便利です。
- ページビューは約 73,700 回~73.7k、サイトのサブセクションがクリックされた回数は ~73.7kでした。これは、ユーザーが実際にサイトにアクセスし、利用したことを意味します。
総じて、今日のウェブ デベロッパーにとって大きなインスピレーションであり、大成功を収めたカンファレンス ウェブサイトにもなるでしょう。