アンディ・クラークが新しい 320 以降について語る

デザイナー、作家、講演者 アンディ・クラーク のメジャーアップデートをリリースしました 320以上、彼の「小さなスクリーンファースト」モバイル定型文。 Clarke (AC) に、このリビジョン、比較的最近発見された LESS への情熱、そしてデザイナーがモバイルファーストを検討すべき理由について話を聞きました。

.net: モバイルファーストになるとデザイナーにとってどのようなメリットがありますか?
AC: 私にとって、モバイルまたはコンテンツファーストのデザインは、すべての Web デザインの始まりです。 ほぼすべての Web ページで見られる要素、つまり見出し、リスト、段落、引用符のタイポグラフィ スタイルについて考えてみましょう。 ボックス、テーブル、フォーム、ボタン。 これらの要素の外観と操作感は、画面サイズやデバイスが変わっても変わらない可能性があります。 これらの要素をグリッド上に配置するだけです。

そのため、設計プロセスを 2 つの段階に分けることが合理的です。 私がデザインを「雰囲気」と呼んでいる 1 つ目は、ボーダー スタイル、ボックス、形状などのタイポグラフィー、色、テクスチャです。 2 つ目は、1 つまたは複数のグリッドをデザインし、それらのグリッド上にさまざまなレスポンシブ デザイン ブレークポイントに要素を配置します。 私はデザインを始めるときにこの雰囲気に重点を置き、それがコンテンツ/モバイルファーストデザインのベースラインとなります。 それ以降は、各ブレークポイントで必要な場合にのみファイルとスタイルを追加することで、コードの効率が向上し、ページが高速になります。 全員が勝ちます。

.net: 320 以降をアップデートする必要性を感じたのはなぜですか? 元の形では何が達成できなかったのでしょうか?
AC: オリジナルの 320 以降を書いたのは私です 一年前. 当時、私たちはレスポンシブ Web デザインと、私のサイトや有名なサイトなどの多くのサイトを始めたばかりでした。 サイモン・コリソン, ジョン・ヒックス そして dコンストラクト2010、さらに次のようなフレームワークとボイラープレート HTML5 ボイラープレートは、CSS3 メディア クエリを小さな画面からではなく、デスクトップから下に構造化しました。 正しく言うと、320 以上と書きました。

現在、コンテンツファーストのフレームワークが標準となっています。 HTML5 ボイラープレートとその モバイルいとこ 小さな画面用にスタイルシートを構造化しました。 でもツイッターの ブートストラップ 他にも数え切れないほどのフレームワークに流体グリッドが含まれているため、320 以降が依然として適切なのかどうか疑問に思いました。

320 and Up は今でも多くの人にとって、特に私にとって非常に関連性があることがわかりました。 このバージョンを作成して以来、これまでに取り組んだすべての Web サイトでそのバージョンを使用してきましたが、新しいレスポンシブ Web デザイン プロジェクトを開始するときに必要なファイルとスタイルが含まれるようになりました。 公開バージョンでは、 現在 GitHub 上にあります、HTML5 ボイラープレートの最新のファイルとスタイルを含めるための更新と、ブートストラップとの統合の改善が必要でした。 また、お気に入りのレスポンシブ テスト ツールをいくつか含めたいと思いました。

.net: 320 以降の新しいバージョンの大きな変更点は何ですか?
AC: ほぼすべてを簡素化しました。 私は、ブルームーンに一度だけ使用するファイルやスタイルを削除したことがありますが、まったく削除しないこともあります。 それには、 Respond.js、古いバージョンの Internet Explorer で CSS3 メディア クエリを有効にするためのポリフィルです。最近では、IE7/8 のユーザーに、いつもと同じように固定された中央レイアウトを提供しているためです。

私の仕事では、HTML5 ボイラープレートからブートストラップに近づきつつあり、320 以降はそれを反映しています。 そのため、320 以降のタイポグラフィ スタイル、ボタン、ボックス、フォーム、テーブルはすべて、Bootstrap と互換性のあるクラス属性値を使用します。

320 以降が Bootstrap や Zurb のような開発フレームワークになることは決して望んでいませんでした 財団. どちらも素晴らしいものですが、グリッド フレームワークに対する私の広く知られた嫌悪感を考えると、レスポンシブかどうかにかかわらず、グリッドを追加する方法はありませんでした。 320以上。 とはいえ、同じコードを何度も書くのは狂気の兆候である（と聞いた）ので、ここ数か月間、 「成り上がり者」。

これらは、私が毎日構築するもののためのレスポンシブ デザイン パターンと HTML および CSS です。 Upstart は、非特定の HTML と CSS を使用して構築され、HTML サンプル ページと upstart.less ファイルで構成されます。 このリリースには 2 列、3 列、および 4 列の応答モジュールといくつかのパネルが組み込まれており、作成中に新しい Upstart を追加します。 他の人たちも GitHub に貢献して同じことをして、レスポンシブ Web デザインに非常に役立つパターン ライブラリを構築できることを心から願っています。

.net: かなりハマってしまったようですね。 少ない 最近 – デザイナーにとってそれを学び、使用することが重要だと考えるのはなぜですか?
交流： LESS のおかげで CSS の書き方が完全に変わりました. 私は単なる改宗者ではなく、狂信者になったのです！ これにより、スタイルシートがよりモジュール化され、より適切に整理されるようになりました。 これは、しばらくしてからプロジェクトを始めるときや、他のデザイナーや開発者と大きなプロジェクトで共同作業するときに役立ちます。

新しい 320 以降は LESS で構築しました。 サイトの「雰囲気」スタイルを 1 か所だけで定義できるようにする新しい変数ファイルがあります。 次に、非常に便利な CSS3 ミックスインをいくつか集めて、それらを中心にタイポグラフィ、ボタン、フォーム、その他の LESS ファイルを構築しました。 これにより、CSS の開発が驚くほど効率化されます。 レスポンシブ Web デザインのブレークポイントに関しては、LESS が 1 つの LESS ファイルから別の LESS ファイルにスタイルをインポートする方法の方が、プレーン CSS がインポートを処理する方法よりも優れています。 これが、現在 320 以降のスタイルシート バージョンが 1 つしかない主な理由です。