How do you design tables and graphs that work well on different screen sizes and devices?

How do you design tables and graphs that work well on different screen sizes and devices? This is a common challenge for web designers who want to create accessible and engaging data visualizations. In this article, you will learn some basic principles and best practices for designing responsive and accessible tables and graphs.

1 Why accessibility matters

Accessibility is the practice of making your web content usable and understandable for everyone, including people with disabilities. Accessibility is not only a legal requirement, but also a moral and ethical responsibility. By designing accessible tables and graphs, you can reach a wider audience, improve your SEO, and enhance your user experience.

Add your perspective

2 What makes a table or graph accessible

To ensure accessibility, a table or graph should have a descriptive title and caption that summarize the main point of the data. The language, labels, and formats should be simple and consistent, avoiding jargon, abbreviations, and ambiguity. Additionally, alternative text or a long description should be provided for screen readers and other assistive technologies. Furthermore, it is important to follow the contrast and color guidelines for web accessibility such as using sufficient contrast between text and background, avoiding color-only cues, and providing color-blind friendly palettes. Lastly, the table or graph should be responsive and adaptable to different screen sizes, devices, and orientations without losing functionality or readability.

Add your perspective

James A.

Content Designer at HM Revenue & Customs
Report contribution
One thing that's often overlooked is making sure your column or row headings are correctly tagged. Whether that's in whichever CMS you're using or manually, headings need to be tagged to provide the anchors to help people navigate. Bold text and colours aren't enough.

Like

3 How to design responsive tables

Responsive tables can be designed in various ways to adjust to the available space and device. For instance, relative units such as percentages or ems are preferable for table width, height, and padding. Media queries can be used to change the table style or behavior based on the screen size or orientation. Flexible or fluid layouts enable the table to expand or shrink as needed. Additionally, columns or rows can be hidden or shown depending on the importance of the data, and scrollable or collapsible tables allow users to access overflowed data. Finally, data tables or grid layouts display table data in a grid-like format that can be easily rearranged or resized.

Add your perspective

Sky C. S.

Digital analytics leader in technology, glass & ceramics industry
Report contribution
Use % instead of pixels or points to size tables, charts, images, etc. as it adjusts based on the current font size and is scalable to fit a variety of screen types.

Like
Beth Moore

Executive Transformation CX/UI/UX Leader for Innovation of Retail Giants, HealthCare, OEM: Customer Experience, User Experience, Driving Strategy & AI | Global
Report contribution
When you hit specific breakpoints, our team likes to turn a good solid table into cards. It's good for the user and has been known to cure headaches. All kidding aside, Once you identify the main heading content, you can use that to house repeatable data within each card, making it easy for the user to scan the content in each component. then that whole component can become clickable/tappable, and you can take them to more detail if you want to.

Like

4 How to design responsive graphs

Responsive graphs are graphs that adapt their shape and content to the available space and device. To design responsive graphs, you can use scalable vector graphics (SVG) or canvas elements instead of images or static files for graph rendering. Media queries can also be applied to change the graph style or behavior based on the screen size or orientation. Additionally, there are responsive or adaptive chart libraries and frameworks, such as Chart.js, D3.js, Highcharts, or Google Charts, that provide ready-made solutions for creating and customizing responsive graphs. Finally, you can use responsive or adaptive design patterns to modify the graph elements or features based on the available space.

Add your perspective

Artemii L.

Founder & Art Director of Lemma.Studio, Judge Awwwards
Report contribution
Another way to create responsive graphs is to define the main elements. You need to clearly define what is important and what is secondary. Often, not all parameters will be necessary for different categories of users. You should find the necessary middle between the data and separate them with additional tabs in the mobile version. Thus, you get a full-fledged chart on the desktop and tablet versions, and on the mobile version, you separate the information into additional tabs.

Like
Tom R.

Growth Marketer | Strategizing, organizing, and leading projects to facilitate growth through marketing
Report contribution
One thing I've found helpful is making sure that a table on mobile has an easy horizontal scroll experience by freezing the first column and allowing users to scroll through the other columns' information. This keeps the user oriented so they can easily connect data with the entry the data refers to.

Like

5 How to test and evaluate your tables and graphs

The final step in designing accessible and responsive tables and graphs is to test and evaluate them on different devices, browsers, and screen sizes. Various tools and methods can be used to test and evaluate your tables and graphs, such as browser developer tools or online simulators to inspect the code and view the tables and graphs on different screen resolutions. Additionally, accessibility checkers or validators can scan the code for errors or warnings related to web accessibility standards. Lastly, user testing or feedback from real users interacting with your tables and graphs can provide valuable data from surveys, interviews, or usability tests.

Add your perspective

Susan Hill

Art Director | UX/UI Designer | Digital and Print Designer | Marketing and Communications
Report contribution
I like the last line here, the most important line, the one that emphasizes doing user testing or getting feedback from “real users” interacting with your tables and graphs. If the real users don’t enjoy using your app, or if they can’t use your app the way you want or expect them to, then you have a big problem. I’ve witnessed, and experienced for myself, many instances where users can’t hear the audio cues, can’t effectively tap a particular button they’re supposed to because their finger is too hard or the button is unresponsive, or they literally can’t see what’s on the screen because their vision is poor. Focusing on the real users is essential to the successful use of your app.

Like

How do you design tables and graphs that work well on different screen sizes and devices?

1

2

3

4

5

1 Why accessibility matters

2 What makes a table or graph accessible

3 How to design responsive tables

4 How to design responsive graphs

5 How to test and evaluate your tables and graphs

Web Design

Rate this article

Thanks for your feedback

More articles on Web Design

More relevant reading

How do you design tables and graphs that work well on different screen sizes and devices?

1

2

3

4

5

1 Why accessibility matters

2 What makes a table or graph accessible

3 How to design responsive tables

4 How to design responsive graphs

5 How to test and evaluate your tables and graphs

Web Design

Rate this article

Thanks for your feedback

Explore Other Skills