When I joined PatientsLikeMe, I wondered if I was going to be so eyebrow-deep in CSS that I wouldn’t be able to work on anything else. Once again, I was wrong. In this latest (3-week) iteration, I worked on the following:

• Got to dig into incredibly painstaking detail to solve some browser bugs on one of our client tools. You see, this UI has more z-index and absoute positioning than I’ve ever seen—and it all happens inside of a table—and it has to work in IE6! So, yeah. But I solved it, it was worth it, and a weird IE8 bug is actually what gave me the most trouble.
• Worked with Aaron to record a movie that is playing at our booth at this year’s Transplant Games.
• A new screencast for our Treatment Evaluations.
• Marked up and modularized a couple signup page options so we can mix and match in A/B testing.
• A redesign and rebuild of our PatientsLikeMeInMotion page (not yet pushed live).
• Solved a little problem of how to show admins who is seeing what in-app updates.
• A blog post about Campfire and Fluid on the PatientsLikeMe Tech Blog.
• Set up the Tech Blog with a .fluid class that gives us fluid images.
• Some survey form validation styling.
• Some post-TinyMCE anal retentive markup cleanup on our Partners site.

Once again, I really dig the in-house designer/developer thing. You’d think it involves working on the same thing over and over, but that couldn’t be further from the truth.

I wrote a wee bit more about the project on the portfolio page for it. Here’s a full screenshot so you can take a look:

Visit site »

(full size image)

The comments about Jamie’s presentation were incredibly positive, which made us all very happy. What made us sad, though, was that we couldn’t actually see the presentation ourselves. Finally, that has changed.

The first batch of TEDMED videos have been posted, and Jamie’s talk was one of the first. Check it out below to see what it is that we’re working so hard towards.

I’ve only been with PatientsLikeMe a little over a month, but already I’ve been treated to the exciting launch of a brand new community: the Epilepsy community.

According to The Epilepsy Foundation, about three million Americans are affected by epilepsy and seizures (with 200,000 new cases every year). We’re excited about providing tools for epilepsy patients that will allow them to track their seizures, research and report on drugs and other treatments, communicate with other patients on the forums, and (perhaps most importantly) find patients just like them experiencing the same types of seizures (and see what’s working for them).

The community is currently in beta and is open to U.S. residents. We’re currently working on features and improvements and that will make the community even more useful for a lot more patients. So, if you or anyone you know suffers from epilepsy, please let them know about the community. By entering their information, not only can patients find support from others like them, they are also contributing valuable data for the purposes of research.

Also, if you know anyone affected by ALS (Lou Gehrig’s Disease), Fibromyalgia, Chronic Fatigue Syndrome, HIV/AIDS, Mood Conditions (Anxiety, Bipolar, Depression, OCD, TSD), Multiple Sclerosis, or Parkinson’s Disease… please let them know about PatientsLikeMe!

While I was with BatchBlue, I recorded a ton of how-to screencasts. I had a process down that I thoroughly documented on the BatchBlue Blog (in a three part series). I used ScreenFlick, a simple screencasting tool for the Mac. I loved it’s simplicity.

When I joined PatientsLikeMe, I wasn’t sure if screencasting would be a part of my job anymore. Rather quickly though, I was called upon to help pick software to capture some screen animations for our presentation at TEDMED. Panning and zooming was important, however—and that’s something ScreenFlick doesn’t do.

I had heard folks rave about ScreenFlow (again just for the Mac) a while back, and it looked gorgeous. The panning and zooming was a key feature, but foolishly I assumed those features would involve heavy duty editing. I preferred recording and being done with it.

Boy was I wrong.

My goodness, ScreenFlow is a dream to work with. Turns out the cropping, panning, and zooming can all be done after the fact (on your full-screen recording) with minimal effort and incredible ease of use. Plus, all the transitions are non-destructive, so you can experiment and ditch what doesn’t work while preserving your original recording. It’s much more like iMovie than ScreenFlick in that respect.

Shortly after the TEDMED presentation went over quite well, we decided the release of the new Treatment Reports on PatientsLikeMe would benefit from a screencast. I’ve embedded it below. I used ScreenFlow and the YouTube HD upload (for the first time as well). I’m very happy with the quality YouTube can churn out now for a screencast. Plus, it makes it much easier for folks to know when a new screencast is up!

Please, let me know what you think. I’m always looking to improve my screencasting!

The Problem

Here’s what the homepage looks like. I can dig it.

