Mobile - supporting interactions and workflows that work well both on mobile and desktops

Hi all,
In this post, I’d like to discuss how to best support interactions and workflows that work well both on mobile and desktops.
Some of the UI elements require completely different interactions and workflows on mobile and desktop (e.g. wide tables or menus). To support such behavior, I think we should use the Bootstrap framework - which is the most popular framework for building responsive, mobile-first sites.

Why you should use Bootstrap in our project:

  • it is an easy and effective tool for building responsive websites and web applications,
  • easy to add to project,
  • Bootstrap is equipped with a highly responsive 12-column fluid flexbox-based grid system that automatically scales up or down according to the screen resolution of a device,
  • Bootstrap divides different devices into five predefined grid classes on the basis of viewport width: xs, sm, md, lg, and xl, from mobile devices (xs) up to smartphones (sm), tablets (md), desktops/laptops (lg), and desktops (xl).

It seems that one of the biggest challenges in this topic will be the appropriate and user-friendly design of the tables. In particular, the Stockamanagement module is mainly based on displaying and filling out forms that are currently presented in the application in the form of tables.

Thanks to Bootstrap, this task can be easier because responsive tables in Bootstrap allow tables to be scrolled horizontally with ease. I’m attaching an example where you can test it Codeply v2
screen2

I also found two other solutions for presenting tables on mobile that seem interesting:

  1. Displaying successive columns from the row one below the other - we have a column name and value in each row. For this solution, we use bootstrap with little css and JS customization. I’m attaching an example where you can test it Codeply v2

  2. Displaying only some columns on mobile mode, and after pressing a specific row, expanding the rest of the information. I found this solution in sample projects on the bootstrap website - you can test it by selecting Tables from the menu and then Responsive Datatables Preview - Bootstrap Themes


Please let me know what you think about using Bootstrap in the project.

Best,
Aleksandra

At the last meeting, we wondered if it is possible to display components completely differently on mobile and desktop.
This is possible thanks to the use of a “breakpoint” in terms of width (Breakpoints · Bootstrap v5.0). Let’s say that width is 800px. Below this width, our mobile content will show, and above that width, our desktop content will take over and hide the mobile one.

I’m attaching an example where you can test it Codeply v2

Best regards,
Aleksandra

Hi @Aleksandra_Soltys , a quick clarification,

In the last call I wanted to get across that we may a different component on mobile vs desktop web.

For example:

  • On desktop we might have a table
  • On mobile we might have a product selector component that then leads to a dialog for updating the SoH. Maybe no table at all.

We don’t know the UI specifics at this point, so the point of the exercise is to figure out if and how we can use different components in different devices.

Hi @joshzamor,
It is possible. In the example above, I would like to present that on the same page, depending on the width of the screen, we can show completely two different elements.
The example is simple - when we display the application on the desktop, we see the tables, but when we display it on the mobile, we see the picture.
I am attaching a link to a video with an example https://drive.google.com/file/d/1G5oO0R7pbMO5AhzPKOzNM3C6Q7qyEagN/view?usp=sharing

Similarly, we can create the example you gave above:

  • On desktop we might have a table
  • On mobile we might have a product selector component that then leads to a dialog for updating the SoH. Maybe no table at all.

Best regards,
Aleksandra

This discussion around supporting both mobile and web seems to be missing the mark a little, at least in my opinion. The focus of this mobile MVP was supposed to be around the creation of a mobile version of OpenLMIS that is able to leverage the advantages of a mobile device and tailors the initial workflow, Physical Inventory, to that medium. In my mind, I am not sure why are are now including discussions about having some common workflows between both the web and mobile applications. That was never part of the overall goals and seems to complicate this MVP considerably (not to mention the high likelihood of introducing new bugs in the web app).

If the technical approach for this mobile app is going to leverage PWA that is fine (though I do wish we were just creating a native app, given the project goals), but I do think that we should consider this work as separate from the web app and approach the mobile work in such a way so that it does not impact the primary web UI.