Reboot!

It’s been 7 years since I last redesigned Mike Industries, and it feels like even longer. The old design still holds up considering the largely desktop audience it was designed for, but since it’s May 1st Reboot Day, and I’ve had some time on my hands since leaving Twitter, I thought I’d release a shiny new version today.

Say hello to Mike Industries, Version 3.

What is wrong with the old Version 2, you ask? Well:

  • It’s not responsive.
  • It ingests and displays all of my Tweets and saved Tumblr links, which seems like overkill now.
  • Because of all the peripheral stuff being displayed, WordPress isn’t able to assemble the page very quickly and browsers are also slow to render it.
  • It doesn’t take advantage of any of the great HTML, CSS, and related advancements that have developed in the last few years.
  • It was just time for a change, and I felt like getting back into pixels and code again.

While I’ve spent the last few months putting this together, it only occupied a day or two of time per week. Lots of fits and starts, including periods of frustration and reflection where I’ve asked myself “Why am I not just moving everything to Medium?”

The answer to the Medium question is two-fold, for me:

  1. As someone who designs things for a living, there is a certain amount of professional pride in creating one’s own presence on the internet. It’s kind of like if an architect didn’t design their own house. Almost every non-architect — which is 99% of the world — should live in a house designed by someone who knows what they are doing, but if you have the skills, why not use them?
  2. In working through all of the various issues that come with designing a modern, responsive site, I gained a whole new appreciation for how well-built Medium really is. I mean, I knew it was well-built before, but it really is the highest-quality solution for most people out there. Aside from the exquisite craftsmanship, the network effects that now occur around well-written articles on Medium rival and sometimes exceed those experienced during the Blogging Days of Yore. For this reason, I going to — at least initially — cross-post articles on both Mike Industries and medium.mikeindustries.com, which is a sub-domain on the Medium platform. Coincidentally, I have also owned meatium.com for a long time, so if I ever start up a food blog for carnivores, I might host Meatium on Medium.

This site, when active, has always been a bubbling cauldron of experimental hacks and concepts, and I’m happy to say that version 3.0 continues this tradition. The site is still a work-in-progress, but below is the philosophy behind it, as well as a host of implementation tidbits.

First Principles

In the past, I’ve taken a certain amount of pride in some of the bells and whistles around this site. The landmark feature of Mikeindustries 1 was a header displaying a background image of the view outside my apartment window, updated every few minutes. The site also had a font selector in the sidebar which allowed you to customize the typeface throughout the site. Back in 2003, that was kind of cool… to me at least. Mikeindustries 2 was all about sIFR and separate columns for articles, links, and Tweets.

Mike Industries, Version 1
Version 1 (circa 2003)
Mike Industries, Version 2
Version 2 (circa 2009)

I started off Mikeindustries 3 with the opposite approach: what is the bare minimum I need? When an article is displayed, do I need any elements at all besides the text itself? If I get draconian here, can I do the whole thing as one template to rule them all? If I put everything someone might want to know about me into a single About page, do I even need persistent navigation?

And perhaps the most confounding question of all: what about my design work? While part of me really wants to keep it all online and easily accessible, the other part of me recognizes how dated all digital work gets and wonders if it’s worth it at all. The most recent version of my portfolio is also in Flash, so clearly a straight porting wasn’t going to happen.

In the end, I decided to take a down-to-the-studs approach, launch the foundation on May 1st, and then slowly add things back in if and when necessary. At this point in my career, design leadership is a bigger part of my skillset than hands-on design, so I imagine any sort of portfolio I might put together in the future would serve a different purpose than it did 7 years ago.

Content

I settled on three types of content for the new site: What I’m Writing, What I’m Reading, About Me. The first is made up of original blog posts authored in WordPress. The second is a running list of articles I’ve faved in Instapaper. While I read of lot of things on the internet and Tweet out links to many of them, I’ve found that my Instapaper faves represent all of the best long-form stuff I’ve come across, and that is really all I want to publish here. So… the main Mike Industries stream is now comprised of What I’m Writing and What I’m Reading. If you want to dig into either separately, there’s navigation for that. The third type of content is a simple About Me page for people who are interested in contacting me or finding me on other networks.

WordPress

Hoooooooboyyyy. Where to start on WordPress. I love WordPress, I am so glad it exists, and I’m happy to host my stuff on it, BUT, it is an absolute bear for someone with my particular skills inventory. If you have no skills at all, you just pick a theme, do all of your customizations in the GUI, and be happy with what you get for free. If you are a PHP wizard who has worked on dozens of custom WordPress installations, you just build everything from scratch, hack when you need to hack, and know where all the bodies are buried. For someone like me, however, who knows HTML and CSS very well but is only a script kiddie with PHP and WordPress functions, the task of building any sort of site is daunting.

Here’s generally how my progression went:

