AAA = Accessibility, Accommodation and Aesthetics
When we build web interfaces we should be creative, and try to accommodate the needs of every user keeping in mind accessibility aspect for everyone.
As frontend developers we must take into consideration of various types of screens and sizes such that the results of our work is as responsive as possible. Fulfilling that expectation may cause some problems, especially when we try to display a sizeable amount of data into a narrow mobile phone screen.
Most widely asked question by developers & designers is,
How to fit a “wide data table” on small mobile screens without losing its purpose and readability?
Data tables can be quite wide, and necessarily so, a single row of data needs to be kept together to make any sense in a table.
Jokes apart, but today we will look at 5 common solutions to handle data tables on small screens such as smartphones or tablets in vertical mode — let’s begin!
Shorten — Less is more!
- This the most straightforward solution, in this method we just cut or hide out unnecessary columns on small screens and on keep or display the concise version of table by showing only the crucial data.
- Shorten method of responsiveness can applied to any kind of data.
- It is easy to use & develop. It satisfies all 3A of design.
- Only downside of this approach is we have to compromise on the fact that our end users cannot have view entire data on their screens.
- Shorten method is used on popular websites like Bloomberg, you can see it in action here
From the above list that we discussed, “technique” that you finally choose mostly depends on what kind of data you are dealing with when building a responsive interface.
A good practice is close cooperation with your design team to pick the most reasonable and feasible solution in terms of time consumption and technical requirements needed to apply. 🤓👍🏻💡
If you liked this article and found it useful please don’t hesitate to share it. It motivates me to write more in the future. Thanks in advance 🙏🏻😊
Read the full article here
