Web UI

I have a web-app which has like the above attached image,I want to display the same in mobile but in a meaningful and more convenient way,Need some advice for design the above in mobile.

Description of the image/UI:

In the Top left : There is a heading contain the exercise name just below that there is an Image (Exercise image) right to it there is the exercise description and below there are fields where you can add the set 1. Number of set 2. The weight you can add and delete the Sets respectably.

In the down there is Skip and Next button to go next screen .

  • Can you be more specific about the advice you are looking for? – SteveD Aug 8 '16 at 9:06
  • I want to Design the above attached UI in mobile currently its in web,I mean how to arrange those things to display in mobile properly. – IamAbhijit Aug 8 '16 at 9:15
  • Are you targeting iOS and Android? – SteveD Aug 8 '16 at 9:21
  • @SteveD i am targeting both and IOS and Android and Windows at the same time. – IamAbhijit Aug 8 '16 at 9:22

The first step of transforming something from (as far as I can tell) desktop to mobile is to sort your information by importance and then presenting that information under each other, or in multiple steps.

Since you didn't give much context, I can only judge from the image. It seems like you have multiple steps, there are specific UI controls on different platforms for that:

Android: Steppers
iOS: Page Controls (I'm not sure if there's a better control for that)
Didn't find something specific for Windos Phone, but here's a general link.

  • All though your answer is not very accurate but some points like steppers really applicable in my app.What i was asking is how to position these elements (Like Exercise name,Exercise image,Exercise Des,Set 1,Set 2 so on so that its usability and look and feel would look good on mobile device – IamAbhijit Aug 8 '16 at 10:28

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