Wednesday, November 8th, 2017
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.”)
Sunday, October 23rd, 2016
This uses generated content in CSS to make the
aria-label attributes visible on small screens—clever!
Saturday, May 28th, 2016
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.
Wednesday, May 18th, 2016
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Friday, August 8th, 2014
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Monday, November 25th, 2013
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.
Tuesday, March 5th, 2013
This is handy—a month by month list of which vegetables you should be planting right now.
Wednesday, May 23rd, 2012
A nifty example of responsive tables. View source to see how it’s done.
Friday, May 18th, 2012
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.
Thursday, December 29th, 2011
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.
Tuesday, June 14th, 2011
Some good ideas for formatting tabular data for small screens.
Tuesday, October 21st, 2008
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
Thursday, July 3rd, 2008
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.
Sunday, June 8th, 2008
- Listen to the audio recording of this panel.
Jeremy Keith: Welcome to the Building Portable Social Networks panel. I’ll be your moderator. My name is Jeremy.
A little bit of housekeeping first. Obviously you don’t have to switch your phones off, but if you could switch your phones to silent, please, so we don’t have any interruptions, because—don’t make me come down there. I swear to God, I will shove it up your orifice if I hear one ringtone during this panel.
Jeremy: So, we’re here to talk about portable social networks. I kind of want to know what social networks you guys use so I’m going to ask. I’m going to list some social networking sites, and if you have an account with this site, you should raise your hand. If you have built or are an employee of the builders of the site, then you’ve got to whoop and cheer, because there’s a good chance, at South by Southwest, that that’s entirely possible.
So let’s take a random sampling. Who has an account at Dopplr? Okay. And I don’t hear any cheering, but that’s a good amount.
Joseph: Dopplr’s broken out. That’s pretty clear.
Jeremy: Who’s got a Pownce profile?
[whooping from audience]
Jeremy: A bit of whooping? Great. All right. Cool. Last.fm?
[whooping from audience]
Jeremy: Yeah. And there’s some whooping. There’s some whooping. Excellent. Digg?
[whooping from audience]
Jeremy: Wow. Lot of Digg. All right. Let’s see how many hands we get for this: Twitter.
[loud whooping from audience]
Leslie: Nice. [laughs]
Chris: Was that a howl?
Joseph: No werewolves…
Jeremy: Yeah, we’re not playing werewolf here. And finally, let’s see Flickr.
[loud whooping from audience]
Jeremy: All right. Now, on each one of those accounts, you had to enter your details every time. And on each one of those accounts, you had to find your friends, contacts—call them what you want—on those accounts, and you had to say, “Yes, I know this person; yes, I want to share my photos, trips, music, whatever, with those people” every single time. Please raise your hand if that got really annoying after a while.
[whooping from audience]
Jeremy: All right.
Jeremy: [laughs] that’s what we’re here to talk about today. And to talk about this, I have assembled a crack team for my panel. And I’m now going to ask them to introduce themselves…
Chris: Why’s it never a marijuana team?
Jeremy: Okay. We’re going straight to the crack. I’m going to ask them to introduce themselves. They’ve got about 60 seconds to introduce themselves. And points will be awarded for creative and interesting facts. Points will be deducted for blatant pimping of companies. So I’ll start over here. Chris, do you want to go first?
Chris Messina: Sure. So my name is Chris Messina. I won’t do any affiliations, but a couple of interesting facts. One is that I don’t like olives. The second is that I’m from New Hampshire. And third is that my alter ego online, Factory Joe, is actually from a “1984”-esque dystopian comic that I drew in high school.
Leslie Chicoine: Nice. Hello. My name is Leslie Chicoine. And let’s see, interesting facts. I was suspended from high school. I have a game design degree. And—oh, my God, everyone’s looking at me.
Jeremy: You can name your company. It’s Okay.
Joseph: Yeah. You should really say where you work for.
Leslie: Oh. I work for Get Satisfaction.
Jeremy: Minus one point.
Leslie: Oh! That was trickery! Did you see that?
Joseph: This is a tough panel.
David Recordon: I’m David Recordon. I’ll take the one-point hit right now. I work for Six Apart. But I’m repping two other companies right here. I’ve got the Blogger glove on, since the whole idea of portable social networks—like our blogging software, their blogging software—should connect, yeah?
David: But, on the other wrist, I’ve got the Facebook wristband. So, also pimping the Facebook. But it’s locked on; can’t get that off.
Leslie: Har har.
David: Yeah. So, two interesting facts. I technically have five names, and I’m the only Fajuen that I know of.
Joseph Smarr: Wow. So I’m Joseph Smarr, from Plaxo. And I’ve been working on trying to help open up the social Web, by helping you stitch together all the content you’re sharing on these different sites and helping find your friends. And in my spare time, I like to play electric guitar, as many of you may have found out through Valleywag.
Jeremy: Okay. Good. I think Chris is winning so far. He’s leading with the points.
Jeremy: All right. Down to brass tacks. We just got a show of hands there that people are a bit annoyed, it seems, with having to re-enter this data and having to reconnect with all these people on all these different services. But, let’s face it: this is a gathering of geeks here at South by Southwest. Is this even an issue for most folks? Are we the canaries in the coal mine? Who wants to take this one?
Leslie: Okay, I’m going to jump on that right away. I feel that this framing is actually taking away from this battle that’s being had. The idea that network fatigue is the reason that we need to connect all these networks? I don’t know. That’s such a small subsection of the people. There are so few people who have that issue; I actually think that you guys can be much more creative about your reasoning about why we need to connect our services.
I kind of see it that it’s not about network fatigue. It’s about this sort of burgeoning coalition of services, and making it easier for people to move between those services and pull what types of information they want, what kind of data from each service that they want, into the next service.
So it’s not necessarily even about friends lists. It’s about documents that I’ve created, photos that I’ve taken. And I just sort of don’t really think the framing is a positive way to get things done.
Joseph: Well, I do think we’re canaries in the coal mine, though, in the sense that I think what we’re seeing is that the whole Web is becoming sort of socially aware and socially enabled, and that we’re finding that it’s amazing the number of services that get better when they know who you know. Right?
So, if you think about the evolution of Web 2.0, you think about the evolution of social networks and Facebook platform and all of that, there’s all these things about: photos work better when they’re social; bookmarks work better when they’re social; travel works better when it’s social. And if you think about it, almost everything could be made better when it’s social.
But the problem is if you think about the explosion of the Web itself, once you sort of had those open protocols, everybody could just sort of build a great Website. But when you want to build a new sort of social experience, you don’t just need the protocols; you also need that data of who am I and who I know. And right now, because that data’s not flowing, people have to start over every time. And that’s where that fatigue is coming on.
And that is a universal problem, right? I mean, if you think about when we all came to this conference, those of us who knew each other beforehand didn’t have to re-meet each other at this conference, right? We already had that past relationship. And that’s why we’re able to build on our experiences over time. And right now, every Website acts like you’ve never used another Website before in your life. And that, to me, is a universal problem, and a universal opportunity to make everybody use all of this stuff a lot more.
David: Yeah. I think, combining what Leslie said and Joseph said, in terms of that idea that it’s not just about the people that you know and wanting to have portability in terms of who you’re interacting with, but that all of the things that you’re doing because of Web 2.0, of creating technologies, of community collaboration, that’s what really requires the social features.
And so far, it’s been really poor user experience and poor starting point of, you sign up for a service, and it starts out with: “Who do you know?” And being able to sort of lower that barrier—which I think is why the Facebook platform’s been so successful—of, all of a sudden, you create a new application, there are many people who can go and use it quickly, is important. But it’s also important to remember that the Web is really successful because it’s not siloed.
Chris: I would also add to that, one of the important ways to think about this—and David’s sort of getting to this point a little bit—is what you can take for granted when you’re building Web applications. And I think, more and more, people are taking the social component for granted.
But the experience is, first of all, not universal, and secondly, it has a lot of friction to it. So, insomuch as there’s a great opportunity to reduce friction in using a new application, that’s extremely important.
And so it’s not just about not finding your friends over and over again and having that process be really crappy, because it isn’t that you want all the same friends on all the different services that you use, but that when you actually want to reach out and touch someone, it should be as easy as that—as opposed to having to go through a whole process in getting them to be invited into the service which, we were sort of saying, if I even have 10 friends that I commonly invite to new services, and let’s say I use 50 services, if I’m berating them with 50 new invites every five days, they’re probably not going to be my friend for that much longer. So it’s also about the imposition that you’re putting on other people, the more services you’re using.
For example, I probably have 364 application invites on Facebook. I mean, it’s kind of stupid. So figuring out a way of improving that process, for me, so that I can play Scrabulous without having to worry about going through this arduous process, I think, is also important.
Leslie: Yeah. I think you actually kind of hit on it right there. It’s about being able to move between the services in sort of a free-flowing manner, because right now, everything is siloed around—every service has its own gateway. And so, if we can knock down those gateways, then that means that all these services can actually start working together, and we can have that kind of puzzle-piece, snap-together Web that we keep talking about.
Chris: Or even better, it’s sort of more about competition and choice, being able to, let’s say, have most of my friends really like Facebook, but then I have a number of friends who are on MySpace. Being able to message them between networks is sort of something that’s really important. I mean, email accomplished this a long time ago; you can go from server to server. Well, why can’t you do the same thing with social networks? It’s stupid. But that’s the way it is.
Joseph: And I think what you’re all hearing here is this is not about my ability to abandon one social network entirely and go somewhere else. It’s much more about me being able to have these different tools work together so that I can use them more so that the friction comes down so that more users can take advantage of them. Right? It’s about making each of these apps part of a rich social ecosystem, where hopefully the pie should get a lot bigger and everyone should be able to win. And I think that’s something everybody can get behind.
David: And from a future perspective, I think Facebook NewsFeed was probably one of the really successful other ways to frame this question of, you’re really interested in seeing what are your friends doing online. And this has shown to be really true by the number of startups right now who are going and trying to compete in this space. You had Socialthing launch yesterday, I think, and it dominated Twitter this morning.
And so I think that feature, even though it’s not necessarily the problem of “My data is all in one place,” or “My friends are in one place,” or “It’s hard to get started,” but allowing that feature of just the philosophy that people exist in multiple places around the Web, and are sharing things and creating things all around the Web, is really important.
Jeremy: So, what I’m hearing here is it’s all about reducing friction. So, social network portability is essentially the Vaseline of the World Wide Web.
Jeremy: Which is good.
Chris: You said it first.
Jeremy: But we are still the uber-geeks. And even Mark Zuckerberg, just today, in an interview at ReadWriteWeb, was talking about throwing open his API, and nobody’s particularly interested in using this feature. As he said, “We threw an API and nobody came.” So maybe we are still a bit niche.
Should the reasons for doing this be more business-related, rather than it’s good for the future, it’s going to build the next stage of the Web? Are there business benefits to opening up? Or is it the opposite, that, from a business perspective, you actually want to keep people locked and you want to keep people closed in?
Joseph: We’ve certainly seen a lot of positive business benefits from it because, like I said, as much excitement as there’s been with any of these services, you just think about it: we are just at the very beginning. I mean, most people out there are not sharing rich content with each other.
Think about how many people you know who have a digital camera but you’re not seeing their photos. Think about how many people are doing interesting things that you’re not hearing about, right? Think about how many of your parents are communicating with you in that kind of way, or your extended family.
And so, when you unlock barriers and you make things interoperate, everybody starts using everything a lot more. And we’ve certainly seen that in Plaxo and Pulse; everybody’s creating stuff and sharing it, from their blogs and their photos and everything else, right? And just by being able to go in and sync your address book and find all the people who are sharing this information and connect you to me, even though ultimately you’re going out to the other sites, just that ability to sort of reduce friction has been incredibly good for our business.
And I think for all the other businesses, too, we’re driving them traffic, we’re getting more users. So I certainly don’t think we’re at the stage yet where there’s a zero-sum game, where people have to fight over a piece of the pie, because the pie’s just going to get a lot bigger.
Jeremy: Now, you’re talking specifically about address books. You’re talking about getting people’s information out of their address books so they can move it around from service to service. Is that not kind of a special case? Because when we talk about data wanting to be free, we’re usually talking about “my photographs.” I want my photographs to be mine, even if I’m storing them on Flickr, “my music”, whatever my content is.
But the contact details of my friends, do I own that? I own the fact that I am friends with a person, but do I own their email address now? Does that give me the right to put email addresses around? So address book portability is—I don’t know.
David: And that was something that I think was really the crux of the issue with the Facebook-Scoble-Plaxo…
David: …debacle—thank you—earlier this year, where it was sort of like, what was that fine line there between the information that Plaxo and Scoble were taking out of Facebook, of “Did that belong to Scoble?” Was going and taking that step of having OCR images to get email addresses actually beyond what was socially acceptable or not?
Chris: That’s not even the point. I mean, I think the point there should really be about whether or not you have the ability to contact someone when you want to contact them. And I think that the whole matter was confused by data geeks who care about data and not so much about people who care about people who care about solving real problems or problems in the while.
So, if I’m out and about, and I have this person in my phone, and I want to contact them, I should have some mechanism to do so, whether it’s by their phone number or their email or whatever—it shouldn’t really matter so much as if they’ve given me permission to contact them.
And I think that we’ve been architecting our thinking about this from a very sort of protocol and data perspective, as opposed to thinking about, “Well, what are we actually doing for people?” Why do people want to get this data out of the networks, when the reality is they want to contact someone, they want to talk to someone, they want to share something with them?
Leslie: I think that’s a great framing of it, actually, because the point isn’t really how; it’s what they want to do. So, in this case, there’s got to be a way. For example, if you don’t have the right to have someone’s email address, but these sites are linked, why can’t you, from the technical side, link up the sites so that I never actually see the email address that I’m using but I know that my message gets through? Now, I don’t have ownership of that email address, but I still get what I want.
David: Focusing on the feature, like Chris said, I think is really important. We put sort of a life-streaming concept, called ActionStreams, into Movable Type. And instead of going and focusing on the “Oh, by the way, bloggers, you’re also now adding XFN to all of your blogs and supporting Atom and things like that,” what we did was “Oh, you want to go and share with people that read your blog what you’re doing around the Web?” and focused on that, really, as the feature, building that feature. And now, as a side effect, all these people have XFN links to their accounts around the Web.
Joseph: Yeah, I totally agree with that. That was the thing to start with. It’s like how do you find what your friends are doing, and how do you start getting connected to that, and then how do you start wanting to share yourself?
And when these technologies work well, you don’t even realize that you’re using them, right? You see Yahoo deploying OpenID for all their users, where, when you come to Plaxo, there’s a button that says, “Sign in with my Yahoo ID.” You don’t even know that you’re using OpenID; you just know, “Hey, I already have a Yahoo account. I shouldn’t have to create a new account from scratch.” Those are those signs of progress that real users can get.
Jeremy: Yes. So this is an interesting point. And we’re talking about framing the discussion. If we get bogged down in techy terms, we’re going to put people off. It’s not so much fun. And when we talk about portable social networks, it’s kind of already a kind of techy term. And there’s another term out there that sounds even more off-putting, which is “the social graph.”
David: I’m sorry.
Jeremy: Does somebody want to defend that position? I don’t like that term. Anybody here want to say that they do?
Joseph: I just think we needed something that wasn’t “social network,” because we already think of those as like MySpace and Facebook.
Jeremy: What about “super-best-friends club”?
Joseph: I mean, ultimately, it just becomes a sign.
Leslie: I feel like the whole thing is, again, kind of strange, because the focus then is on…
Leslie: Well, terminology. And also, it’s really about people’s relationships. But the Web is way more than that. I mean, of course, when things are social, it makes it more fun, it makes it more interesting, there’s a lot more information that you can share and find. But there’s also just being able to move between services freely, whether or not that’s with your friends.
Jeremy: Okay. You keep saying “friends.” Now, this brings up an interesting point as well. Are they friends? Are they contacts? On Dopplr, they very specifically say, “You share trips with these people.” It says “your fellow travelers.” That’s an interesting term. Do we want to be using terms like “friends”? Are we really diluting the English language at that stage? The MySpace definition of friend is pretty broad. [laughs]
Joseph: Including Captain Morgan and what have you, right?
David: A few years ago, I worked on LiveJournal, and this was a huge problem we had, where users were friending each other. And it first started out in terms of how the site evolved, of just a small group of people using it, and they were their friends. But it was also, at the same time, pulling together, reading people’s content, trusting other people with your content. It was very hard, and the LiveJournal still hasn’t gotten away from the concept of friends.
Leslie: It’s hard once you’ve installed your system that way. Once you’ve trained people to think of it that way, it’s really hard to back out. So anyone that works with me knows that I’m incredibly adamant against using the word “friend.” And I think it’s really important to frame things up front in all sorts of interesting ways. So I really respect the way that Dopplr has done their work because they’re very careful about making sure that it’s around an action—so it’s a person that you do an action with, a person that you share a trip with, a person that you want to share photos with.
Joseph: And I think that speaks to another important point, which I think one of you alluded to earlier, which is, just because you want to be able to go to a new site and find who you know there, of course, it doesn’t mean you necessarily want to be friends with everybody on every site or share things with everybody on every site, right?
So, just like we don’t want people to think that to make your data portable, it has to be public, we also want people to able to think that just because you can go find people somewhere doesn’t mean you’re still not going to choose the type of relationship that’s appropriate…
Jeremy: That’s very true. I mean, I have friends on Flickr because I like their photography. But then they might want to friend me on Last.fm. But if they’ve got lousy taste in music, there’s no way I’m making them my friends.
Jeremy: Now, we’re going to get on to the technologies required, because the building blocks are there today. But first of all, it seems like, is this not all a solved problem? Because, Joseph, you talking about moving your data from one address book to another service, and it seems like we can actually do that, because I sign up to new services and it says, “Hey, do you use Gmail? Do you use Yahoo Mail? Do you use Hotmail? Great. Well, just give me your user name and your password for that third-party service, and away we go.”
Chris: Well, they are trustworthy…
Joseph: That seems like a loaded question.
Jeremy: Okay. To give some background, I did bring this issue up at the Social Graph Foo Camp, and named and shamed a lot of services in this regard, because I think it’s pretty bad personally because it’s teaching users how to be phished, and that is wrong.
Joseph: And just beyond that, because that sort of issue, I think, we’ll hear about with OpenID and OAuth and things like that addressing it. But I think the other thing that’s really important for people to realize is that that kind of one-time import is really not capturing the sort of dynamic nature of people’s relationships.
I mean, just in South by Southwest, I have met a whole bunch of new great people, right? And I think any site that you slurp down your Gmail address book and try to find people: A. it’s only finding people by email address, whereas increasingly we know people, not be email address but through other social network. So, maybe I know your Twitter name maybe I know your Facebook ID or whatev
Sunday, March 16th, 2008
Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.
Friday, March 14th, 2008
A nice summary of the technologies presented at my SXSW panel.
Wednesday, January 23rd, 2008
Chris interviews himself about portable social networks and distributed identity.
Wednesday, November 21st, 2007
Brian's article on portable social networks is a clear and concise introduction to the subject with explanations of the technologies involved.
Wednesday, November 14th, 2007
A new site to track the building blocks of portable social networks: OpenID, OAuth, hCard, XFN and more.