モバイル画面のレスポンシブWebレイアウト紹介、ヒント、および例

この記事は私たちの一部です 「Webレスポンシブデザインシリーズ」 - すべてのプラットフォームのユーザー向けのWebサイトを作成するためのツール、リソース、およびチュートリアルで構成されています。. ここをクリック同じシリーズの他の記事を見る.

デザイナーは今、以前よりもそれを厳しくしています。据え置き型デバイスだけでなく、タブレットやスマートフォンなどのモバイルデバイスも設計する必要があります。ここではさまざまな画面サイズと解像度について話しているので、それは肩を並べるのが大変な作業です。これを踏まえて, レスポンシブWebデザイン 最善の解決策かもしれません。それは単なる単純なモバイルテンプレート以上のものを提供します。代わりに、あなたのサイト全体のレイアウトは、あらゆる可能なスクリーン解像度に適合するのに十分柔軟であるように設計されています。.

このような流動的な設計方式では、明らかな利点と欠点があります。レスポンシブWebデザインがモバイルデバイスへの移行をスムーズにする方法について、以下の私の例を検討してください.

レスポンシブデザインの仕組み

私がその言葉を使うとき “敏感な” Webデザインに関しては、レイアウト全体がユーザーの画面解像度に基づいて応答することを意味します。このシナリオを想像してみてください。1つのタブレットでWebサイトを読んでいるときに、何らかの理由で別のデバイスに切り替えます。ブラウザウィンドウのサイズが変更されました。レスポンシブWebデザインのレイアウトは、優雅に分解してそれ自身を再発明するスキームとレイアウトを特徴とします。ユーザビリティの観点からは、これは素晴らしいテクニックです。.

レスポンシブデザインとは、ブラウザやデバイスの画面サイズに関係なく、均一なエクスペリエンスを実現することです。私は自分のポイントを説明するために 'A List Apart'からの完璧な例を見つけました。それはまた動的な画像も含みます。幅は、ほとんどすべての内部コンテナ要素のパーセンテージを使用してCSSで設定されます。大規模なWebサイトでも、JavaScriptなどの動的コンテンツがサポートされていない場合に削除されるとうまく反応する.

モバイル用に設計する理由?

外出先でのWebブラウジングだけでなく、より多くのユーザーがモバイル化することが明らかになりました。タブレットPCは、ユーザーが教室でオンラインになったときに状況が変わり始めました。モバイル向けの設計は、確かに現代のWeb標準における要件です。唯一の問題はあなたの開発方法を選択し、あなたの聴衆を適切にターゲットにすることです。.

特定の画面解像度のコーディングを始めると、対処するにはスタイルシートが多すぎます。 CSS3のメディアクエリを使用して、縦向きと横向きの両方のビュー用にiPhone固有のレイアウトを構築できます。あなたはピクセル密度を事前に決定することができるので、モバイル用のHTMLテンプレートを改良するのは簡単です。.

（画像ソース：bradfrostweb）

ただし、レスポンシブデザインのレイアウトをコーディングすると、モバイルの側面はデフォルトで処理されます。デスクトップとモバイルのどちらのユーザーにも同様のエクスペリエンスが提供されるので、外部のCSSプロパティについて心配する必要はありません。あなたが実行する必要がある唯一の研究は、可能な限り小さいディスプレイスクリーンを計画することです。 Google Analyticsのトラフィックデータはこれに非常に役立ちます。.

すべてのブラウザを実行しているすべてのデバイスでWebサイトが100％機能することはおそらくありません。しかし、あなたはスクリーンの平均幅に基づいて大多数をターゲットにすることができます。旧式のiPhoneモデルは320×480のディスプレイ解像度を使用していますが、信じられないほどです。私はあなたがそれを収めることができれば240px、またはさらに小さい幅のために撃つだろう.

デフォルトズームの削除

スマートフォンでWebを閲覧していた時間がある場合は、Webサイトが画面内に完全に表示されるように縮小されていることに気付くでしょう。ほとんどのWebサイトにはモバイル版がないため、これはユーザーの利便性のためです。したがって、フルレイアウトが最も安全な方法です。.