Step 0: Spend a week or two in Sketch coming up with a great design that fits my objectives and makes me happy. No problem.

Step 1: Begin coding from scratch. The HTML and CSS part go well, but when I get to the task of snapping it into WordPress templates, I realize there is so much WordPress functionality that already exists that I am not getting for free if I don’t use a existing WordPress theme.

Step 2: Begin looking for an existing theme that remotely resembles my design. Realize there is none. I probably wasted an entire week on this.

Step 3: Take the one that seems closest anyway and then crack it open to see how it’s coded. HOLY SHIT FUCK THAT THERE IS NO WAY I AM USING THIS RAT’S NEST SPUN FROM GARBAGE.

Step 4: Look for another theme that is as simple as possible and just gets me to a reasonable baseline. I wasted another week or two on this as every theme I looked at still included things I didn’t need or want. Maybe I am misjudging, but even the standard “twentyfifteen” theme that comes with WordPress seemed like overkill.

That’s when I realized why I was having such a hard go at it: most themes are built for non-technical people so they can make customizations in the WordPress GUI, and thus, contain a ton of extra code to make this possible. While that is noble, it’s not for me.

This is one of the many points when I almost threw my hands up and just moved to Medium.

The last thing I tried ended up being the right approach for me: take the simplest built-in theme (which I believed was probably twentyfifteen), keep all of the template files, but strip them down to nothing except a few bare-bones functions that I know I needed.

Using an almost blank set of templates, I was able to get Mike Industries 3 90% working within a week or two. But, as the saying goes “the first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.”

That last 90% would be spent on some nasty CSS layout bugs but also some really cool stuff, outlined below.

Elasticity

No one would build a website these days without crafting it to adjust nicely across a wide range of screen sizes. Down in the coal mines, we call this Responsive Design, as most people reading this blog already know. I’m calling this section Elasticity though, because the solution I settled on feels more elastic than anything else. The last time I redesigned this site, there was no such thing as “vh” and “vw” units. Now there are, and they are amazing! Most type blocks, as well as some div heights and widths are now specified as a percentage of the viewport width (vw) or viewport height (vh). For instance, on desktop, you’ll notice that the large image goes about 70% down the screen, allowing for a preview of the first article. Also, if you stretch your browser window horizontally, you’ll notice that the type resizes with it. There are also upper and lower limits for type so things don’t get too cray-cray. I’m really digging this method of sizing. As for the traditional concept of responsiveness, I only used one breakpoint; you either get the one-column mobile/tablet layout or the two column desktop layout. Seems more than adequate, especially considering I’m also doing some other things like limiting paragraph line-length, which maximize readability at certain screen sizes.

Typography

As I mentioned, type sizing is dynamic, which is cool, and I decided to stick to a system face, Avenir on Apple devices, Roboto on Android devices, and Helvetica/sans on everything else. This is an area where I may switch to a webfont eventually, but I really hate it when sites go blank for a few seconds as they load their fonts. Even with sIFR, we never recommended people use it for large bodies of text. I find Avenir looks pretty sharp here actually.

As has been my practice in the past, I don’t use grids — baseline or otherwise. Grids are sort of like the equivalent of weighing your ingredients when you bake. They are the “correct” thing to do and they ensure a certain level of precision, but they aren’t always necessary, depending on your experience and your goals. Furthermore, unlike in baking, if you got an element wrong, you can fine-tune it at any time. (I should also note here that I’ve been doing a lot of baking lately and I absolutely weigh my ingredients, for now.)

Imagery and color

Imagery and color are where things got really fun in this project. I initially built a lot more than what I’m launching but then ended up commenting a lot of it out for now, because I’m not sure I need or want a user navigable gallery of photos as part of the core experience. Not until I think it through a little more, at least.

My primary goal for imagery on Mike Industries 3 was to build a system which allowed me to keep things fresh with minimal effort. In thinking what the dead-simplest flow would be for featuring new images, I actually settled on email! If I could just email any photo on any device at any time to a secret email address and that would publish it to the site, that would be fantastic. Luckily, there is a WordPress plug-in called Postie which facilitates this sort of thing. I tried to stay away from plug-ins entirely, but this one only hits the publishing side and not the rendering side, so it seemed like a great choice. The next step was figuring out how to integrate it such that its output could be used as a randomized series of background images in the header. I’m not completely settled on this format yet, but I essentially have it listen for new images sent to an email address and then publish each as a post with a special tag. Then, in PHP on the rendering side, I have WP loop through these posts, create an array of image URLs, titles, and dates (from EXIF data), and then display one randomly when you hit the front page and a few other pages. If an individual post has a “featured image” attached to it, I use that image instead. I’d post the PHP, but that would expose me for the hack that I am. Pay no attention to the code behind the curtain!

