Oversharing and paranoia

Oversharing is an inherent part of social media. Just ask anyone who’s made the mistake of clicking a Socialcam link on Facebook.

But oversharing takes different forms, and the most potentially dangerous type is one many people don’t even realize exists: the copious logging of your online activities by the social networking sites you’re logged into. Thanks to their “deep integration” with other websites, you may be “sharing” your browsing habits with Facebook, Twitter and Google even when you’re not on their sites.

Have you ever been on a site and noticed a little corner of the site looks like it’s been invaded by Facebook? That sickly blue, the font, the little profile pictures of your friends who’ve liked or commented on the page you’re currently viewing?

How did that get there? It’s because the site is integrating with Facebook, and through the magic of cookies, Facebook’s servers can tell that it’s you looking at the page and deliver content customized to your profile. Maybe you like that, but I find it a little creepy. Twitter and Google do it too, even if it’s not as obvious.

Google may be the most insidious, with so many of its tools now consolidated under a single login. If you use Gmail, and you keep your account logged in, every Google search you do is logged. Ostensibly this is to help deliver “personalized” results. More crassly, it is used to put “targeted” ads in front of your eyeballs. But that data is being collected, and regardless of what Google says their privacy policy is now, the data is there, and could stay there for a long time. Someday Google might change their policies or sell that data or the government might subpoena it or just come in and take it.

What’s worse, Google Analytics is everywhere. Heck, even paranoid old me uses it. Google says Analytics isn’t tied in with your Google account, and maybe it’s not… yet. But why assume it will always be that way?

Fortunately, there’s something very simple you can do to combat all of this data collection. It’s the online equivalent of a tinfoil hat, except it actually works. Log out. And just to be safe, clear your cookies.

I’m trying something out right now that takes all of this even a step further. It all hinges on the fact that in all three of these cases — Facebook, Twitter and Gmail — the web interface is probably the least usable, least satisfying way to experience these services. I’ve never really been a user of Gmail’s web interface; I’ve always preferred using the Mac’s built in Mail application. But now I’m also strictly using the Twitter app on my Mac. (I already use Tweetbot on my iPhone.) And I have made the decision not to use Facebook on my computer at all. I already hated the Facebook web experience anyway, so why bother with it? Now I am only going to check it using the Facebook iPhone app.

Practical responsive web design, part one

I’ve been wanting to write this post for a while, but I’ve been too busy writing code instead. Plus, the techniques are evolving and changing so fast, that by the time I finish a project, the way I built it is already obsolete.

Now, with the Breaking Development Conference in town and a few recent responsive site launches under my belt, it seemed like a good time to write up a summary of what I’ve learned, what I’m doing, and where I think all of this is going.

First, a quick aside. I didn’t attend the conference. I would have liked to, but as an independent developer I never seem able to justify the standard $500-per-day rate most conferences charge. That doesn’t mean the conferences don’t have value; they’re just not for me.

Before we begin

There are a few caveats I want to lay down before I start talking about responsive web design:

This stuff is changing… fast. Anything I write here may become foolishly out of date by the time I hit the “Publish” button. Responsive web design is a work in progress, and there are no rules (yet).

What I’m doing may not be “by the book,” proper-name Responsive Web Design. The book is great, and there are “experts” who have much deeper knowledge of these strategies than I do. But as I said above, there are no rules (yet). I want to describe the practical techniques I am employing on actual live web projects, under often less-than-ideal circumstances.

Every website is different. The company is different. Its audience is different. The content and style and context where it will be viewed are different. The balance between showing off fancy new features on high-resolution tablet displays and supporting corporate IT departments that are still straggling with Windows XP and Internet Explorer 6 will vary. In short, what I am doing may not work for you. But I hope it can give you some ideas that will.

A practical baseline