しかし、レスポンシブモバイルデザインを構築する際には、オートズームによってレイアウト要素が本当に乱れることがあります。具体的には、画像やナビゲーションコンテンツが、レイアウト内で小さすぎたり大きすぎたりすることがあります。あなたがほとんどのAndroidとiPhoneデバイスでこれをリセットするドキュメントヘッダに追加できる特別なメタタグがあります.

これは ビューポートメタタグ コンテンツ内にいくつかのカスタム変数を設定します。 Appleはあなたが調べるべき他のいくつかのメタタグに関するドキュメンテーションページを持っています、これらは特にiOS上のウェブサイトを対象としています。の 初期スケール これはあなたのウェブサイトを完全な100％ズームにデフォルト設定するので、値は重要です.

の最後の値 ユーザースケーラブル このズーム機能は完全に削除されるので、ユーザーはレイアウトのサイズを変更できません。これにより、デバイスの全幅に基づいてデザインが1つのサイズに固定されます。ズーム機能を無効にしても、どのデバイスでも縦長から横長に移行するときに、優れたレスポンシブデザインが適用されます。しかし、レスポンシブデザインをロックして一般的なスケーリングオプションを削除することは理にかなっています.

動的画像スケーリング

画像は、実質的にすべてのWebサイトのもう1つの重要な側面です。モバイルユーザーはビデオをストリーミングしようとは思わないかもしれませんが、写真はまったく別の話です。ボックスモデルから抜け出すレイアウトに関しては、これらも最大の原因です。.

img 最大幅：100％;

CSSの標準的な規則は、max-widthプロパティをすべての画像に適用することです。彼らは常に100％に設定されますので、あなたは歪みに気付くことはありません。ユーザーがブラウザウィンドウのサイズをあなたのイメージが扱えるサイズよりも小さくすると、自動的に100％幅に縮小されます。問題は、Internet Explorerがこのプロパティを理解できないことです。そのため、次のようにIE固有のスタイルシートをまとめる必要があります。 幅：100％。.

JavaScriptまたはjQueryプラグインを使用している場合は、柔軟な画像も可能です。非常に賢い開発者の中には、非常にレスポンシブな画像コンテンツを構築する時間をかけている人もいます。このスレッドは、IE6 / 7のバグを解決するための斬新で便利なアプローチを特徴とするStack Overflowの多くのうちの1つです。.

私は個人的には自然なCSS画像のサイズ変更に固執することをお勧めします。 WebサイトがJavaScriptを有効にしたモバイルブラウザで実行されている場合は、CSSもサポートしている可能性があります。本当に深く掘り下げたいのなら、24通りの記事「アダプティブデザインのためのイメージ」をチェックしてください。

感動デザイン

Web開発者は、モバイルユーザーがBlackBerrysのようなキーパッドフォンにはもういないことを忘れるかもしれません。今日のスマートフォンの大部分はタッチスクリーンインタフェースを使用しているため、マウスとキーボードの設定とはシナリオが異なります。.

そのため、モバイル要素における代替ソリューションを検討する必要があります。ドロップダウンメニューは、右側に1つのメニューとして表示されるとうまく機能する場合があります。ほとんどのユーザーは、左側よりも右側のリンクを簡単にタップできますが、どちらの列もスペースを軽減するように機能します。マージンインデントを使用すると、jQueryコードを必要とせずにリンク階層を簡単に識別できます。.

これらのナビゲーションリンクのサイズを大きくすることもお勧めです。モバイルユーザーは、デスクトップやラップトップコンピュータにさえ提供される大きなスクリーンの贅沢を持っていません。あなたはテキストを大きく、前もって、タップ可能で、そして読みやすいものにしておく必要があります。ユーザーがポートレートビューとランドスケープビューを切り替える場合は、サイズを変更することもできます。モバイルWebの閲覧時にはよくある繰り返しです.

カスタムCSSレイアウト

一般に、レイアウトを調整してコンテンツの自然な劣化を許容することが最善です。サイドバーとコンテンツ領域がある場合は、パーセンテージまたはemsの幅で設定する必要があります。ブラウザウィンドウに合わせてサイズを変更します。あなたが適用する場合 最小幅 これは最終的にレイアウトの一部を中断します。サイドバーのコンテンツがページのコンテンツの上に表示されるようになりました.

（画像出典：ペッパーソン）