Alright, so, big beautiful images all over the site with minimal effort to keep fresh! What could go wrong? Well, the downside is that big beautiful images are also big in load time. For people with giant retina monitors and good connections, I love serving up a crystal clear phatty, but for more constrained environments — especially mobile — that 800k file would be much better off at 50k or so.

There are SO many ways of dealing with adaptive image sizes these days, but most of them left me unimpressed. Even srcset, which is an emerging standard, feels wrong to me. I’ve never liked the idea of hardcoding image sizes in HTML and srcset makes this even worse. To me, the ideal long-term solution has the client send some screen resolution info to the server and the server dynamically decides what image to send. Luckily for me, someone already wrote something like this a few years ago: Matt Wilcox‘s Adaptive Images. For some reason, it’s gone largely unsupported and dormant since then, but I found it to work perfectly for my purposes. The mechanism is simple:

  1. All requests for images get intercepted by PHP.
  2. PHP reads a cookie with the user’s viewport resolution information.
  3. PHP then checks to see of a version of that image at the appropriate resolution breakpoint has already been cached. If so, it serves it.
  4. If there is no cached file at the right resolution yet, or if the cached file is stale, PHP creates one and then serves it.

Super simple and works with very little configuration or retrofitting of existing imagery. This was important to me as I’m not about to sign up for going through 10 years of HTML IMG code and changing a bunch of shit.

Alright, so now that all of our images are adaptive in file size and resolution, we’re done, right? Turns out, not exactly. Even on fast connections, there is still an annoying lag before a large image loads and renders. Because the rest of the layout renders instantly, I had a giant placeholder space to figure out what to do with. Once again there are SO many ideas for what to do in this situation. You can read a good run-down of a bunch of them here. Not surprisingly, Medium’s is probably the best implementation. Since I’m trying to keep things as simple as possible and not use javascript except where absolutely necessary, I came up with my own serviceable solution.

Using the aforementioned Adaptive Images PHP script as a baseline, I added a couple of lines to it that save out a tiny, 10-pixel wide version of every image as well as the chosen adaptive size. Then, I load that tiny image as a background-image of a div behind the main photo div and stretch it to fit the entire dimensions of the div. The effect looks amazing in Chrome and slightly less good in Safari, due to surprising differences in how they interpolate images. As a result, the tiny 5k file loads instantly, showing you an interesting gradient mesh that approximates the full image, and then the full-image quickly fades in when it is loaded (accomplished with the css transition property).

For the icing on the cake, I wanted to set the color scheme of the page (type, sidebar color, etc) to match the dominant color in the photo. The first time I saw this done, it was in Dave Shea’s last Mezzoblue redesign a lonnnnnnnng time ago, but the color was set manually. I’m too lazy for that, so I began looking for ways to find dominant colors programmatically. A lot of people have tried different methods to do this and most of them don’t work very well. The one I found that worked the best and was easiest to implement is called Color Thief. Unfortunately it’s javascript-based, but in this case, I’m cool with that, because if I was going to do it server-side, I would want to build something that only did the calculation once and stored it. In fact, let me just call timeout and describe how this entire set of things should work in WordPress, in case someone knows how to build it:

  1. Photo is uploaded into WordPress.
  2. WordPress stores tiny-resolution file for the gradient mesh version.
  3. WordPress performs dominant-color and perhaps even dominant-palette calculation a la Color Thief and stores it as attachment metadata.
  4. All of this is just magically available in PHP.

So, since none of that exists yet — to my knowledge, at least — I’m just using ColorThief.js for now, which is why you see the color palette fade into prominence in concert with the high resolution imagery. I’m looking forward to streamlining this when someone builds something like what is described above. Is that you? I think that should be you!

Final Retrofits

Throughout this entire redesign, I was worried about how all of my legacy articles would look. Clearly there are going to be some weirdly formatted older posts that contain some experimental stuff, but what about the 99% of posts that use a pretty standard mix of (non-responsive) text and inline imagery? Turns out, one style rule pretty much fixed everything: img {max-width: 100%; height: auto}. That one rule kept all my images from sliding off into the gutter on smaller screens and made the site look like it’s been responsive for years. Magic.

One Last Thing: Blog Comments!

I got most of the way through this redesign thinking I would just keep comments turned off and hide all of the tens of thousands of great comments that readers have written over the last couple of decades… because who does blog comments anymore??? But then I got to thinking, I miss comments, and I never really had much of a comment spam or trolling problem on here before… so COMMENTS ARE BACK BABY. What’s old is new again. YOLO.

… and with that, I’m happy to ring in Mike Industries Version 3. It’s great to be back.

⇗ The sugar conspiracy | Ian Leslie

The sugar conspiracy | Ian Leslie

Robert Lustig is a paediatric endocrinologist at the University of California who specialises in the treatment of childhood obesity. A 90-minute talk he gave…

⇗ On Being A Senior Engineer

On Being A Senior Engineer

