~/ linuxnetwork.net

Display Information: A Comprehensive Guide

In the digital age, displaying information effectively is crucial. Whether it's on a website, a mobile app, or a desktop application, how you present data can make or break the user experience. This guide covers the fundamentals of displaying information in web development — from text and images to charts and interactive elements — along with common practices like responsive design and accessibility, best practices for clarity and consistency, and a hands-on example that ties everything together.

Table of Contents#

Types of Information Display#

Textual Display#

Text is the most basic form of information display. It can be used to convey simple messages, instructions, or detailed descriptions. In web development, HTML is used to structure text. For example:

<p>This is a paragraph of text.</p>

Visual Display#

Visual elements like images, charts, and graphs can enhance the understanding of information. In HTML, images can be added using the <img> tag:

<img src="example.jpg" alt="Example Image">

For charts, libraries like Chart.js can be used. Chart.js renders on HTML5 canvas, making it performant for large datasets. Note that canvas content is not directly accessible to screen readers — provide a text summary or data table as an alternative. Here's a simple example of creating a bar chart:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Interactive Display#

Interactive elements allow users to engage with the information. Buttons, dropdowns, and sliders are common examples. In HTML, a button can be created as:

<button>Click Me</button>

And with JavaScript, we can add functionality to it:

const button = document.querySelector('button');
button.addEventListener('click', () => {
    alert('Button Clicked!');
});

Common Practices#

Responsive Design#

With the variety of devices (desktops, tablets, mobile phones), it's essential to make the information display responsive. Using CSS media queries is a common practice. For example:

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

This will change the font size when the screen width is 600px or less.

Accessibility#

Ensuring that the information is accessible to all users, including those with disabilities. Using proper alt text for images (as shown in the image example above) and semantic HTML tags (like <header>, <nav>, <main>) are common accessibility practices. When displaying data tables, use <th> elements for headers and the scope attribute to associate header cells with data cells so screen readers can parse the table correctly. The W3C Tables Tutorial provides detailed guidance on building accessible tables.

Modern CSS Layout#

Modern CSS provides powerful layout tools that go far beyond basic text styling. Flexbox is ideal for one-dimensional layouts (rows or columns), while CSS Grid handles two-dimensional layouts (rows and columns together). For example, a responsive card layout using Flexbox:

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
 
.card {
    flex: 1 1 300px;
}

And the same layout using CSS Grid:

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

Both approaches create responsive layouts without needing explicit media queries for each breakpoint.

Best Practices#

Clarity and Simplicity#

Keep the information display clean and easy to understand. Avoid cluttering the screen with too much data — limit each view to 5–7 primary data points when building dashboards. Use white space effectively to separate content groups. For data tables, limit the number of columns visible at once and provide pagination or filtering. When creating charts, choose the right visualization type for your data: bar charts for comparisons, line charts for trends over time, and pie charts sparingly (they are hard to read when there are more than a few slices).

Consistency#

Maintain a consistent look and feel throughout the application. Use the same font styles, color schemes, and layout patterns. This helps users navigate and understand the information more easily.

Example Usage#

Let's say we are creating a weather application. We can display the current temperature (textual display), a weather icon (visual display), and a button to refresh the data (interactive display).

HTML#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body>
    <h1>Current Weather</h1>
    <p id="temperature">Loading...</p>
    <img id="weather-icon" src="loading.gif" alt="Weather Icon">
    <button id="refresh-button">Refresh</button>
    <script src="script.js"></script>
</body>
 
</html>

CSS (styles.css)#

body {
    font-family: Arial, sans-serif;
    text-align: center;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
}

JavaScript (script.js)#

const temperatureElement = document.getElementById('temperature');
const weatherIconElement = document.getElementById('weather-icon');
const refreshButton = document.getElementById('refresh-button');
 
// Assume we have an API to get weather data
const getWeatherData = async () => {
    const response = await fetch('https://api.example.com/weather');
    const data = await response.json();
    temperatureElement.textContent = `Temperature: ${data.temperature}°C`;
    weatherIconElement.src = data.iconUrl;
    weatherIconElement.alt = data.weatherCondition;
};
 
refreshButton.addEventListener('click', getWeatherData);
 
getWeatherData();

Frequently Asked Questions#

What is the difference between Flexbox and CSS Grid?#

Flexbox is designed for one-dimensional layouts (a row or a column), while CSS Grid handles two-dimensional layouts (rows and columns simultaneously). Use Flexbox for aligning items in a single direction, and Grid for complex page layouts.

How do I make data tables responsive?#

Wrap the table in a container with overflow-x: auto to allow horizontal scrolling on small screens. For more advanced approaches, you can use CSS to stack rows vertically on narrow viewports. See Adrian Roselli's guide on responsive accessible tables.

What is the latest version of WCAG?#

WCAG 2.2 is the latest version, published by the W3C in October 2023. It adds 9 new success criteria on top of WCAG 2.1. Content that conforms to WCAG 2.2 also conforms to WCAG 2.1 and 2.0.

Which charting library should I use for web applications?#

Chart.js is the most popular open-source option, with over 60,000 GitHub stars and around 2.4 million weekly npm downloads. It renders on HTML5 canvas, making it performant for large datasets. Other options include D3.js for highly custom visualizations and Recharts for React applications.

References#

This guide has covered the essentials of displaying information in web development — from text, images, and charts to interactive elements, responsive layouts, and accessibility. Whether you're building a simple page or a complex dashboard, the principles of clarity, consistency, and user-centered design apply. Use semantic HTML for structure, modern CSS layout tools like Flexbox and Grid for responsive designs, and always test with assistive technologies to ensure everyone can access your content.

2026-06