web-dev-qa-db-ja.com

レスポンシブデザインと個別のアプリケーション/ビュー

既存サイトのリニューアルプロジェクトに携わっています。デザイナーチームは私たちに-エンジニアリングチーム-サイトがどのように見えるべきかについての4つの別々のHTML/CSSプロトタイプを提供しました：

  • デスクトップブラウザ。
  • テーブルデバイスでは、デスクトップビューのデザインは似ていますが簡略化されています
  • ハイテクスマートフォンのデザインはモバイルアプリのようで、デスクトップやタブレットのデザインとは大きく異なります。また、表示されるコンテンツが少なくなります。
  • ローエンドのスマートフォン。前例のデザインを簡略化したバージョンですが、非常によく似ています。

私の最初の衝動は、レスポンシブWebデザインを使用して1つのHTML/CSSプロトタイプを作成し、デザインチームによって作成されたプロトタイプをマージすることでしたが、現在、いくつかの懸念があります。

  • 異種のプロトタイプをマージすると、低品質のコードが生成される可能性があります。
  • 不要なモバイルデバイスにコード/ファイルを送信している可能性があります。
  • たとえば、あるオプションがタブレットに存在する必要があるが、スマートフォンでは非表示にする必要がある状況に対処する必要があります。 CSSを使用して非表示にすることは帯域幅の浪費になる可能性があるため、サーバー側のコードが必要になる可能性があります。

そのため、2つの異なるWebアプリケーションを構築するというアイデア、またはさらに良いことに、 Spring Mobile -のようなサーバー側フレームワークを使用して同じWebアプリケーションで2つのビューを処理するというアイデアが検討されていました。私はレスポンシブデザインの専門家ではないので、この状況やこの問題に取り組むための標準的な方法が最善のアプローチであるとは知りません。

PS：言うに値する場合は、Portlet ContainerとしてWebSphere Portalを使用してポータルを構築し、Spring Portlet MVCを使用してポートレットを構築しています。

web-developmentmobileresponsive-design
3
Carlos Gavidia-Calderon

私はあなたの最初の衝動を追って応答します-適切に実装されていると、ユーザーエクスペリエンスが向上すると思います。レスポンシブCSSライブラリといくつかのjavascriptMVCフレームワーク/テンプレートライブラリを使用して、クライアント側で手間のかかる作業を行います。

あなたの懸念に対処する：

異種のプロトタイプの処理による低品質のコード

私は、バトルテスト済みのJSおよびCSSライブラリとベストプラクティスを使用すると、ここで役立つと思います。バックボーン、ノックアウト、またはangular）に沿って考え、クライアントサイドコードに構造を提供します。

モバイルデバイスへの不要なコードファイルの送信

これはそれほど大きな問題にはならないと思います。最初にモバイル機能を構築し、そこから始めます。これにより、コア機能が確実に作成され、そこからより大きなデバイスに構築できるようになります。物事を軽く保つために必要最低限​​のものだけを使用してください。テンプレートエンジンを使用している場合は、ネットワーク経由で送信するHTMLの量を減らすことができます。サーバー側でJSファイルとCSSファイルを組み合わせて縮小し、モバイルデバイスに送信するものを最小限に抑えます。

HTML要素を非表示にするときにCSSを浪費する

テンプレートエンジンを使用します。これらは、クライアント側のMVCフレームワークに組み込むことも、個別に組み込むこともできます（Mustache、Handlebars）。これにより、余分なHTMLを送信しすぎるのを防ぐことができます。さらに、ボートが浮いている場合は、特定のセクションを遅延読み込みできます。

結論

よく考えられたレスポンシブWebデザインは、それぞれの問題を回避または最小化できる必要があります。これらの問題を打ち消すために、オープンソースコミュニティでは多くの作業が行われてきました。これらのソリューションを検索して、プロジェクトに役立つかどうかを確認することを強くお勧めします。

最終的にはチームの決定ですが、膨大な数のライブラリを考慮し、プロジェクトの非機能要件（タイムライン、コスト、スタッフの知識）内でチームがサポートできる最高のユーザーエクスペリエンスを選択するようにしてください。

人気のあるライブラリ

JS MVC：バックボーン+テンプレートライブラリ（以下を参照）、ノックアウト、Angular、Ember

テンプレート：ハンドラーバー、口ひげ

CSS：Twitter Bootstrap、Foundations、Skeleton

縮小/組み合わせツール：Yahoo YUI、UglifyJS

その他のJS：アンダースコア、必須

これらは私が最もよく耳にする例です。私は個人的にKnockoutとTwitter Bootstrapを使用しました。私はバックボーンとファンデーションもいじってみたいと思っています。この領域で行うべき研究はたくさんあり、単一の回答では実際には十分なスペースがありません。これらのライブラリとツールの調査を開始する場合は、適切なエンドポイントに到達するための多くの情報を見つける必要があると思います。

5
Mike Cellini