I think that there’s a lot of institutional knowledge in our field, especially about what makes for a productive engineer. But while there are a good deal of…

Faves from The Pixel Awards

Pardon the mess around here as I move around some furniture and get ready to start publishing on Mike Industries again, but I wanted to share a handful of sites, apps, and interactive projects that stuck out to me as I finished judging The Pixel Awards today. These projects were from about 20 different categories ranging from Fashion to Experimental to Student Work, so they may all be great at very different things. I found them all delightful and a reminder of the great work going on in our industry. Was also surprised at how many hamburger menus I saw across much of the field, but that’s a topic for another day!

Thank you to the Pixel Awards for having me as a judge. These were my faves:

Read more…

On Teleportation

I remember the first time I heard of a real product described as a teleportation machine. It was only a couple of years ago, actually. A founder of a popular photo sharing network described the ultimate purpose of his product as a means to teleport anywhere around the world. I remember reading that sentence and thinking “this is a really great product, but it doesn’t actually make me feel like that.”

Maybe it was the fact that individual photos only provide a split-second glance into someone’s world. Maybe it was that filtering, cropping, and opportunistic life-editing sometimes creates a veneer that doesn’t feel like real life. Most of all though, I think it’s because the experience wasn’t live.

The difference between something typed or captured minutes before you see it and something you experience simultaneously — cooperatively — with the person doing the broadcasting is transformative.

The very first time I saw an early Periscope alpha last year I was astounded. In going through the hundreds of apps on my phone right now, I can only find five that blew me away on the very first use: Uber, Postmates, Shazam, Dark Sky, and Periscope. My approximate reactions the first time I used all five:

Uber: You mean I can press a button, a car will appear, and it will take me wherever I want???

Postmates: You mean I can press a few buttons and food from any restaurant I choose will be delivered to my doorstep within an hour???

Shazam: You mean I can hold my phone up and it will tell me whatever song is playing???

Dark Sky: You mean this app will tell me exactly when it is going to rain at the exact spot where I am standing???

Periscope: You mean I can experience something live anywhere around the world through someone else’s eyes???

Obviously, these five products are on vastly different scales in terms of usefulness. As cool as Shazam is, I don’t actually need to identify music very often. Now that I live in California, there’s little rain for Dark Sky to warn me about. As useful as Uber is, I prefer to use Lyft. Postmates, I can’t get enough of.

But Periscope… this thing gets more and more amazing every time I use it.

I’ve witnessed baby chicks hatch live at a Texas fair. I’ve ridden along in the cockpit of someone’s plane. I’ve enjoyed concerts I didn’t even want to be at in the first place because I could dip in and dip out from my living room. I’ve shared my own panoramic view from the top of Mt. Tam with a bunch of people who weren’t lucky enough to be hiking that beautiful day.

… and this is all during the private beta period with only a few hundred people using the app.

It doesn’t take a whole lot of imagination to think of the thousands of ways Periscope will be used now that we’ve released it to the world. Musicians doing intimate shows from their back porches. Extreme sports athletes taking people along on their adventures. Friends sharing raw, live experiences from their travels instead of just manicured snapshots. And oh the breaking news.

If you happen to be witnessing the most interesting thing in the world at any given time, a billion people can join you in a matter of seconds.

One of the most exciting things about Periscope is that it is a product arriving at the exact moment in history when the world is ready for it. If you released it three years ago, it wouldn’t have worked because cellular networks weren’t fast enough yet. If you released it even one year ago, it wouldn’t have worked because video encoding on phones was too slow.

Being too early with a great idea is noble but often fruitless. Being too late is imitative. Being there when revolution meets readiness, though, is wonderful.

Periscope won’t be perfect from the get-go as Kayvon and his amazing crew tackle issues like unpredictable network conditions around the world, sensitive content, and general social scaling, but I’ve never been more excited about an app in my life as I am about Periscope. It is the only technology that’s ever made me feel like I was actually in another place.

It will also be interesting to see how other companies craft their own experiences around live video. There will undoubtedly be many different approaches of varying quality and taste. Long before Periscope was part of the Twitter family, I was incredibly impressed with the thoughtfulness of the product experience.

As a designer, I always root for the best experiences to win.

It’s interesting that we’ve spent centuries wondering if teleportation was possible and now decades trying to simulate it with quantum physics. Imagine for a second that it were actually possible. Do you know how inconvenient that would actually be? You’d hear about an amazing sunset over Machu Picchu, beam yourself there, and 50,000 other people would physically appear right after you showed up. You’d spend a week climbing Mt. Everest and a pack of noisy teleporters in ski jackets would already be at the top taking selfies.

The most fulfilling experiences in life require effort, and I’m not sure that’s something we want to change. Maybe what we’ve wanted all along isn’t actual teleportation but merely the convincing, immersive feeling of being somewhere else, for precisely as long as we choose. A preview of what it might be like were we to one day make the trip; experience the activity; meet the person.

