デザインV18

ウェブサイトはオンラインで改良されました！ 「改訂」に関しては、キャメロン・モルの古典的な記事の「再調整」を常に考えています。この改訂はゼロから始まりませんでしたし、空白の紙であり、空のコードエディターでもありませんでした。将来の改訂はこんなことではないと思います。既存の基盤に基づいていくつかのコンテンツを調整しました。しかし、調整はほぼすべてのファイルを含む非常に大きいため、明確な線を描き、「V18」と呼ぶ価値があります。

ここに不完全な改訂履歴を保持しています。

プロジェクトの開始

私は通常、最初にデザインツールで探索したいです。 Figmaで3〜4回の反復（ビルドを開始するときにフッターデザインを完璧にするために戻った後）の後、最終効果は次のとおりです。

基本的に視覚効果に満足した後、私はコーディングに目を向け、コーディングプロセス中に最終決定を下しました。最終製品はこのバージョンとそれほど違いはありませんが、まだいくつかの違いがあります（そして、設計決定の10倍が必要です）。

単純化します

一見しても見えないかもしれませんが、私の仕事では、コアテーマは単純化です。完全な単純化ではなく、約20％です。

V17バージョンのヘッダーには専用のモバイルバージョンがあり、オン/オフ状態を処理します。 V18バージョンのヘッダーはいくつかのリンクであり、小さな画面の新しい行に表示されます。フッターに「Back to Top」リンクを追加しました。これは、上部の外側の場所にスクロールすると表示され、ナビゲーションバーに戻るのに役立ちます。スクロール検出（IntersectionObserverに基づく）を使用して、上部に戻るときに「星を回転させる」。

ウェブサイトヘッダーは、さらに改善する必要があるため、V18バージョンの大幅な改善の1つになるとすでに予測できます。

V17バージョンの検索フォームには、オープン/クローズステータスと、結果ページの特別なテンプレートもあります。 Jetpack検索を完全に使用しているので、検索アイコンをクリックすると開くだけです。

この検索機能はJavaScriptを搭載しており、その安定性を改善するために、Googleの検索結果に対する有効なハイパーリンクでもあります。

 <code><a href="https://www.php.cn/link/fce40f257a6c2f9bcbd0b1f562a8e276">Search</a></code> ...

さまざまなレイアウト（左または右側のサイドバーなど）とヘッダースタイル（ヘッダーのビデオなど）があります。現在、両方とも1つのバージョンがあります。

V17バージョンのフッターは、ニュースレターフォーム、ソーシャルメディア、関連するWebサイトなどの完全な部品を含む非常に大きくなっています。そうであれば、私はそれをより「伝統的な」フッターに圧縮しました。

記事、ビデオ、ガイドなどであっても、「カード」には1つのスタイルしかありません。著者が関連するかどうか、ラベルがあるかどうか、行動への呼びかけなどに応じて微妙な違いがありますが、それらはすべて同じベンチマーク（およびテンプレート）です。主な変更は「ミニ」カードで、現在、人気のある記事、毎月のマッシュアップ、関連記事カードで使用されています。

ニュースレターエリアも大幅に簡素化されています。 V17では、 / Newsletters / URLはニュースレターの「ログインページ」であり、サイドバーの最新コンテンツを表示できます。

このURLは、最新のニュースレターに直接リダイレクトするため、他のコンテンツを読むのと同じくらい簡単に読むことができ、過去の問題を閲覧できます。

注目の写真

WordPressには、各記事の特集画像の概念があります。使用する必要はありませんが、使用しました。自然に他のコンテンツに統合する方法が大好きです。たとえば、ソーシャルメディアに自動的に統合された画像になります。 V17バージョンの微妙な背景画像として使用します。

おそらく完璧な世界では、完璧なウェブサイトには完璧なコンテンツ戦略があり、すべての記事に完璧な特集の写真があります。一致する配色、正確なサイズ、非常に予測可能。しかし、これは完璧な世界ではありません。いくつかの省略を可能にするシステムが好きです。注目の画像の周りの私たちのデザインは、ほとんど何でも受け入れることができます。

