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.”)
This uses generated content in CSS to make the
aria-label attributes visible on small screens—clever!
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.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
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.
This is handy—a month by month list of which vegetables you should be planting right now.
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.
A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA
A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.
Some good ideas for formatting tabular data for small screens.
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
Ben has written a superb article outlining the hows and whys of distributed social networks with hCard and XFN, finishing with an inspiring call to arms.
Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.
A nice summary of the technologies presented at my SXSW panel.
Chris interviews himself about portable social networks and distributed identity.
Brian's article on portable social networks is a clear and concise introduction to the subject with explanations of the technologies involved.
A new site to track the building blocks of portable social networks: OpenID, OAuth, hCard, XFN and more.
Giger's alien made of vegetables, Arcimboldo style.