I'm working on a website that displays large tables of schedule data. On desktop, I fixed the first two columns so only the rest of the table can be scrolled horizontally. However, I'm unsure how to achieve a similar effect for mobile users. Any suggestions for effective solutions or techniques?
5 Answers
I really like using a card layout for displaying data. You can have the relevant info from the columns organized into cards. Using different colors and sizes for the fields can also help users focus on the important parts. It's similar to how calendar apps show information day by day!
One simple solution is just to tell users to rotate their phones to landscape mode. It might give them a bit more room to see the data without much hassle.
Honestly, large tables on mobile can be a nightmare. If the data is extensive, sometimes it's just better to encourage users to check it out on a desktop instead. Most business apps I’ve seen don’t even attempt to craft a mobile-friendly version for large datasets. Mobile screens just can’t handle it well, especially if you’re trying to get into the nitty-gritty.
Totally agree! Even when it's done well, scrolling through a massive table can be tough to digest. Google has some trouble with their Firestore database on mobile too.
There's really no perfect way to handle this, as Chris Coyier discussed on CSS Tricks. One thing I sometimes do is use Google Sheets integrated with the Google Chart API. I focus on the most important columns and provide a link to the full sheet for anyone who wants to dig deeper.
For better readability, think about making the table vertically scrollable for mobile. You could fix the first two columns, allowing the rest to scroll. Alternatively, a card layout for each row could stack the information, making it clearer. Plus, if space is tight, consider using modals for extra data when clicked!
Exactly! The card approach keeps it visually appealing and easy to read, as long as you manage the height well.