Does anyone know some examples of shiny apps, which look good both on a small screen of a mobile device and a larger desktop screen?
I have looked at some example apps in the Shiny App Galery, but these apps did not look good on a small screen. For example ggplot outputs take too much width etc.
Any advice on how to design a shiny app, which is also (but not only) suited for mobile devices?
Sidebar layout works quite good, then there is something to break the view on smaller screens.
In general probably adding multiple columns / wellPanels should help, generating independent units that can be shown either side by side or on top of each other, with respect to screen size.
Also breaking down the information, adding many smaller plots (tables) instead of a few big.
If you are using shiny elements, then bootstrap (the underlying css/js library used by shiny) is developed with responsiveness in mind. Shiny server outputs can be resized using relative and percentage width (e.g., width = 100% or height=50% as opposed to absolute units width=500px). However, this can get you so far as overriding bootstrap classes is a pain and may cause things to go wonky.
Alternatively, it's a lot of fun to design shiny apps using pure html and css, as well as vanilla js. However, it does take more time to develop. Responsive apps are possible by following semantic html rules, using browser ready layout systems (flex and css grid), and media queries. This may be the right way to go if you have branding and marketing guidelines to follow. Here are some links that you may want to checkout if you choose this way.
There are other design systems out there. Tailwind and Bulma come to mind. I think someone made a Bulma theme for shiny.
EDIT: Yes, there is a a Shiny Bulma package available. I haven't used it yet. Here's the link: https://github.com/RinteRface/shinybulma
Let me know if you have any further questions.
This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.