The header, sidebar, and footer are pretty straight forward. That large graphics-and-text element in the main column is a bit different. So, how would I go about marking this up? First of all, the photos and screenshots are presentational, so we’d handle that with a background image. For the text (which is not presentational, so we want it in the markup), I tend to size using keywords and percentages. But in a case like this, I’d use some pretty pixel-specific font sizing, padding, and line breaks to get the markup to render like the mockup. Of course, I’d have to use some sort of image replacement on the “Patients + Data” title since that’s a non-standard font.

But Wait!

Here’s the thing. The page is actually somewhat fluid. It has a min-width of 1000 pixels and a max-width of 1200 pixels. So, even if I wanted to use that approach, I have no way of knowing exactly where the text should go because the image behind it doesn’t have a static size.

So… now what?

Well, we’re gonna rock it like it’s 1999 and just use one big honkin’ image for the main column. It’s not the most elegant solution, but it will work the best. To ensure the text-based content is still available of the user turns images off, we’ll put the text in the markup. Like so:

<div id="image">
  <h2>Patients Data = Insight</h2>
  <p>Patients are no longer just health care consumers. They are healthcare customers. <strong>PatientsLikeMe</strong> provides deep insight into your target patients&rsquo; attitudes, beliefs, behaviors, and outcomes.</p>
  <p><a title="Learn more about our Products &amp; Services." href="products/">Learn More&nbsp;&raquo;</a></p>
  <a title="Learn more about our Products &amp; Services." href="products/"><img src="images/home1.jpg" alt="Home page artwork" width="864" height="735" /></a>
</div>


You see I have the text and the image present. I’ll use CSS to offset the text while keeping the image visible. That CSS looks like:

div#image h2, div#image p {
  position: absolute;
  left: -1000px;
  width: 100px;
}


Why use this instead of display: none;? Setting display: none; on an element will completely remove it, even for users with assistive devices such as screen readers. The offset technique will just push the content out of the viewport. It’s still actually there, just not visible. Users with CSS and images enabled will see the image and no text. Users with screen readers will simply read the text (and alt text of the image). Users with CSS AND images turned off will see just the text. The rare folks that have CSS turned off but images turned on will get both the image and the photo. I believe that’s a small enough population to make this an acceptable approach.

But Wait Again!

We’d actually like this image to fill the main column, whether the screen is at 1000 pixels wide, 1200 pixels wide, or somewhere in between. How do we do that?

div#image img { max-width: 100%; height: auto; }


In the markup, hard-code the image’s width to fill the maximum width of the area. In the case above, it was 864 pixels. Then, the max-width: 100%; ensures that if the width of the div shrinks, the image will shrink along with it. The height: auto; simply will adjust the height of the image to correspond with the new width.

Awesome, right?

Oh, the IE Horror!

The good news is that all the markup and CSS above works fine with Internet Explorer. Yes, even IE6. However, it’s the godawful way that IE resizes images that causes the problem.

Luckily, through a bit of hunting I found that by simply adding some weird proprietary Microsoft thingie to your CSS, you can fix it. I just added this line to my IE stylesheet:

div#image img { -ms-interpolation-mode: bicubic; }


You can see the before and after below. Pretty remarkable difference. It becomes really noticable when there is text in the image.

One caveat: I tried to use this technique on a PNG file. It didn’t work. However, I re-saved the image as a high quality JPG and it worked. So I suppose Microsoft assumed you would only want to do this for photos or something?

One more caveat: If you have many images on the page with -ms-interpolation-mode: bicubic added to them and do any window resizing, things can get slow really quickly. Ethan Marcotte wrote a more complicated but higher performance method for handling this. If you’re talking one or two images on a page though, you’re fine with this approach.

And there you have it. Your image will stretch to your desired max- and min-width, and even look nice in Internet Explorer 6 and 7 (IE8 actually resizes images like a real web browser).

Last night, my blog post hit the BatchBlue Blog where I announced I’ll be moving on from BatchBlue Software and joining PatientsLikeMe.

Here’s the intro, but I ask you to read the entire post…

After nearly two and a half years, this week was my last at BatchBlue. This is a decision that I couldn’t have imagined making just a few weeks ago. My awesome co-workers have been incredibly understanding and supportive…and I think a big reason is that the decision really has nothing to do with BatchBlue at all.

I mentioned in the post that there are personal reasons for this move that are incredibly important to me—the type of thing that can convince you to move from what is already a great professional situation. I really can’t say enough great things about BatchBlue and the entire BatchBlue team.

