How to transform desktop UI to smartphone UI?

Question

I have a live demo here, based on HTML, CSS, JS and Metronic. It's currently planned to be displayed on desktops, yet it's quite responsive (a little bit...) and I'd like to convert it to be displayed on mobile devices (4.7" and tablets). Can you tell me how to get started please? I have a programmer with HTML-CSS-JS skills.

I aim to display the table (as it looks now) including all columns, while users may have to scroll down to see the second table. The display may contain another tables with the same width (down to the second one).

The data on this display is read-only, while users may want to enlarge the display and click on any given cell in order to see a tooltip or an attached comment.

I assume the big challenge here is about transforming it to 4.7" smartphones (rather than tablets...)

Please tell me how to get started. If you think it does not make sense to transform this to 4.7" devices please let me know. Thank you!

Answer 1

One thing I like to always do, is looking at if from the other way around and simply go mobile-first, so it definitly makes sense to try and do this exercise. The limitation of mobile phones lets you focus on the really important parts. When going to a tablet or desktop you'll notice that adding stuff is much easier than removing stuff.

For the tables, I'd advice, again, to look at what's really important (for the user) and if they, in fact, need to be in seperate columns. For instance, 3 columns name, last name and mail address, could be in one column instead of those 3. Perhaps you can also concat some data into one column. Above all, try to limit the horizontal scroll as much as possible, unless you can make it obvious that there is a horizontal scroll. One big no-no in your demo is the nested scrollbars, they hide information while not making it clear to the end user, especially on mobile devices you'll notice that most of the times, scrollbars aren't displayed at all unless while they are being used.

There are some great grid systems available that help to make something responsive, my favorite is "foundation" but there are a few other available that can do the same.

Answer 2

you need a different approach here.

The user is probably only interested in exceptions (red, orange, blue?) so you should render the display differently.

I would advocate having a simple traffic light screen with each colour having a number beside it green (14), orange (3), red (2), blue (1). On click user goes to listing of all the issues of that classification grouped by server name. You can collapse the servers into tabs if space is an issue