My goal with responsive design is to get the biggest “bang for my (client’s) buck.” I recently read a about a study that found almost 4,000 different Android devices in a site’s access logs, with many of them only appearing in the logs once. It is not possible to account for all of these variations. And, after its primary goal of providing an optimal user experience across a variety of devices, not needing to account for each of them individually is the second biggest purpose of responsive design. (That’s also, arguably, its biggest practical benefit.) By building on a fluid, flexible structure from the beginning, a site will look good regardless of slight variations in its presentation.

But I’m not starting from scratch. I work with a number of designers who deliver their work to me in a variety of formats (usually Adobe software). They’re tremendously talented, but they don’t all have a full working knowledge of fluid grids and all of the other considerations that go into responsive web design. So my job is largely to translate these “traditional” web designs into something that works, more or less, with a responsive approach.

I’m targeting three basic screen types: computer (desktop or laptop, including iPad in horizontal orientation), tablet (primarily iPad in vertical orientation, but also smaller tablets like the Kindle Fire or the Nook Color), and smartphone (primarily iPhone, but also Android and Windows Phone). Additionally, I am trying to balance a Mobile First approach with support for Internet Explorer 7 and 8. (I am fortunate to be in a position not to need to worry much about IE6 anymore, and IE9 plays well with CSS3 media queries.) In some cases I am also targeting “very large” computer displays, those with a horizontal resolution of 1280 or above, with a scaled-up layout.

So, instead of accounting for 4,000+ different screens, I’m aiming at 3 (or 4) general screen categories. I am also accounting for two basic browser categories: IE 7 and 8, and everything else. (Yes, if you approach it in the right way, it’s really that simple. Almost.)

Fixed, yet flexible

With this “practical baseline” in mind, and working primarily with traditional fixed-width web designs as a starting point, I’ve established break points (widths at which the layout changes significantly) at around 700 pixels (varying by site between 640 and 720); at 960 pixels for the “standard” computer (and horizontal iPad) layouts; and, for the “very large” displays, at 1200 pixels. This allows for a traditional fixed-width web design approach to be used, rather than accounting for a completely fluid layout across all screen sizes. It may sound like a cop-out, but I find it to be a very helpful way to get things done when collaborating with designers who are not living and breathing this stuff the way I do every day.

For screens below my “around 700” threshold, I drop into a fully-fluid, single-column layout targeted at the smartphone user experience. In these cases there may be other significant changes to the layout, such as collapsing content blocks into expandable buttons, allowing users to quickly see what’s on the page without having to scroll endlessly. (This is not a radical invention of my own… it’s more-or-less how the mobile version of Wikipedia functions.)

In part two, I will get into the details of how I built out a pair of recent websites, including a few code examples, to show how the HTML and CSS fit together, and how I balance the seemingly incompatible worlds of mobile-first and IE8.

My year of running

Like most geeks, I was never athletic growing up. Aside from one feeble season playing left field for the school baseball team in 8th grade, and the twice-weekly exercise in mild psychological torture known as P.E. in high school, my childhood was fairly sedentary, and my adult life hasn’t been much better.

The only things that have kept me reasonably fit were a naturally slim physique and two to three miles of walking per day as part of my daily commute.

And then I started freelancing. My daily commute no longer involved a 9-block walk to the train station, but rather a 40-foot walk from my bedroom to my home office. Unsurprisingly, this took a toll. Whereas I had been a scrawny 120 pounds in high school, and a solid 160 pounds most of my adult life (thanks, college!), I eventually found myself peaking at 174 pounds in the spring of 2011. That may not sound like a lot, but for a small-boned, 5-foot-8 guy, it was.

I was 37. A few years earlier, when he was also 37, my brother-in-law started running. It transformed him. The difference was astounding, and has been lasting. And so, as the years went on and my own 37th birthday approached, I always felt, just somehow knew, that the necessary pieces would fall into place for me to become a runner at 37 too.

I’m sure planting that seed played a part, but I’m still not entirely sure what it was that compelled me to finally get into it one year ago today, on June 1, 2011, but it all came together, 2 1/2 months after my 37th birthday.

Couch-to-5K