Almost two and a half years ago, I was a wee lad working 70 miles away from my wife and little girl (and baby boy on the way). I was with Aptima, another fantastic company that really catered to my inner entrepreneur by essentially allowing me to dynamically define my position as I explored my interests. Unfortunately, it came to a point where I was reaching the limits Aptima could provide. They are an R&D think tank-type organization, and being able to work and collaborate with users during the development process was something I wasn’t able to do and really wanted to try.

Along came BatchBlue. I was able to work from home, eliminating the commute issue. I was able to work with a very small and tight group. I was able to work on a web app at the beginning of the development phase. I was able to work closely with users as we went from alpha to beta to 1.0. I was able to be home for the arrival of my third child. I was able to be around for doctors appointments, preschool performances, and even more serious events like an 11-day hospital stay with our infant. Basically, BatchBlue gave me everything I ever could have asked for.

I actually first talked to PatientsLikeMe while I was still at Aptima. I was blown away by what they were doing. I started talking about them on this blog and on other blogs. I was kind of smitten.

Over the last couple of years, I’ve done a little bit of side work for PatientsLikeMe (that reminds me, I gotta update my portfolio!). In doing that work, I not only gained some insight into what PatientsLikeMe is trying to accomplish, but also met quite a few members of the team. That helped a lot since I know I’m not heading into the unknown on this. I can thank Twitter for cultivating the relationships of some of the folks I met while also giving me some insight into the folks I haven’t met yet.

I’m incredibly proud of the work I’ve done at BatchBlue—on BatchBlue.com, BatchBook, on The Small Business Web and also the work done with our users. I’m also thrilled I got the chance to work with Pam, Michelle, Sean, Keri, Stephanie, Matt, Adam and Melony.

Next week will mark a huge change for me, but it’s time for me to get over that. I have a lot I want to accomplish.

Joshua Porter posted a great article yesterday on Bokardo called “Sermo a sign of a larger trend toward specialized social networks“. In the post, Joshua says:

Sermo is a sign of a larger trend: the move to smaller, more specialized social networks that have custom tools to support a unique activity and may cater to a private or exclusive set of users. In this case it is sharing medical information among verified doctors.

I’ve blogged about Sermo in the past. I love what they are doing—creating an exclusive social network for physicians so that they can discuss medical issues long before they hit the journals (and are likely more candid than journals). Of course, they are raising a little hell as the pharmaceutical companies can no longer control their messages delivered to each physician. They are (gasp) talking to each other.

If it is possible to have a crush on a company, you know I’m in love with PatientsLikeMe. I left a comment about them on Josh’s blog, so I’ll just repeat myself:

On the other side of the medical spectrum, I’ve spoken with a few folks from Boston-based PatientsLikeMe, another example of a specialized social network. They are a network for the patients. I love that instead of Amazon’s “customers who bought this also bought this…” intelligence, they have “patients at the exact same stage of ALS as you who are experiencing these symptoms that you are have taken these medications and felt these side effects.”

Ridiculously amazing.

The market of “just because” social networks is now bloated. In order to take off you’re going to need one of these specialized networks that offers something nobody else can. One key to that can be taking detailed profile data and using it to help foster your users’ social interactions (like PatientsLikeMe, and others such as last.fm).

Damn, reading that back, it sounds good. You can tell I love this idea. I recently joined Facebook. I yawned about it here. All I’ve done with it is insert widgets into my profile of specialized networks I have elsewhere (last.fm, Flickr, Twitter) and add friends that I have elsewhere. I find Facebook doesn’t really do anything more than my personal blog already does—act as an aggregator for all this information.

So, these specialized networks—last.fm (for tracking my music listening habits), del.icio.us (for storing my bookmarks), Flickr (for storing my photos), Twitter (for microblogging, public IM, whatever the hell you wanna call it), etc.—offer a hell of a lot more value than the “aggregator” social networks. You can easily hop to another aggregator (or create your own) and add the specialized content to that new profile. You still need the specialized services, but the Facebooks and MySpaces become expendable.

Then there’s OpenID and portable social networks (via Oberkirch). Once these reach their enormous potential, what really is the purpose of Facebook or MySpace?

I’ve talked a bit about PatientsLikeMe before, but they are a social networking site (don’t roll your eyes yet) for patients that suffer from life-altering diseases. The company was founded as a resource for ALS (Lou Gehrig’s Disease) patients but has expanded to include MS and Parkinson’s. I absolutely love what they’re doing—and they have some very unique problems they need to solve. I think Kate will be a great match.

