Scaling Charts for Mobile: Best Practices and Tips

Sara M.

·

What's the best way to scale down a chart like this for mobile? Matt J. maybe you would know? Thank you very much.

10 comments

· Sorted by Oldest

Chisom N.
·
·
Ideally, you shouldn’t scale it down Rather make it scrollable — from left to right
💯2
👆2
Matt J.
·
·
Sara M. 👆is also what I think. If mobile is more important than desktop for your users., then I would avoid a table layout and do a card layout.
Sara M.
·
·
Thank you. I don't know for sure what's more important. Would it be better to do a chart for desktop-tablet and cards for mobile?
Catherine H.
·
·
For the love of good design please don’t make a data table that is that complex scroll on mobile. From a UX standpoint making that scrollable on a mobile phone would be awful and pretty useless If it’s a few columns that can easily be readable in the main viewport fine. But that’s trash from a usability standpoint on a mobile device.
Matt J.
·
·
yeah not sure that I think its quite that bad - plenty of examples of it happening out there and I've implemented similar without much of an issue but it really depends on the details of things too. retool.com/pricing But yeah, I would generally avoid tables for pricing if mobile is important.
Sara M.
·
·
Thanks for the input. This makes a lot of sense. I like the concept of a chart for desktop because it's very clear. Maybe it would be a good idea then to have a desktop version chart and a mobile version with cards. Any setbacks to that?
Bernd K.
·
·
I use to replace a table by a drop-down selection on mobile.
Sara M.
·
·
Bernd K. can you show me what you mean?
Bernd K.
·
·
Sara M. here is an example https://components-demo-2.webflow.io/table You need some JS to control the content. If you are interested I can share the script and instructions (4 free).
🙌1
Sara M.
·
·
Thanks for sharing. I would probably create it as tabs. it's a good idea. Thank you

Chisom N.
·
·
Ideally, you shouldn’t scale it down Rather make it scrollable — from left to right
💯2
👆2
Matt J.
·
·
Sara M. 👆is also what I think. If mobile is more important than desktop for your users., then I would avoid a table layout and do a card layout.
Sara M.
·
·
Thank you. I don't know for sure what's more important. Would it be better to do a chart for desktop-tablet and cards for mobile?
Catherine H.
·
·
For the love of good design please don’t make a data table that is that complex scroll on mobile. From a UX standpoint making that scrollable on a mobile phone would be awful and pretty useless If it’s a few columns that can easily be readable in the main viewport fine. But that’s trash from a usability standpoint on a mobile device.
Matt J.
·
·
yeah not sure that I think its quite that bad - plenty of examples of it happening out there and I've implemented similar without much of an issue but it really depends on the details of things too. retool.com/pricing But yeah, I would generally avoid tables for pricing if mobile is important.
Sara M.
·
·
Thanks for the input. This makes a lot of sense. I like the concept of a chart for desktop because it's very clear. Maybe it would be a good idea then to have a desktop version chart and a mobile version with cards. Any setbacks to that?
Bernd K.
·
·
I use to replace a table by a drop-down selection on mobile.
Sara M.
·
·
Bernd K. can you show me what you mean?
Bernd K.
·
·
Sara M. here is an example https://components-demo-2.webflow.io/table You need some JS to control the content. If you are interested I can share the script and instructions (4 free).
🙌1
Sara M.
·
·
Thanks for sharing. I would probably create it as tabs. it's a good idea. Thank you