これがデザイン全体に与える影響を考慮すると、外部スタイルシートを開発する方がはるかに簡単です。しかし、あなたはあなたのレイアウトをレンダリングするには小さすぎるスクリーン解像度に遭遇する可能性があります。これは、カスタムCSSプロパティを追加してページの一部を削除したり、コンテンツ全体を再フォーマットしたりするのに最適なシナリオです。.

追加コンテンツのオン/オフを切り替える

大きなコンテンツブロックの例には、Webフォーム、ダイナミックメニュー、イメージスライダー、および他の同様のアイデアが含まれます。レイアウトが小さくなるにつれてこれらの要素を完全に削除するのではなく、単純にそれらを非表示にしないでください。 “最小化” コンテンツ部門？編集にはCSSまたはJavaScriptを使用できますが、最終的にはトグルボタンを作成するためのJSコードが必要になるでしょう。.

この代替手段はあなたのホームページを動的にして豊富なウェブメディアでいっぱいに保つのに最適です。ドロップダウンナビゲーションを完全に削除したり、ページ構造を並べ替えたりする代わりに、コンテンツdivの中に非表示にすることができます。ユーザーがあなたのリンクを表示したい場合、彼らはメニューを開閉するためにトグルボタンをタップします.

このフォーマットはシンプルで直感的で、タッチスクリーンデバイスでの作業は簡単です。 div内には、各ドロップダウンメニューを列形式で並べて配置できます。ウィンドウのサイズがさらに小さくなると、自然に互いの下に落ちてページの高さが増します。それでも、メニュー全体を折りたたむオプションは簡単に達成でき、1回タップするだけです。このトグルdivは、動的な写真のサイズ変更と連携して画像のスライダーにも最適です。.

メディアクエリを使用する

モバイル画面で2列または3列のレイアウトが崩れる場合は、それぞれのコンテンツ領域が上下に重なってしまいます。サイト全体がブリードオーバーしているように見え、識別できないブロック領域がないと非常に混乱してしまうかもしれません。より良いアイデアは、モバイルデバイスの場合のみ、各列に下の境界線を追加することです。 mobile.css.

これらの新しいスタイルを使用すると、コンテンツは分割可能なセクションに分割されます。上記のmedia属性は、横長表示で古いiPhoneデバイスをターゲットにするように特別に設計されています。しかしそれはまた480ピクセルより小さいスクリーンを持つデバイスにも適用されます。これをあなたの利点のために使ってください。そうすれば、どの時点でレイアウトを決めることができるか “解散する”.

デバイスの向きを検出するために使用できるその他のオプションがいくつかあります。 CSSメディアに関するこの素晴らしいガイドはあなたにいくつかのアイデアを与えることができます。さらに、新しいモバイルプロジェクト320以降では、モバイルCSSの定型機能が提供されています。 @メディア スタイルこれらは同じmobile.cssファイルに直接含めることができ、さまざまなデバイスにルールを適用できます。.

 / *スマートフォン（ポートレートとランドスケープ）----------- * / @mediaのみの画面と（最小デバイス幅：320px）および（最大デバイス幅：480px）/ *スタイル* / / *スマートフォン（横）----------- * / @mediaのみの画面と（最小幅：321ピクセル）/ *スタイル* / / *スマートフォン（縦）---- ------- * / @mediaのみの画面と（最大幅：320ピクセル）/ *スタイル* / / * iPad（縦と横）----------- * / @メディアのみの画面と（最小デバイス幅：768ピクセル）および（最大デバイス幅：1024ピクセル）/ *スタイル* /

（情報源：ハードボイルドCSS3メディアクエリ）

便利なツール

スケルトン - レスポンシブモバイルデザインのための美しい定型文
アダプティブから完全レスポンシブへ

ショーケース：美しいレスポンシブデザイン

これらのヒントやデザイン手法が、モバイル画面だけでなくWebブラウジングを備えた一般的なデバイスにも対応する、エキサイティングなレスポンシブレイアウトの構築に向けて動くことをお勧めします。クリエイティブなジュースを流し続けるために、レスポンシブモバイルWebデザインの小さなショーケースをまとめました。よりユニークな機能のいくつかをチェックアウトし、ディスカッションエリアのデザインやトピックについてのあなたの考えを共有するようにしてください.

月を切る