Kate and I worked together many years ago at Mazer Digital Media. Mazer was my first job out of college and while the environment and end result (a layoff) wasn’t the most memorable, the relationships I made there have stayed with me. Kate came on towards the end of the line for Mazer and made those last few months go from unbearable to downright fun. She brought a great perspective to what we were doing and we played off each other very well, both personally and professionally. She continued working in education (for CAST) after Mazer while I went on to Aptima. I tried to think of ways to work together again but nothing every came up.

Another former Mazerite, Ed Zbinski, will start a new gig on Monday at Members First. I’ve known Ed since college and I’ve enjoyed watching him evolve as a designer. His evolution has recently gone from doing interesting work on the side (when the day job wasn’t providing compelling enough projects) to blogging about his growth as a designer. He has blogged openly about the move to Members First, and it has been exciting to follow as a friend of Ed’s.

Members First provides web development and other web services for “member-based clubs, organizations, and associations” such as country clubs. Who knows… maybe Ed will get some free rounds out of this gig.

I love this social media stuff. But how much of it do I actually practice? Well, a decent amount as a blogger, I suppose. But I’m quite light on the social networking side of things. I don’t have a ton of friends lists all over all sorts of sites. I don’t have a MySpace, Virb, or Facebook page. Why is that?

I figure it is because I tend to use social media sites for my own convenience, not for the purpose of networking. In fact, I like the “collective intelligence” angle a lot more than the networking angle.

For example, I don’t use del.icio.us because I want to make friends. I use it first and foremost because I used to use three machines quite a bit… and many browsers on those machines. I hated not having synced bookmarks. What I actually used to do is put my bookmarks on an HTML page on my server. That way I could always navigate to them. Enter del.icio.us—now I just save them to my account and access them wherever I want.

But del.icio.us has this cool feature that allows you to see how many people have bookmarked a page. Click on that and you can see how they saved it… what tags they used… descriptions they left… etc. An example I like to give is that if you see someone tagged it as “inspiration”, you can—with one click—see what other pages have inspired that person. If they are into the same stuff as you, this can really help you find relevant content. This is collective intelligence.

I’ve never gone as far as saying, “wow, this dude has wicked cool bookmarks—he’s gonna be my friend.”

Another example is Flickr. The other day, I was looking for a nice photo of Trot Nixon to use on a forum. While searching the entire user base for photos tagged “trotnixon”, the one I actually ended up using was uploaded by one of my Flickr Friends.

I don’t use Flickr too much for the collective intelligence though… except around conference time. I use it for my own storage and really keeping in touch with people I already know via their photos. I’ve added people as Flickr friends after meeting them… generally not before (using the term “meeting” loosely here… I have friends I’ve never met).

Side topic: I hate that when you add someone as a Flickr contact you have to decide if they are a Friend… or just a contact. I realize there are some permissions-based features that go along with that, but gosh… I don’t want to add someone as a contact just to have them add me as a friend and then be like… WTF? That jerk? Also, I don’t want to add someone as a friend and then have me just be a contact. Then I just look needy…

So, I’ve never searched Flickr and thought “wow, she has sweet photos—she’s my new friend.” I had never done that on ANY site.

Well, until now.

I have gushed about last.fm since my buddy Nick got me to join. Now I adore it. I love the collective intelligence side of it. Just about every time and artist I haven’t heard in a while comes up on the shuffle, I command+tab over to the last.fm.app to see how many scrobbles (plays) that artist has. Generally, you’ll get some in the tens of millions. The really indie folks are under a million, generally. Every once in a while you get someone below 100k or even (gasp!) 10k. Lowest I’ve seen for a band that I listen to just like I would any other band (like, not friends of mine or something) is Calendar Girl, clocking in at a lackluster 287 scrobbles. In fact, I was their #2 listener last week (with a whopping five plays).

Last.fm is like fantasy football for audiophiles. Every Sunday, instead of checking out Tom Brady’s yardage, I’ll check and see what I listened to over the last week… who rose up my charts… who moved up my Top Artists Overall chart. Last.fm has a friends feature that lets you easily see what they’re listening to. I added Nick. Once I listened to enough music to allow the algorithms to make a good judgement, last.fm told me that Nick and I have “Very High” compatibility rating on the Taste-o-meter.

However, once I listened more, last.fm also presented me with “Neighbours.” Neighbours are not friends. They are the people in the system who have the musical tastes most similar to you. Think about this. Imagine if the whole world scrobbled their music listening. Imagine if you could find that one person in the world with taste just about exactly the same as yours?

