I want to collect ideas about Dash app for small screens like mobile phones. I created an app using Dash findatafox.com But I am not happy how some of the charts look on xs, sm and md screens and I am running out of ideas how to manage content for the users using such screens. Should I hide the charts on small screens or put different charts/tables there?
I used Bootstrap for managing different screen sizes, which does its job, but some of the charts are not usable on small screens. So how do you guys manage content for mobile phones?
I had a quick look at your website and I think a lot depends on the purpose, users will open it for. If it is for all information you could possible give them, I would say, communicate not meant for usage on mobile and maybe add an extra filter every now and then.
For instance on this page, sector as multiselect option (to enable comparison) and start with one sector selected.
If you really want to make it useful on mobile a user requirements approach would me more logical. Why do they open your app, what info do they need and what is the fastest, cleanest way (remove all clutter) to get them from opening your site to the answer/ information they need. Apart from an AI/ML interface.
Theirs a few ways you can test on different screens, as you are currently using the chrome inspector, you can click on dimensions and set any specific size you’d like to play with. Using that method I was able to get a dash application configured for my watch.. which is the smallest application I’ve ever made you can read a bit about it on a post I made a while back: Pip - Blog 📝
Outside of that, a cool little trick I’ve found was to re-define your host in your app.run: app.run(debug=True, port=8252, host="0.0.0.0") Then figure out your IP address, I’m on a mac so i was able to find my wifi IP address in my settings:
Then grab your phone, ipad or watch or whatever device you own and want to test your dash app on and go to the url: http://<your-ip-address>:<port> obviously replace <your-ip-address>:<port> with your actual IP address and port.
You are able to easily run your dash applications on your local network and test it on any device in your house.
Outside of that, dash-mantine-components is imo the best component library ever made for the dash framework. Dash , Is amazing specifically the hiddenFrom and visibleFrom props are really helpful in designing for mobile / desktop.
Check out this new application I’ve been building:
Its still using a sandbox for the stripe payment system so theirs no real products offered just yet.. but its a great indicator of an application that was designed for mobile compatibility and showcases the power of dmc in creating elegant design.
On a final note, this is a topic that every software developer should be focused on! ~60% of the traffic one will receive on their application will be from mobile. So building mobile first software is a vital design practice to making an app that is successful imo.
Hi Ivan, mobile customization with dash can be difficult, right? Instead of stuffing everything, try a “progressive disclosure” approach: Show essential goods, and if they like, let users expand for more expansion. It keeps things clean and usable.
In addition, do not be afraid of tailor-made content, especially for mobile, what works on desktop doesn’t have to work on everywhere. Think bite-sized info, simple visual and fast interaction.
thank you for useful inputs. PipInstallPython your watch project is just another level:) and it is nice to see that it is possible to use Dash also in watch dimension.
Dash-mantine-component looks nice and it seems to follow same logic as dash-bootstrap-components which is useful.
Local testing within my local network works for me fine as well. Glad that you mention it. It is always good to test it with some actual devices than just with developer tools inside browser. It helped me discovered some bugs I was unaware of. What im still struggling with is testing on different browsers. For example I found out that some features are working fine in Safari, Chrome and Mozilla, but are not working at all in Brave. And I only discover it by accident. How do you guys test different browser engines? I was thinking of something like selenium but have no experience in it. Could you recommend something what can be automated inside CICD pipeline?
Ideally, start with answering the question Who is the target audience of your application?
Based on how you answer that than depending on country, age demographic and the goals you have, narrow down your application being used on what web browsers, what devices? Test specifically on those things, focus on the 95% big picture, ignore the 5% small details.
you can read a bit about it on a post I made a while back: 
You are able to easily run your dash applications on your local network and test it on any device in your house.