Maybe it turns out the best teleportation machine is the one you already have with you.

We Are Expanding the Design Team at Twitter

First things first: we are expanding the Design Studio at Twitter! A few days ago, I opened 8 new positions, which can be viewed here. If you have fantastic design, production, or research chops and you love Twitter, we’d love to talk to you.

Secondly, below is a not-so-brief update on how things have gone in my first month here.

The City

So far, San Francisco has outperformed my already high expectations. It’s an even more enjoyable city to live in than I imagined. The only thing that’s been a bummer is housing selection and pricing. For a 1300 square foot place, I am paying about 2.5-3x what the same place would go for in a nice neighborhood in Seattle; and Seattle isn’t exactly cheap either. I thought I would just have to overpay a little down here in order to get into a decent place, but the reality is that the city is littered with apartments as expensive as $6000 a month that you wouldn’t even want to live in. Thankfully, we got a place on a great block in Noe Valley so at least the neighborhood is perfect for us, but man is it pricey for what it is.

The food in San Francisco has been predictably terrific, and I will just come out and say it: the coffee is better than it is in Seattle. Between Ritual, Philz, Martha’s, and Blue Bottle, just about the only place in Seattle which can compete is Uptown Espresso. That has surprised me a bit. It’s also nice being this close to In-N-Out Burger, which helps (almost) make up for the lack of Skillet down here.

People keep telling me the weather is supposed to turn to shit any day now, but it’s the middle of December and it’s been sunny and mid 60s for most of my time here. I could really get used to this, although I’m sure the summers won’t be nearly as nice as they are in Seattle. I still plan to fly up every couple of weeks during the summer and throughout Husky football season.

The People

It seems like Seattle underindexes just a bit on the “outgoing” scale, while San Francisco overindexes. My theory on this is that since so many people in Seattle are from the region, went to school there, and have such comfortable living situations, they are less likely to seek interactions with strangers. San Francisco, however, much like New York, is more of a melting pot. People come here from all over, don’t have high school and college friends to congregate with all the time, and live in tiny matchboxes, so they are more likely to go out and meet new people.

The effect isn’t dramatic, but I notice it almost daily. More people make eye contact, more people say hello, and more people go out at night. It’s a nice change of pace.

The Design Community

I never really felt like part of the Seattle design or tech community, despite having been a de-facto member of it since about 1997. Perhaps it’s for the reasons listed above. People in Seattle generally seem more content to just do great work as part of their jobs, and then spend nights and weekends doing other things entirely, with other people entirely. The parties I usually attend in Seattle have very little to do with my profession or my colleagues.

In San Francisco, it seems like there’s a much tighter social relationship with one’s contemporaries. Some people don’t like to talk about work outside of work, but I’m not one of those people, so I quite like this dynamic. A lot of what I’m noticing could be self-fulfilling, however, as I’m new here and I may be subconsciously seeking out more community interaction than I did at home.

The Twitters

Where do I start!?

This place is amazing in so many ways, and perplexing in plenty of others.

Let’s start with the really good stuff: I’ve never worked around this many supremely talented people in my life. If you have a great idea here, not only can you find people willing to build it, but you can often find people who have already built parts of it. I feel like I have to preface each sentence I say with “Someone’s probably already thought of this, but…”. It’s a really great feeling knowing there is enough intellectual horsepower and willpower in this organization to envision and create the previously impossible.

The Design team in particular is one of my favorite things about my job so far. We are a diverse group, all having arrived here by wildly different means, and often with wildly different skillsets and perspectives on design. Since the company is so young and the team has exploded from a small handful of people to almost 40 in such a short period of time, most of us have been here for only a few years at most. Having been at Newsvine/NBC for almost seven years and ESPN for 5 years before that, I’m still getting used to the concept of a two-year employee being a “veteran”. In any case, I love my team and we’re about to go through a really great stretch.

Twitter’s new building is pretty amazeballs too. The space is beautifully designed, the food — complete with round-the-clock unlimited bacon — is fantastic, and it’s very conveniently located as far as public transportation goes. The only bummer is there is this annoying air horn at the construction site across the street that goes off incessantly.

On the perplexing side, I am amazed at how much happens here every day that I am completely unaware of. Perhaps it’s just the combination of me being new and the company being so big, but I feel like I know about 1% of everything that goes on every day. It feels like getting dropped blindfolded into downtown Tokyo. I fear that at any moment, someone could ask me a very basic question about something going on in the company and I would have no idea what they were talking about. I’ve been spending much of my first month learning everything I possibly can about all corners of the company in order to make sure that doesn’t happen.