Well, even if everybody in the world did this, I think I’ve already found mine. Sparky232221.

This one’s just plain freaky. Just about my entire chronic music-listening life, Teenage Fanclub has been my favorite band. They’re a Scottish quartet (well, three guys with revolving drummers over the years). They are my #1 artist on last.fm. They are Sparky’s #1. Another Scottish outfit, Mogwai, is my #2 artist. They are certainly my favorite among highly active bands (TFC is in the latter stages of a brilliant career that used to see them much more prolific). Mogwai is Sparky’s #3. Who’s Sparky’s #2? Why that would be Hoboken trio Yo La Tengo—who happen to be my #4. The only thing keeping us from having the same artists in our Top Threes is my obsession for The Arcade Fire lately (Sparky has The Arcade Fire at #30).

Not only is Sparky my #1 neighbor, I’m his. In fact, I’d like to see the algorithms results. He is so far ahead of my #2 it is not even funny. I introduced myself to Sparky (maybe we’ll call him Mark because—well—that’s his name) on his shoutbox with a ” Wow… holy… you have fantastic taste in music. ” We keep an eye on each other’s charts now. It’s cute. It’s fun.

But finding that other person that is so freakily like you it is scary is not just bout “cute” and “fun”. I recently had the chance to do a teenie tiny amount of work for a Cambridge, MA startup called PatientsLikeMe. Their service does kind of the same thing, but for a far more noble cause.

PatientsLikeMe was started when Stephen Heywood was diagnosed with ALS. His brothers rallied around him, shocked by how little was being put into finding a cure for this terrible disease. Jamie Heywood became a “guerrilla scientist”—leaving no stone unturned to try to get to the bottom of the cause. Stephen Heywood, with friend Jeff Cole, started PatientsLikeMe.

PatientsLikeMe is a networking site for patients of life-altering diseases. It started with ALS and, in March, expanded to include multiple sclerosis and Parkinson’s disease. PatientsLikeMe allows patients to track their progress—weight, treatments, symptoms, how those symptoms were effected by the treatments, dosages, etc. All of this is then fed into an algorithm which shows them—here’s where the name comes from—patients like them. People going through exactly what they are. So much for feeling like you’re alone when you are faced with something like this.

Jeff and Ben are fantastic people and I’m watching the site closely to monitor their progress. Social media isn’t just all about meeting new friends. It can really be about changing your life—connecting you with people (not just information) that you never would have been able to discover before.

Essentially, the reason why the web was built.

I was recently speaking with Jeff Cole from a PatientsLikeMe, a company that is creating a community site for patients of life-altering diseases. Patients use the site to track their progress dealing with the disease. One question that eventually needs to come up with is pretty morbid, but real. What happens when these users pass away?

This is something that Eons, former Monster.com founder Jeff Taylor’s new company, is also going to be dealing with. Eons is a social networking site for users aged 50 and above. So, while one company is going to have to deal with users passing away from horrible diseases, another has to deal with the inevitable because of advanced age.

So, what should the sites do with these rich profiles of information? Honestly, I think the profiles need to stay online. But denote that this person is no longer with us. The pages become an online tribute to that person.

Amber MacArthur and Leo Laporte’s wonderful new podcast, Net@Nite, covered a related site in their second episode. The site, MyDeathSpace, is a repository of MySpace pages of deceased users. For example, in October 18-year old Jordan Scudder was killed in an auto accident. If you visit his MySpace page, you see that it now has become a repository for remembrance messages. For example:

hi jordan, i really miss you. i still would like it if you would come home, everyday it gets harder and harder, i hear it is suppose to get easier but….. your my boy, what can i say. i keep looking at all the pictures of when you kids were little and i’d like for you to see them too, some of them would make you laugh. i also, found the video of when *you, dad and kristin* when on that swing in kissimmee, of course you had to fix your hair before you were even off the ride. hahaha. i really do love and miss you so much, ( more than words can say). forever, your mom

Messages like these will always be there to remember Jordan. I think the multitude of social networking sites out there can learn a lot from this. Keep it there. Remember the past users.

Now, a stickier situation is blogs. What happens if a blogger passes away? Eventually, the hosting costs won’t be getting paid. The hosting company will likely shut the blog down. But then all of the data is lost. Should hosting companies have some sort of responsibility to check and see what’s up before shutting a site down? How good are the backups they keep (if a family member contacts them after the fact to explain the situation)?

The blog is the new diary, and the number of blogs out there is only going to increase. This is going to become an issue at some point, and I’m curious how hosting companies will deal with it.