Whatever the factors were that caused me on that Wednesday morning to finally put on the running shoes I had bought a few months earlier but never worn, it is perfectly clear to me what made me put them on again that Friday, and then on Sunday, and every other day for the next 9 weeks: the Couch-to-5K running program.

The program takes many forms, but the key to it is that it allows you to build up gradually. Don’t expect to run 3 miles on the first day. I think the biggest reason why it’s so hard for many people, myself included, to get started running when they’ve been living a sedentary lifestyle is that they think they just have to go out and run. But they get tired quickly, and either stop and give up, or push through it and hurt themselves. Either way, it doesn’t last.

With Couch-to-5K, over a period of 9 weeks, for 30-40 minutes at a time, 3 times a week, you gradually build up by alternating walking and running. On the first day of week one, you do a 5-minute warmup walk, then alternate running for 60 seconds and walking for 90 seconds, for a total of 20 minutes, and follow with a 5-minute cooldown walk. By day three of week nine, you are running for a solid 30 minutes.

That first day is key, and it was magic. I could actually do it! It felt like a workout, but it was manageable. And it left me so energized and excited about the program that I couldn’t wait to get out and do it again!

I did have some setbacks in those first few weeks. One of the big problems I’ve always had when I ran was shin splints. I got them a lot in these first few weeks, eventually getting to the point where I was afraid I had a stress fracture. I didn’t, but I needed to lay off the running for a week. So, during that week I biked and walked instead. I also worked on changing my running stride, lifting my legs more so my thighs were doing the work instead of my lower legs. This made a big difference, as did altering my walking stride during the warm-up in a way that loosened up my ankles.

As I mentioned before, the Couch-to-5K program takes many forms. The page I linked to above was how it originally appeared online, and for a long time the best way to follow it was to use a prerecorded podcast.

And then the iPhone came along. Couch-to-5K is trademarked, and now has an official app (which, honestly, I haven’t tried, because it just looks kind of amateurish in the screenshots), but a year ago when I started running they hadn’t cracked down on the trademark and a number of competing apps, using the exact Couch-to-5K nine-week schedule, were available. The developers of these competing apps have since been forced to rename them and to make (somewhat arbitrary, and, I think, less effective) changes to the program schedule itself. Still, it’s worth acknowledging the apps that made this happen for me, even if they’re slightly different now.

At first I used an app by Felt Tip Software that is now called Run 5K. This one drew me in immediately because I was already aware of its developer as the creator of Sound Studio, one of my favorite sound editing apps for the Mac. I used Felt Tip’s 5K app for a few weeks, until I discovered one I liked even better, Bluefin Software’s app now known as Ease into 5K. Like Felt Tip’s app, it guides you through the program (speaking over your music to tell you when to run or walk), and lets you keep a journal of your progress. But what I really loved about it that Felt Tip’s software lacked (at least at the time) was that it had GPS integration to both map your run and track your distance and speed. I still use this app’s “big brother,” Bridge to 10K regularly to time my runs and to work on extending my distance beyond 5K.

One year later

It is now a year since I first started running with the Couch-to-5K program. SLP started the next day, and although we don’t run together — I enjoy running as a solitary activity, and she runs too fast for me to keep up with — we do continue to encourage and inspire each other. We’ve both lost a bunch of weight: I’m currently hovering in the 145-150 range, and although I’ll leave it to her to choose whether to divulge a number, it’s safe to say that we’re both easily in the best shape of our adult lives. And we feel great. Getting in shape has a subtle but real impact on your daily life in countless little ways that add up to a big difference in your attitude and outlook.

It’s been fun to watch my running times get faster as I’ve progressed, too. In those first early runs that were long enough to even count, late last summer, I was averaging around 11 minutes per mile. (It’s probably worth noting, too, that prior to last summer I had only ever run a mile once in my life, for the Presidential Fitness Test in high school, and I did it in 11:30 then.)

By the winter (when we were running on the indoor track at the Midtown YWCA), I was regularly running 9:25 miles, and I even clocked my fastest-ever mile at 7:54.