The other interesting thing is the reshaping that’s going on right now as a result of how quickly the company has grown over the last two years. Increasing your staff 20% every year for five years is a growth plan most companies can easily manage, but increasing it something like 700% in only a couple of years creates all sorts of entropy. In the face of this sort of hyper-expansion, it can take awhile for people and even entire departments to find their sea legs. With such a dramatic influx of talent, however, also comes the opportunity to extend the product and the business into new areas, and that seems like what’s happening right now.

The other thing, of course, is managing technical and design debt effectively. If you’re like me, there is no shortage of things you wish Twitter would change, eliminate, add, or improve, and all I can say is: your lists are probably very similar to ours. I know this because I talk to critics all the time, and I was one before joining. Still am, actually:

The great news is that we’re on the same page, and we’re excited about moving Twitter forward as quickly as the universe allows.

#Onward

If you want to be part of the team and you’re interested in working on a product that, on any given day, has the potential to save actual lives, we’d love to meet you. We don’t care where you went to school or how big your previous gigs were. All we care about is how talented you are and how fun you are to be around. If you fit those two qualifications, please join us in helping shape the future of Twitter.

I’m Joining Twitter

Over five years and exactly 10,000 tweets ago, when I first tiptoed into the lonely textfield that was Twitter’s “What Are You Doing?” box, I typed the following:

It was a reaction to many things, good and bad. The ease of publishing messages. The prevalence of insignificant breakfast trivia in the public feed. The lack of any filtering controls. The growing number of my friends becoming instantly addicted to it.

Since then, Twitter has gone from quirky little internet CB radio to exploding social upstart to what I now consider one of the most important information platforms in the world. At its best, Twitter is an international treasure.

As both a user and an information designer, I’ve grown to love Twitter more each year, and so it is with great excitement that I’m happy to announce I have agreed to move down to San Francisco and Join The Flock™ in the newly created position of Vice President, Design.

I couldn’t be more thrilled to help lead an already world-class team of designers working alongside all of the other great people in the company to make Twitter a positive force in as many people’s lives as possible.

I can’t speak too much about strategy yet, especially considering I don’t even start until the end of the month, but I will just say this:

I’ve always viewed Twitter as a personal information agent, and I think as we work to make it both smarter and more responsive to what people want from it, it has the potential to be the most useful connected service in the world.

I hope to be able to post more thoughts in the coming months, but it’s probably wise to wait until I’m at least on the payroll before saying something that might get me fired.

On a personal note, I will say that I’m heartbroken about leaving both NBC/Newsvine and Seattle. NBCNews (and MSNBC.com before it) has been an outstanding parent since they acquired my company five years ago, and Seattle is the only city in the United States I like more than San Francisco. This was literally the only position at the only company in the only city in the world that could have gotten me to leave.

And so with that, I look forward to improving your experience on Twitter starting October 29th. If you’re a news organization, a designer, a technologist, a sports fan, an early Twitter user, or just someone who wants to see Twitter be as good as it can be, you’ve got a friend on the inside.

A Fond Farewell to Newsvine, NBC, and Seattle

The last time I wrote one of these posts, it was 7 years ago and I was getting ready to leave a great job at ESPN to start my own media company, Newsvine.

The concept was simple: license the same content that anchored the majority of most major news sites — specifically the Associated Press newswire — and marry it with original contributions from citizens around the world, all in an editorless environment controlled entirely by the community. Mainstream journalism and citizen journalism would stand shoulder to shoulder on the same stage for the very first time.

It was only the second startup I had been a part of, but the first I had founded and the first I had run as CEO. Together with my four colleagues, Lance Anderson, Mark Budos, Calvin Tang, and Josh Yockey (in alphabetical order) we set off to change journalism and show how lean a news organization could be run if given the right automation, the right strategy, and the right amount of support and passion from the community.

After two quick and productive meetings with Mike Slade and Nick Hanauer of Second Avenue Partners, we closed our Series A, left our jobs, and jumped off the cliff together.

The first year — from August 2005 to August 2006 — was one of the best times of my life. We raced into private alpha within a few months, then into private beta, and opened the gates to the world on March 1st, 2006. Nowadays, timelines are even more compressed because of mature frameworks like Django and Rails, but back then, we built everything from scratch.

There are lots of stressful moments at startups, but the biggest underlying fear you have in the earliest stages is: will anyone use this? Watching the first people come through the turnstiles those initial few weeks was fascinating. People came to write about politics. People came to write about religion. People came to write about chips and salsa; all on a little site that was originally intended to be a people-powered version of ESPN.

Most of all, people were coming.

There are many wonderful things that have been created because of Newsvine, including 1,238,468 original articles, 4,651,414 seeds, 33,161,638 comments, at least one marriage (my own!), and at least one baby we know about (wasn’t me), but the earliest achievements are what I still remember with the most clarity and awe:

… when Corey Spring snagged an interview with Dave Chappelle.

… when Killfile first broke the news of the Virginia Tech shootings.

… when Old Fogey got his name on the ballot for Congress in Ohio and documented the entire experience, providing a civics lesson for conscientious citizens everywhere.

