Following on from Richard’s article, here’s a deep dive into making HTML tables that are accessible and responsive.
An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:
Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.
A nifty example of responsive tables. View source to see how it’s done.
An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Five more articles on modern responsive design to close out the course.
Why do I like fluid responsive typography? Let me count the ways…
Houdini to the rescue?
A CSS fix for sluggish tap responses on mobile.