it-swarm-ja.com

複数のクライアント解決のための1つのWebサイト

複数のクライアント解像度または画面サイズの単一のWebサイトを作成するのは大変な作業になるかもしれませんが、デバイスまたは解像度ごとに個別のWebサイトを作成するよりもはるかに保守しやすいと私は考え続けています。

特定のCSSを作成したり、特定のサイズのターゲットデバイスにマークアップしたりするのに役立つデザインまたはWebサイト編集アプリケーションがある場合、それを使用できますか?

6

Dreamweaver CS5はHTML 5メディアクエリをサポートしており、特定のCSSを使用して画面ごとの解像度でプレビューできます。頭に浮かぶのはそれだけですが、Dreamweaverは好きではなかったので、お勧めしません。

2
fluxd

複数のクライアントのための単一のウェブサイトは確かにより保守しやすいです。

最初にすることは、ブラウザが media 属性に従って取得する複数のCSSファイルを用意することです。

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

要素のレイアウトとそのサイズを調整し、一部のデバイスを非表示にして、より小さなデバイスに使用できます。

レイアウトの大きな部分を小さなデバイスで取り除く必要がある場合は、帯域幅を節約するためにサーバーからそれらを削除することをお勧めします。

画面の解像度とウィンドウのサイズは、Javascriptでクライアントで決定できます(これは最も信頼性が高く、テストscreen.width/screen.heightおよびdocument.body.clientWidth/document.body.clientHeight)。主にHTTP_USER_AGENTヘッダーに依存する必要があるサーバー(それをテスト here を他のヘッダーと一緒に)。

別の重要な手法は、ページのレイアウトにHTMLテーブルを使用せずに floating blocks を使用することです。これにより、さまざまな画面解像度やウィンドウのサイズ変更によりよく適合します。

小さなデバイスは解像度がはるかに高く(DPI、1インチあたりのドット数)、読み取りが困難になる傾向があるため、実際の画面サイズにも注意してください。

最良の結果を得るには、両方の手法を組み合わせる必要があります(クライアント側とサーバー側)。 Responsive Web Design の例は印象的ですが、これを実現するにはテクニックを習得する必要があり、まだ制限があります。

ユーザーがブラウザウィンドウのサイズを変更できるため、この質問は、モバイルデバイスが新しく接続されたために尋ねられたとしても、コンピュータについても考慮する必要があると思います。

5
Mart

これは必見のプレゼンテーションで、多くの人がメディアクエリを使用する方法の不足をカバーしています: モバイルウェブの再考

簡単に言えば、メディアクエリをサポートしていない携帯電話(およびその多くがサポートされている携帯電話)は、デスクトップブラウザ向けのスタイリングになる可能性があります。ここで推奨され、私自身が使用しているアプローチは、すべての基本スタイルから始まり、メディアクエリをサポートするdoブラウザのスタイルを徐々に追加します。

Stack Overflowでの関連質問に対する私の回答 を参照してください。

3
David Oliver

モバイルUIとPC/Macではレイアウトが大きく異なるため、CSSだけでは機能しません。ほんの少しのアイデアがサーバー側のレイアウトにあります。たとえば、ページの一部(データグリッド、サイドバー、ナビゲーションバーなど)をレンダリングする必要があります。たとえば、サーバー側のプロセッサとしてASP.NETを使用します。次に、ページレイアウトに次のように記述します。

ナビゲーションバーの場合:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

データグリッドの場合:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

次に、分離コードで:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

等々。

次に、解像度ごとに異なるレンダラー(モバイルなど)を作成する必要があります。 *大きな解像度では、並べ替え可能なヘッダー、サーチャー、フィルター、ソーター、スクロール可能なコンテンツ、JQueryプラグインなどをレンダリングします。*小さな解像度では、単純なhtmlだけをレンダリングします。

主なアイデアが明確であることを願っています。

0
Genius

クライアントごとに複数の「ウェブサイト」は必要ありません(だれもそうは思わないでしょう)が、訪問者のさまざまなセグメント(たとえば、デスクトップ/ラップトップ、ネットブック/ iPad /スマートフォンなど)に複数のポータルを用意する必要がありますモバイル。

CSSではデバイスタイプごとに異なるスタイルシートを指定できますが、これは実際には問題があります。多くのスマートフォンはモバイルスタイルシートを取得しないか、モバイルスタイルシートと画面スタイルシートの両方を使用します。

次に、さまざまなオーディエンスセグメントがさまざまな情報を探します。たとえば、モバイルユーザーは、長い記事を読んだり、高解像度の画像やビデオを表示したりすることにおそらく興味がないでしょう。したがって、ターゲットを絞ったユーザーエクスペリエンスを備えた個別のポータルが最適です。そのため、ほとんどの人気のあるサービスがモバイルユーザー向けに個別のポータルを提供しています。

第三に、保守性は量よりも組織化と単純化についてです。確かに、カスケードとブラウザのハックを多数使用して、メインのサイトをすべてのクライアントに提供する大きなスタイルシートを1つ作成することもできます。しかし、特定のクラスのクライアントに合わせて調整された2〜3個の単純なスタイルシートを維持するよりも、維持するのがより困難になる可能性があります。

最後に、アプリケーションがドメイン分離を使用して適切にモジュール化され、関心の分離を考慮して設計されている場合、さまざまなクラスのデバイス用に新しいカスタムポータルを簡単に設定できます。 MVCパターンを使用している場合は、新しいビューを追加して、同じモデルとコントローラーを引き続き使用するだけです。 AJAXアプリケーションを設計している場合は、Webサービスを作成することにより、ほとんどのビューを再利用することもできます。

0
Lèse majesté

コンテンツに依存しますが、コンテンツをモジュール化できます。

各コンテンツ要素は、ワイド画面の3列に表示できる狭いモジュールに表示できます。解像度が低い場合は、使用する列を少なくできます。

これの良い例は次のとおりです。 http://colly.com/ ページの幅を狭めると、3つのレイアウト調整があります。これを独自のサイトのガイドラインとして使用すると、3つのバリエーションを持つ各モジュールとページレイアウトを設計して、これらの幅のそれぞれに対応できます。

これを実装するには、サイズを調整するコンテナー内に固定サイズのモジュール(おそらくliのような)を含めることができます。 jqueryを使用してコンテナのサイズを調整し、画面の幅(および幅の変更)を検出してから、クラスを追加または削除できます。コンテナの要素にバリエーションを作成できます。例:ul.product_list liおよびul.product_list_wide li

0
Leah

他の人が言ったように、私はCSS3メディアクエリを使用して複数の解像度をターゲットにします。サイト/アプリケーションによっては、これができない場合があります。これは、すべてのエクスペリエンスに同じコンテンツを使用し、画面のサイズに基づいて異なるコンテンツを表示することを前提としています(これは、モバイルエクスペリエンスに常に最適とは限りません)。

この手法を使用するためのリソースは次のとおりです。

レスポンシブWebデザインに関する個別の記事: http://www.alistapart.com/articles/responsive-web-design/

モバイルWebスライドシェアの再考: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

ネイティブでサポートしていないブラウザーでCSS3メディアクエリを有効にするためのJavaScript: http://code.google.com/p/css3-mediaqueries-js/

さまざまなデバイスとサイズのメディアクエリの選択: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

その他の例: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-ウェブサイト/

残念ながら、このようなことを行うWYSIWYGはありません。これを手動で実装するには、知識とスキルが必要です。

私はそれらに反対することをお勧めしますが、デスクトップ/モバイルビューのみに関心がある場合は、Mobifyのようなサービスが存在します。 http://mobify.me/

0
RussellUresti