モバイル用にページを再設計し、デスクトップビューと「類似した」レイアウトを維持しながら、デスクトップでテーブルを使用する
さて、私はデスクトップ上でまともなページを持っています、そしてサイトのほとんどは同様にレスポンシブに働いています。このWebサイトの目的は、（スポーツ）トーナメントにサインアップする人々を提供し、ユーザーが一度に複数のイベントにすばやく登録できるようにすることです。
ここでの主な問題は、基本的に名前とメールの組み合わせであるチームメンバーのリストを入力するようユーザーに要求するページです。 （すべてのチームメンバーは、詳細を説明するメールを受け取ります）。
デスクトップ版では、単純なテーブルが使用されます。これは、使用可能な画面幅を論理的に使用することで「完全に」機能します。自然なタブブラウジングも可能です。
これで、モバイルの同じページが非常に混乱します。
上部のバーと下部のナビゲーションを無視します（これらは、既に改善を計画している個別の問題です）。私は主に実際の「チームリスト」に疑問を持っています。これをモバイルで（また）見栄えがするように再設計するにはどうすればよいですか？ -理想的には、デザインがレスポンシブで、デスクトップとモバイルで同じになるようにします。
ただし、より明確な場合は、元のデスクトップビューを残しながら、モバイル用に完全に異なるビューを提供することもできます。
これは、一部の設計者がモバイルファーストアプローチの使用を好む理由の1つです。これは、所有している小さな画面領域に設計するすべてのものを適合させる必要があるためです。デスクトップから始めると、縮小できないものになってしまう可能性があります。たとえば、テーブルはデスクトップでは問題ありませんが、モバイルでは情報が多すぎます。
両方のフィールドを1つの行に強制するのではなく、図面ボードに戻って、メンバーごとに必要な情報を分割できるかどうかを確認できます。これはよりモバイルフレンドリーになりますが、デスクトップでは少し多くのスペースが必要になります。サンプル画面を見ると、スペースの不足は問題ではありません。
このモックアップが最善の解決策であるとは言わないが、それはあなたが行くことができる一つの方向です。
nameの右側に[次へ]ボタンと[前へ]ボタンを追加できます。
デバイスの制限を受け入れる必要があります。携帯電話の画面は狭くて背が高くなっています。それに合わせてレイアウトを調整します。
名前とメールを並べて配置する代わりに、この簡単なモックアップを確認してください（比率は無視してください）。
レイアウトの変更によってユーザーが混乱しないように十分に似ています（同じ要素が画面に同時に表示されます）。