Tags: table

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.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

Labcase - Open Device Lab, in a case.

This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.

More details here.

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.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

Android Fragmentation Report July 2013 - OpenSignal

A look at the degree of diversity in Android devices, complete with pretty pictures. The term “fragmentation” is usually used in a negative way, but there are great points here about the positive effects for web developers and customers.

You say fragmentation, I say diversity.

Responsive News — Response-ish Web Design

Details on how the BBC Responsive News team plan to eventually make their m-dot site scale all the way up to be the default site. This “planting a seed” approach works really well, not least for political reasons.

It’s something that The Guardian and The Chicago Tribune are working on too.

What can I plant now?

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

Cover-Up’s open device lab

The guys at Cover Up are great: they make accessories for tablets and e-readers, so they have lots of those devices. They’ve made them all available for web developers to test on. Like I said: they’re great!

» Responsive Design for Apps — Part 1 Cloud Four Blog

A great piece by Jason analysing the ever-blurring lines between device classes.

Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:

What’s a web app?

Device Fatigue | Brad Frost Web

I know how Brad feels. I find it hard to muster any enthusiasm for any specific new device these days. But that’s okay. It’s more important to step back and see the trends and directions instead of getting caught up in the specifics of this particular phone or that particular tablet.

My remedy for device fatigue has been to take a step back and let my eyes go unfocused. Much like a Magic Eye, I can then see the hidden pictures behind the stippled noise that is the device landscape. This remedy helps me cope, gets me to stop caring about things that don’t really matter, and gets me to care about the broader trends the Magic Eye unveils.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

An alternate universe – Marco.org

There is an elephant in the Microsoft store.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

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.

Arrivals

A cute glanceable interface onto Foursquare that turns it into your own private railway station.

Bringing the London Bus Network home – Blog – BERG

This is an excellent use of the Kindle as an undemanding screen. Really lovely!

Responsive Data Tables | CSS-Tricks

Some good ideas for formatting tabular data for small screens.

iPad: The Microwave Oven of Computing | Techinch

Y’know, I think this comparison actually makes a lot of sense.

Live style sheet editing!

Edit this page. Then view source.

Periodic Table of the Elements - Josh Duck

Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).

Table of Condiments

Table of Condiments That Periodically Go Bad

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.

OAuth support for Google Accounts and Contacts API - OAuth | Google Groups

As promised by Kevin Marks in the Q&A after my panel at South by Southwest, the Google Contacts API now supports OAuth. w00t!

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.

Giant Global Graph | Decentralized Information Group (DIG) Breadcrumbs

TIm Berners-Lee explains what the "graph" part of "social graph" means. I'm still not keen on the term but I really love the idea (although I also disagree about the building blocks required today).

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.

Web2Summit: Opening Up the Social Graph

David Recordon announces a new developer tool for tracking status changes on social networking sites.

Brighton to London, leaving at 14:00 - Accessible UK Train Timetables

A new feature on Matthew Somerville's brilliant train timetable site. Just put /fares at the end of any URL to get the cheapest available fare.

Designing For Hackability » SlideShare

Brian Oberkirch's presentation from Webmaster Jam looks excellent.

Six Apart - News and Events: We Are Opening the Social Graph

Six Apart are getting ready to make portable social networks a reality. Watch this space for code.

Field Notes Brand

Dan is claiming that these notebooks could be moleskin killers. I am intrigued and I do like the nice use of Futura.

The Man in Blue > There are no social networks

Cameron's plea for social network transparency and portability is one of the most lucid and succinct yet.

Open Social Graph @ Plaxo

Try Plaxo's identity consolidator for yourself. Give it a URL that includes rel="me".

Plaxo to ship online identity aggregator based on microformats | ScobleShow: Videoblog about geeks, technology, and developers

The guys at Plaxo have not only implemented social network portability, they're sharing the code.

Portable social networking // James Aylett's diary

James has some quick'n'dirty Python code for extracting relationship data from social networking sites.

Social Network Portability | Google Groups

A mailing list to discuss portable social networks.

frameboX - Salad

Giger's alien made of vegetables, Arcimboldo style.

BBC NEWS | Technology | Pull down the walled gardens

The need for portable social networks hits the mainstream press: Professor Michael Geist writes an article for the BBC website.

social-network-portability - Microformats

Tantek, Brian, Daniel and others got together in Ritual Roasters to discuss making portable social networks a reality. Here are the notes.

Portable Social Networks at Mashup Camp :: UltraNormal

Kevin Lawver has implemented portable social networks by mashing up OpenID and microformats in Rails. Read the presentation and download the code.

Dopplr Blog » Importing your social network from other sites

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

StitchyMcYarnPants.com

The Museum of Kitschy Stitches: a gallery of notorious knits. Just in time for Christmas.

Velvet Unravelled » Blog Archive » Portable social networks

Sarah mocks up an interface for importing contacts across social networks.

XFN: Services & Technologies

Identity consolidation with the XFN rel="me" value. RTFM on sharing information across social networks.

YouTube - Best fight scene of all time (is this gay?)

Put this one in the "so bad, it's good" category. The movie is called "Undefeatable" if you fancy trawling eBay for it.

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.