In September we ran our first (and, to date, only, but that will change soon) real 5K race. I finished in 31:34. Since then I’ve recorded a personal best 5K of 27:32.

I haven’t logged every run, and I haven’t kept a tally of my overall miles, but if you were to estimate 3 miles per run, 3 times per week, for 52 weeks, that works out to a total of 468 miles. That kind of distance requires a good pair of shoes, which are the only specialized gear I have ever bothered with. (Well, almost… more on that in a minute.) You don’t need super-expensive running shoes, but you do need decent running shoes. I typically wear Converse All-Stars, and they are not for running. There is no way I could have accomplished what I’ve done with that kind of footwear. So for running I wear a pair of New Balance 623’s. They’re nothing fancy, but they’ve held up great and have made running (relatively) easy. And, most importantly, they’ve kept me from injuring my feet and legs.

As for any other specialized gear, like I said, I don’t bother. I don’t have special running shorts or shirts. You just need to be comfortable, and don’t feel like you have to look a certain way to prove anything to anyone. The one exception I have made, for a very specific reason, is that I wear two pairs of underwear when I run. I was finding that as my run times increased, I started to get chafing on my upper/inner thighs. No fun. Initially I started coating my thighs with baby powder, but eventually I realized all I really needed to do was double up my underwear. I wear boxer briefs, so I suppose this recommendation is only valid in that context, but, as they say, it worked for me!

Last July and August I managed to combine running with one of my other major interests: music. I wanted a long-form piece to accompany my 5K runs, and as much as I wanted it to, LCD Soundsystem’s 45:33 just didn’t do it for me. So I composed my own: The Long Run. It’s 40:37 of electronica with an energized beat, with gradually shifting moods and atmospheres that I find serves as a great mental landscape to accompany the physical scenery of the run.

Update: If you’d like to hear — yes, hear — more — yes, a lot more — on this topic from SLP and me, be sure to check out this week’s episode of our podcast, The Undisciplined Room, where this is pretty much all we talk about for the better part of an hour.

Social media case study #001: @Mike_FTW and Twitter jackassery

I don’t know Mike Monteiro personally. Apparently I do know someone else who does, but that’s irrelevant here. This post is not about Mike Monteiro, the flesh-and-blood human being, owner of Mule Design Studio and author of Design Is a Job. This post is about @Mike_FTW (NSFW, depending on where you W), Mike Monteiro’s Twitter persona.

In case you’re curious but afraid to click that last link, allow me to explain, as the imagery is critical to my understanding of what @Mike_FTW is all about. The background image on Mike’s Twitter page is a topless photo of Bea Arthur, circa early 1970s. It is a rather plain-looking photo, neither sexualized nor grotesque. It’s almost like a school portrait, actually, except for the fact that she’s not wearing anything.

It may seem a little odd that I should fixate so much on this photo in trying to understand what @Mike_FTW is all about, but I think it’s key. It’s like a surgeon general’s warning for his Twitter feed. It’s provocative, confusing to some, but ultimately benign. But what is it really saying? If Mike were simply trying to (pardon my word choice) titillate, he certainly would have chosen a sexier photo. If he were trying to scare people off, he’d have gone with one more extreme.

I think there’s something much more deliberate, more considered, about this choice of photo. Because while it may ultimately be benign, it’s not without meaning. Bea Arthur, especially in the early 1970s, was a major public face for feminism with her TV show Maude. She chose to have this photo taken and made public. I don’t know all of the circumstances surrounding it, but what it says to me is, “Get over it. They’re just boobs.” It’s a challenge to both ends of the morality spectrum to lighten up, loosen up, toughen up, and wise up. And I think that’s really what Mike Monteiro’s mission is with @Mike_FTW.

@Mike_FTW is almost always abrasive, coarse, and rude, but with an underlying ethos that isn’t too hard to pick up on if you’re paying attention. A couple of recent stunts have cast this in a clear light.

Mike Monteiro: Splenda yoga mom

