レスポンシブレイアウトを設計するとき、iPadのレイアウトがデスクトップと同じになると想定するのは正しいことですか？
レスポンシブレイアウトを設計するときは、2セットのワイヤーフレームを使用する傾向があります。私はモバイルとデスクトップの両方を対象に設計しており、サイズの関係でiPadはデスクトップと同じレイアウトを採用すると想定しています。 （これは、iPadサイトの機能がデスクトップと同じである場合です）。これは正しい仮定ですか？ iPadのレイアウトをもっと考慮して、このプラットフォーム用に別のワイヤーフレームを設計する必要がありますか？ （iPadサイトはデスクトップと何の違いもありませんが）。
私が持っていたもう1つの質問は、対話が同じなので、iPadのデザインをよりモバイルに合わせるべきではないということです。 iPadで遊ぶためのより多くの不動産にもかかわらず。とにかく、モバイルを設計することはあなたのためにこれを最初に行いますか？
デザインとレイアウトに関しては、物理的な寸法と方向性があります。 CSSでは、向きはディスプレイの高さ対幅の比率によって決定されます。ブラウザーウィンドウの高さが幅よりも大きい場合は、縦向きと見なされます（モニターを縦向きに配置）。ブラウザーウィンドウが高さよりも広い場合は、横向きと見なされます（ほとんどのモニターは通常の向きです）。
タブレットデバイスの市場は、iPadの定義された寸法（1024 x 768）をはるかに超えており、iPad mini（まだ1024 x 768ですが、物理的なサイズは小さいです）などと比較すると、Androidおよびその他のプラットフォーム...状況によって異なります。あなた、CEO、そしてクライアントがすべてのタブレットが同等に作られているiPadを持っているからといって、ターゲットのオーディエンスやユーザーなどを調査することを検討し、想定の罠に陥らないことをお勧めします。
レイアウト/デザインとサイズ以外の考慮事項があります。タブレット（一般的にはモバイル）では、帯域幅に関する同じ仮定をおそらく使用しないでください。したがって、デスクトップデザインにCSSファイルとJSファイルをロードするための5つのメインHTTPリクエストがあり、問題のページにUIとコンテンツの間に100個の画像がある場合は、おそらく異なるエクスペリエンスをデザインする必要があります。さらに、たとえば、JSアニメーションは、多くのモバイルデバイスで劇的に遅く/不規則です。したがって、さまざまなインタラクティブな品質を設計したい場合があります。
上記の情報を組み込んだ最後の設計上の考慮事項は、可能性/能力を最小限に抑えて設計することです。
一般的に言えば、ハンドヘルドデバイスを3つのカテゴリに分類できます-小（ほとんどのブラックベリーなど）、中（iPhone/iPod touchサイズ）、および大（最近のAndroidデバイスの一部）。 （カットオフをどこにするかはあなた次第であり、ハンドヘルドデバイスがタブレットになるかどうかはあなた次第ですが、一般的なサイズに関する情報を提供しているサイトがあります。）また、チャンスこれらのデバイスは、セルラーネットワークを介したデータ接続を介してサイトにアクセスします。
一般的に言えば、タブレットデバイスを2つのカテゴリに分類できます-小（iPad Mini、Kindle Fireなど）と中（iPadなど）。何かが13インチ以上になると、私はそれをモニターとして分類する傾向があります...しかし、それは私だけです...主なポイントは、これらのデバイスがディスプレイとガットが1つのユニットであるという点で自己完結型であることです。ラップトップまたは電子ブック。これらのデバイスはおそらくWiFi経由で接続しますが、携帯電話データネットワーク経由で接続することもできます。これは、全体的なUXストーリーボードとデスクトップ、タブレット用にまとめたワイヤーフレームの違いを検討する際に考慮すべき事項です。とハンドヘルド。
デスクトップは、小（電子書籍）、中（大部分のラップトップ）、大（大体19インチ以上のサイズのモニター）に分けることもできます-特大（プロジェクターやテレビ）を検討することもできます。
うまくいけばこれをまとめます。物理的な空間の観点から-デスクトップとタブレットのエクスペリエンスを合わせることができます。ただし、3つの基本的な違いを考慮する必要があります。（1）WiFiで接続されているか、何らかの方法で固定されているほとんどのデスクトップと比較して、帯域幅が遅い可能性、（2）使用されている異なる入力デバイス（スタックフォームの太字ボタンなど） 、入力デバイスとしての指には不向きです-小さすぎて他のボタンに近すぎます）、および（3）プロセッサやRAMなどのハードウェアの違い。また、ストーリーボードの残りの部分も考慮する必要があります。たとえば、不透明度の変更やアニメーションは一般に非常に高価です。そのため、非常にアニメーション化された（顧客から「インタラクティブ」と一般的に聞こえるもの、またはおそらく「エンゲージメント」を求めてより多くのものが）デスクトップエクスペリエンスを持っている可能性があります。ただし、タブレットでは、ユーザーのバッテリーを殺し、非常に弱いプロセッサ（相対的に比較すると）かなり重いため、JavaScriptアニメーションでのCSS3トランジションの生成を可能にするために開発時間を増やす必要があります。また、環境を考慮してください。ハンドヘルドデバイスは、通常、探しているものにすばやくアクセスするために使用され、ゆったりとWebを閲覧するものではありません（他に利用できるものがない限り）。タブレットはよりハイブリッドです。デスクトップやラップトップなどは、のんびりできる傾向があります（そのため、アニメーションに5秒かかる、つまりループが繰り返されることはあります）。
インタラクションではなく解像度のみについて話している場合は、iPad /トップレンジAndroidタブレットをデスクトップと見なすことができます。タブレットは、コンテンツを単一のビューに収めるのに十分な解像度を持っているためです。
ただし、インタラクションについて考えるときは、デスクトップ（マウス+キーボード）とモバイル（タッチ+ジェスチャー）を区別する必要があります。
ほとんどの場合、次の4つのレイアウトで十分です。
- スマートフォンのポートレート
- スマートフォンの風景
- タブレットのポートレート
- タブレットの風景
それぞれに使用する正確な寸法は少し異なる場合がありますが、実際にはさまざまなレイアウト間の境界寸法を選択しているだけなので、ほとんど問題になりません。
ほとんどのアプリケーションでは、大きい（約10〜11インチ）タブレットで機能するものがデスクトップレイアウトで正常に機能します。デスクトップインタラクションは常にタブレットで機能するとは限りません（特にホバー）、タブレットインタラクションは通常デスクトップでうまく機能します。したがって、最初にタッチ操作を設計するだけでタブレットとデスクトップ間の操作を変更する理由はあまりわかりません。
現在の合意されたベストプラクティス（変更）は、デバイスサイズのセットを念頭に置いてnotを設計することですが、コンテンツに対して適切に機能するレイアウトに焦点を当てることで、コンテンツを適切にレイアウトすることができます任意の幅で。常に新しいデバイスを入手しているため、人気のあるデバイスのサイズに重点を置くことは、陳腐化する傾向があります。
テストのために、ブラウザーを徐々に絞り込み、コンテンツが常に適切にレイアウトされるようにします。ブレークポイントを選択するときは、潜在的なデバイスの幅に注意を払いません。
もちろん、この方法は、デスクトップとは大幅に異なるコンテンツをタブレット/電話に配置する場合は機能しません。