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
I also found two other solutions for presenting tables on mobile that seem interesting:
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
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.