On May 21-22, @Mike_FTW temporarily changed tone, posting a series of tweets with a cloyingly banal new persona he dubbed “Splenda yoga mom”. It confused and outraged some of his followers, not unlike the “straight” episode of Sealab 2021. Eventually he came clean, explaining in a succinct set of tweets how this stuff works:

@Mike_FTW comes clean

A few tweets from May 22, 2012 wherein Mike Monteiro talks about what he does on Twitter.

Storified by Scott Anderson · Thu, May 31 2012 10:16:45

So here’s the problem, now that I know you guys want me to be a jerk, I kinda don’t wanna be one.Mike Monteiro
‘Cause let’s face it, I’m not really a jerk. Nor am I the Splenda yoga mom I was pretending to be the last few days.Mike Monteiro
We’re all complex beings. And our online personas are just another layer of complexity added to our identity.Mike Monteiro
Jerks can pretend to be nice. Nice people can pretend to be jerks. The truth is that we’re all constantly ebbing and flowing in between.Mike Monteiro
And in the end, all we’re left with are the impressions we leave across one another. You’re the sum of others’ smiles and tears.Mike Monteiro

But it’s more than that. Because he didn’t just pull a stunt to piss off his followers by confounding their unjustified expectations of how he should behave on Twitter. He wrapped the stunt in a successful effort to make a real, positive difference in the world by drumming up thousands of dollars in donations to SmallCanBeBig.org.

What is the value of a tweet?

Yesterday, this happened: Atlanta-based web developer John Graham wrote a blog post, never intended for a wide audience (as most blogs, this one included, rightly should not be) about why he stopped listening to John Gruber’s The Talk Show podcast, and why he unfollowed @Mike_FTW. The post did not offer any great insight, nor was it particularly interesting to anyone beyond the author himself. But there’s no indication that he ever intended it to be, except for one thing: he included “@Mike_FTW” in his tweet about the post. Monteiro picked up the ball Graham had gently placed at his feet, and ran with it.

This time the stunt was to get @johnegraham2 1000 Twitter followers in a day, and get them all to unfollow him en masse a day later. Again the stunt worked… and again it raised over $1000 for SmallCanBeBig.org. In his blog post, John Graham said “The problem for me is that I don’t find him funny and therefore there doesn’t seem to be any value in his tweets.” Humor is subjective, of course, but raising over $1000 to help a family in need in a matter of hours isn’t. A lot of people may not agree with Mike Monteiro’s tactics (if they even understand them), but it’s hard to argue they’re ineffective.

So what’s your point?

What can we really learn from @Mike_FTW, the Twitter alter-ego of Mike Monteiro? How much of it is Mike, and how much is an act? Unless you know Mike personally, that question is impossible to answer. Likewise his motivations to do what he does, the way that he does, are a bit of a mystery. Still, there are some lessons here for how to use social media effectively, something that isn’t lost on @Mike_FTW. After the first stunt, he tweeted in his typically humble fashion:

And, yesterday:

Meanwhile, John Graham, the butt of the joke, responded on his blog and SmallCanBeBig.org showed their appreciation:

What do I learn about social media strategy from Mike Monteiro? First off, don’t think about “social media strategy”. If that’s your focus, you’re doomed to failure. Engagement on social media may be superficial, but it’s real. If you’re doing it to “build your brand” or “extend your reach” or some such nonsense, give up. You have to do it because you want to. You have to mean it. Even if you’re taking on an obnoxious persona that will enrage as many people as it delights, make it meaningful.

Second, be interesting. That doesn’t mean being a “great guy” who’s boring to follow. Don’t play it safe. Take chances. Be distinctive. Be funny, weird, rude, unpredictable. Social media is entertainment as much as anything else, and if you don’t entertain people, they won’t stick around.

Third, or maybe second-and-a-half, have a distinct voice. Remember, the people who only know you through social media only know you through social media. The persona you create doesn’t have to be you, but it has to be someone.

And finally, have fun. I don’t think there’s any doubt that Mike Monteiro has fun with @Mike_FTW. And he certainly has fun poking people who take themselves too seriously.

