web-dev-qa-db-ja.com

レスポンシブ電子メールのテーブルに大量のデータ

表形式のデータがメールで送信され、添付ファイルのように見えるシステムがあります。 1つのメールでテーブルの行が50行を超えることがあります。このテーブルビューのソリューションはありますか？スマートソリューションを使用しますか？

ソリューションでは、このメールのレスポンシブデザインを検討する必要があります。また、古いメールクライアントもサポートする必要があります。 Attachment

tablesemailresponsivedata-analysisnewsletter
3
Sushan

次の2つの異なるUXの動作を試すことができます。1.単純なカードソートによってクライアントで定義された情報階層を持つ「情報行またはカード」と呼ばれるもの。情報カードには、より使いやすい方法でいくつかのデータを含めることができます。ここに簡単な例があります：

Information Card

この例では、5つの列（情報のタイプとアイコン、ポリシーの数、有効期限、残り時間などの情報）が3つの情報レベルに簡略化されており、ゲシュタルトの法則により、2つの視覚グループだけが理解できます。このカードは、他の上下に積み重ねることができ、すべてのレコードを通じて任意の情報構造を簡単にスキャンできることをユーザーに教えます。

2番目の方法は、ワークスペースに表示する列をユーザーが保存し、単純な「ギア」アイコンを使用してユーザーがそれらを選択できる「隠された複雑さ」の方法です。ここでは、ユーザーごとに異なる設定（販売用のギャグ）に合わせてインターフェイスが「調整」されていると言えます。

ここに私がクライアントに適用したこのアプローチのスクリーンショット（スペイン語）：

Columns visibility managar

これが役に立てば幸い:)

ご多幸を祈る。

3
Juan Carlos Ferraris

手始めに、テーブルに配置された表形式のデータは、本質的にnot応答します。これは必ずしも悪いことではありませんifデータは大きなテーブルにとどまるのが最も理にかなっています。大きなテーブルをパンおよびズームインすることが実際にデータをダイジェストする最良の方法である場合があります。

しかし、通常、解決策は、レスポンシブレイアウトが必要な場合はそもそもテーブルを使用しないことです。

1
DA01

この種のレスポンシブメールの開発について質問がある場合は、Stack Overflowで質問できます。

このテーブルのデザインについては、次の方法で読者にわかりやすくすることができます。

  1. エントリのテキストを左に揃えます（タイトルは中央揃えにすることができます）。
  2. 2016-12-04の代わりに、非常に小さいスペースに多数の数値（*例：2017-01-03 12:00）があることに注意して、2016年12月4日の形式を使用できます。
  3. 詳細ビューのサムネイルは役に立ちますか。小さすぎる（5、6、7、8行を参照）

最終設計が最良のソリューションであると確信している場合は、それについて上司を説得する必要があります。

0
Anvesh Dunna

ワイドディスプレイの場合は、テーブルを全体表示に含めることができます。 <table>の幅を100％に設定して列のサイズ自体を設定すると、ほとんどのクライアントで上記のスクリーンショットのように表示されます。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>Content</td>
        <td>Longer Content</td>
        <td>Even Longer Content Can Go Here</td>
    </tr>
</table>

モバイルディスプレイの場合、<div>をラップする<table>に水平スクロールを追加してみてください。このようにして、テーブルは変更されず、読み取りに十分な大きさを保ちます。 overflowには モバイルメールクライアントでの適切なサポート があります。

<div style="overflow-x: scroll;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
       <tr>
           <td>Content</td>
           <td>Longer Content</td>
           <td>Even Longer Content Can Go Here</td>
       </tr>
   </table>
</div>

enter image description here

0
Ted

2つの別々の問題のように聞こえます。

  1. 上司はメールの目的やユーザーエクスペリエンスの概念を理解していません。そのための他の質問と回答を参照してください。 UXを重視するように組織をどのように説得しますか

  2. レスポンシブデータテーブル。主なオプションは2つあります。説明したとおりのレイアウトと、フアンが指摘したカードのUIデザインです。 （オーバーフローを使用したスクロールは多くの電子メールクライアントでは機能せず、列を自動的に非表示にすることはJavaScriptに依存しており、明らかに機能しません。）

従来のデータテーブル：いいえ

モバイルのメールは、最大5〜6個の細い列まで快適に表示できるため、メールの列のほとんどを非表示にし、クリックして詳細を表示しない限り、レイアウトが応答しなくなります（Webサイトで、 JavaScriptソリューションを使用できます）。

カードUIデザイン

基本的に、これはデータをテーブルから完全に引き出し、単一のエントリに複数の行を使用できる「カード」を選択します。次に、これをグラフィカル階層で補完して、画面の幅に自然に反応する心地よい表示を作成します。私の投稿で説明しているように、よりアクセス可能で耐久性のあるものにするためのトリックもあります： メール用のカードUI設計による応答性の高いDataTables

単純なテーブルを使用するだけのこのようなものになる可能性があります（メディアクエリなし、非表示なし、すべての電子メールクライアントと完全かつ完全に互換性があります）。 6列を3列に減らし、一緒に行くデータをグループ化して、非常に読みやすくしました：

前：

Traditional datatable

カードUIデザインの変身：

Multiple cards, one for each row, and a total card

0
Nathan