• トップにあるウェブサイトブランドのグラデーションをオーバーレイし、ブレンドモードをミックスして、それらをすべて関連するようにします。
• 唯一の例外は、必要に応じてサイズ変更/トリミングされることです。

これを念頭に置いて、注目された画像は多くの場合に使用されます。

CSS統計

2つのバージョン間のCSSを見てください（Project Wallaceはここで役立ちます）：

圧縮後のメインスタイルシートとGZIPは16.4 kbです。フルユーティリティスタイルシートほど小さくはないかもしれませんが、それは私が心配しているサイズではなく、特に意図的な追跡なしでサイズが大幅に低下します。

スピードデーモンではありません

CSS-Tricksはかなりのリソースを使用しています。速度が私の最優先事項である場合、私が最初にすることは、私が使用しているリソースの削減を開始することです。私の意見では、これはウェブサイトの面白さを減らしますが、コンテンツに大きな損害を与えることはありません。私はそれをしたくないだけです。視覚的に豊かに保ちながら、ウェブサイトを比較的速く保つ方法を見つけたいです。たぶん将来、私はこれのいくつかを探索して、より軽いバージョンのWebサイトを標準ベースの方法で提供し、ユーザーを選択できるようにすることができます。

これらのリソースについて...

• 写真が主な重量です。ほぼすべてのページ（10）には多くの写真があります。 Responsive Image構文を使用して、これらの画像をCDNから最適化された形式で提供しようとしました。私はもっ​​とできますが、私は良いスタートを切りました。
• まだ約180 kbのJavaScriptがあります。 JetPack検索関数は、最も重要なモジュールであるそれによって駆動されます。ポリフィルがロードされ（おそらくそれによってロードされます）、削除できるかどうかを調べる必要があります。私はまだjqueryを使用しています。次のラウンドで削除することを絶対に検討します。 jqueryに反対ではなく、それほど使わないだけです。私が行う作業のほとんどは、ネイティブJavaScriptで書かれています。 Google Analyticsもその中にあり、残りはパフォーマンスや広告のための小さなスクリプトです（皮肉なことに）。
• フォントの重量は約163 kbで、特に派手な方法でロードされていません。

3つすべてが速度改善の目標です。

しかし、ねえ、デスクトップ灯台レポートはかなり良いです：

これらの結果は、コンテンツのグリッドが大きいため、より重いページの1つであるホームページからのものです。ここで試すべきパフォーマンスのベストプラクティスはまだたくさんあります：

• すべてのコンテンツはグローバルhttp/2 cdnに由来し、キャッシュされています
• リソースを可能な限り最適化/圧縮/結合します
• リソース/広告の読み込みを可能な限り遅らせます
• プレミアムホスティング
• オンラインhtml instant.page

また、SpeedCurveレポートが前後に実行されることを確認しましたが、励みになるニュースがありました。

あなたがウェブサイトをクリックしてから再び訪問するとき、それが非常に速く感じることを願っています。

フォント

Hoefler＆Coを使用してください。再びサイト全体。

これは私がV17バージョンで持っていた最後のデザインスプリントの1つであり、最終的な効果が好きだったので、私は記事のほとんどをタイポグラフィのほとんど保持しました。ただし、Clamp（）が表示されるようになりましたが、Webサイトのコンテンツのほとんどを流動化するために使用しています。たとえば、タイトル：

 <code>font-size: clamp(2rem, calc(2rem 1.2vw), 3rem);</code>

斧

公開前にAxe devtoolsプラグインを使用してページをテストし、修正する必要がある問題を見つけました。これはアクセシビリティの詳細な研究ではありませんが、完全な書き直しではないため、アクセシビリティに大きな変化を期待していません。ここで発生する問題を解決することに特に興味があるので、躊躇しないでください！

間違い

いくつかのエラーがあると確信しています。このコメントスレッドを使用してエラーを報告したくない。エラーが発生した場合は、お問い合わせください。 ？

以上がデザインV18の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。