Tags: tables

20

sparkline

Simple, semantic and responsive tables (part II) – Design Today – Wouter Hillen

This uses generated content in CSS to make the aria-label attributes visible on small screens—clever!

Responsive Product Comparison Tables - daverupert.com

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.

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

Responsive scrollable tables | 456 Berea Street

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.

What can I plant now?

This is handy—a month by month list of which vegetables you should be planting right now.

Shopping Cart example

A nifty example of responsive tables. View source to see how it’s done.

A New Take on Responsive Tables by ZURB

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.

Responsive Data Tables | CSS-Tricks

Some good ideas for formatting tabular data for small screens.

Everything You Know About CSS Is Wrong! - SitePoint Books

Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.

Digital Web Magazine - Portable Social Networks, The Building Blocks Of A Social Web

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.

Licence to Roam » BarcampBrighton - Portable Information

Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.

4 Technologies for Portability in Social Networks: A Primer - ReadWriteWeb

A nice summary of the technologies presented at my SXSW panel.

The Existential DiSo Interview on Vimeo

Chris interviews himself about portable social networks and distributed identity.

Portable Social Networks: Take Your Friends with You [Content]

Brian's article on portable social networks is a clear and concise introduction to the subject with explanations of the technologies involved.

DataPortability.org - Share and remix data using open standards

A new site to track the building blocks of portable social networks: OpenID, OAuth, hCard, XFN and more.

frameboX - Salad

Giger's alien made of vegetables, Arcimboldo style.

Dopplr Blog » Importing your social network from other sites

Portable social networks are no longer just theory: Dopplr makes it a reality.

A List Apart: Articles: Thinking Outside the Grid

Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.