When you create something which directly inspires and enables so many others to create even better things, you feel like you’re doing your part to improve the world.

Year two was also quite fun, and together with our 6th employee Tom Laramee (now of Zulily tycoon fame), our marketing lead Jim McGee, our engineering intern Eric Glomstad, and our design intern extraordinaire Bobby Goodlatte (now of Facebook tycoon fame), we grew the site past the point where it could be sustained by such a small staff and such modest financing.

In May of 2007, as we set out to raise a Series B, a funny thing happened.

We suddenly started getting calls from large news organizations. First MSNBC.com across the water in Redmond reached out. Then several others did. Then one night, I had dinner with Charlie Tillinghast, MSNBC.com’s president.

The following day, Charlie notified us that he was interested in acquiring Newsvine. Then I traveled across the country and had more dinners. More acquisition offers followed.

The whole acquisition process is an entire post in itself, so I won’t get too deep into it here. It involved one of the worst days of my life and several of the best. Let’s just say that MSNBC.com was our first choice from the start, and when we signed their official Letter of Intent to acquire us on August 1st — two years to the day after beginning work on the site — the entire team couldn’t have been more excited. Joining a world class organization like MSNBC.com, which was then owned by two other world class organizations, Microsoft and NBC, would allow us to positively affect even more people on a daily basis as part of one of the most respected news companies in the world.

I was excited about joining my friend Rex, my then internet buddy Jim Ray (who would later become a great friend and officiate my wedding ceremony), and all of the other people I had met in Redmond while giving controversial speeches to the newsroom about audience participation.

When the transaction closed on October 5th, 2007, the team began a long, successful journey helping modernize an already modern news organization. While we continued to maintain and improve our own product (although admittedly not to the extent we may have wished for), we provided many important services to our parent: registration, single sign-on, trackable threaded discussions, interactive polls, a full content management system, and a large armful of other services. As of the date of this writing, the majority of stories viewed by the approximately 50 million people who visit NBCNews.com every month are served up either directly by the Newsvine platform or touch our software in other ways.

People often say that the majority of acquisitions don’t work out, but in this case, I can say with certainty that both the acquiree and the acquirer have been extremely happy with how things have worked out. We have been so happy with NBC that we’ve stuck around long past our contract dates, and NBC has been so happy with us that they’ve treated us excellently and made it enjoyable for us to stay.

It’s been seven years, however, since beginning work on Newsvine, and when the opportunity to join Twitter in the newly created VP of Design position came my way, I was forced to think about where I could make the most positive impact on the world.

Twitter is at a crucial moment its own life, as well as in the evolution of information and media. It is not perfect, but it represents a new approach to information production, aggregation, and discovery. It’s the best window into how we will consume information in a society dominated by the computers we keep in our pockets and on our bedside tables. It already reaches over 140 million people in the world, and it’s only scratched the surface of what it could be and what it should be.

There are more thoughts on joining Twitter in the companion post to this post, but I can’t close without mentioning three things which I am very sad to be leaving:

  1. Seattle. I’ve lived here all of my adult life, and until being offered this position, I never thought anything could have gotten me to leave this city. This is quite literally the only position at the only company in the only city that could have done it. I love everything about Seattle (except the Autumn, when all the days start getting shorter and all of the incorrigible Autumn lovers can’t shut up about how beautiful the soon-to-be-littering-my-yard leaves are) and I will be back to visit plenty of times each year. I’m keeping the house I’ve built, keeping my Husky football season tickets, and keeping Seattle at the top of my list of greatest cities in the world. It hurts like hell to leave all of our friends and family up here, but we rationalize it by remembering we’ll only be a 90 minute flight away at any given time.
  2. My co-workers at Newsvine and NBCNews. To all past and current members of the Newsvine team, thanks for being the greatest group of people I’ve ever had the pleasure of working with. I will miss the Wall of Shame, the never-ending supply of prop bets, the walks to Skillet, the impossible hypotheticals, and everything else that makes our office atmosphere great. To my friends within the larger NBCNews organization worldwide, thanks for being such an excellent partner. I will certainly miss being able to say I am a part of the larger journalistic mission we serve every day, across the world, often in the line of fire.
  3. The Newsvine community. This is probably also an entire post in itself, but let me just say that the entire team at Newsvine could not be more thankful and more humbled that so many people choose Newsvine as their home online to discuss issues of importance. Newsvine has never been a place to have your opinions reinforced by your existing social graph. Nor has it been a place for drive-by one-liners. When we show off comment threads with 5000 word well-constructed arguments, some people think our users are crazy. We’ve always just considered them passionate. Newsvine at its worst is much like many other online discussion forums, but Newsvine at its best is one of the most amazing places in the world to expand your perspective. Its promise today is the same as it was when we launched it: Get Smarter Here. To all of those who have done just that, thank you so much for participating. I’ll be looking on fondly from afar to see how the site evolves once I’m gone. It’s in good hands.

