2

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.

Desktop view

Now the same page on mobile becomes a huge mess:

Mobile view

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.

Improve this question
1
  • 1
    Responsive doesn't mean the same on mobile and desktop but instead adapts to fit the device.
    – Luciano
    Jul 30, 2019 at 8:17

3 Answers 3

Reset to default
3

This is one of the reasons some designers prefer to use the mobile first approach, as it forces you to fit everything you design in the tiny screen estate you do have. If you start with desktop, you may end up with something that cannot be scaled down. Your table for example is OK for desktop, but far too information heavy for mobile.

You could go back to the drawing board and see if you can split the information needed per member, instead of forcing both fields in one row. This will be more mobile friendly, but it will take a bit more space on desktop, though looking at the example screen, lack of space isn't an issue there.

Not saying this mockup is the best solution, but it's one direction you could go.

Mobile design, splitting the table into content blocks

Improve this answer
1
  • I think it might end up this design. however with teams of 20-40 people (realistically) this really makes it hard to "scroll to the position of the member you want to change".
    – paul23
    Jul 30, 2019 at 15:51
0

You can add a Next and Previous button to the right of name:

enter image description here

Improve this answer
2
  • 2
    Hmm wouldn't this make people "forget" the email adresses?
    – paul23
    Jun 30, 2019 at 13:19
  • First I thought about putting the next button with the @ inside next to the trash can, but I think it will be many buttons. Anyway my answer it's just to show that a mobile phone has a different dimension, it's not that static: to change the content simply by moving a finger across the screen. This gives many more possibilities.
    – Danielillo
    Jun 30, 2019 at 21:58
0

You should embrace the limitations of the device; mobile phones have screens that are narrow and tall. Adapt your layout to fit it.

Instead of having the name and email side by side put them under each other, check this quick mockup (ignore the proportions).

quick mockup

It's similar enough (same elements visible simultaneously in the screen) that users won't be confused by the layout change.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.