Responsive Web Design

• Make web pages look good and function on any device:
  • Mobile:
    • Smartphones
    • Tablets
  • PC:
    • Laptops
    • Desktops
  • TV
• Prioritize accessibility and usability across devices.
• Seamless and user-friendly experience.
• Increased importance since mobile device usage increases steadily.
• One codebase to maintain ensures cost-efficency.

Responsive Content

• Different devices have different needs.
• Increase size of content as size of screen decreases.
• Responsive content also includes context-awareness changes, based on:
  • Location.
  • Preferences.
  • Device being used.
• Different versions of content:
  • Text: Scalable fonts, typography that adjusts line height and letter spacing, dynamic content length.
  • Lists: Collapsible/expandable lists.
  • Charts: Scalable SVG or canvas-based charts, interactive charts.
  • Images: Responsive image formats, adaptive resolutions.
  • Videos: Adaptive resolutions, aspect ratios that adapt to screen size.

Responsive Tables

• Tables that adapt to different screen sizes.
• Ensure tables are readable on:
  • Mobile
  • PC
  • TV
• Methods to make tables responsive include:
  • CSS Container Queries.
  • Flexbox.
  • Tables with Horizontal Scrolling.

Responsive Patterns for Tables

• Stacking: Converts each row into a vertical stack displayed one below the other.
• Squishing: Reduces column width. Possibly abbreviating text.
• Flipping: Transposes the table.
• Pagination: Splits content into multiple pages.
• Accordion Rows: Expands rows to reveal information.
• Column Toggle: Allows users to show or hide specific columns.
• Row Toggle: Allows users to show or hide specific rows.
• Horizontal Scrolling: Enables horizontal scrolling to view wide tables.
• Lazy Loading or Virtualization: Loads resources only when they are actually needed.

Good Practice Patterns for Tables

• Sort: Allows sorting by columns.
• Filtering: Adds a search bar for quick filtering of data.
• Infinite Scroll: Loads new rows as users scroll down. Removes the need for pagination.
• Fix Header Row (or Column): Fixes row / column header in place while scrolling.
• Zebra Stripes: Color rows in alternating order.
• Show More Button for Rows: Collapse very long rows and add a button to expand them.
• Color Coding: Using color to represent different categories.
• Persistence: Saving used filter to be persistent on reloads.

Pagination, Filtering, Sorting, and Horizontal Scrolling Pattern

Responsive Table Pattern: Accordion Rows

Adapted from Saba beigi (2022, February). CSS Only Accordion. Retrieved November 11, 2024.

Responsive Table Pattern: Stacking with Infinite Scrolling

Responsive Table Pattern: Flipping

Comparison of responsive Table Tools

AG-Grid: Overview

AG-Grid Enterprise Edition offers free trial (watermarked) for non-production purpose.

• Easy to use.
• Simple feature activation.
• Extensive documentation.
• Good amount of diverse examples.

AG-Grid: Example

Recommended Pattern: Stacking

• Easy to implement (CSS only).
• Always preserves content.
• Works even on very narrow devices where other patterns might fail.
• Avoids frustration on mobile devices that might occur with scrolling bars.
• Available per default in most tools from our research.

Recommended Tool: AG-Grid

• Feature richness.
• Performance.
• Powerful features that other frameworks lack.
• Easy integration.
• Free for non-commercial use (with watermark in console).