The Deterioration of Hi-Ball Packaging Design

I’ve been a huge fan of Hi-Ball caffeinated mineral water for a few years now. It’s a crisp, light, sweetener-free way to get a little bit of caffeine in your system on a hot day. In addition to the virtues of the product itself, I was initially drawn to this beverage because of its beautiful packaging. Below is what the the bottle looked like when it debuted a few years ago:

A compact, easily resealable 10 ounce bottle with a very reasonable 80mg of caffeine in it.

Then, a couple of years ago, the folks at Hi-Ball decided to change up the bottle design and go with a taller, skinnier variety:

I didn’t have a huge problem with this change, although I was unclear how it qualified as an improvement. If anything, it was worse than the original since it’s much harder to reseal a glass bottle with a metal cap than with a plastic cap. Still, at least it was in that nice, convenient, 10 ounce size with only 80 mg of caffeine.

Fast forward to 2012 though, and Hi-Ball has completely dumped its beautiful glass bottles in favor of gigantic 16 ounce cans. These things are monsters:

Furthermore, the cans have that gimmicky Coors Light feature where parts of it turn blue when it’s cold as the Rockies. You know how else I can tell a beverage is cold enough for me to drink? Because I keep it in my refrigerator.

Hi-Ball is pitching this change as better for its customers since the can holds more beverage, but that’s actually my least favorite part of the entire redesign. I don’t want 16 ounces of energy drink, and I definitely don’t want 160mg of caffeine. And you know what is really hard to reseal? An aluminum can.

People have suggested just drinking a portion of the beverage and then throwing away the rest — which is what I have been doing — but there’s just something unsatisfying about buying more than you want and then dumping the rest down the drain.

It seems clear to me that Hi-Ball is now trying to compete with the Red Bulls and Monster Energies of the world by offering their 16 ounce can, but even those companies offer smaller alternatives.

I find myself buying less and less Hi-Ball now that they’ve forced this super-size on everyone. I wonder if I’m alone or if others are abandoning ship as well.

Make Your Twitter Stream More Interesting with the Stellar Tweetbot

If you’re like me, you’re both particular about who you follow on Twitter and perpetually in search of more entertainment in your feed. The problem with following everyone who belches out a random good tweet is that you then have ten more ho-dum tweets a day from them in your feed. The disincentive to follow people on Twitter has never been higher than it is now, despite the fact that the service hosts more great content than it ever has.

I have a few ideas for fixing this problem, but one of them came to me a few months ago as I was using Jason Kottke’s excellent Stellar.io service (pronounced “Ste-LAH-ree-oh” by everyone except Jason). Stellar.io is a fantastic web-based service that lets you follow interesting people and receive a feed of all the tweets, Flickr images, YouTube videos, and other content they have faved on other services. In Twitter terms, imagine a feed that doesn’t contain your friends’ tweets, but rather the tweets that your friends have faved. In other words, one degree of separation away from your current Twitter stream.

Stellar is a great way to assemble this sort of feed, but if you’re like me, you’d rather see its output merged into your existing Twitter stream. To put it differently, when I open up my Twitter client, I want to see tweets from the few people I follow (as I do currently) and tweets from people I don’t follow which have been marked as favorites from people I do follow. Have I lost you yet?

To create this experience, I wrote a PHP script I call Stellar Tweetbot which runs every 5 minutes via a cronjob that checks my Stellar account for new faved tweets, and then retweets any new tweets to my zombie Twitter account @mike_stellar. Then, I follow @mike_stellar from my normal Twitter account @mikeindustries and I magically have a more interesting Twitter stream.

To see what sorts of things now appear in my Twitter feed, without having to follow any new people, peep the image below (or just follow @mike_stellar):

The first tweet is Rob Delaney making sure a can of Pepsi gets home safe. I don’t follow Rob so I would have normally missed this tweet. However, since I follow some people who faved it, I now see it in my Twitter stream.

The second tweet is to a really interesting article tweeted by Rob Pegoraro. I don’t follow Rob, but I do follow the person who faved it: Tim Carmody (not to be confused with Tom Carmony, who I also follow, but let’s not even get into that).

The third tweet is by the funniest person on Twitter, Ken Jennings. Since I already follow him, I won’t see this as a dupe in my feed. Magic.

So that’s it. The Stellar Tweetbot. I’ve opened sourced it on GitHub, and it’s the ugliest designer-written PHP code you’ve likely ever seen, but it works, yo! If you’re one of those propeller heads who writes much better PHP, feel free to rewrite it, and merge it into the GitHub Branch Repository Chamber Fork Commitment Thingamajigger.

Otherwise, feel free to do what I do and just use it. It will make your Twitter feed more interesting.

  |  Older Posts →