Update: Mike Monteiro has clarified that the background image on his Twitter page is a painting, not a photo, which is why it hasn’t been banned by Twitter. This fact may alter the veracity and implications of my statement that Bea Arthur posed for and approved the image, but I think the larger message is still relevant. They’re still just boobs.

Also, contrary to all obvious indications, I did not deliberately craft this post in a way to fish for a response, retweet, or acknowledgment from Mike Monteiro. But, perhaps, @Mike_FTW is another story.

Update #2: I neglected to mention this in the original post above, but I think it’s worth at least noting: the situation that seems to have pushed Mike Monteiro over the edge in the case of both of these “stunts” (my word) is the vitriolic reaction many people have had to John Gruber taking The Talk Show to Mike’s Mule Radio Syndicate. It’s not directly relevant to the point I was trying to make here, but it’s probably helpful to provide some context. Mike may be acting like a jerk on Twitter, but it’s nothing compared to some of the reactions he gets.

My (just-discovered) workaround to the WebKit letter-spacing bug

Update (5/29/2012): Upon working further with the project that formed the basis of this post, I discovered that my solution did not work, or at least, no longer worked. It’s not uncommon as I get deeper into a project with a large CSS file that there are subtle, inadvertent effects of the various CSS properties that get added along the way. Looking back now, I can’t determine for sure whether my solution did once work with the simpler version of the site, and something else I added later counteracted it, or if I was just too eager about a solution to realize it never quite worked in the first place. As a result, I had considered deleting this post entirely, but I have decided to leave it live, to further the discussion of the topic, or at the very least to serve as a monument to my challenges.

WebKit, the rendering engine “under the hood” in both Safari and Chrome, has a known issue handling the CSS letter-spacing property at certain small increments, and at certain font sizes.

Specifically, if defining letter-spacing in increments smaller than 1px or 0.1em, it seems to just ignore the property altogether… except at larger-than-default sizes.

I typically use em or % these days to define text sizes in CSS. So in my situation, I’ve found that my letter-spacing: 0.05em works if I also specify font-size: 125% (or larger), but if I have font-size set to 100% or less, the letter-spacing gets ignored.

Typically, after loading reset.css, I set a baseline font size for the document with body { font-size: 100%; } (or some size… actually it’s usually 80% but these days I’ve been leaning towards larger type).

I decided to play around with this a bit to see if I could resolve the letter-spacing issue, and I found a nice, easy solution that works at least for the particular site I’m currently testing it on. Your experience may vary, depending on how your HTML is structured and how complex your design is.

Here’s the solution:

body {
  font-size: 125%;
  letter-spacing: 0.05em;
  line-height: 1.3em;
}

body>* {
  font-size: 85%;
  line-height: 1.3em;
}

You may want to adjust the exact values of font-size to suit your needs. (And, yes, I’m aware that mathematically 125% and 85% don’t cancel each other out, but they’re close enough for my purposes.) It’s important to include the line-height property in body>* to define your target line height; otherwise your lines will be too far apart. Set it to whatever your ideal value is. (I usually prefer line-height: 1.5em personally, but for larger type, as on the site I’m currently working on, it gets too spaced-out.)

So what’s going on here? Well, strangely, it seems WebKit can actually render smaller type with line-spacing less than 1px or 0.1em just fine, but it won’t unless somewhere in the “cascade” the type has been defined as being a certain amount larger than 100%. I don’t get it, but until the bug (which it seems clearly to be after all of this) gets fixed, at least this seems to be a reasonably clean workaround.

It’s very important that you use body>* and not just body *. If you don’t know why, well… try it out and see. (The upshot: we’re applying a uniform scaling-down across the board on all elements directly under body, which is practically the same as just defining our target font size directly on body itself, but with the benefit of working around the letter-spacing bug.)

Note: I have only tested this using em as the unit of measure for letter-spacing. I’m aware of the issue with px as well, but I’m not sure this solution will work for that. But… really… just use em instead!