Redesign a page for mobile, while keeping a "similar" layout to the desktop view, desktop uses a table
Well I have a page that looks decent on desktop, and most of the site is working responsive as well. The website has as goal to provide people to sign up for (sport) tournaments, and allows users to quickly enroll for multiple events at once.
Now the main problem is a page where we request users to put in a list of teammembers, which are basically name-email combinations. (All teammembers will receive an email to give more details).
In the desktop version a simple table is used. This works "perfectly" with logical use of the available screen width. It also allows for natural tabbed browsing.
Now the same page on mobile becomes a huge mess:
Ignoring the top bar and bottom navigation (those are separate issues for which we have already planned improvements). I'm mainly in doubt over the actual "team list". How would I redesign this so that it looks on mobile (also) good? - Ideally the design would be responsive so that it's the same on desktop and mobile.
But if clearer I can also give a complete different view for mobile, while leaving the original desktop view.