PaulStamatiou.com - Tech News, Reviews and Guides

Simplify.

2013-04-30T09:00:00-07:00

I have been thinking a lot about simplifying my life recently. I started a stellar new job four months ago and it felt like a great time to change other parts of my life.

I used to be a slave to my startups. If I wasn't working, I had a perpetual feeling of guilt that I should be working. That lead to many all-nighters and eventually landed me in the hospital last year after fainting twice from fever and dehydration. That reads more like an accolade to the workaholic culture of Silicon Valley, which joyously consumes posts like how Marissa Mayer worked 130 hours per week. It was most definitely no accolade for me. My last five years have been stressful as fuck.

Whenever my mind would wander it would toss around a big to-do list. All the damn time. It's hard to relax when you keep thinking about things you need to be doing instead of relaxing. I even prided myself on my unwavering workaholic tendencies, notably in this TechCrunch guest post I penned, First-Time Startup Entrepreneurs: Stop Fucking Around. Consider this the sequel.

I was a digital hoarder. I had to check Hacker News and its ilk hourly. I had to open 10 tabs of articles to read or stash them away for later. Yet another task to complete. I had a revelation one day when I realized I didn't have to read everything I found on the Internet. And you know what? My life didn't end because I missed that TechCrunch article. It's all just fleeting information.

I had a revelation one day when I realized I didn't have to read everything I found on the Internet.

I learned that I don't need to reply to every email. I've always been a yes guy and that lead me to being meaninglessly busy with things I didn't actually care about.

I say no more often and now I actually have weekends to myself to do things I want to do, like hiking in the Marin Headlands, running 16.6 miles to catch sunset on the beach, getting brunch on Sundays and running into Sir Jony Ive, taking photos or just relaxing. It's pretty neat.

The end (or half-way point, havent decided yet) to a perfect 7.77mi sunset run. :) twitter.com/Stammy/status/…
— Paul Stamatiou (@Stammy) April 22, 2013

I got rid of my car. I rarely used it and the monthly insurance payments were a constant reminder I had another thing to check on. Every so often I'd catch myself thinking something like this: "Oh I probably need to have the brakes checked soon", "I think I saw a nail in the tire, I should get that looked at", "tread seems low.. I should probably save up for new tires."

I sold or tossed a ton of stuff I didn't need, use or wear. I stopped wearing all those free startup shirts I gathered over the years and moved on to button-ups. I use Laundry Locker to deal with ironing them so I don't spend my Sundays doing this. I buy toothpaste, shampoo and the like in bulk on Amazon so I don't have to remember to make monthly errands. I moved to a slimmer wallet and carry less stuff with me everywhere. I cancelled unnecessary monthly billed services so there's less to think about when I see my statements.

I removed apps I didn't use daily from my phone's home screen and deleted ones I didn't use at least once a week. I stopped checking into places on foursquare 10 times a day. I got into a regular workout routine and ran 102 miles this month alone... I would have never had the time or patience to do that if I felt guilty I wasn't working.

I've pushed everything else out of the way so I can focus on what I'm doing right now, living life.

Enjoy this post? Click through and leave a comment. It will make my day. Simplify.

Developing a responsive, Retina-friendly site (Part 2)

2013-03-13T10:00:00-07:00

This is the last part in my three-part series about the design and development of a responsive and so-called Retina-friendly website. While I have covered my development process, media queries for responsive development, and various JS libraries I use, I'm going to talk about images in much more depth in this article. In particular, I'll show how to use HiDPI image assets as well as cover responsive images and some history around that.

Going HiDPI

So you want to do the easiest possible thing to get your website's header logo to look good on HiDPI devices and computers? Doing this in CSS is similar to loading an img twice as large as the height and width attributes of that tag.

From here on out I refer to all "retina" displays & related ilk with the device-agnostic HiDPI moniker. Oh and a fun tidbit: the iPhone 4/5 is no longer the highest DPI mobile device. The HTC One's 1920x1080 4.7-inch display gives it a lusty 468ppi.

I wanted icons and my large header avatar to be HiDPI display friendly. Load a background image that is twice as large as you want to display it and use background-size to constrain it to half of the image's width and height. Easy. But we don't want to load the HiDPI image all the time. There's no need to waste bandwidth for regular displays.¹

That's where media queries come in again. Below is a Sass mixin to do just that, based on this post by 37signals, but modified to remove min--moz-device-pixel-ratio in favor of resolution as recommended by Mozilla. The W3C folks say the same thing about -webkit-device-pixel-ratio.

// 1.3 ratio because devices like Nexus 7, might as well give them @2x assets too
@mixin image-2x($image, $width: auto, $height: $width) {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
         only screen and (-o-min-device-pixel-ratio: 13/10),
         only screen and (min-resolution: 120dpi) {
    background-image: url($image);
    @if $width != auto { 
      // bg-size() is a mixin I use for properly prefixing background-size
      // for webkit, moz, o, ms
      @include bg-size($width, $height);
    }
  }
}

// Usage. stammy.png is 133px x 133px. stammy@2x.png is 266px x 266px
// background: url('http://turbo.paulstamatiou.com/assets/stammy.png') no-repeat 0 0;
// @include image-2x('http://turbo.paulstamatiou.com/assets/stammy@2x.png', 133px, 133px);

What about icons?

That mixin only works for individual images so if you have more than a few items to show you'll probably want to avoid that many HTTP requests. For example, the 18 icons I use throughout the site. I could have created my own icon webfont with a nice tool like Font Custom, but decided against it for a few reasons.

While an icon webfont would be retina-friendly right out of the gate, browsers render fonts differently and it may not look the same everywhere. Notably, icons from webfonts may appear blurry or have color fringing. And if you wanted a gradient on that icon (but why?!), you will need to resort to the typical gradient(), background-clip:text;, and text-fill-color: transparent; mayhem.²

However, if you are really interested in getting icon fonts working and don't mind the labor of hinting them for the sizes you'll be using them at, then you can get some pretty impressive results like this.³

But I already know how to make PNG sprites so I went that route. Here's how I hooked up two of them:

.home, .rss {
  background: url('icon-sprite.png') no-repeat 0 0;
  width: 24px;
  height: 24px;

  // Instead of saving multiple versions of the icon for different states, 
  // I like just having a darker icon and restoring opacity on hover
  opacity: 0.4;
  &:hover { opacity: 1; }

  // constrain background-size by half. actual sprite width is 120px
  @include bg-size(60px,auto);
  @include transition(opacity, 0.2s);
}
.home { margin-right: 1.5em; }
.rss { background-position: -38px -23px; }

I'm not actually using any media queries here to conditionally load a different sprite. I'm always loading the double-sized icon sprite. I wouldn't normally do this but the icons were small enough for bandwidth to not be a concern and the HiDPI version looked good enough on non-HiDPI displays.

At least that's what I thought. Even with the correct background-size halving and only using pixel-fitted 2x icons were sized in even numbers (ie 48px by 48px should result in a 24px x 24px 1x icon), it still resulted in blurry icons. I could seemingly get around this by adjusting the background-size 1px smaller than it should need, but that felt wrong and that would make some icons crisp and turn others blurry.⁴

Why you shouldn't always load the retina version of your icons for regular displays; they can look blurry without triple checking that your icons are properly pixel-fitted and that they play nicely with being downsized (ie, with not only even numbers but with multiples of 4). Basically, they will look bad if you don't spend a good bit of time in Photoshop, so you're better off only using 2x assets for HiDPI displays.

So back to Photoshop to create two separate sprites: a 2x version and a 1x version. Working with sprites is usually a pain in the ass and working with two would prove to be a nightmare if you don't have a system for keeping it organized. Fortunately, Twitter Spritemaster™ Dave Bedingfield shared a few tips with me:

Create a set of dividing lines for each icon and group related icons and icons of the same size/utility.
Both the @2x HiDPI version and 1x version will live in the same cell and be aligned how you will end up using them in CSS (most likely top left, unless you use something like background-position: 50% 50%; in which case they should be centered). Proximity doesn't matter if you end up accessing each icon in it's own individual element (for example, an i with a width and height).
The maximum width and height of the cell depends on the size of the larger @2x version.
Even numbers are you friend. In my example below, icon coordinates are even numbers and icon widths and heights are as well.
When saving both sprites, hide everything and only show 1x icons, save and then 2x icons.

I do it a bit differently from Twitter, they always load the @2x sprite. If you poke around on Twitter's mobile website you'll see there are different sprites for mobile and tablet. The main benefit of this approach is that every icon uses the exact same coordinates!

I set the opacity of the 2x icons to 50% just for display. The sprites themselves are transparent with only one of the icons in each cell.

You run every production PNG through ImageOptim right?

After saving and optimizing the sprites, it came time for the chore of writing the CSS and identifying all the icon coordinates. Fortunately a little website called Sprite Cow makes this a bit easier than going around measuring things in Photoshop. Just upload the sprite, select each icon (no need to be accurate, it auto-selects) and it outputs the CSS.

I'm only interested in the coordinates and width/heights, but Sprite Cow was often a pixel off in calculating the size so keep that in mind.

And now for some Sass mixins of course.. here's a simple one to just identify high-DPI devices. You'll see it's similar to the image-2x() mixin from earlier but doesn't concern itself with the background image.

@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
  only screen and (-o-min-device-pixel-ratio: 13/10), 
  only screen and (min-resolution: 120dpi) {
    @content;
  }
}

Then I created a two Sass variables to keep track of the sprite URLs so I didn't have to keep pasting that around for every icon.

$sprite_url_2x: "http://turbo.paulstamatiou.com/assets/pstam-sprite-v2-@2x.png";
$sprite_url: "http://turbo.paulstamatiou.com/assets/pstam-sprite-v2.png";

@mixin retina-sprite {
  background-image: url($sprite_url_2x);
  @include bg-size(250px, 225px); // my sprite dimensions, halved
}
// silly function to divide the width and height to save me 2 seconds
// whenever I need to calculate the halved retina background position
@function half-pos($w, $h) { @return $w/2 $h/2; }

Finally, here's how this all ties together to display some of the icons in my header:

.photos i, .posts i, .about i, .search {
  background-image: url($sprite_url);
  background-repeat: no-repeat;
  @include retina {@include retina-sprite;}
  display: inline-block;
}
.about i {
  width: 24px;
  height: 22px;
  background-position: -100px 0;
  @include retina {
    background-position: half-pos(-100px,0);
  }
}
.posts i {
  width: 24px;
  height: 26px;
  background-position: -150px 0;
  @include retina {
    background-position: half-pos(-150px,0);
  }
}
.photos i {
  width: 28px;
  height: 21px;
  background-position: -200px 0;
  @include retina {
    background-position: half-pos(-200px,0);
  }
}
.search {
  width: 24px;
  height: 24px;
  background-position: -256px 0;
  @include retina {
    background-position: half-pos(-256px,0);
  }
}

That's it! HiDPI devices will load the @2x sprite and accordingly set the proper background-position to load the right icon. Regular devices will load the 1x sprite and respective icons.

As you read in Developing a responsive, Retina-friendly site (Part 1), the side effect of using Sass @media bubbling and @content blocks like this retina mixin is you get compiled CSS with lots of extra media queries. The snippet above will end up compiling to five of the same retina media query. I'll leave it as an exercise to the reader about how to rewrite it to save bandwidth.

Don't forget the Retina favicon!

And of course, we can make a HiDPI favicon.ico. Create both a 16x16 and a 32x32 png and import the into x-icon editor. It will let you export a single .ico with all size variants baked in.

For comparison the YouTube favicon is not Retina and noticeably pixelated

There's a lot more to cover with HiDPI image assets, but I'd rather point you to Thomas Fuchs' excellent Retinafy ebook than trying to summarize it here.

Responsive Images

Responsive design doesn't just stop at adjusting layout. It also applies to dealing with images. Up until now most web developers would add max-width: 100%; to their images and call it a day (so-called "fluid/flexible images"). But now with more devices with higher PPIs in use, we can do better.

My interest in responsive images began when I was reading through Medium.com's source, as some nerds are wont to do when bored. Despite the fact that they use font-smoothing: antialiased; (read this) and text-rendering: optimizeLegibility; (a performance pitfall on mobile; only use for headers), I kept poking around⁵.

I noticed their header image had a unique URL that changed when I resized my browser and reloaded the page. Looking at the image response headers showed nginx as the server and a Via of Amazon Cloudfront. Looks like they're using nginx's image filter module to do the on-the-fly resizing and utilizing it as an origin for Cloudfront, but I digress.

Why should mobile visitors still waste bandwidth loading the same 1000px image you display for desktop visitors? What about desktop visitors tethered to a slow connection? They shouldn't have to wait for the 2x HiDPI version of that large image to load. As you can imagine there are other edge cases mixed in here too. We should loading HiDPI assets for mobile devices that support it and everything in between (depending on the breakpoints) to provide properly sized images and forgoing the old manner of simply downsizing images with CSS.

Technically this is simply adaptive images and that's what you'll find most often when researching this — providing several versions (for example 4 sizes) of the same image and then having the browser select the proper one to load depending on conditions like media query breakpoints⁶. A true responsive images solution would serve up the exact size needed with the help of server-side image resizing and caching. More on that later.

I want photos on my photos pages to be crisp all the time — something that should be possible given the user's bandwidth, browser width/screen resolution and device pixel ratio. If we know they are on a slow connection, we can load a lower quality version.

Brief History of Responsive Images

So I read pretty much everything the Internet has to offer about responsive images, including W3C drafts, W3C respimg Community Group discussions et cetera. There are several ways to get it working right now but there is no great solution. The <img> tag wasn't built with this in mind.

It all started with folks in 2010 using HTML5 data attributes like data-fullsrc in <img> tags to provide an alternate, high-resolution version of the same image. Some JavaScript would loop through the images and swap in the fullsrc for src if certain conditions like browser width were met. However, clients destined to load the larger image ended up making a request for the first image before the JavaScript kicked in, resulting in additional HTTP requests and bandwidth usage. To counteract this people started using server-side rewrite rules to catch issues like that and load tiny spacer gifs instead so there wouldn't be much of a penalty for the first request. For that to work, it depended on a cookie checked by the server with the client's resolution. It was a mess, but it worked.

<img src="mobile-version.jpeg" data-fullsrc="desktop-version.jpeg">

Then browser advancements introduced the lookahead pre-parser that helped browsers load pages more quickly by fetching all page assets before the HTML finished loading and before JavaScript can run. The browser's image prefetching would break that aforementioned server-side redirect created to reduce the penalties associated with making two requests.

There-in lies the entire problem with getting responsive images to work today:

How do we reconcile a pre-parser that wants to know what size image to download ahead of time with an image technique that wants to respond to its environment once the page layout has been calculated?
Jason Grigsby

Where are we now?

Based on those trials and tribulations, developers started coming up with other ways to solve this with the img tag. Some folks thought about not even setting a src so there was no prefetching penalty, having JavaScript load in the appropriate image from data attributes, and setting another image tag inside a noscript as a fallback for visitors with JavaScript disabled.

Unfortunately that has SEO implications on its own (no src), can cause ugly page reflowing as the images begin loading, and results in a slower page load from lack of prefetching. Matt Cutts has said that Google tends not to look at content inside of noscript tags due to noscript abuse from spammers.

Then developers started thinking, well what if we extend img to support a sourcelist of sources to choose from? It would be more semantic and utilize media queries to determine the version of the image to load instead of depending on JavaScript.

<img src="default.jpg" srclist="alternativeSizes" alt="Picture of Unicorn">
<sourcelist id="alternativeSizes">
  <source src="big.jpg" media="min-width: 600px" width="600" height="400">
  <source src="small.jpg" media="max-width: 600px" width="320" height="320">
</sourcelist>

That seems to have evolved into the W3C-proposed srcset attribute for img:

<img src="banner.jpeg"
     srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" 
     alt="">

The srcset attribute contains up to three optional URLs and accompanying descriptors for different versions of the image to load. In this example, the 2x descriptor denotes a "maximum pixel density of 2 device pixels per CSS pixel" and 100w means "maximum viewport width of 100 CSS pixels."

Another suggestion around this time was creating a new image format entirely; one that points to alternative resolutions. Googler Ilya Grigorik recently wrote about this kind of solution (content negotiation) at length. It turns out this is also something the W3C seems to be okay with in their recently updated Use Cases and Requirements for Standardizing Responsive Images draft:

The solution MUST NOT require server-side processing to work. However, if required, server-side adaptation can still occur through content negotiation or similar techniques

If all this wasn't confusing enough, Apple decided that people were having too much fun without them and decided to put their hat in the ring with a proposal for CSS4 image-set. It's pretty much the same concept as srcset but in CSS. The problem there is that folks will just start converting their img tags to divs utilizing image-set for background images in CSS, thereby removing alt text (divs can't have alt text) and throwing all accessibility out the window.

`<picture>` the future of responsive images

It seems like developers on the W3C and W3C Responsive Images Community Group are leaning towards the proposed picture element. In a W3C Working Draft for the picture element, syntax utilizes a simplified srcset tag restricted to only carrying information about images for devices with different pixel densities per source.

<picture width="500" height="500">
  <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
  <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
  <source srcset="small-1.jpg 1x, small-2.jpg 2x">
  <!-- img is the fallback -->
  <img src="small-1.jpg" alt="">
  <p>Accessible text</p>
</picture>

This seems to be the current state of responsive images. I probably got the order of some of these thing wrong, so don't hold me to it exactly. The picture element looks promising but has a few limitations in my eyes:

It's rather verbose and will be rather confusing for new developers.
Media queries have no sense for bandwidth available to the browser so this will hypothetically still load a large 2x image on a HiDPI-capable device even if it's on a slow connection.

Media queries can bring some interesting affordances including device pixel ratios and the upcoming luminosity media feature, but bandwidth is not one of them. Aside from a manual bandwidth test, the only hope is either waiting for browsers to get smarter about picking the right image source given what it knows about the available bandwidth or letting sites access something like navigator.connection⁷.

I'm using foresight.js for now

While I'm waiting for picture to get implemented in all major browsers ⁸, I decided to use one of the more popular responsive image solutions:

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server. Additionally, it runs a bandwidth test to see if the user's device should load high-resolution images. Depending on the display and network connectivity, foresight will request the appropriate image for the webpage.

Foresight can be configured for a number of different responsive image setups ranging from simply swapping out an image with a higher resolution version all the way to requesting an image the exact width of the client's browser. I went with the latter.

Here's the markup for the image itself. Notice how the img tag doesn't have a src specified. It gets added after foresight evaluates the environment and decides what image version to load. (The curly braces are just my Jekyll liquid tags.)

<figure class="feature-image loading">
  <img class="fs-img" data-src="{{site.cdn}}{{page.image_lg}}?w=1400" 
       data-width="{{page.photo_width}}" 
       data-height="{{page.photo_height}}" 
       alt="{{page.title}}" />
  <figcaption>Example caption goes here</figcaption>
  <noscript>
    <img src="{{site.cdn}}{{page.image_lg}}?w=1400" alt="{{page.title}}"/>
  </noscript>
</figure>

Now here's where it gets a little hacky. All foresight images are assigned a CSS class that uses font-family to store an image-set value. As Foresight developer Adam Bradley states, "font-family is one of the few CSS properties which lets you enter free-text in the value and the browsers still consider it valid, which makes the value viewable by the DOM and javascript (yup, even IE doesn't care)."

.fs-img {
  max-width: 1400px;
  font-family: 'image-set( url(w=1400|w={requestWidth}) )';
  display: none;
}

The value I have for image-set() is a little cryptic on its own too. It makes use of foresight's URI Find/Replace functionality. It looks for the string "w=1400" in my image data-src and replaces that with the actual width of the client (this also takes into account HiDPI resolutions).

But what is that query string param in my image URL? Well here's the other hacky part — I'm using a service to on-the-fly resize and cache the image for exactly the request. For example, if your browser is 837px wide, it will change that width param in the URL to 837. If you're on a Retina MacBook Pro, that request will be for a 1674px wide image. I just dump a fairly large image on the service and it does the rest for me. And if I make my browser wider, foresight will automatically request a larger version of the image to swap in!⁹

On the photos index page, I use foresight differently and only have it swap in 2x high-res images for HiDPI devices. I'll discuss the query string parameters at the end of all those image urls below.

{% for photo in site.photos offset: 1 %}
  <li>
    <figure class="in-photo-list">
      <a class="photo_item" href="{{site.base_url}}{{photo.url}}" title="{{photo.title}}">
        <!-- the fs-thumb class is simply display: none; -->
        <img alt="{{photo.title}}" class="fs-thumb"
             data-high-resolution-src="{{site.cdn}}{{photo.image_lg}}?w=333&h=333&fit=crop&q=75&dpr=2" 
             data-src="{{site.cdn}}{{photo.image_lg}}?w=333&h=333&fit=crop&q=75" 
             data-width="333" data-height="333" />
        <noscript>
          <img src="{{site.cdn}}{{photo.image_lg}}?w=333&h=333&fit=crop&q=75" alt="{{photo.title}}"/>
        </noscript>
        <figcaption>{{ photo.title }}</figcaption>
      </a>
    </figure>
  </li>
{% endfor %}

I do feel a bit guilty about this solution, especially as having any server-side processing is one of the no no's mentioned in the W3C picture proposal. It's just introducing another point of failure. It works pretty well right now and it's not like I can use picture yet.

I'm not using it in blog post articles just yet. As an FYI, if you do decide to use a similar solution for your jekyll posts, you'll need to write a filter for your RSS feed otherwise the images won't load for RSS readers since there's no src and no foresight JavaScript to run.

On-the-fly image resizing and caching with imgix

After I poked around and found out how Medium started doing some of this, I started brainstorming about how I could do it. A number of solutions surfaced from the same nginx image filter setup with Cloudfront to something utilizing the dragonfly gem but at the end of the day I don't want to manage yet another thing.

I'm using imgix, a service from a fellow Y Combinator batchmate. Setup was ridiculously easy. I just had to create AWS IAM user credentials with read-only access for the Amazon S3 bucket where I store my images. Something like this:

{
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:GetBucketAcl",
        "s3:GetObject",
        "s3:GetObjectAcl",
        "s3:ListBucket"
      ],
      "Resource": [ 
        "arn:aws:s3:::YOURBUCKETNAMEHERE",
        "arn:aws:s3:::YOURBUCKETNAMEHERE/*" 
      ]
    }
  ]
}

I gave that and its accompanying AWS access key and secret to imgix. Then all I had to do was replace the host for my images to my newly created stammy.imgix.net. The rest of the path remains the same.

# old URL, with Cloudfront CNAME
http://turbo.paulstamatiou.com/uploads/2012/12/santa_cruz_beach.jpg

# new imgix url
http://stammy.imgix.net/uploads/2012/12/santa_cruz_beach.jpg

With imgix setup, I can now easily manipulate the image by adding various query string params for their image URL API like w for width, q for quality, dpr for device pixel ratio and so on.

Speeding up my photo posting flow

One asterisk when it comes to using foresight is that it needs to know the image aspect ratio for each photo so you must provide it with data-width and data-height attributes in the markup. This can be rather annoying to manually add every time I post a new photograph with Jekyll. I was already manually adding several other attributes for my photo layout, like camera type and post processing software used.

I decided to write up a quick rake task to automate the creation of each new photo post — upload the image to S3, grab any relevant EXIF data, fetch an address if the EXIF has GPS coordinates and finally create the file and open it up in Sublime Text 2 for me to begin writing.¹⁰

# usage: rake s3p title="My Photo" slug="my-photo-seo-keywords"
desc 'upload photo in _new_photo dir and create new photo post with image URL as image_lg attribute'
task :s3p do
  require 'exifr'
  require 'open-uri'
  require 'json'

  photo_dir = "/Users/Stammy/Documents/_new_photo/"
  month = Time.new.strftime("%m")
  year = Time.new.strftime("%Y")

  # upload image(s) to S3 via http://s3tools.org/s3cmd
  sh "s3cmd put --acl-public --guess-mime-type #{photo_dir}* s3://my-s3-cloudfront-bucket/uploads/#{year}/#{month}/"
  
  Dir.chdir(photo_dir)
  # glob goes by alpha
  images = Dir.glob("*.{jpg}")

  # in case I'm uploading multiple images for a single photo post, only pull exif from first
  main_img = images.first

  if EXIFR::JPEG.new(main_img).exif?
    # used to set data-width/data-height as needed for foresight.js
    exif = EXIFR::JPEG.new(main_img)
    camera_model = exif.model.gsub('EOS ','')
    photo_w = exif.width
    photo_h = exif.height
    is_portrait = photo_h > photo_w ? true : false
    is_mobile = exif.make == "Apple" ? true : false
    photo_e = exif.exposure_time.to_s
    photo_f = exif.f_number.to_f
    photo_mm = exif.focal_length.to_i
    photo_iso = exif.iso_speed_ratings.to_s
    photo_pp = exif.software.gsub(" (Macintosh)",'').gsub('Photoshop ','')

    if !exif.gps.nil?
      # turn gps coords into address
      coords = exif.gps.latitude.to_s + "," + exif.gps.longitude.to_s
      url = "http://maps.google.com/maps/api/geocode/json?latlng=#{coords}&sensor=false"
      photo_gps = JSON.parse(open(url).read)['results'][0]['formatted_address']
    else
      photo_gps = false
    end
  end

  post_process = photo_pp || "Adobe Lightroom 4"
  photo_url = "uploads/#{year}/#{month}/#{main_img}"

  # and create the photo file 
  title = ENV["title"] || "New Title"
  tstamp = Time.new.to_s
  slug = ENV["slug"].gsub(' ','-').downcase || title.gsub(' ','-').downcase
  Dir.chdir("/Users/Stammy/code/pstam-blog/")
  path = File.join('_photos', "#{Time.new.strftime('%Y-%m-%d')}-#{slug}.markdown")
  data = <<-HTML
--- 
layout: photo
type: photo
title: "#{title}"
date: #{tstamp}
description: ""
image_lg: "#{photo_url}"
photo_width: "#{photo_w}"
photo_height: "#{photo_h}"
camera: "#{camera_model}"
photo_exposure: "#{photo_e}"
photo_iso: "#{photo_iso}"
photo_mm: "#{photo_mm}"
photo_focal: "#{photo_f}"
photo_gps: "#{photo_gps}"
post: "#{post_process}"
mobile: #{is_mobile}
portrait: #{is_portrait}
---

HTML
  File.open(path, 'w') { |f| f.puts data }
  puts "new file generated in #{path}"
  system "sublime #{path}"
end

Photo page with extra metadata shown on hover – location, aperture, exposure, ISO, etc

What's next with images?

As I mentioned above, I'm only using responsive images on my photos pages for now. I'd rather not end up with hundreds of blog posts to change when a particular solution to responsive images becomes a standard. That being said, I do use focal-point CSS in some of my blog posts and pages. Focal Point lets you add classes to your images that crop the image when triggered by a media query breakpoint.

This is an attempt to address "art direction" outlined by the W3C in responsive images:

In a responsive design, it is typical to change an image so it can be targeted towards the features of a particular display (or set of displays). Sometimes this means cropping an image.

If the full size of that image was simply scaled down on mobile, Bo would be tiny. Art direction suggests smart cropping of the subject for various devices.

It's just CSS that hides part of the image so that as it gets smaller, it crops in on the area you specify as being the focal point (get it?) of the image. One side effect of this particular implementation is that it hides captions below the image when the media query gets triggered. Focal point is only an aesthetic solution, a true one would address bandwidth concerns as well and load a different, cropped image for smaller displays. Now you can see much more there is to go with this whole "responsive" thing huh? It's just getting interesting.

Let me know what you think!

Comments and feedback keep me going and writing articles like this. Drop me a comment below, share this post if you enjoyed it and shoot me a tweet. I'd love to hear from you.

Note: Be sure to check out part 1 of the development track of this series and the initial design post that started it all.

1 This works because browsers only load images referenced in a CSS file when the appropriate class/id is used in markup on that page. In other words, there's no harm (aside from extra request/latency/etc) in having multiple versions of an image referenced in CSS.

2 Or if SVG is your thing...

3 Related: An interested A List Apart read, The Era of Symbol Fonts with some interesting ways to use ligatures to your advantage when thinking about icon webfonts.

4 Though in hindsight I didn't really investigate the cause of the 2x being blurry on a regular display too much because I knew I wanted to do it the proper two sprite, media query way regardless. I'd say that I probably could have tweaked the icons a bit more and fidget with the insides to make them work at the sizes I wanted -- the equivalent of font hinting I guess you could say.

5 I'm a total hypocrite and use antialiased font-smoothing on this site for the time being.

6 Though quite confusingly there is a responsive images solution named Adaptive Images.

7 which some Android mobile browsers have

8 without the need for a polyfill like picturefill, which isn't quite seamless as it requires different markup conventions.. that you'd have to end up fixing in a few years when picture is fully supported.

9 Definitely overkill and a more reasonable solution would be to round up to the nearest 100px and request that size, increasing likelihood that size has already been requested by other visitors before and is cached by the resizer. This is what Medium.com does.

10 Though in hindsight I might need to edit this to take the EXIF data and then use something like pngcrush to optimize the image for posting to the web (even though I use imgix for resizing, it'll save me storage costs in the longrun).

Enjoy this post? Click through and leave a comment. It will make my day. Developing a responsive, Retina-friendly site (Part 2)

My Setup

2013-02-18T00:10:01-08:00

I have always been a fan of The Setup and have been maintaining my own Stuff I Use page for some years now so it only made sense that I would eventually write my own such article. This is how I work and what I use to do it. If you have any questions please leave a comment below or reach out to me on Twitter.

Who are you, and what do you do?

Hi, I'm Paul Stamatiou and I am designer and front-end developer in San Francisco. I enjoy photography, writing and running. I love clean and simple things, from products to workspaces. I am an experience designer focusing on growth at Twitter.

What hardware do you use?

My main machine is a mid-2012 15" MacBook Pro with 16GB of RAM, a 2.7GHz i7 and the matte 1680x1050 display. I was close to buying a Retina MacBook Pro but after a few friends had countless issues with their displays I decided to wait for the next version. I have a quad-core hackintosh in a lovely Lian Li PC-V700 case with an SSD for the OS and a few terabytes of storage for my DSLR RAWs. It doesn't get much use anymore except for storage. I'm a big fan of the now-discontinued Apple Wired Compact keyboard and the corded Logitech G500 mouse. My secondary machine is a 16GB iPad Mini.

At work I have a 27-inch Thunderbolt Display and at home I have the previous generation 27-inch Cinema display. They're beautiful displays but the glare can get intense during the afternoon sun. If I had to do it again, I'd opt for the matte Dell 27-inch. It's not LED-backlit but the Dell's CCFL is better at color reproduction than Apple WLED backlight; you can't find many RGB LED backlit displays these days.

On the way to work I use Apple EarPods with my iPhone 5 and at work I use Beyerdynamic DT 770 Pro circumaural headphones mated to a FiiO E10 USB DAC. While running I use Klipsch S4i earbuds with soft Comply Foam tips (anything else falls out while running). I use Audioengine A5 powered speakers at home when I don't feel like plugging in my Sennheiser HD 650's.

Throughout the workday I can be found scribbling meeting notes or small interface ideas in my Evernote-edition Moleskine with a Pigma Micron pen. When it comes to larger interface sketches, I take a stack of legal paper from the printer and some of the neutral gray Copic markers lying around the @design studio.

I shoot with a Canon 5D Mark III. It's the best camera I have ever owned: fast, tough and feature-packed. Sure it's big, heavy, very expensive and lacks GPS logging, but it can practically see in the dark. I only own a few, fast prime lenses: 24mm f/1.4L, 40mm f/2.8 pancake, 50mm f/1.4. I shoot landscapes, architecture and low-light scenes with the 24mm. Several of my friends are DJs, so I'm also often shooting in dark clubs where the f/1.4 shines. I have a Speedlite 580EX II flash as well but prefer shooting without it when possible.

During weekend writing, photo editing, designing or coding sessions, I am parked in my orange Herman Miller Embody chair. I loathe the Aeron but the Embody fits my body perfectly. My only nitpick is that it's a heavy chair and even with the larger wheels made for carpet it requires a lot of force to move.

And what software?

1Password. No explanation necessary.

I use Sublime Text 2 for any kind of development with the Soda Dark theme and Blackboard color scheme. iTerm2 serves as my Terminal replacement, with a must-have system-wide show/hide hotkey so I can summon it wherever I am. I use iStat Menus to keep an eye on CPU and network usage.

Sublime Text 2 is also where I do most of my article writing but I have recently been experimenting with iA Writer. After years of trying to become an Evernote user, I finally got hooked with their latest version. Most of my articles now begin as notes or outlines in Evernote. It also stores everything from random notes all the way to a list of places I want to visit. I often find myself using Evernote on my iPhone to write in ideas throughout the day. I also use the OS X/iOS Reminders app for quick reminders and to-dos that I'll access soon.

I spend most of my time in Photoshop CS6 and make heavy use of Layer Comps when designing UI flows or interactions. The "Layer Comps to Files" default script makes my life easier, as does Photoshop Secrets. I meticulously measure everything with xScope, a tool I've been using for almost 4 years. I not-so-secretly wish there was a way to link Layer Styles. I use a few Photoshop extensions from time to time: dmonzon Trevor Morris Scripts, CSS Hat and DevRocket. I also use a silly corner resizer jsx script so I don't have to switch tools, select corners and all that jazz just to resize a roundrect. Yeah, you can't be a designer unless you call them roundrects as a QuickDraw throwback.

Whenever a particular website or UI element catches my eye, I catalog it in LittleSnapper. It has a bookmarklet that captures the screenshot in the background. I also use GrabBox to easily upload and share screenshots.

Google Chrome is my browser of choice for everything. I use the following extensions: Currently, WhatFont, Google Dictionary, Image Properties Context Menu, JSONView, Google RSS Subscription Extension and Kippt.

Google Chrome Sync is the best part of my phone, tablet, and desktop setup. I have a bookmarks folder simply named tmp that serves as my own kind of Instapaper. I read everything in there every Sunday and clear it out. Whenever I have a spare minute I can open any of those saved articles from any device thanks to Google Chrome Sync.

I post-process my photos in Adobe Lightroom 4 but have been increasingly curious about DxO Optics Pro 8 as it's better with lens correction. If I'm in a rush I'll use some presets from onOne. I use Snapseed on my iPhone to tweak photos before I post them to Instagram or Twitter. It has a great gesture-based interface and several modes that make it very powerful.

Post-processing photos I took at a friend's label launch party

I love using Runkeeper on my iPhone. It's such a simple concept — a datalogger at heart — but it keeps me coming back to log runs and share the results with friends. I am using it to track my 2013 goal of running 1,000 miles.

Other apps that live on my home screen include Instacast for streaming podcasts and Prismatic for news. I've tried apps like Circa, Feedly and Summly but always find myself opening up Prismatic. It just knows what I like to read.

My iPad Mini is the first thing I grab in the morning to check Twitter and email. I find myself catching up on email and news over breakfast or in the evening after work. It's also where I read Kindle books quite often. Honestly, I'm rather shocked by the iPad Mini. I had an iPad 2 that I did not use at all and ended up giving to my parents. The Mini is the perfect size.

A good chunk of my work and workout music listening involves one of these: Above & Beyond: Group Therapy, Air Up There with Tritonal, Eric Prydz Epic Radio, Tiësto's club life, Armin's A State of Trance, HypeM.com Popular. Between that and occasional Spotify/Rdio usage, I don't really manage an iTunes library anymore and I like that.

Every once in a while I play a few rounds of Counter-Strike: Global Offensive on Steam. It's a game you can play for just 10 minutes at a time and be done with it. Not something you get sucked in for hours, like anything made by Blizzard.

What would be your dream setup?

I think we're past the desktop tower age but it's a shame we're stuck with measly dual-core Macbook Airs. My dream setup would have tower-like horsepower (think 16-core, 128GB RAM and something as powerful as RAIDed Fusion ioFX PCIe cards.. we did say dream didn't we?) in a 14-inch Macbook Air-like body. Yes, 14-inches. I think that would be a nice size.

It would have built-in cellular data from whatever gets invented after LTE. The display would be HiDPI but resolution would be something sane like 3360x2100 instead of the current 13" retina Macbook Pro's sub-par 2560x1600. And while we're dreaming, a 30-inch HiDPI display as well.

Until then, I'm pretty happy with my current setup. The only thing that would be nice is a Drobo Mini filled with SSDs and connected via thunderbolt for storing my active Lightroom catalog.

For my camera setup, I'd like my DSLR to be able to instantly focus in the dark with no AF light from a disabled Speedlite. That's my only nitpick. And maybe if it could be lighter. Not smaller — I love how it fits in your hand and doesn't feel like you're going to drop it cough Sony RX1 cough — just lighter.

Thoughts?

How does your setup differ? Follow me on Twitter and share your setup.

Update: I've since started using Frank DeLoupe, a hotkey-initiated color picker that syncs your selected color with Photoshop (even when you are outside of Photoshop). Super handy!

Disclosure: Some links use an affiliate code (still paying tuition!).

Enjoy this post? Click through and leave a comment. It will make my day. My Setup

Developing a responsive, Retina-friendly site (Part 1)

2013-01-23T08:00:00-08:00

In my last post, Designing a responsive, Retina-friendly site, I covered my design process and thoughts behind redesigning this site. I did not cover any aspects of actual development or any Jekyll specifics. This post will mainly cover coding up responsive design and the third and final post will cover retina media queries, responsive images and more.

Note: The final part to this series is now published: Developing a responsive, Retina-friendly site (Part 2).

Jekyll + Rack on Heroku

I last redesigned my blog in 2010 when I migrated from WordPress to Jekyll. I eventually forked jekyll to support a separate photos post type outside of the main site.posts. I then wrapped it in Rack::Rewrite with Rack::TryStatic so I could host it on Heroku and 301 some old permalinks. I won't cover the details of that too much, but I recall reading this post by Matt Manning when I made the switch.

Most of the configuration is in the config.ru file. I loathe URLs that end in .html so my jekyll fork is based on this gist for Apache-inspired "multiviews" support — basically it writes links without the file extension and then I get Rack to do the same.

require 'rubygems'
require 'bundler/setup'
require 'rack/request'
require 'rack/rewrite'
require 'rack/contrib/try_static'

use Rack::Deflater
# also, look into Rack::ETag

use Rack::Rewrite do
  # rewriting old WordPress permalinks I had
  # Do not show .html file extensions

  # I largely gave up /year/month/day style permalinks for the ridiculous 
  # extra page generation time in jekyll (ie if /2013 loaded its own archives page)
  r301 %r{/[0-9]{4}/[0-9]{2}/[0-9]{2}/([a-z0-9\-/]+)}, '/$1'
  r301 %r{/categories/(.*)},       '/posts'
  r301 %r{/tags/(.*)},             '/posts'
  r301 %r{/people/(.*)},           '/posts'
  r301 %r{/([0-9]{4})/([0-9]{2})}, '/posts'
  r301 %r{/([0-9]{4})},            '/posts'
  r301 '/index.html',              '/'
  r301 '/index',                   '/'
  r301 '/archives',                '/posts'
  r301 %r{/(.*).html$},             '/$1'
  
  # I set USER=Stammy in .env -- you use foreman right?? -- to ignore these in dev locally
  unless ENV["USER"] == "Stammy"
    # remove all trailing slashes.. probably a better way to do this
    r301 %r{/(.*)/}, '/$1' 

    # i have a few domains that point here like pstam.com
    # rewrite them to only use paulstamatiou.com
    r301 %r{.*}, 'http://paulstamatiou.com$&', :if => Proc.new {|rack_env| rack_env['SERVER_NAME'] != 'paulstamatiou.com' } 
  end
end

# serve up some static goodness
use Rack::TryStatic, :root => "_site", :urls => %w[/], :try => ['.html', 'index.html', '/index.html']

# Serve the 404 error page
error_file = '_site/404.html'
run lambda { |env| [404, { 
  'Last-Modified'  => File.mtime(error_file).httpdate, 
  'Content-Type'   => 'text/html' ,
  'Content-Length' => File.size(error_file).to_s },[ File.read(error_file)] ]
}

To ensure deflater is properly compressing markup run this and you should see Content-Encoding: gzip returned:

# change 5000 to whatever port you run locally
curl -i -H "Accept-Encoding: gzip,deflate" http://localhost:5000 2>&1 | grep "gzip"

`grunt` watches over

When I started developing the new site I wanted to automate some of my workflow. Things like Coffeescript, JavaScript and Sass compilation to production-ready assets whenever any of the source files changed.

I took a look at the grunt build tool to help me with these issues. If you use jekyll, you probably have a Rakefile¹ where you have specified several tasks to aid in create new posts and so on. In layman's terms, grunt is very similar but based on node.

Installation is an npm command away: npm install -g grunt

I setup the main grunt.js file in my project directory root to do a few things:

Monitor all files in my style directory and compile screen.scss if any of them changed, like imported scss files.
Watch and compile the Coffeescript file app.coffee into JS and put it in the js directory.
Watch all specified js files in the _jslibs directory and minify them along with the compiled coffee file, app.js, into a single file.
Gzip then upload assets to Cloudfront as necessary.

I installed grunt-coffee and grunt-compass plugins to be able to work with Coffeescript and Compass for Sass. And then grunt-s3 to upload some assets to my S3 Cloudfront bucket. Finally, I installed grunt-smushit to be able to optimize images from the command line (or you can use ImageOptim if you like).

  cd ~/code/your-blog
  npm install grunt-coffee
  npm install grunt-compass
  npm install grunt-s3
  npm install grunt-smushit

In the root of the directory I created a simple package.json file. I really only use it to add a banner to the top of my js file builds but it also keeps track of dependencies so you can easily re-setup grunt on a new machine with npm install.

{
  "name": "pstam-blog",
  "description": "jekyll 'n shit.",
  "version": "1.0",
  "homepage": "http://paulstamatiou.com",
  "author": {
    "name": "Paul Stamatiou"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/stammy/pstam-blog"
  },
  "devDependencies": {
    "grunt": "latest",
    "grunt-coffee": ">= 0.0.6",
    "grunt-compass": ">= 0.3.7",
    "grunt-s3": ">= 0.0.9"
  }
}

Then I created the grunt.js gruntfile².

module.exports = function(grunt){
  // https://github.com/avalade/grunt-coffee
  grunt.loadNpmTasks('grunt-coffee');
  // https://github.com/kahlil/grunt-compass
  grunt.loadNpmTasks('grunt-compass');
  // https://github.com/pifantastic/grunt-s3
  grunt.loadNpmTasks('grunt-s3');
  // https://github.com/heldr/grunt-smushit
  grunt.loadNpmTasks('grunt-smushit');

  grunt.initConfig({
    pkg: '<json:package.json>',

    // fetch AWS S3 credentials in another json file
    // name with underscore prefix or exclude in jekyll's config.yml 
    // otherwise this will end up being public!!!
    aws: '<json:_grunt-aws.json>',
    s3: {
      key: '<%= aws.key %>',
      secret: '<%= aws.secret %>',
      bucket: '<%= aws.bucket %>',
      access: 'public-read',
      gzip: true,
      upload: [
        {
          // upload search assets - get src filename from the min block below
          src: '<config:min.search.dest>',
          dest: 'assets/pstamsearch.js'
        },
        {
          // upload main js assets
          src: '<config:min.main.dest>',
          dest: 'assets/pstambuild.js'
        } 
        // etc
      ]
    },
    meta: {
      banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */'
    },
    smushit: {
      // recursively run through *.png, *.jpg in img/ dir and optimize
      path: { src: 'img' }
    },
    min: {
      main: {
        // minify and bundle several js files together 
        src: [
          '<banner:meta.banner>',
          '_jslibs/head.load.min.js',
          '_jslibs/foresight.js',
          'js/app.js'
          ],
        dest: 'js/pstambuild.js',
        separator: ';'
      },
      search: {
        // separately, put search-related js files together
        // to be async loaded only when search is used
        src: [
          '_jslibs/jquery.ba-hashchange.js',
          '_jslibs/jquery.swiftype.search.js'
        ],
        dest: 'js/pstamsearch.js',
        separator: ';'
      }
    },
    coffee: {
      // compile one coffeescript file to js
      app: {
        src: ['coffee/app.coffee'],
        dest: 'js/',
        options: {
          bare: true
        }
      }
    },
    compass: {
      // compile Sass
      dev: {
        specify: 'style/screen.scss',
        dest: 'assets/',
        linecomments: false,
        forcecompile: true,
        outputstyle: 'compressed',
        require: [],
        debugsass: true,
        images: '/img',
        relativeassets: true
      }
    },
    watch: {
      // setup watch tasks. anytime a file is changed, run respective task
      coffee: {
        files: ['<config:coffee.app.src>'],
        tasks: 'js'
      },
      jslibs: {
        files: ['_jslibs/*.js'],
        tasks: 'js'
      },
      sass: {
        files: ['style/*'], 
        tasks: 'compass'
      }
    }
  });
  
  grunt.registerTask('default', 'compass js');
  grunt.registerTask('js', 'coffee min');
  grunt.registerTask('uploadjs', 'js s3');
};

Grunt has several built-in tasks, such as min. It accepts a directory or a bunch of specific JavaScript files and a single destination. One of those source files is from a compiled Coffeescript file, so it's important I only run min after the coffee task. To do that, I registered a js task that runs coffee first, then min.

I've also registered a default task (runs when grunt is called by itself) to call the compass task to compile Sass and then run the js task.

Setting up watch is the last and most important step. I configured it to run the coffee task anytime my coffee file changes, run compass anytime any file in the style directory changes, et cetera. I'm only working with a few files so it's instant.

That's it. I just run grunt watch and get back to work.

Grunt watching and compiling Coffeescript and Sass

This was a very basic overview of how I use grunt. It can do a lot more so it's worth exploring for other uses. I don't update the CSS or javascript on my site often so digestification ² of the compiled assets wasn't important for this, but it's something I want to look into.

Currently I manually run that last task (uploadjs) to build the js and upload it to S3. I'll have to spend some time reading the grunt-s3 source but at first glance it looks like it didn't support upload subtasks, so I couldn't abstract out only css uploading, search-related js uploading, and so on. It just uploads all specified files at the same time right now.

Matt Hodan's Jekyll Asset Pipeline is an alternative to using grunt entirely.

Search

I decided to ditch Google CSE and try out Swiftype, a Y Combinator search startup that has been dubbed the Stripe for site search. I have to agree, it's pretty slick. The best thing is that Swiftype lets me control the search results. I can find popular searches and pin certain results to the top.

There are a few install methods for Swiftype but I chose their self-hosted jQuery plugin. I ended up modifying it to provide pagination controls on the top and bottom of the results, add a no-results-found state and some extra markup to help me style it.

The plugin operates by listening to hash changes that include search params. I may end up refactoring it to remove that. Ideally I don't want to have to load an additional jQuery plugin to watch for hash changes and would like to forgo jQuery in favor of the smaller zepto.

Here's what the completed search interaction looks like, thanks to Photoshop CS6's new Timeline feature that helps me create annoying gifs:

A snippet of the header markup with the search bar:

<li><a href="javascript:void(0)" id="search" class="search ir" title="Search">Search</a></li>
<div id="searchbar">
  <form>
    <input type="text" id="st-search-input" class="st-search-input" />
    <a href="javascript:void(0)" id="st-cancel" class="cancel_search ir">Cancel</a>
    <a href="javascript:void(0)" id="st-close" class="close_search">Close</a>
  </form>
</div>

I only load the Swiftype libraries when the user clicks on the search icon. No need to load all that extra JS for everyone when only a few people will end up searching. Below is the coffeescript that hooks up all of the interactions, downloads the swiftype libraries concatenated and uploaded by grunt, and runs it.

$("#search").on 'click', ->
  # cache some frequently used elements
  search_input_el = $("#st-search-input")
  # create the wrapper for the results and prepend it to the main site div
  search_results_el = $('<div/>', {id: 'st-results-container'}).prependTo '#site'
  search_bar_el = $("#searchbar").fadeIn 200
  nav_li_el = $("#headernav li").hide()

  # load swiftype search libraries
  head.js 'http://turbo.paulstamatiou.com/assets/pstamsearch.js', -> 
    search_input_el.swiftypeSearch
      resultContainingElement: "#st-results-container"
      engineKey: "YOUR_API_KEY"
      top_pagination: true
      perPage: 15
    search_input_el.focus()
    search_results_el.fadeIn()

  $("#st-close").on "click", ->
    # and/or bind to ESC key (event.keyCode 27)
    search_bar_el.hide()
    nav_li_el.fadeIn 150
    search_results_el.slideUp 150
    # this line clears hash fragments from the URL, not necessary but I prefer to clean up the URL
    history.pushState "", document.title, window.location.pathname + window.location.search

  search_input_el.keypress ->
    # since it's a link, jQuery wants to display: inline; with show()
    # so I manually set inline-block instead
    $("#st-cancel").css('display', 'inline-block').on 'click', ->
      $(@).hide()
      search_input_el.val("").focus()
      search_results_el.empty()
      history.pushState "", document.title, window.location.pathname + window.location.search

Take it for a spin and try searching above!

Getting Responsive

The new responsive & retina-friendly PaulStamatiou.com.

I'm sure you already know what RWD design is, but to dive a bit deeper responsive design is usually defined as multiple fluid grid layouts while adaptive design is multiple fixed breakpoints / fixed width layouts. However, most of the time you see a mixture of both: fixed width for larger layouts and fluid layouts for smaller viewports.

That's what I do here. Content is 37.62136em wide (multiply that with 16px browser default and the 103% font-size I have on content = 620px) until the smaller viewports when it expands to 100% width.

Right about here I would start talking about how I adapted my site to be responsive on mobile. Except I didn't. I began thinking mobile first and as such it was designed with only a few elements that would need to change between viewports. There was really very little to plan for; I coded it up instead of designing responsive pixel perfects first.

Responsive pstam.com at 50mm @ f/1.8. I love Chrome for iOS.

Only a few elements elements needed fiddling:

Header: Show some extra subtitle text and increase font-size for larger viewports in addition to moving the avatar to the left size. Also, showing navigation button text for larger screens ("About" next to about icon, etc)

Footer: Increase font-size considerably on smaller viewports to make links easier to tap. Apple HIG suggests at least 44pt x 44pt for tappable UI elements⁴.

Content: Overall, making buttons larger and full-width where necessary. Adjusting font-size.

Simplified footer (left) and full-width post-content buttons (right) for smaller viewports.

For larger sites, you'll usually hear people buzzing about content choreography — adjusting layouts and moving elements around as content reflows with smaller viewports — and responsive navigation patterns, things like collapsing larger menus into the header. You can also get a good idea for how others work with layouts by scrolling through screenshots mediaqueri.es

Responsive Setup

To get started we need to tell the browser to set the viewport width by using the device's native width in CSS pixels (different than device pixels, CSS pixels take into account ppi). We also need to disable the browser's default zoom level, called initial-scale. Setting maximum-scale to 1 ensures this zoom remains consistent when the device orientation changes. This is necessary as most smartphones set the viewport width to around 1,000 pixels wide, thus bypassing any media queries you have for smaller screens.

Apple created this viewport tag to be placed in the head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

EDIT: While setting maximum-scale to 1 fixes the iOS orientation change bug it also limits users from manually zooming into your site. I have since removed , maximum-scale=1 from the viewport line above and updated my website to use this accelerometer-based javascript solution: iOS-Orientationchange-Fix. It's very tiny when minified and works like so:

How it works: This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.

I'm also taking a suggestion from normalize.css to set text-size-adjust: 100% to prevent iOS from changing text size after orientation changes and without having to set user-scalable=0 on the viewport⁵. Just be sure to never, ever set text-size-adjust to none — it has the nasty effect of messing up accessibility by preventing visitors from using browser zoom to increase text size.

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

Then we want to make sure less capable browsers like Internet Explorer 8 can make use of media queries. There are a myriad of ways to polyfill or gracefully degrade media queries on such browsers. I've decided to go with css3-mediaqueries.js as it supports em units.

Similarly to how you conditionally load JavaScript like html5shiv in your head, we load css3-mediaqueries.js in the same way:

<!-- Ideally you should minify + gzip and host this yourself like a boss -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

WTF are Media Queries!?

Media queries are the lifeblood of any responsive website. They are used to conditionally⁶ load CSS for a media type (like screen, tv, print) based on at least one media feature expression. Well to be technically correct, the browser loads all of them regardless of whether they will be used. More on how to fix that later.

You're probably already familiar with them being used for screen width and resolution, but it can also be used to respond to other device characteristics like orientation, monochrome, pointer (presence and accuracy of a pointing device; i.e. use larger buttons/input fields for devices with inaccurate pointing devices to combat Fitts's law), hover and luminosity (soon).

For example, the media query below targets devices with viewport widths of at least 481px, which is pretty much the portrait width of most tablets and above. That's where the extra 1px comes into play so it doesn't overlap with another media query you may have of say 480px and below, or between 320px to 480px. This can all be a bit confusing at first.

@media only screen and (min-width : 481px) { // your css }

Breakpoints 101

Those "ranges" of widths which you want to target differently are called breakpoints. But how do you know where to set those viewport ranges? Do you just set them up for a few devices?

This has been a rather large topic of discussion in the web development community. Typically you would make breakpoints for the iPhone and iPad and have your design conform to those viewports. The current trend is the opposite—your content and design should determine your breakpoints.

I started with the "regular" breakpoints. You know the ones: 320px (iPhone portrait), 480px (iPhone landscape), 768px (iPad portrait), 1024px (iPad portrait), and a desktop one for anything larger.

However, the max width of my primary content (I like to keep the measure⁷ under 75 characters) was awkwardly right in between 480px and 768px. It looked odd to display a condensed mobile header for browsers wide enough to show the full version. I changed the 768px breakpoint to 640px as a result.

As web developers like to say...

Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!

Working with Media Queries

Generally speaking, with media queries you'll have a big ugly section on the bottom of your CSS where you set your breakpoints and manually define styles you want to override. If only someone slapped me when I first did this in 2010. This was wrong for a few reasons.

For one, in an ideal world you should not be overriding styles, only augmenting them. One code smell is if you see yourself "canceling" out or undoing styles you defined elsewhere. I must admit it's something I always forget to do when I start a new project and want to get to "it works!" as fast as possible. Bookmark this article and read it sometime: Code smells in CSS. Then spread the gospel with me.

Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells right away.

What I really wanted to point out is the placement of all your media queries. Placing them at the bottom of your CSS breaks when you end up changing the original value and forget to change the appropriate media query style if necessary. That's where Sass saves the day.

Thanks to Sass 3.2⁸ @media bubbling and @content blocks, you can write ridiculously easy to use media query mixins. Yes, you can nest @media directives just like regular selectors and they will bubble up to the top level! Toss in a pinch of @content and that means you can write mixins like the ones below, as written by Anthony Short.

$mq-mobile-portrait   : 320px !default;
$mq-mobile-landscape  : 480px !default;
$mq-tablet-portrait   : 768px !default;
$mq-tablet-landscape  : 1024px !default;
$mq-desktop           : 1382px !default;

// Both portrait and landscape
@mixin mobile-only {
  @media (max-width : $mq-mobile-landscape) {
    @content;
  }
}

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
  @media (max-width : $mq-mobile-portrait) {
    @content;
  }
}

// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below {
  @media (max-width : $mq-mobile-portrait) {
    @content;
  }
}

// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up {
  @media (min-width : $mq-mobile-portrait) {
    @content;
  }
}

// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only {
  @media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) {
    @content;
  }
}

// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below {
  @media only screen and (max-width : $mq-mobile-landscape) {
    @content;
  }
}

// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up {
  @media only screen and (min-width : $mq-mobile-portrait + 1) {
    @content;
  }
}

// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only {
  @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) {
    @content;
  }
}

// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only {
  @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) {
    @content;
  }
}

// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below {
  @media only screen and (max-width : $mq-tablet-portrait) {
    @content;
  }
}

// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up {
  @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @content;
  }
}

// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only {
  @media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) {
    @content;
  }
}

// Up to and including the tablet landscape
@mixin tablet-landscape-and-below {
  @media only screen and (max-width : $mq-tablet-landscape) {
    @content;
  }
}

// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
  @media only screen and (min-width : $mq-tablet-portrait + 1) {
    @content;
  }
}

// Everything larger than a landscape tablet
@mixin desktop-and-up {
  @media only screen and (min-width : $mq-tablet-landscape + 1) {
    @content;
  }
}

// Everything below and including the desktop 
@mixin desktop-and-below {
  @media only screen and (max-width : $mq-desktop) {
    @content;
  }
}

// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only {
  @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
    @content;
  }
}

Now all of your media queries can be nested in the same place as the CSS, instead of at the end of the file or in another one entirely.

Skim through this tiny example of how I use these mixins for my header scss:

#masthead {
  margin: 0 auto;
  width: $main_content_width;

  @include tablet-portrait-and-below {
    text-align: center;
    width: 100%;
  }

  // circle avatar
  .stammy { 
    display: block;
    width: 133px;
    height: 133px;
    background: url('http://turbo.paulstamatiou.com/assets/stammy.png') no-repeat 0 0;
    // HiDPI media query mixin, I describe it a bit later
    @include image-2x('http://turbo.paulstamatiou.com/assets/stammy@2x.png', 133px, 133px);
    @extend %back-n-forth-anim;
    &:active { background-position: 0 1px; }

    @include tablet-portrait-and-up { float: left; }
    @include tablet-portrait-and-below { margin: 0 auto; }
  }

  hgroup {
    margin: 1em auto 0.6em;

    @include mobile-landscape-and-below { 
      margin-bottom: 0;
      .twttr { display: none; }
    }
    @include tablet-portrait-and-up { 
      float: right;
      margin-top: 1.95em;
    }

    h1 {
      font-size: 1.95em;

      // using exact font-size #s here to get h1 and h2s to line up perfectly on both ends
      // yeah this is probably a code smell.. but it works :)
      @include tablet-portrait-and-up { font-size: 2.42718446601942em; } // equal to 40px @ 16px baseline * 103% font-size I use in main content areas
      @include mobile-landscape-and-up { font-size: 2.25em; }
      @include mobile-landscape-and-below { 
        font-size: 2.1em;
        span { display: none; }
      }
    }
    
    h2 {
      font-weight: 400;
      font-size: 1.29em; 
      
      @include mobile-landscape-and-below { 
        font-size: 1.45em;
        .amp { font-size: 2rem; }
        span:not(.amp) { display: none; }
      }
    }
  }
}

Notice how I'm only using media queries to add or change properties, not remove them? Each selector only has CSS that is shared amongst every breakpoint and then I add whatever is necessary. This goes back to the CSS code smell thing I mentioned earlier. For all intents and purposes, you can call this mobile first CSS. I started with the narrow mobile-friendly design and hooked up media queries to get it to respond to larger viewports instead of starting with the desktop design coded up.

I actually had this backwards at first and here was the code I was able to remove after refactoring to mobile-first.. err, sorry I'll try to stop using these buzzwords.

// don't use -- merely an example of bad MQ coding
#masthead {
  @include mobile-portrait-and-below {
    .intro {
      h1 span { display: none; }
      h2 { font-size: 1.45em; .amp { font-size: 38px;} }
    }
  }
  @include tablet-portrait-only {
    .intro {
      h1 { font-size: 2.1em; }
    }
  }
  @include tablet-portrait-and-below {
    width: 100%;
    .stammy {
      float: none;
      margin: 0 auto;
    }
    .intro { 
      float: none;
      text-align: center;
      margin: 15px auto 10px;
    }
  }
  @include mobile-landscape-and-below {
    .intro {
      h1 { 
        font-size: 1.8em;
        span { display: none; }
      }
      .twttr { display: none; }
      h2 {
        span:not(.amp) { display: none; }
      } 
    }
  }
  @include mobile-portrait-and-below {
    .intro { margin-bottom: 0;}
    .intro h1 { font-size: 2.2em; }
  }
  hgroup { ... }
  .stammy { ... }
}

That looked pretty hacky right?

It's all relative (why you should use `em`s for breakpoints)

There's one thing I did to modify those media query mixins. I converted them to use ems instead of pixels for the breakpoints (the min/max-width values in the conditionals).

Why? Take a look at the two screenshots below. Each was taken in a roughly 750px wide browser. They are also both at a browser zoom level of 3. Yeah, I know you probably never use browser zoom but many, many folks do and it doesn't work well with fixed units. On the left you'll see what happens to a site using pixels for media queries, and on the right I'm using ems for media queries.

As the zoom level increases, the active media queries change! Mind-blowing right?!! Instead of being stuck on my 640px-equivalent breakpoint which starts getting cramped as zoom increases, the em-based media queries trigger the next breakpoint down, in this case my mobile landscape media query. Much, much better!

However, I've learned that when you test your media queries you will need to reload the page each time you change the zoom level. It's just a nitpick where media queries won't get affected by zoom level adjustments after the page load unlike browser resizes.

Left: media queries using px, Right: media queries using em

Doing so was easy; just a bit of pixel math. For example, take the 320px breakpoint and divide by the 16px browser baseline to get em, assuming you are using font-size 100%. Here's a gist.

$mq-mobile-portrait   : 20em !default;
$mq-mobile-landscape  : 30em !default;
$mq-tablet-portrait   : 40em !default; 
$mq-tablet-landscape  : 64em !default;

// and then changing the "+ 1" in each MQ conditional to a smaller unit like .001

Optimizing your media queries

By now you should have a pretty good idea of how to start using media queries to get your responsive designs off the ground. But like almost everything in technology these days, there are some compromises with the easy to use Sass @media bubbling route we took. The compiled CSS file gets fat since Sass is generating all these scattered media queries.

The Sass folks are definitely aware of this but don't expect it to be solved soon. What should you do? I chose not to worry about it right now. I don't have that many media queries for the size difference to be a huge deal given the convenience of working with Sass.

The other option is to create separate files for each of your breakpoints and handcrafting it yourself. Definitely more annoying to code this way but the benefit of having each breakpoint's CSS stored in individual files is that you can conditionally load them!

If you go that separate file route, don't load them in your head like this:

<link rel="stylesheet" href="base-styles.css">
<link rel="stylesheet" media="screen and (max-width: 40em)" href="mobile-portrait.css">
<link rel="stylesheet" media="screen and (min-width: 40.01em) and (max-width: 70em)" href="tablet-portrait.css">
<link rel="stylesheet" media="screen and (min-width: 70.01em)" href="desktop.css">

Even if your browser is only wide enough to use the mobile portrait stylesheet, it will still download all of them! No reason to penalize mobile devices on slower connections by making them load all this useless CSS they'll never use. Though in WebKit's defense, it is smart enough to make links with media attributes non-blocking and low download priority.

eCSSential was made to get around this but I find Christian Heilmann's matchMedia() suggestion more intriguing.

Note: This is all super nitpicky and you should ignore this section unless you get ridiculous traffic.

How do I execute JavaScript for certain media query breakpoints?

I don't have this need with my blog, but you may find yourself looking to run certain bits of code, such as collapsed menu logic for mobile devices. Fortunately, it is 2013 and this has been solved with window.matchMedia() and is supported in Chrome (10+), Firefox (6+) and Safari (5.1+). But you may want to grab Paul Irish's matchMedia() polyfill for more support.

"Give an example Stammy!" you exclaim. Alright, you could use this to only load Disqus comments on larger devices and gracefully degrade to showing a "load comments" button. Why should mobile users have to load their extra 100kB+ of assets?

if (window.matchMedia('only screen and (max-width: 30em)').matches) {
  // don't run disqus loading code, instead show load button instead
  $('#disqus_btn').show().on('click', 
    function(){ 
      // load disqus code 
    }
  );
}
if (window.matchMedia('only screen and (min-width: 30.01em)').matches) {
  // tablet or larger, load disqus code here
}

I must say that matchMedia() is a much cleaner solution to the hacks of yesteryear where people would use media queries to store identifiers for use in JavaScript. Such as a hidden :after pseudo-element with a content value of something like 'mobile-portrait' and then use JavaScript to pull that value for use in a conditional. Yuck!

In some ways I'm glad I didn't bother with responsive design much until now. It was just an ugly and hack-filled development scene in 2010-2011. Then again I used to know these CSS hacks by heart.

Responsive Design Testing

By now you've been tinkering with your media queries and want to test them out efficiently. Sure you can just manually resize your browser constantly but let's face it, that gets old pretty fast. You should be able to tell what breakpoint is active at a glance, without having to open up the inspector.

Johan Brook suggests having each media query set a :before pseudo-element on the body to display a content value like "tablet media query" as a site header.
By itself Chrome can't go narrower than 400px wide (unless you have right-docked dev tools and expand accordingly), so you will need to look into Chrome's Device Metrics feature to test smaller viewports. Firefox has an equivalent tool as well.
Various responsive design testing sites like screenqueri.es and responsive.is as well as bookmarklets like Viewport Resizer have become all the rage.

Firefox has a little known Responsive Design View and Chrome has Device Metrics

Testing with Adobe Edge Inspect

But at the end of the day you only really care about what it looks and performs like on a real device. That's why I checked out Adobe Edge Inspect. Frankly, I was blown away. It is not your typical behemoth Adobe application. It's a combination menubar app, Chrome extension and iPhone/Android app. Here's Adobe's guide about Edge Inspect.

Edge Inspects helps you remotely inspect sites on your mobile device (even locally hosted ones) and remotely grab device screenshots. Then I started actually trying to put Edge Inspect into my dev workflow. I found a few annoying issues. For example, you can't actually see your media queries in the remote inspector. That's kind of a big deal. To get around this, Adobe suggests you manually put each of your media queries in separately linked files, not as @media blocks in your CSS. No thanks.

Edge Inspect is definitely promising, but it has a few showstoppers at the moment.

Responsive Text with viewport-percentage length units

Want text to get larger as the viewport increases so you can keep your measure the same while keeping the layout fluid, all without resorting to tons of breakpoints to constantly adjust the font-size? You can use viewport-percentage lengths: vw, vh, vmin, vmax.

I'm not currently using them due to lackluster browser support, but I find it worth mentioning. Until we get better support or a performant polyfill for these units the next best thing is FitText.js (only use it for headers, not body content). That's the same reason I haven't been using rems as much as I'd like. EDIT: Paul Irish pointed me to a new polyfill, vminpoly, for this.

`300ms` of doom

Mobile Safari and other iOS and Android browsers have a feature which introduces a slight 300ms delay between a tap and actually becoming active. This delay is actually rather noticeable. Google talked about this in January 2011 in their now popular guide Creating Fast Buttons for Mobile Web Applications:

The problem with this approach is that mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

Fortunately, we can remove it and make the site seem faster and more responsive with a browser polyfill called FastClick; an adaptation of Google's concept.

In this example below, I load FastClick asynchronously only for iOS devices; I've heard there are some Android issues but haven't tested myself yet. I use the tiny JavaScript loader head.js for this since the majority of my visitors won't need to load FastClick. If you already use RequireJS, FastClick is an AMD module so it should just work when you require it.

# load fastclick if mobile safari
if navigator.userAgent.match(/(iPhone|iPod|iPad)/i)
  head.js "js/fastclick.min.js", ->
    window.addEventListener "load", (->
      # ideally you would call it directly on the links/btns rather than the body..
      new FastClick(document.body)
    ), false

Enable `:active` link states

While we're talking about mobile, we can enable CSS active states on links by adding a touchstart event listener. This is only necessary if you have defined your own custom link active states that you want to use instead of Mobile Safari's default gray tap–highlight color. For example, I have a simple active style of orange links and then a subtle "pressed in" inner shadow style for my buttons.

// remove the default gray highlight
html { -webkit-tap-highlight-color: rgba(0,0,0,0); }

# enable :active pseudo in mobile safari
document.addEventListener "touchstart", (->), false

Twitter Cards in yo' `<head>`

Before I was ready to push everything live I added support for Twitter Cards. You might not know the name for it, but you've certainly seen tweets that have certain snippets of content and metadata attached to them. Twitter wants to keep the experience consistent across devices and giving them some data helps them do that for you.

Twitter Cards as seen in their mobile app and on the web.

Setup is just a few lines of meta tags. I added their tags for photo and summary cards. To do that, I used Jekyll liquid syntax to determine whether it was a regular post or a photo post. (Unrelated but do you know how hard it is to post escaped liquid syntax with pygments?.. all of the hacks)

{% if page.layout == 'photo_layout' %}
  <meta name="twitter:card" content="photo">
  {% if page.image_lg %}
  <meta name="twitter:image" content="{{site.cdn}}{{page.image_lg}}?w=560">
  <meta name="twitter:image:width" content="{{page.photo_width}}">
  <meta name="twitter:image:height" content="{{page.photo_height}}">
  {% endif %}
{% else %}
  <meta name="twitter:card" content="summary">
  {% if page.image_lg %}
  <meta name="twitter:image" content="{{site.cdn}}{{page.image_lg}}?w=120">
  {% endif %}
{% endif %}
<meta name="twitter:site" content="@stammy">
<meta name="twitter:creator" content="@stammy">
<meta name="twitter:url" content="http://paulstamatiou.com{{page.url}}">
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:description" content="{{ page.content | strip_html | xml_escape | truncate: 200 }}">

Much of those page properties (image_lg, photo_width, photo_height) are YAML front matter attributes unique to my layout. Chances are you'll only need the meta tags for the summary card which doesn't require an image. As I'll explain later, the image size params are resized on the fly to the maximum width allowed by Twitter – 560px for photo cards and 120px thumbnail for summary cards.

Then I added some Open Graph tags, which are also pretty self-explanatory.

Share this post :) Part 3 coming soon

What's your mobile web development process like? Have you worked on a mobile first or responsive site yet? Let me know in the comments below or shoot me a tweet.

If you'd like to learn more about media queries and responsive development, take a look at this article about responsive design with flexbox or this RWD guide. I haven't read either of them but they look legit.

Note: This post is part of a series documenting the design and development of this blog. The first part was Designing a responsive, Retina-friendly site. The third post will be published next week. Stay tuned!

1 Take a look at the Rakefile from Octopress for example.

2 It is likely that grunt v0.4 will be out by the time you read this and that introduces some new syntax, so keep that in mind.

3 Digestification basically means append the md5 hash to the filename so that every file is unique and there are no cache issues when pushing new files. For example, screen-201e33eaffa31ab1a1fde5564bb30631.css.

4 That translates to 6.875mm on the iPhone and 8.536mm on the iPad and ~7mm on the iPad Mini. Though Nielsen Norman Group in their 2nd edition iPad Usability study suggest that 1cm by 1cm with adequate spacing in between performs best.

5 That would entirely disable users from manually pinching and zooming, which I think is a usability concern regardless of how much you mobile optimize your site.

6 Notice how I've used the word "conditionally" several times.. responsive design is really about various conditions to which your site — from JavaScript and CSS to images and videos — must react.

7 Measure is the length of a line of text. Word of thumb is 40-75 characters per line for good readability.

8 Not currently out as of this writing, but you can install via gem install sass --pre

Enjoy this post? Click through and leave a comment. It will make my day. Developing a responsive, Retina-friendly site (Part 1)

Joining Twitter

2013-01-14T08:00:00-08:00

I have always wanted to work at Twitter but never actually thought about it until Akash Garg reached out a few months ago¹. Yes, this is a post announcing that I have joined the flock at Twitter. I signed up for Twitter exactly six years ago in January 2007 as user #624,683².

With @dickc, Twitter CEO Dick Costolo, after a company "tea time"

Almost 25,000 tweets later, it's obvious to me that Twitter is my online identity. It's the only online property where you can really get a sense of who I am and my personality.

I remember when Twitter was gaining steam in 2008. I was invited to speak at a TTI/Vanguard conference in Rome³. It was my first speaking gig ever and they had booked me for a 45 minute speech. I only had 15 minutes prepared. Fortunately my talk evolved into a discussion about Twitter — everyone kept asking what it was and how they could use it.

Since then it has permeated the daily lives of over 200 million active users. It was even the topic of a 30 page paper for a course I took at Georgia Tech.

I work as an Experience Designer on the Growth Team, lead by Nancy Broden. It's rather surreal to work just feet away from design leaders I have been following online for years like Doug Bowman, Mike Davidson and Josh Brewer. I'm a designer but I also have a dev environment setup to help with implementation. That's the perfect mixture in my eyes.

This is the most ridiculously complex animated logo, done in After Effects by @ThisGuy

Why this role? Well, after 5 years of startups (yes, this is my first real job) there's one thing I want to get better at — growing products. Being informed about knowing why things failed or worked well and running a myriad of experiments or usability studies to find the best performing design.

My mind was blown last week when I was shown how many experiments the growth team frequently runs and pushes out to a percentage of the userbase. Whenever an experiment is completed, owners write up the results for all to learn from. No more design via hunches.

Twitter is becoming a big company but I feel like I know everyone from following them on Twitter. Read more about working at Twitter from Mike Davidson and Doug Bowman. I'd like to give a big thanks to everyone I bugged for advice during this process: Gabor Cselle, George Zachary, Eric Florenzano, Eric Maguire, Eoghan McCabe, Sanjay Parekh.

We're hiring

What would a new job announcement be without me getting you to come join?! The design studio has several openings as does the Growth Engineering team where Akash is the guy to ping.

What about Picplum?

Akshay and I have both moved on to full-time jobs, with Akshay joining the new Live Nation Labs, but Akshay will still be actively maintaining and developing Picplum in his spare time. I will remain onboard in an advisory role. We're looking for folks to help run Picplum — from marketing to customer support. Drop us a line if you'd like to hear more.

The Office

In the spirit of my old startup HQ posts, I brought my 5D along to share a few shots of the new Twitter office at 1355 Market St, San Francisco.

Folks chowing down during Hack Week

One of the game rooms.

@timtrueman playing with a new 70-200 lens for his D600

@JFSIII showing me how to use the espresso machine in one of the kitchenettes

Sara Mauskopf accepting Mike Davidson's hot sauce challenge.

1 after reading my popular post Startup Idea: User Retention as a Service

2 I was an Odeo user and remember first hearing about twttr but initially avoided signing up then as as I didn't have a robust SMS cell plan and twttr was initially very SMS-oriented. I even blogged about the launch of twttr.

3 The first day I got there I ended up meeting and having lunch with Aaron Swartz and Nicholas Negroponte.

Enjoy this post? Click through and leave a comment. It will make my day. Joining Twitter

Designing a responsive, Retina-friendly site

2013-01-05T17:20:00-08:00

It's hard to believe I have been blogging for more than 7 years. Michael Wozniak, my hallmate during my freshman year at Georgia Tech, had gotten me into Gentoo Linux the year prior and told me he was playing with WordPress 1.2. Compared to the MediaWiki site I was running at the time that piqued my curiosity and I began blogging on WordPress on my G4 Mac Mini that summer. I immediately fell in love with it and began learning CSS and PHP to tweak the theme¹.

Eventually I found my thing – writing technical guides, product reviews and tech editorials. I still remember the feeling when I noticed one of my articles got picked up by Lifehacker. Then digg. Then 5 other sites. 20,000 uniques in 4 hours. I wrote a follow up to that article. Same thing. And another follow up. I received enough traffic that month in 2005 to kill the hard drive in my dorm-hosted Mac.

Unfortunately, I haven't blogged as much in recent past; my waking hours spent worrying about startup issues than crafting new content. Things I would have blogged about in the past are now published as tweets.

When the time arises, I thoroughly enjoy writing long-form articles and with that in mind I wanted to design a better experience for consuming them.

Note: This article got rather long (15,000 words), so I split it up into a few posts. This one is about design. Developing a responsive, Retina-friendly site (Part 1) covers responsive development while the third part will cover responsive images.

Mobile

My last redesign in 2010 was not built with mobile in mind. It was more of a lets-get-this-new-Jekyll-thing-working project than a planned website overhaul. Visiting on an iPhone meant the typical double-tap-to-zoom fiasco.

Having seen my traffic breakdown go from 3% iPhone and 2% iPad in 2011 to 7% iPhone and 4% iPad in 2012 I knew it was time to ~~focus on the mobile experience~~ throw mobile visitors a proverbial bone. iPad visitors in particular spent more time on site than desktop or iPhone visitors. Approximately 132,000 people read this site on a mobile device in 2012. Damn.

The new responsive & retina-friendly PaulStamatiou.com.

These numbers are only going to grow. It helps that proliferation of LTE networks and devices means the fastest Internet connection people have will likely be on their smartphone, not their home connection. That's crazy.

Picture Perfect

Many of my posts and reviews are filled with my own photos. My blog actually got me into photography. I first purchased a DSLR to take better pictures for articles and product reviews. In the last 3 years I have fallen in love photography. But most of my shots were getting published on Instagram. It made me feel a bit bad that I don't often share many of my photos on my blog.

Some of my Instagrams

I was in that exact mindset when I was flying back from New York after hanging out with the Rap Genius guys. They don't have an office, instead they have a few baller (to use their vernacular) penthouses in Brooklyn. I took this panorama on their deck with my iPhone which I then post-processed with Snapseed.

Click see my new photo page

I liked this photo so much that I was vexed I couldn't share it with my Instagram followers. I began pondering about a clean way of sharing it on my blog.

The Retina Revolution

If I was going to touch my site, it would need to be Retina friendly. I'll be referring to Retina as the device agnostic term HiDPI from here on out. What does that mean? Every icon, background or image used should look crisp on HiDPI displays. The most pressing area for that is on mobile devices as there aren't yet that many HiDPI desktops and laptops out. As much as people love the Retina MacBook Pros, that's not even a single percentage of anyone's web traffic yet.

Don't expect to have a HiDPI 27-inch display just yet. The first 4K (3,840 x 2,160) big displays are shipping and they are expensive.. around $5,500. But in 2-3 years? That'll be another story entirely; HiDPI displays will be standard on most high-end desktops².

If responsive web design was the fad of the web design/development community for the last few years, the next one is going to be HiDPI support. With HTTP 2.0 (with SPDY forming the starting point) slated to drop in 2014³ it will be perfect timing to combat the larger filesizes needed for HiDPI image assets. As I'll discuss in the second part of this post, there are some development challenges associated with this.

Design

Late night Photoshopping & trance. Very similar to The Coding Zone.

I wanted to completely rethink my site, not just a add new coat of candy paint. I planned to rewrite copy on all static pages, reorganize content as necessary and generally simplify things. This would also give me a good excuse to start using more semantic HTML5 tags.

My design process was a little different from how I mentioned it in my ridiculously popular Crash Course: Design for Startups. I usually start with some inspiration-wrangling, a few ideas about direction and lots of sketching before any Photoshop or code. I couldn't exactly whip out a big sketch pad in lovely last-minute seat 37B so I worked in Photoshop for most of my 6 hour flight back to SF (until they started playing How I Met Your Mother).

If you need to use something like Readability or Safari Reader to read my articles, I've failed as a designer.

I began thinking single column. The content should be the star of the show. No sidebars or extraneous post metadata that gets in the way of reading. If you need to use something like Readability or Safari Reader to read my articles, I've failed as a designer. And lets not forget the impetus behind this rethinking; I wanted to be able to publish large photos – within posts that extend beyond the narrow copy and also on individual photo pages. Bandwidth and latency be damned, I want to show dozens of 1000px+ wide photos at a time.

Planning Mobile First RWD

The premise behind Mobile First Responsive Web Design⁴ is that you should trim your site to only the essentials, establish the priority or question the necessity of all elements and focus on mobile before adding complexity for larger/desktop versions of the site. This is going to sound ridicu-cheesy, but this is a way of thinking and it applies to every aspect of your site planning. Even down to writing mobile first CSS to keep things lightweight and simple and conditionally load extra stylesheets and content for larger devices (that are also likely to have faster connections) as necessary.

Categorizing your site into pieces and setting priority before even pondering aesthetics stems from Dan Brown's page description diagrams back in the early 2000s.

The page description diagram, by demonstrating priorities and providing a context for the content and functionality, gives visual designers the information they need to create an effective layout.

It's a great little exercise when embarking on a redesign. Given that this site only has a few pages and then blog posts, it wasn't really needed. For the sake of teaching, I'll elaborate a bit. You generally start with three columns from high to low priority page elements. You list out each element and you can optionally provide a description of it and a simple wireframe of that element.

High	Medium	Low
Archives/Posts	RSS/Subscribe	Contact
Photos	"Bits" (asides) posts	Search
About	Comments	"Stuff I Use" page
@Stammy		FB/Twitter share
		Post metadata, date

Some of this organization was by personal preference and some was metrics-driven. Take the post date for example. I have some articles dating back 7 years and I don't want to advertise that the content may be outdated⁵, so I place less importance on that and display the publish date after the post. For the most part my articles are evergreen and more of my content is becoming less product reviews and more editorial.

I've also found that time on site increases when users don't see the post date immediately. The majority of my visitors come from Google SERPs and they'll leave without reading if the first thing they see is that the content is more than a year or two old. Increasing time on site also tends to decrease bounce rate for these Googlers. After reading the post they are likely to open up a few other articles I link to or just browse around for another pageview. It's important that I do whatever I can to capture that first time visitor.

If someone won't share a post because I don't have a Twitter button in 10 places on the page, then I'm writing pretty crappy content.

An example of priority based on personal preference is my decision to place low importance on Facebook and Twitter sharing functionality. I like to believe that if the content is good enough, people will share it on their own accord. I also didn't want to load Facebook and Twitter javascript. This gives me a mental test before publishing.. is this content really good enough to publish?

I could simplified things more by merging my "bits" (smaller posts) into the main posts section. Bits had their own RSS feed and index page. It was another navigation element; another forced decision upon visitors to visit another page. Bits now appear styled differently inline with the rest of the posts.

But I messed up. When I first did this page description diagram I prioritized search functionality as high. My first header designs as I'll show below had a huge search bar next to the main navigation as if it was one of the most important elements on the site. I looked into my Google CSE analytics ‐ search was rarely used; less than 10 queries a day on average. Only 8,500 on-site searches in the last 3 years. I since relegated search to low priority on this diagram.

Where to begin with visual design?

After that basic IA and planning was out of the way, I had a good idea of what to include in the header. I was going to distill it down to the essentials. There would be such little difference between the mobile version and larger responsive versions that I wouldn't really need to plan the responsive designs. The focus is on the content at all times, not just on mobile, so there's no need for me to do any content choreography and adjust layouts between responsive designs. No sidebars to hide or move, et cetera.

Some designers start with a blank slate of copy and begin with typography and layout, while others begin with the site header and navigation. I began with the header. I tend to start my designs on an extreme with the intention of toning it down later as necessary. As a tiny example of that, I made the avatar and header text much larger than I was comfortable with. If you only ever design within your comfort zone, you won't come across unexpected ideas that you may end up loving. That's how the folks at Lamborghini design ² too — starting with the most absurd and extreme lines that come to mind.

I've ridden in a Ferrari 458 and thought that was insane. The Aventador hits 60 quicker, in just 2.8s.

I previously had a terse Twitter-like bio on the top of my homepage and decided to further reduce that into a subtitle. As for having my avatar there, I wanted to put a face to the content, much like people have become accustomed to seeing a face next to every tweet.

Below you can see some early versions of the header that I was left with by the time the flight was ready to land. The one on the left was the first stab. It felt like there were too many menu items and the search just didn't line up. The middle version was my attempt to distill navigation into the most important elements, posts and photos. I wasn't happy with the visual hierarchy there either and it made search look too important. In the third iteration I began playing with icons to minimize space used by navigation. I was trying to line it up under the avatar, but I had too many menu items and it just looked weird.

Some early iterations of the blog header and navigation.

Around this point that I dug into my metrics to find out that search wasn't used much. I initially opted for icon-only navigation with tipsy-style tooltips, but felt it violated Rams' "as little design as possible" principle, in addition to being cumbersome (having to hover over each icon first to see what they meant).

Some hours of tinkering later I ended up with my current design with only three main navigation elements. In between Photoshop iterations, I would constantly sketch UI on paper to refine my ideas. Just drawing any tangentially-related solution that came to mind helps organize my thoughts.

All I need is a simple sketchbook and a Micron 01 pen to sketch out concepts.

Keeping track of iterations

I've made it a habit over the past year to constantly take screenshots of my designs in progress. Either of Photoshop work or in-browser tweaks with Chrome dev tools. Over the course of this blog design I ended up with 67 screenshots. It's nice to be able to go back and trace your thought process over again. Danny Hertz from Twitter had an interesting idea about how to automate this with Selenium, but I digress.

I've started using LayerVault to help me with this. It's like GitHub for PSDs and you can visually flip through your PSD revisions.

LayerVault showing a revision. I keep my palette in big blocks on the top of the PSD for easy picking.

The Sandboxed Cover Photo

Going along with my wanton lust for big photos, I also designed a second header to be displayed for particular posts and pages that have a cover photo defined in Jekyll's YAML front matter. I built it (and incorporated some slick parallax scrolling) but decided not to use it. I'm not quite sold on it yet. Back to the sketch pad.

Example of a page with a cover photo. Still a work in progress.

I've got the blues

At this point, the design was coming together and needed to focus on typography, make a simple footer and some button styles.I created a muted blue shade button style to use throughout the site.

Article publish date, share UI and related links

As we all know you should never use black so I chose a fairly muted color palette of desaturated blue shades. For one, blue is awesome and two cooler colors recede and since the content is the centerpiece here I want it to stand out. My main copy is a subtle warm gray, as warmer colors come to the foreground.

Not all displays are alike

I wanted to get some feedback on a PSD so I showed it to my friend Anand on my MacBook Air. I quickly realized that I could barely see parts of the design! The colors were way too light. I had been designing the whole time on a 27-inch Apple display and a 24-inch Dell display that made them seem like they had adequate contrast. Not so on any Apple laptop I tested it with.

Enter WCAG 2.0. Yes, another W3C acronym! The Web Content Accessibility Guidelines cover various aspects of website accessibility, including contrast minimums. There is actually a rating system for contrast! It takes text size, color and background color into account to come up with an AA or AAA level.

No need to worry, Lea Verou came up with a handy tool called contrast ratio. Punch in your color and background color to see if it has adequate contrast. But if you have to ask yourself if there's enough contrast, there probably isn't. I still need to darken the color of my footer links, they're a bit light.

Serifs.. on the web?!?

I decided to go with the lovely serif Adelle for article headings and text. It's the first time I've really used a serif on the web.

Trying to decide between 6 different Typekit typefaces. Chrome extension: WhatFont

I've grown up being told that you shouldn't use serif typefaces on the web—the serifs themselves⁶ on certain curvy typefaces don't lend well to being displayed with a grid of pixels unless the particular font has been properly hinted (unlikely). Well, my official stance is this all matters less when you're dealing with HiDPI displays so I'm going for it.

If you want good type on Retina displays, stop discussing hinting et al. Just search for faces that happen to look good. Like the old days.
Erik Spiekermann

You can learn more about web typography with this interactive guide or The Elements of Typographic Style Applied to the Web.

Photo Layout Ideation

Up until this point, the homepage mockup in Photoshop just had an article excerpt, a list of recent posts and then a few photos. I thought it would be interesting to show more information about the photos on hover.

First idea was to display photo title and camera metadata on hover. (Aston)

After I was satiated with hover style, I quickly coded it up ghetto-style directly in Chrome dev tools to see how the interaction felt. I'm glad I made a prototype first because I quickly realized that hovering over each photo and then displaying a full-width overlay was jarring and abrupt to the user.

It could also be inadvertantly triggered while scrolling down the page and it was unexpected. It taking up too much space and you couldn't see the photo while reading the title. Not to mention how would I make this mobile web friendly? I wanted to have it always display on mobile but that wouldn't work if it hid the image.

Then I thought about having it only appear on the bottom section of the image on hover.

Second iteration for photo hover metadata

That almost worked but then there was the case of longer photo titles wrapping and looking unpleasant. I decided to forget the image hover stuff and instead vertically stack the photo metadata and put it below the image in its own photo layout. Again, I quickly marked it up to see what the experience was like in the browser. It worked, but I had another problem now.

Having the same large site header and navigation took too much attention away from the photo itself.

A few photo layout iterations.

I kept removing and de-emphasizing elements until it was clear the focus was on the photo. This brings up a tradeoff with usability though. This breaks the user's expectation of a consistent and familiar header navigation that they are familiar with on all other pages of this blog. I decided that was an acceptable tradeoff when the user is moving into a photo viewing mode. I added left/right arrows that display on the image on hover, and bind the left/right cursor keys so visitors can browse other photos easily. Since photo pages are not long, there was a simplified footer with all the necessary navigation to get back to the homepage.

</design>

It was a bit challenging for me to explain how I approached the design of this blog. It's one thing to explain the finished product but it's another to explain all the iterations in between and how you got from one to the next. It's a lot of fiddling, having a few rules of thumb and constantly questioning yourself about those designs.

Subtletly, something I also mentioned in my design crash course, is one of those rules of thumb for me. I very, very often find myself thinking "can I make that lighter?", "can I remove this line?" and so on.

If there are any visual garnishings, such as a button block sheen or inner white glow on a menu bar background, that don't serve a functional purpose (like grouping sets of elements together for Gestalt Law of Proximity), it can and likely should be de-emphasized by changing color, reducing opacity or removing it altogether.

I spent a few hours per day over the course of about a week and 19 PSDs coming up with this before doing any real coding aside from prototypes to test certain design decisions. The design of this blog is still a work in progress and I'm sure I'll be changing things in the near future.

Share this post :) Part 2 coming soon

What's your design process like? Have you worked on a mobile first or responsive site yet? Let me know in the comments below or shoot me a tweet.

Note: This post is part of a series documenting the design and development of this blog. ~~The next part(s) covering development in great detail will be posted this coming week.~~ Developing a responsive, Retina-friendly site (Part 1) covers responsive development while the third part covers HiDPI and responsive images: Developing a responsive, Retina-friendly site (Part 2).

1 Several redesigns later I ended up making and releasing my own theme, 281, that ended up becoming an option on WordPress.com.

2 I remember paying more than $700 for my first 80GB SSD (and then another for RAID) in late 2008. Now they're affordable and ubiquitious on any decent computer.

3 HTTP/2.0 to be submitted to IESG for consideration as a Proposed Standard in November 2014.

4 You can read more about Mobile First in Luke Wroblewski's excellent book.

5 I know this is a controversial issue. Some people despise sites that don't list publish date adjacent to the title. But as a site owner, it benefits me to put it after the post.

6 By my use of "serif" here I don't mean the typeface but the small lines shooting off the edges of letters.

Enjoy this post? Click through and leave a comment. It will make my day. Designing a responsive, Retina-friendly site

Twitter Review: New Gmail iPhone app

2012-12-06T13:28:38-08:00

Google recently released a new iPhone app for Gmail this week to much fanfare. After the third blog post citing how "slick" it was, I gave it a go myself. I currently use Sparrow for email on my iPhone. After having it installed for 5 minutes, I asked the Twitterverse what they think:

New Gmail iPhone app: discuss. I think the font-weight is too light. I want to read my email, not frame it and put it in an art gallery.

Aside: I just redesigned my blog (take a look! responsive & retina friendly -- more on that later) and moved all posts from my "bits" feed into the main feed, so your RSS reader may have surfaced a bunch of old posts recently. I'm going to be moving off feedburner in the near future. In the meantime you can subscribe to the new feed: paulstamatiou.com/posts.xml but I'll try to redirect the feedburner feed too.

Gmail for iOS (Some email entries photoshopped out for obvious reasons)

The Verdict

@Stammy It is hard to distinguish what is a read/unread message. Thats my biggest complaint,
@sdenike

@Stammy I agree with you on font-weight. Overall I like the UX. Easy to get around quickly.
@JamesStaubes

@Stammy Indeed. I ended up switching back to mail.app because it lagged way too many times. Oh, its a web app too.
@ohhmaar

@Stammy Too many loading screens (not sure if/when it caches content), too many clicks to switch accounts. Looks pretty but didn't last.
@sriramk

@Stammy Feels like a non-native app. Not fluid at all. Not cool.
@saverio

@Stammy agreed, too artsy! I don't like that I can't get to "all mail" quickly with all my labels.
@dougaitken

@Stammy One of the only few problems I have with it. Love it for the most part, though..
@ryanashcraft

@Stammy yeah - looks good, but too many alerts for my 6 email accounts constantly checking for mail - i've uninstalled
@mstafford

@Stammy too metro for me. not having unified inbox was the killer.
@connor

@Stammy I personally like the new Gmail iOS app. The font is a little hard to read, but it doesn't hinder my experience
@ATLChris

@Stammy it’s pretty good overall
@semil

What do you think? What's your main mobile email client of choice?

Enjoy this post? Click through and leave a comment. It will make my day. Twitter Review: New Gmail iPhone app

Culture

2012-09-05T15:00:09-07:00

I recently read Alex MacCaw's article, What it’s like to work for Stripe, while on a much needed vacation. Alex, whom I first discovered via his post on asynchronous UIs and then traveling the world, does a great job discussing how Stripe operates. I have gotten to know the Stripes over the last year and am impressed at how well they execute. As he states, culture can be hard to define so I'd like to share a bit about what it means to me.

This summer Picplum had two excellent interns from Carnegie Mellon. It was my first time working with anyone other than a cofounder and it was rather enlightening. As someone who is admittedly a bit of a perfectionist at times, I initially had a hard time even wanting to split work up.

That quickly changed. Everyone had their own feature to build, worked on everything from design to back-end to get it working and then ship it. We got so much done.

Our interns have since gone back to college, and I have been left pondering about growing the Picplum team. I have been fortunate to find a cofounder (and roommate) that I learn from, enjoy being around and have much respect for.

How do you attract those Jobsian A-players?

It's with a culture where people can thrive and tackle problems they find interesting. It's not with offering standing desks and beefy computers; every Silicon Valley startup offers that. It's not with showing off office pictures of employees playing around with nerf guns. Those are gimmicks. Culture is not defined by a fancy workplace. It's all about the people.

Company culture is often something a potential hire can't easily find out until they're at the company (or until it's too late). Except for larger startups that have found interesting ways of evangelizing their culture. Stripe and Quora have hackathons and GitHub has drinkups. GitHub even custom labeled their own batch of "Slow Merge" bourbon and used to have contests where the prize was expensive bourbon. That kind of goes with their culture, they tend to hire friends and folks they get to know at their drinkups. They rent out local clubs (Mighty) and have their employees play great techno when all of their remote employees are in town.

What about small startups?

But when you're a much smaller team you can't exactly do those things. So you focus on the people. Early on with tiny startups culture is more about the people and their personalities rather than work processes.

For whatever reason, their sense of humor is the first thing that comes to mind; perhaps because that's also what I look for in friends. ENTP, INTJ...? How do they handle criticism of their work? Do they communicate well? These aren't things you can readily discover during a technical interview. So you focus on hiring those that align most with your startup's work ethic and how you build things.. and let the culture naturally build itself.

I recall flipping through Reed Hastings' slides on Netflix culture some years ago, where he detailed their culture like I've never seen any company do before. This one line stuck with me:

Actual company values are the behaviors and skills that are valued in fellow employees.

All I can think about is growing our team. Learn more about Picplum on AngelList.

Enjoy this post? Click through and leave a comment. It will make my day. Culture

My TechCrunch Post for First-time Startup Entrepreneurs

2012-08-16T10:49:03-07:00

In case you didn't catch it, I wrote my first TechCrunch guest post earlier this month. It's aptly named First-Time Startup Entrepreneurs: Stop Fucking Around and it's my take on how first-time startuppers should work and get things done. Take a look at it and let me know what you think!

We are in an amazing time right now — perhaps the perfect time to build companies. And it pains me to see first-time entrepreneurs flush away this huge opportunity getting caught in the hype of how cool it is to do a startup, going to endless meetups and spending entirely too much time on Maserati problems when they’re not busy cargo cult coding. Startups are a grind. It may end with having to get a job, or it may end with a big smile and a Section 280G, but either way you’ll have learned a ton.

Read the rest »

I was a bit overwhelmed by the immensely positive reactions to this post. Many emails, 500+ new Twitter followers, lots of new Picplum customers and more. Just goes to show that I should blog more!

Enjoy this post? Click through and leave a comment. It will make my day. My TechCrunch Post for First-time Startup Entrepreneurs

Browser sync is the killer app

2012-06-29T00:00:00-07:00

"Slow. Doesn't use the V8 engine. Second-class citizen on the iPhone. 3x slower than Mobile Safari because it uses WebViews. No full screen, no gestures. Horrible."

Taken by a lovely Canon 5D Mark III (thoughts coming soon)

All of these have been used to describe the new Chrome app for Apple iOS. But you know what? It's not all about speed. Browser sync is the killer feature for me.

I remember when Mozilla's Weave initiative was announced back in 2007. It was a way for you to sync bookmarks, settings, et cetera amongst your Firefox browsers — and I thought that was going to be amazingly huge. In particular because you could use your own server for it. I remember even setting up my own WebDAV server solely for syncing Firefox. But times have changed and I would rather let trusted others manage my data and servers for me (Heroku, Google, Amazon, Dropbox)¹.

I had even pitched a hosting company on creating a hosted Weave service for users. I had just come back from speaking at a conference in Rome where I happened to run into Aza Raskin², who blew my mind about the future of the cloud.

Years later browser sync became the norm in desktop browsers.. now it's finally come full-circle to mobile. I love it. Here's to never having the "oh I have that tab open on my other computer/device" issue again.

I can't believe Chrome is just a few years old. I still remember when Phoenix was the coolest program on the block.

Chrome for iOS is damn good — even if I can't set it as default. What do you think?

Footnotes

¹ I can't believe I actually gave Dropbox a negative review in 2008. Sorry about that Drew. I wanted them to be a layer on top of my own storage (just use my Amazon keys). I liked feeling that I "owned" whatever my data was on. Well times have changed and I could not care less as long as my data is in multiple places that I don't have to manage.

² That was quite the trip for a college student. Also got to chat with Leonard Kleinrock, Nicholas Negroponte and other Wikipedia-page-bearing tech folk. All thanks to a CS professor at Georgia Tech that recommended this conference invite me to speak about 'being a digital native' (a talk that largely got sidetracked when people asked me to explain what Twitter was).

Enjoy this post? Click through and leave a comment. It will make my day. Browser sync is the killer app

My First Hackintosh

2012-05-27T19:05:00-07:00

A year ago I wrote about how I wanted to build a Hackintosh. Oddly enough, exactly a year later, I ended up getting around to it.

My roommate/cofounder Akshay had a Gigabyte GA-EP35-DS3R motherboard and Core 2 Quad CPU lying around from his last hackintosh (he's since upgrade to Sandy Bridge). I ended up putting getting a display, graphics card, case, SSD and PSU to put it to use. I plan on upgrading to the new Ivy Bridge chipset and 22nm CPU but will wait until Apple releases an Ivy Bridge computer so that no patched kernel hacks are necessary to get it working as is currently the case.

So far I'm very happy with my current setup. Even though it's an old LGA775 setup it feels way faster than my Core i7 1.8GHz MacBook Air. The Hackintosh has a 2.4GHz Core 2 Quad that I overclocked a bit to 3GHz.

Current Specs: Intel Q6600 2.4GHz Core 2 Quad @ 3GHz, 4GB DDR2 800, Gigabyte GA-EP35-DS3R motherboard, Gigabyte Radeon HD6670 graphics card, Antec 520W modular PSU, Lian Li PC-V700 case, Kingston HyperX 3K 120GB SSD, 2 x 2TB hard drives, Lite-on SATA DVD drive.

I'm the most pleased with the Lian Li case. It's their smallest ATX offering and comes with lots of rubber standoffs to ensure quiet operation. The doors don't need any screws and they just snap on and off. The most interesting part is that the PSU is located in the front of the computer, so as to reduce the height of the case. It reminds me of when people were talking about the BTX form factor back in ~2004 and all the BTX cases relocated power to the bottom.

Process

I'll go into more depth about how the whole Hackintosh installation process works when I upgrade this box to Ivy Bridge later in the summer, but here's the gist:

Create a bootable USB stick with a copy of OS X Lion you have purchased from the Mac App Store or from Apple's USB stick. Read: UniBeast: Install Mac OS X Lion Using an All-In-One Bootable USB Drive
The guide linked to above covers everything, but essentially you install OS X then run a program called MultiBeast to install all the kernel extensions required to make your hardware work (things like network and audio drivers) as well as install a bootloader. I went the route of using "EasyBeast" which doesn't require a DSDT (which I'll explain in my next hackintosh post).
After the OS X install I then downloaded OS X 10.7.4 combo update, ran it, then ran MultiBeast again (in general you run this app after every large system update).
I couldn't get App Store working and got an account not verified working, so I had to download an application called EFI Studio and follow these instructions.
I could not get audio working on this motherboard but fortunately I have been using a USB DAC for my headphones so I just plugged that in.

The best part? Using Adobe Lightroom 4 is no longer painfully slow.

Thoughts?

Enjoy this post? Click through and leave a comment. It will make my day. My First Hackintosh

The Life of a Startup in Commits

2012-04-13T17:49:52-07:00

Here's a GitHub impact graph of every Skribit code commit. Starting from November 2007 during Startup Weekend (hence all the contributors initially), progressing through to when I began working full-time on Skribit in 2009, when we slowed things down in mid-2010 and then pulled it offline in April 2011. It was a great ride!

Click for full-res. I believe I had two computers at the time so a few of those colors are mine.

Enjoy this post? Click through and leave a comment. It will make my day. The Life of a Startup in Commits

Inside Votizen

2012-04-12T11:00:00-07:00

It's no surprise that I'm enthralled by startups of all types. I am particularly interested in how startups work, their internal processes and culture, rather than their external pitch and product features. It was this interest that lead me to catch up with Semil Shah and Jason Putorti from Votizen one sunny afternoon in in Mountain View, just a block or two from 500 Startups and a mile from Y Combinator.

Semil and Jason at Votizen HQ

I became acquainted with Jason when I briefly worked with him on some marketing stuff for Mint. He has since become a renowned visual and web designer, starting projects like Elegant.ly along the way.

Showing off a Votizen Voter Network (Scoble's in particular. And mine)

I met Semil at Red Rock Coffee just across the street from their office. Red Rock has the kind of atmosphere that might make you seem languid by comparison. It's bustling with folks pitching startups, hacking with the help of free Wi-Fi and looking around to make sure no competitors are within earshot¹ before they speak about their startup. Heading to Red Rock before going to Y Combinator office hours or dinners over the summer had be come a ritual for me (and many other Y Combros² alike) ³.

I knew what Votizen was up to externally — Votizen recently had quite a bit of press surrounding their recent funding round from the likes of Sean Parker. I told Semil I wanted to dive deeper and expose stuff to which other hackers and startup founders could relate. Almost like a startup version of The Setup. I wanted to know how Jason's design process has grown inside the company and how things actually got done.

Note: Be sure to read all the way to the end — lots of interesting Q&A down there.

Votizen Specs

The Post-it note culture continues at Emily Leather's desk. Click to see uncropped vertical photo.

11 Employees (6 engineers, 2 UX designers, 2 non-technical operations, 1 CEO)
16 27-inch Apple Cinema Displays, most setup with Bretford VESA arms
10 Macs
1 custom PC — "our ops guy J that I just call SkyNet. It has a 1200W power supply, liquid cooling, 64GB of RAM, 4TB of storage, etc."
Favorite company lunch spot: Formerly zpizza, now Posh Bagel

Votizen 101

Before proceeding, I'll delve into what Votizen actually does and their vision.

Votizen is a web service that allows you to discover how your friends on social networks are registered to vote, and campaign with them to elect candidates that share your values.

Currently, campaigns spend hundreds of millions of dollars to run negative TV commercials all the way to annoy voters with robocalls. But we're now at the start of where social media is taking over. Take a look at this CNBC broadcast called The Facebook Obsession (scroll to the 30 minute mark) to see how much of a role Facebook played with the 2008 Obama campaign. The trend is looking to be that voters are paying more and more attention to their own networks rather than television and traditional media.

Votizen sees this trend and is stepping in the middle. For politicians and their teams, Votizen helps them use social networks for outreach more efficiently. Votizen will make money by letting the campaigns reach out to registered voters in the locations that matter to them, rather than spending tons of money on traditional advertising to attempt to reach those voters; a spray-and-pray tactic which can cost campaigns $500 per voter. In addition, Votizen will help campaigners see which Votizens are the most influential. Think of their business model like LinkedIn Pro.

Sorry, no Ron Paul for me. Dude has been messing up my Google rankings for "Paul" since 2008.

Votizen does this by adding a political "layer" on top of your social networks. When you create an account you link up your Facebook, Twitter and LinkedIn accounts. Votizen cross-references user accounts with their massive database of ~200 million registered voters which they have pain-stakingly collected (more on that challenge later). This means Votizens can see who in their own network is a registered voter, where they are registered and what district.

Officials will now have a direct connection to voters that matter to them as well as their verified constituents. And Votizens will know exactly which officials represent them, what candidates are running in what elections and how they have voted in the past. This will become key not only during elections but also with public policy and issues sections that Votizen will be adding to the site.

My main question — what is a regular Votizen user supposed to do on the site? Act as an influencer and activate your network to accomplish a purpose. But what exactly does that mean? That might be contacting your friends you know are registered voters and their political party affiliation to inform them that the incumbent they are going to vote for has previously not held up his promises, or contact their friends in swing states and urge them to vote.

Votizen enables this by helping you identify these friends and then letting you directly message them or share on Facebook or Twitter. It shows you people you have invited to endorse a particular official (for example, here's an endorsement URL of mine) and then marks them as recruited if they end up engaging as intended.

We believe that in a connected election 30-second attack ads are powerless. We believe that connected voters represent the future of democracy. Votizen wants to foster, create, and empower those connections, giving real people the tools to have a real impact on the challenges facing our communities, our country, and our world.

As for the even bigger vision, Putorti says he sees presidential candidates in 2016 using Votizen as a platform to manage their entire campaigns.

The Office

Votizen is currently situated in a small office just above a Chinese restaurant on Castro Street in Downtown Mountain View. We walked down an alley then upstairs past another startup before arriving at the glass door which exposed co-founder David Binetti's standing desk and a visibly overused ideapainted wall with everything from flow charts and method calls to a massive calendar.

A glance to the right puts me in a state of disbelief. They must be funded by 3M. I have never seen so many Post-it Notes in one place before. The first swarm of Post-it notes is split up into two categories: product and engineering. I asked if this was their kind of physical Trello board, minus the columns. Miche and Semil said it was more along the lines of just their to-do and wish list. Tasks from here get prioritized on the wall in the back of the office entitled "The Next 4 Weeks (of your lives)."

Semil, Jason and Miche

There is a traffic light in the back of the office. What determines what color it is? Arduino + hudson/jenkins status? David Binetti (CEO): There's a SBC running linux with wifi that listens to Cruise Control, which controls Phidgets relays. It's actually pretty easy to set up, and Phidgets provide Python libraries for accessing the sensors/relays.
Jason: Green means the latest build passed, yellow means a build is 'building', red means the build is broken. We also have an audible "shit is broken" when the latter happens.

Q&A — Design and Challenges

What is a board meeting with Sean Parker like? Jason: Use your imagination. It won't be too far off.

Talk about the design process at Votizen Jason: Idea could come from any source, we have a broad long-term roadmap which is fuzzier the farther out it goes, and crystallizes for the next 4 weeks. David Binetti provides business imperatives which often supersede or reorient our roadmap, otherwise it's usually me and Miche Capone our product manager coming up with the larger 'uses' of Votizen. It's rare or perhaps never that a random idea finds its way in that doesn't relate to the long-term vision.

What tools are used in the aforementioned flow? Jason: Keynote with Kung-Fu (Wireframe Toolkit For Keynote )

Votizen has top-notch investors. How have your investors added value so far / have you asked for help with any kinds of things so far? Jason: Everyone is always willing to help when we want to talk. Our different investors have different focus areas which we take advantage of accordingly. For example, Gina Bianchini and Sean Parker are the two investors I look to most often for product design advise. Keith Rabois is strong on operations and business development. Peter Thiel is a big picture thinker who gave us crucial advice early on that led to us being able to have 11 employees today instead of the 3 we started with. Ron Conway and everyone at SV Angel will break through brick walls for you on anything you need from a strategic perspective.

Miche posing with his custom sawhorse desk. Notice the "That Shit Cray (Computer)" poster on the wall.

What has been Votizen's biggest challenge? Jason: Hiring was difficult early on, but we learned our strengths and doubled down on them, most notably what we're trying to accomplish long term. There are few startups in this Valley doing something truly transformative, and we're one of them. Otherwise the challenge right now is to both solve our enormous technical and big data challenges, and build a product that's engaging to people today, to get us to the ultimate long term vision. Reconciling the realities of resource scarcity on our side, along with how politics in this country has so thoroughly frustrated people to the point of giving up, are our biggest challenges at present. The latter problem is something that Mint, and a lot of other startups don't have to face– it's the downside of building a startup predicated on changing attitudes and behaviors. Most entrepreneurs will tell you this is at worst impossible, and at best not recommended. We're doing it anyway.

Is there any need for Votizen on mobile? Jason: There definitely is, mobile is clearly the future, and there's an obvious huge opportunity to take advantage of that computing power and spare time that's available when people are out and about, waiting in line at Starbucks, etc. It's always about prioritization and focus. We want to be very deliberate in finding a use for our product that makes sense, and fits into people's lives. Like Mint, we didn't start with mobile but we'll get there.

Did Votizen used to be based in SF? The domain is registered to an address in San Francisco. David: That address is actually a virtual mailing address through Earth Class Mail. Startups move around a bit and having one stable address is a great convenience. So we receive mail in San Francisco but we've always been in Mountain View.

Q&A — The Stack

Any interesting technical oh shit moments? Jason: Biz Stone pressed the invite all button once. He took down his own account and our API key. We've definitely had traffic spikes knock us out on several occasions. Our sign up process involves finding which of your friends are voters, so back when that was a slower process, and we had a lot of those verifications queued up, things got gummed up very quickly.

What is the (entire) tech stack of Votizen? Matt Snider:

- webservers - 2 large instances running Apache, Django, Python
- load balancer - 1 large instance running HAProxy and Stunnel
- asynchronous workers - 3 x-large instances running several hundred Celery workers each
- reverse geocoding & districts - 3 x-large instances running what we call politicoder
- elastic search for voters - 2 High-Memory Quadruple Extra Large instance running elastic search with entire corpus of voters loaded into memory (verify 50-75 people/second)
- error reporting - 1 large instance running a sentry server
- utility server - 1 large instance used for various opsy operations
- db-misc server - 1 large instance running redis, memcached, and RabbitMQ
- admin server - 1 large instance used for managing deployment and monitoring site, runs CruiseControl (for deployment) and Nagios (for monitoring)
Puppet - We were previously using Puppet to manage server configurations in our admin repository, but are in the process of moving to Chef, as our new ops person prefers Chef. Both are Ruby-based tools, but are more mature than any comparable Python solution
Python - We write almost all our code in Python 2.6, because Python gives you wings
Django - This is one of the most fully-baked Python web frameworks and we have 2 core contributors on our team. Version 1.4 was just released, but we are still running on 1.3
Redis - We use redis mostly to handle caching of large lists of ids, because it has really good set/list operations built into it.
Celery - We have to do a log of user processing after they sign up and even when they sign in: fetch contacts on your social network, find your contacts districts and see if they are voters, find your districts and see if you are a voter
RabbitMQ - The default message queue used by Celery, and also just a good queuing system. We only use it for celery.
Memcached - Cache whatever you can, whenever you can. Django has good memcached support and we try to take advantage of it as much as possible.

Erik Rose working with this dual vertical Apple Cinema Displays

Has the stack always been Python based, and how was that initial decision made? Jason: David Binetti built the predecessor to Votizen in Django, and we stuck with it. We dabbled in Node.js for a while because it was appealing both because our founding engineer Matt Snider is a Javascript expert, and because it seemed to be attracting a lot of talent. We ultimately moved away from Node.js because it was attracting too many front-end developers who weren't grounded in server side software engineering. Everything is Python now.

Unit testing/CI? Jason: We have unit testing and continuous integration, there's no staging environment, everything goes straight to production. We have feature flagging now to limit development features to staff.

When coding, do developers run the entire stack on their local machine? Jason Yes, though the development environment isn't quite the same right now, we're looking to move to Vagrant so the environments can be nearly identical.
Matt: The biggest differences being that locally developers do not have the entire voter corpus and we run celery synchronously, instead of asynchronously.

When getting a just-hired engineer to setup this local environment on their machine, do you have that all pre-setup somehow? Any magical shovel scripts or a page of commands to manually run on your git readme? Jason: We have onboarding instructions for getting everything set up, but Vagrant will make this much easier very soon.

I see Votizen uses Github. Do you do code reviews via pull requests? Matt: We do not have a formal review process, instead we rely on strong test coverage. However, informally developers are encouraged to have changes they make of other developer's code reviewed, or code that may be highly disruptive.

Talk a bit about your version control strategy. Does everyone have their own personal feature/fix branch then merge back or do you do any thing crazy like git-flow? Matt: Developers work on local branches, and merge into master. For the most part we avoid doing remote branches, as they tend to be more trouble than they are worth and try to keep everything push in master with feature flagging. Our continuous deployment environment only uses master.

Do you pay for products from other startups? Jason: KISSmetrics, Github, Chart.io, Sendgrid, Pivotal Tracker

We're also big users of KISSmetrics at Picplum. How do you use it at Votizen? Jason: We use weekly cohorts to determine virality. For example, users that signed up in week 1 of 2012 have a viral coefficient of X, the week 2 cohort has Y, etc. Right now our important metrics are around conversion from visitor to signed up user, and invitations/shares sent. The engagement of Votizen right now is just focused on campaigning, so those are the areas we look at closely.

Talk about some of the technical challenges that went into acquiring all the voter registration records? Jason: There are 50 states and D.C., and they all store their voter data differently. In Massachusetts, there is no state voter file, the individual towns have them, compounding this issue further.
David: One state had its voter file arrive on a magnetic tape format called 128 CPI — characters per inch of magnetic tape (same format that was used by UNIVAC in 1951) — which is probably how Auric Goldfinger stored his data. Converting it to something useable was more expensive than acquiring the tape itself.

Were there any issues matching up records with everyone's social profiles? Jason: One of the key algorithms in Votizen is matching up a Facebook, Twitter, or LinkedIn profile to a voter record. We had to normalize all those state / town voter files and historical voting data (200 million records times on average 10 years of voting history) and get it ready for comparison to a social network profile.

So how large is this voter database? Jason: Over 2B rows in MySQL right now, and this is only the voting data, not including the "graph" of how they're connected to each other.

What are your bottlenecks — voter record database scaling? Jason: It used to, which is definitely a problem when the average person has a few hundred connections per network, but the engineering team has gotten this down to < 1 second, which when you think about it is pretty remarkable when you're dealing with 200 million voter records in the United States.

Does every engineer have access to deploy? Jason: Deployment happens automatically via Cruise Control, so yes.

The Culture

Describe Votizen culture. Anything you guys all do as a company? Jason: Margarita Wednesday to celebrate the end of every sprint. New employees get a relatively expensive shot of tequila that is not on the books. Some of us play Starcraft in the office, we have a Kinect now, an actual 'wat' button.

We talk politics a lot in the office, our ideology is across the board. The debates get a little crazier at happy hour, but otherwise we don't press each other too much on our respective ideologies, we're all united in our belief that more democracy is much better than what we have today: domination by moneyed special interests and big media.

Someone has passed all the technical interviews, how do you then evaluate if they would be a good culture fit? Jason: Passion for fixing democracy is a big part of it, but a personality fit is important too. We've passed on people that may be talented, but without the communication skills, we can't collaborate as a team. We all spend more time with each other than our friends, families, and significant others, so we should definitely all get along at this stage and enjoy each others' company.

How do you onboard new hires and get them on the same page as you in regards to vision. IE, Twitter's onboarding process Jason: Our interview process is rigourous. We filter on vision at the very beginning, and after a few mistakes chasing engineers who wanted to work at a startup because they thought it was glamourous like The Social Network, or because they wanted to earn a lot of money, we realized we needed vision to be our top line filter. Our engineer's first day is getting his or her equipment set up, wading into the codebase with some warm up issues, a team lunch, and a welcome shot of Don Julio 1942 at Fiesta del Mar at the end of the day.
David: The best way to see our hiring process is to fork it on Github. We are very transparent about the process and lay it out step by step, including all the legal documents the person would eventually have to sign.

You have many Post-It notes for things that need to be done or fixed. How are people assigned specific tasks? Jason: We use Pivotal Tracker for the micro-level task assignments. Post-its and our walls are for broad strokes and ideas that both Engineering wants to do (technical debt, performance improvements) and product/marketing come up with but don't fit in the immediate roadmap.

Do you have regular meetings? Jason: All-hands standup every day at 9:58, usually 10 minutes, just to set the agenda for the day. We go around and talk about progress the previous day, goals for the day, and progress towards sprint goal. That same meeting is longer to kickoff the sprint on Wednesday, and there's a scope review to decide what goes into the sprint on Monday. Essentially Product requesting a set of features, and Engineering figuring out what can be done in a week's time.

What are typical working hours? Can engineers work from home? Jason: 8-10 hours in office, more from home / weekends. Yes if needed but we prefer to collaborate in the office. Since we run continuous deployment speed matters, and that means you need high intra-office bandwidth.

Do you have any remote employees? If so, any challenges with getting that up and running? Jason: We have some contractors that work remote, each managed by someone here.

Any other random facts? Jason: We're fans of NutsOnline.com, and consume an unhealthy amount of Jamba Juice energy drinks, and microbrewed bottled beers every week.

Paul: Jason, Semil, Miche, David, Matt et al — Thanks for letting me take a look inside Votizen!

Disclosure: I received no compensation for this post aside from one Red Rock cappuccino and a sweet Votizen t-shirt.

Jason, @Stammy (before I gave myself a buzz cut), Miche

If you liked this..

Please drop me a comment below. I'd love to hear what you thought! You might enjoy some of these other Stammy Originals™:
Crash Course: Design for Startups
Startup Fundraising is a Time Sink
Startup Idea: User Retention as a Service
The Coding Zone
Talking Startups and Picplum on BBC News
Stuff I Use

Footnotes

¹ Back in 2007 you could find Noah Kagan here asking random people to complete a survey about the then-unlaunched Mint.
² Y Combros is a term coined during the S11 batch of YC. I would mention who came up with it but their startup is currently stealth.
³ If you're a caffiend like me, you must get the Red Eye (black coffee with a shot or two of espresso).

Enjoy this post? Click through and leave a comment. It will make my day. Inside Votizen

On Keeping Busy and Staying Sane

2012-03-06T21:46:31-08:00

This was originally going to be a blog post about Venmo and the difficulty of growing such payments services, but I decided that didn't really have much content (here's the draft — 100% boring and not proofread). So here I am on a 6.5 hour flight from JFK to OAK, connected to a lovely ad-hoc wifi network my cofounder created so we can collaborate over Bonjour on this Gogo-less flight. We both ended up with middle seats on the same row and failed to get adjacent seats despite our best efforts at persuading each of the other four folks in this row to swap with us.

Photo Hack Day 2 NYC — Alexis Ohanian of Reddit/Y Combinator and David Karp of Tumblr to the right

We're heading back from a 2 day stint in New York City where we attended the awesome Photo Hack Day 2 (that I just wrote about for the Picplum blog). I was in Atlanta the week before courtesy of my alma mater Georgia Tech where I participated on an entrepreneurship panel at career week and spoke in an experimental NSF-funded engineering and design class. It turned out to be big week for the Atlanta tech scene and I got to swing by Startup Riot for a bit¹. For the record, the Jawbone Jambox is quite possibly the best travel companion.

Georgia Tech added a few new buildings since I last visited.

(Nerd Note: This is my first blog post after moving my old Apache + Jekyll setup to Heroku with Rack (rewrite, deflater, trystatic) with Unicorn. Fast. Also, LiveReload + single-post live regeneration is a nifty update for writing and previewing my blog posts.)

Now that I look back at my last two startups, I really don't recall ever being as focused or in the zone as Akshay and I are right now. New ideas are becoming fleshed out roadmaps and we have laid out what our company's big vision is all about in just the last few months. I think the next step will be finalizing what our company values are — an exercise suggested to us by Dan Martell.

Keeping Busy

Akshay and I are both roommates and cofounders so we often get asked how that arrangement works for us. Regardless of whether Akshay or I reply, the answer is usually the same².

We are on complete lockdown about 6 days of the week. This is something we picked up during Y Combinator, where Paul Graham said something along the lines of "use YC as an excuse to not get distracted with other events/meetings/people.. tell them you're busy for these three months." We're usually awake from 11am - 3am and working about 90% of that. We try to decline most meetings. I'm very bad at saying no but slowly getting better. My excuse is that we're in a code sprint for another week (apologies if I've used this line on you). Any essential meetings that persist get scheduled into one late evening so as to not interact with our zone in the middle of the day.

Because f/1.4 bokeh makes coffeescript beautiful. View more of my photos here »

We're both full-stack generalists and tend to work on our own projects or features. We each take an item off our "big vision" board (which is more and more less a Trello board and more of an item from Hackpad, create a new branch or repo as necessary, then go to town on that until it's done and deployable. But we always start with the user experience and interaction, something I also found to be true at Votizen when I stopped by last week.

For example, I'm finishing up a "send now" page redesign for Picplum after many users told us they wanted an easier way to switch between recipients in every batch. We brainstormed and sketched out some ideas for an hour late one night. (I touched up a bit on this process in my Crash Course: Design for Startups blog post.) I got it all functioning via Backbone the next day and then began the visual and interaction design.

For good sketch books check out UI Stencils, GridBooks and of course Muji (they have a JFK store at the JetBlue terminal!). Muji also has good 0.3 and 0.4mm pens, as does Jetpens.com

I realized the experience did not seem to flow smoothly anymore. We hit the whiteboard this time and came up with 2 more interaction sketches that took into account both the average user (3-5 recipients) and the super active users (20-30 recipients). For most of what we do at Picplum, getting a feature functioning is the easy part. It's the design and interaction that takes the longest. I recently had to remove a toggle button on the recipients page because some users were inclined to drag it instead of just click it. Back to checkboxes.

Picplum Send Now page redesign in progress. Give Picplum a try »

Staying Sane

For us, the key to staying sane at a startup is hanging out with a different social circle often; ones outside of the tech/startup world. We work with startup folks during the week and it's refreshing to get outside of that world to reset. I have seen one too many close friends dive into deep startup depression from becoming encompassed by their work way too much.

Every other week we attend electronic dance music (EDM) shows with a group of non-startup, working professionals. They have a wide variety of backgrounds from patent litigators and marketing directors to music producers and Yelp elites. It helps us keep in touch with reality and get a different perspective on what we're building as we can get kind of stuck in our own startup world during the week. And you can burn several hundred calories after a few hours of dancing³. Though if you attend such shows with any regularity, a set of earplugs is a must. I'm a fan of the Etymotic etyplugs.

deadmau5 playing in San Francisco last year.. his visuals are amazing. We actually named our company (Strobeo, Inc.) after this song.

I can't remember exactly what he said but in Tony Hsieh's book Delivering Happiness he has quite possibly the best description of why he loves electronic music too. I personally find that it helps me clear my mind and stay focused while coding or even while trying to get away from coding for an evening. Judging by the number of investors and startup folks I happen to run into at various EDM shows, staying sane this way seems to be popular.

What are some of your tips for staying sane while working a lot?

Picplum is Hiring

I believe it was Mike Moritz of Sequoia (correct me if I'm mistaken) who said most startups are not aggressive enough and try to hire too late. Well, we're kicking it up to high gear at Picplum and are looking for our first engineering hire as well as looking to fill some intern positions. Drop us a line at founders at picplum.com if you want to learn more.

Things you will most likely work on

Work with the founders on designing and implementing Picplum features and products.
Write and test new/existing code, push it live.
Wire-framing, prototyping and testing UI of new features.
Write on the Picplum blog about features that you build.
Chat with customers, learn how they use the product. Make it better.
Hack on fun ideas and experiments using Picplum and 3rd Party APIs.

Picplum.com Stack

Heroku, AWS, Git, Rails 3.2, Sinatra, Padrino, Postgres/mysql, Mongo, Redis
Javascript / Coffeescript, jQuery, Backbone.js, Handlebars.js, Raphaël.js

If you're in SF check out the Backbone.js Hackers meetup, we just presented Picplum there last month. It's held in the offices of Caterina Fake's new Pinwheel.com

Enjoy this post? Subscribe below. You should follow me on Twitter for nerd banter and ranting throughout the week.

Footnotes
¹ I presented my first startup, Skribit, at the first Startup Riot in 2008.
² This blog post is essentially a sequel to my popular The Coding Zone post
³ Working out regularly is also vital but you knew that and everyone talks about so I'm not going to dwell on it. We try to do about an hour at least 3 times a week, followed by cooking something at home (always guaranteed to be something very spicy at Picplum HQ.. we grow our own Bhut Jolokia peppers). Akshay is into weight lifting and I thoroughly enjoy running to clear my mind — usually 5 miles from the Bay Bridge to Fisherman's Wharf and back.

Enjoy this post? Click through and leave a comment. It will make my day. On Keeping Busy and Staying Sane

Mini Review: Jawbone Jambox Bluetooth Speaker

2012-03-02T00:27:49-08:00

Over the past two weeks of traveling I have been using the Jawbone Jambox wireless bluetooth speaker extensively. I have concluded that it is quite possible the best thing ever created for frequent travelers¹. Great for filling up your hotel room with sound² or your playing your favorite beats while showering before that big meeting.

The Jambox playing music via bluetooth from my MacBook Air at the Downtown Atlanta Marriott (3/10 Stammys) — though I usually have it play from my iPhone.

It's small enough to be easily portable yet still packs a punch. So much of a punch in fact that it keeps vibrating on whatever surface it's on and has fallen off various surfaces/desks/what-have-you several times. Much like if you leave your phone on the edge of the table and it starts ringing, it will try to slide off. The bottom of the Jambox really needs some kind of non-slip rubber strip.

With volume maxed out, the Jambox will play your favorite trance sets for about 4-5 hours from a full charge. Not amazing but I didn't really have any expectations coming into this so I don't see it as a negative.

Brief clip of me turning it on/off et cetera... hard to manually focus a DSLR and control the iPhone at the same time so pardon this bad (yet bokehlicious) video.

Would I recommend it?

The Jambox is one of those things I would not buy myself. For a bluetooth speaker, it's very pricey at $199 (though currently $179 on Amazon). I can readily justify spending that much or more on a pair of good quality headphones I'll use everyday, but not so much a novelty wireless speaker.

However, I was gifted the Jambox by Y Combinator and after being more than surprised by this little device I'm torn on whether I could have personally justified the price tag. Probably not. I give the Jawbone JAMBOX 9/10 Stammys for product build quality and performance but 6/10 Stammys for value³. If you travel a lot that may be a different story but I rarely travel these days.

With the flash in this iPhone photo you can see what's inside of the Jambox — two deceptively small speakers. Click here for a much better picture.

I have not yet put the Jambox through its paces though, which explains the mini moniker attached to this review. Given Jawbone's prowess in noise-cancellation and bluetooth earpieces, the Jambox can also be used as a wireless speakerphone paired to your mobile device of choice. When I was fundraising for Notifo I found myself having to purchase a bluetooth speakerphone for that exact purpose, so if I was on the phone a lot I could definitely justify the Jambox for that alone⁴.

Otherwise, you may want to consider something like the Motorola MOTOROKR EQ7 bluetooth speaker. It's larger, not nearly as sleek, takes 4 AA's but does much of the same for half the cost. I purchased that about a year ago to make it easier to do conference calls over bluetooth but ended up using it more for music in the hot tub or bathroom while brushing my teeth.

Thoughts? Do you regularly use any such small portable speaker?

Stammynotes

¹ After the iPad of course
² As long as it's pointed in your general direction.. it's very directional speaker. I found myself trying to prop it up jusssst right so it was pointed right at me. And to be expected with any speaker where both channels are so close together, there's little stereo separation to be experienced. I found this to be the case even with much larger single-unit speakers like the Sonos ZonePlayer S5 I reviewed.
³ Though I haven't had a chance to play with the MyTalk feature, which Jawbone bills as being a platform for having apps on your Jambox. Right now the only "apps" I have installed include a different voice for the dialogs and "Voice Control" to control my iPhone 4S Siri with the multifunction (circle) button.

The Jambox can be updated via the web.

⁴ Which if I had to give a Stammy rating given my limited usage it would receive 7/10 Stammys for speakerphone quality. I had some issues getting people to understand me.. this goes back to footnote #2.

Enjoy this post? Click through and leave a comment. It will make my day. Mini Review: Jawbone Jambox Bluetooth Speaker

Ad-hoc Wifi in the Sky

2012-02-27T17:08:17-08:00

How do you collaborate on work when you and your cofounder are on a 6.5 hour wifi-less flight and couldn't get adjacent seats? Create an ad-hoc wifi network and use bonjour messaging in iChat. I'm pretty sure we annoyed some people next to us...

Enjoy this post? Click through and leave a comment. It will make my day. Ad-hoc Wifi in the Sky

On Venmo and Payments

2012-02-26T17:32:28-08:00

When was the last time you were so enthused about a product you actually wanted to pay your friends to get on it with you? Venmo is that magical service for me. It's a fantastic product (consider me a brand ambassador if you will, I tell everyone about it) but over the last few months I have become intimately aware at how hard it must be for them to acquire and onboard new users. Let me backtrack a bit.

Note: Reader beware. This was supposed to be a full-fledged blog post but after skimming it I didn't think it was terribly interesting or thought provoking so I just posted this unedited draft as a bit.

Almost a year ago I read an article on Hacker News about how easy Venmo makes it to split payments amongst friends. For whatever reason I had enough motivation to sign up for it when I had no friends on Venmo, not to mention going through the lengthy process of adding my bank and card info (having to look up ACH info is the biggest PITA).

Venmo isn't the only company in this space. Clover is another — similar to Venmo but no payment sharing (a 'feature' of Venmo which I don't really use anyways) and Clover is focused on speed of payment (not just for person to person payments; they're doing some merchant stuff too). But I got started on Venmo first and they are clearly in "user acquisition mode" so there are currently no transaction fees.

Trying to get friends on Venmo..

Why I Use Venmo

I don't want to make this whole post about Venmo — more about the difficulty in onboarding users to payment services that require bank account info and open a discussion around that.. but Venmo is an example of a great product providing value that externally appears to be struggling with adoption.

My Venmo usage often falls into one of two categories: a) frequent small transactions with Akshay like splitting the power bill or charging him for Chipotle (much easier/faster to just have one person pay and then Venmo later.. and I can reap more AmEx points) and b) splitting charges with larger groups of people at events like cash-only concerts (who bought drinks, etc) or splitting hotel/car rental expenses related to a Tahoe snowboarding trip amongst more than a few people.

The utility is stellar and it's an example of a product that has succeeded in changing my behavior and that of some friends. Whenever a lunch check comes, one person will get it and the others will get their phone out and Venmo the purchaser.

It was a recent (my first trip and my first time snowboarding) Tahoe trip that made me think about writing this post. It didn't matter how hard Akshay or I tried, we just could not convince two of our tripmates to join Venmo. That's just the most recent example. There have been many friends that I could not persuade. Reasons ranged from "but this is just a one time thing I won't use it with you again" to "I have to setup my payment info? That sounds like a lot of work." It was usually the latter.

I don't have an answer

It doesn't matter how good your product is when your users still have to endure the inconvenience of adding their payment info. What do you think can be done? Will banks or other ecommerce companies you already trust with your payment information let you auth your favorite payment startups in the future? Something with a better UX than Paypal.

Enjoy this post? Click through and leave a comment. It will make my day. On Venmo and Payments

iPhone Picture Stats

2012-01-15T20:27:14-08:00

I recently ran out of space on my iPhone 4S and did my yearly ritual of moving last year's photos off of my phone. Here's what my iPhone-taken photo and video stats look like:

2007 - 431 photos - 160MB
2008 - 1,764 photos - 650MB
2009 - 1,470 photos - 1.27GB
2010 - 3,270 photos - 7.11GB
2011 - 3,185 photos - 6.14GB

What does your iPhone camera usage look like?

Enjoy this post? Click through and leave a comment. It will make my day. iPhone Picture Stats

R.I.P. 1920x1200

2011-12-29T23:05:30-08:00

I'm at home in Houston for the holidays and of course working on Picplum stuff when I'm not chasing my 18-month old nephew around. I'm used to working on my 27-inch Apple display so hacking away on the Air's native resolution took was not quite for me. Most importantly after a few days of working my back started hurting from hunching over the laptop screen. Purchasing a 20-something-inch display to keep at home would be a worthy sub-$200 investment.

Off to Best Buy I went. Nope, no monitors with 1920x1200 resolution. Only widescreen 1080 vertical res ones. No biggie I thought, Best Buy only caters to people chasing buzzwords like widescreen. I headed off to nerd mecca: MicroCenter (okay, not quite Fry's but it was closer).

I went racing up and down their aisles of monitors. Argh, the same thing; they only had 1920x1080 resolution monitors. The salesman asked why I would ever need 1200 vertical res when 1080 was the "widescreen standard." I must have been the only person to ever walk in there with the intention of programming and not gaming or watching movies. He asked why I don't just use the monitor vertically. I asked him to show me the monitors they had that swiveled. They didn't carry any.

I came home with a $150 23-inch, 1920x1080 Samsung SyncMaster SA300 LED-backlit display (aside: damn these things are cheap nowadays!).

Why don't they make 1920x1200 monitors anymore?

Enjoy this post? Click through and leave a comment. It will make my day. R.I.P. 1920x1200

CoffeeScript

2011-12-27T14:35:47-08:00

After months of hearing about CoffeeScript and having it on my to-do list week after week, I finally got around to really reading up on it during my flight from SFO to IAH. I tweeted that I was in the middle of moving Picplum over to CoffeeScript and got no less than 10 people asking me why.

CoffeeScript is much like Sass and Haml. It compiles into JavaScript, much like Sass becomes CSS and Haml becomes HTML. It's now included in Rails 3.1 if you're using the asset pipeline (we are), so there was nothing for me to setup. I just created a few .coffee files and it Rails generated them automatically when I was developing locally. When I go to deploy, that'll be done with asset precompilation.

CoffeeScript syntax is a joy to work with. It takes up less space, is easier to see what is going on in the code at a glance and helps you write better code by using good JavaScript structure behind the scenes. The CoffeeScript compiles wraps each file in an anonymous function so you don't automatically pollute the global namespace. That new scoping was the first thing I ran into when moving Picplum over. I had to prepend this to our global "namespace" object (the way we internally designed Picplum's Backbone app — mentioned in Ch 3.2.1 in the book Recipes with Backbone).

A lot of the CoffeeScript syntax just feels right. No parens, no semicolons. Working with object literals is a breeze, just make sure your indentation is all good to go (Show Invisibles in TextMate is now my best friend). No more having to keep up with curly braces for every anonymous function you write (oh so many with a JS-heavy app); just this thin rocket ->.

In a nutshell, CoffeeScript helps you write better code. Need I point you to the JavaScript Garden to remind you of how broken JavaScript really is? Probably the first real thing I learned about JavaScript way back when was how messed up typing can be to a newcomer. In short, read The Good Parts and only ever use the strict equality operator. CoffeeScript builds upons this with some smart aliases.

Because the == operator frequently causes undesirable coercion, is intransitive, and has a different meaning than in other languages, CoffeeScript compiles == into ===, and != into !==. In addition, is compiles into ===, and isnt into !==.

But I digress. I'm not trying to write a guide here, there are tons out there already. I'll just point you to them below.

As for my general workflow to migrating a large JavaScript app over to CoffeeScript? Begin by running each file through js2coffee. Manually comb through the new code and keep an eye out for any odd issues. The converter isn't perfect yet. I ran into an issue where it broke on a block with a return and completely ignored one half of the conditional, which had me debugging why our templating wasn't working for a bit. All the while I was testing everything locally and finding the inevitable indentation errors that sprang up.

The next thing I did was further optimize. For example, there were a few places where js2coffee didn't swap out this for @, or didn't do the new string interpolation (ruby-style #{} inside double quotes). I also made sure to have Chrome dev tools open and peak at the generated JS in the resources tab from time to time to see what was actually loading.

Then I started skimming through the CoffeeScript to find sections that were hard to read at first glance. The biggest offender was jQuery code with lots of chaining (backbone not so much as it has callbacks in its options hash); chaining that had inline callbacks. For example:

$.post('/some_url/'+self.with_string_concat+'/inside').success(function(){...}).error(function(){...});

And imagine what it would look like if each callback was multiple lines long and the entire code block was just part of another conditional. I ended up changing it to use an "outline" style for inline functions wherein you just breakout the callbacks into locally-scoped functions. Though this is now more of a JS-design tip than a CoffeeScript one.

The next step for me will be to get a bit more comfortable with how CoffeeScript does class. There are many places in backbone where this is immediately applicable. For example, something like this:

YourNameSpace.Views.YourView = Backbone.View.extend

Can now morth into this much sexier version:

class YourNameSpace.Views.YourView extends Backbone.View

Yup, just pinched myself. This is not a dream. That is real CoffeeScript magic action right there! Though if you are just starting out you may want to avoid this. It makes use of much native prototypal stuff so the generated JavaScript may not be as readable to you.

Resources

As you can tell this was a bit of a mindless ramble that I just typed up in the last 15 minutes. More and more hiring startups are looking for CoffeeScript experience (Picplum included) so if you are looking for a job, it might be a good idea to skim through these links in addition to the main CoffeeScript site:

But most importantly, just start writing CoffeeScript, experience some issues, fix them and you'll quickly learn how it all comes together.

Enjoy this post? Click through and leave a comment. It will make my day. CoffeeScript

Startup Idea: User Retention as a Service

2011-12-21T10:00:00-08:00

It was the middle of our Y Combinator batch this summer. Akshay and I had a decently functioning version of Picplum that we were continuing to test and polish up. At the end of our office hours that day, Paul Graham said our product was good enough and that we should stop coding and start selling & marketing. I think about this quite often.

Picplum at YC office hours in July. Photo Credit: Garry Tan

tl;dr Trying to draw attention to the importance of lifecycle marketing. I build up the case, talk about where lifecycle marketing makes sense, show an amateur first attempt at it, then proceed to layout a grand idea for a lifecycle email marketing service I want to see someone build. Please share this post.

I was in that mindset when I decided to sit down a few weeks ago and hammer out some code that would help with that (typical engineer approach.. get code to do it for you). One of my perpetual to-do items in the few months following our launch was converting users that signed up but never did anything into users that sent out their first batch of prints. The latter is more or less our definition of an activated user. You can find more info about Picplum in my lengthy post-launch article, Thoughts on Picplum Automatic Photo Prints.

New users see a simplified onboarding UI; a simple 3-step flow for adding photos, recipients and then sending their first batch. But how many people signed up and never got around to adding photos? Maybe they just didn't have any photos at the moment and wanted to wait until after the holidays to add them.. and then they forgot. The same might be the case for people that have used Picplum in the past but haven't engaged recently.

somewhat unrelated but here's our onboarding UI

Enter lifecycle or drip email marketing. This is not the same as your traditional newsletter blast that goes to every registered user, nor a transactional/trigger email (such as instantly emailing individual users a welcome email when they signup or sending a notification that their package has shipped). Lifecycle email marketing depends on various factors that describe the state of their account. Let's say you have a complex web app involving a hairy 10 step onboarding process. You would write several different emails for each possible place a user could stop engaging. Say they fell out at step 4 of 10. You would send an email after some amount of time that is indicative of where they left off and what they did in the last steps. Not just a "finish setting up your account" email.

That's just one use case that happens to deal with getting a user onboarded. There are many more. I go a bit more in-depth down below.

Why lifecycle email marketing?

You're probably familiar with Dave McClure's Startup Metrics for Pirates: AARRR — Acquisition, Activation, Retention, Referral, Revenue

Startups spend gobs of time and money on user acquisition and then they just let those hard-earned new users slip through the cracks by failing to engage them and carry on with proper retention tactics. You might have happier users if you spent nearly as much time on user retention as you spent on that fancy user invite module that comes up before the user has even tried out your service.

This blog post is all about step 3!

Startups en masse are failing at this. I'm a curious person. I signup for new startups all the time, even if it's not exactly interesting to me. I want to see how they approach email marketing, what kind of design and UX choices they make (if you've read my design post, you know I take lots of LittleSnapper screenshots), et cetera. But guess what? I rarely hear back from any of these startups. At best I receive some generic "we have a new feature" newsletter that is a copy and paste of their company blog.

Startups, PLEASE EMAIL ME MORE. It's not a biggie. If I don't like your emails or service, I'll simply unsubscribe. No harm done.

Which are you?

So who's doing it right? I'm having a hard time coming up with examples of companies that do a great job of such lifecycle marketing but if you think of any please mention in the comments. AppSumo emails me a ton and I haven't unsubscribed yet. While their emails aren't indicative of lifecycle marketing and are more along the lines of daily deal updates, they are way up there there in terms of copywriting. Their emails do a great job of getting my attention and keeping it as I open the emails.

For the most part the startups that do email me a lot don't seem personal. The copy doesn't address whether I've been a long-time user well versed in everything about their offering, if I just signed up or if I'm somewhere in the middle. Lifecycle email marketing fills in these gaps by being informed about each user before reaching out. While it's outside the scope of this article, great copywriting for emails is just as important. I'm not an expert on that so I can't comment, but I'm looking to learn more if you can suggest any great web/email-targeted copywriting blogs or resources.

Lifecycle email marketing is for helping your users engage with your product or service in the intended manner. It's not simply sending reminder emails. It's offering useful help when you notice they haven't done a certain task yet. Maybe it was too hard? Offer them help and tips. Reward them on their last successful actions and offer positive reinforcement for continuining.

The Numbers

Alright, time for napkin numbers. You work hard all day and put up a Show HN post. You get 2,000 visitors to your startup's homepage. You get a decent signup conversion rate. Let's say 10%. You have 200 new users! Another 10% of those end up activating. Your definition of activating will vary, but let's say this startup is Greplin. They want people to link up data sources they can begin to index. Only 20 people activate right on the spot. That leaves a lot of unactivated people. I'll stop the numbers there but you can imagine that while some will come back when they remember or when Greplin sends out a regular newsletter, there's a lot being left on the table.

Now imagine if you were in a different business and you paid a lot to AdWords to acquire all of those users. You just lost a lot of money on paid users that did nothing.

Now here's the great thing about lifecycle email marketing: set it up once and it keeps on giving. The effects just keep on compounding forever and ever (until you change your product and your outdated email copy doesn't quite correlate anymore).

Fisher Price: My First Lifecycle Mailers

Now that you're sold on lifecycle marketing, back to my story.

I wrote three different mailers with varying copy. Then there's some logic that is informed about the following:

number of photo batches user has sent
time since last batch shipped
time since account registration
time since last retention mailer sent
what retention mailer was last sent

And it's all hooked up on a cron'd resque job, delivered by Mailgun with send events also tracked by Kissmetrics. This is done so we can see in Kissmetrics any flurry of activity following a retention email delivery.

For example, if a user signed up just over 2 weeks ago and hasn't done anything, they'll get a simple "We've missed you" email with some tips for getting started. If another user has sent one batch but it has been 40 days since, they will receive a different email. Users that have not done anything at all and already received that first email, we'll send them different retention email. As for users that have sent several batches with Picplum, I mark them as activated and don't send them any more retention emails (though I will be changing this shortly to add another mailer for such active users, maybe even prompting them to invite others -- going onto the second R in AARRR).

After I committed this first stab at user retention, Akshay offered up some scenarios. What about users that have recently logged in? This logic doesn't take into account those events. Should those users still get the retention email? What about new users that have added photos, but not recipients? Should we make the email more personal and send a different mailer with "add some recipients" helper copy?

Co-founder @Dodeja in Jabalpur for the holidays, converting farm animals into paying Picplum users.

Ah, a logic nightmare! Keep going down this rabbit hole and it's easy to see that a good lifecycle email marketing strategy will have lots of different email types for specific user lifecycles. Lifecycle email marketing is a bitch to do right. That's where the impetus for this blog post comes.

I want a startup to do this for other startups.

The Startup Idea (BUILD THIS)

While lifecycle email marketing is a part of many enterprise marketing automation products such as Pardot, SilverPop, eTrigue, StrongMail, Marketo, Eloqua and HubSpot (née Performable), I have yet to see any such products that directly address my startup needs. By that I mean that I don't want to use a complete marketing automation SaaS offering. I don't care about integrating with Salesforce right now. I want something that simply takes care of the lifecycle email mayhem I started talking about above and I'm sure I am not the only one.

How it would work

I would setup the service ('RETENTIONIZER') to track lots of events about each user. It could even piggyback onto our Kissmetrics reports and 85 different events we already have in place through their data export feature.

The RETENTIONIZER would then allow me to wire up a bunch of triggers, not unlike setting up a GMail filter or Kissmetrics report. They could simply be per-user based purely on events with some delay, or even per-cohort. It would even have it's own events — how the user responded to a past retention mailer. Only send this if they didn't open the last email, et cetera.

I would supply the marketing copy for as many mailers as I want and it would hook into my email service provider API and set the proper campaign tags when delivering. It would integrate closely with Mailgun/SendGrid/SES/Postmark so that it could receive all tracking data. The RETENTIONIZER would report back on whether or not the user engaged with the email in the desired manner for which you had set the success conditions. This would make it easy to correlate on-site user activity with retention mailers.

For example, if the RETENTIONIZER sent a relatively new, unactivated user an email about TASK X, it would know if the user opened the email, clicked through and then actually did the specified task on the site, or if the user just logged in but then unexpectedly clicked some button for unrelated TASK Y. The RETENTIONIZER would inform you if your marketing copy was failing to achieve the desired result (and let you A/B test different copy for the same mailer of course), or if something else on-site diverted users. It would use this data to automatically adjust delays for best engagement as well.

Can you tell this stuff is getting me really excited? I could go on for tons of use cases but the idea is simple. Keep users engaged by uniquely offering them a gentle reminder or tip that is exactly relevant to them. Nothing is more annoying than a retention email telling me to buy or do TASK X when I just did it the day before. Mailers need to be data-informed too.

This stuff really gets interesting if you have everything setup to automagically create cohorts for paid advertising campaigns. Say you run a Reddit promoted ad, Stumbleupon Paid Discover campaign, Facebook Ad, AdWords campaign and/or Kiip campaign. I'll leave that for another blog post..

Email marketers will tell you about some common segments for users: interested recipients, engaged customers, lapsed customers. But the product idea described above would make it easier to dive even deeper. Cohorts are magical. Dan Martell agrees.

In a nutshell

I send the RETENTIONIZER user events and tell it under which conditions it should send out one of the mailers I provide, and then it delivers the respective user retention email when appropriate. The service begins with smart defaults for delays and then learns as it sends out more and more and tracks user engagement with each.

Such an offering wouldn't be for everyone. At some point in a company's growth, they'll end up building this in-house or find themselves needing a miscellany of other features that those enterprise companies listed earlier are all about. I'm convinced that this will be a no-brainer for many, many startups. What do you think? Drop me a comment below.

Isn't there an easier option Stammy??

Or you can continue cutting into your customer's LTV and blow that cash on user acquisition with Google AdWords all day only to have those users forget about your service the next week. Getting user retention right is no easy task. It may not be your priority at the moment; finding product/market fit should come first. But then again, having more (retained) users to help you find that fit is good too. Chicken & egg.

This is a full-time job and not many startups can afford to do that. But they really need to get smarter with their email marketing. Which is why I want some startup to build this product! Take this blog post as a glorified letter of intent for me paying for this product when it emerges.

Email Template Dev Workflow

After being asked about how we did our emails by Ridejoy, Parse, and Hacker Newsletter, I wanted to share a bit about our process.

We got started with one of MailChimp's free Email Blueprints — a great, well-tested starting point that just needs your design. As the name implies they are really for use with MailChimp and we're going to be using them for every email including our transactional and retention emails sent by Mailgun. So we're going to need to strip out the merge tags and included <style> block.

MailChimp has a great article that provides some rules of thumb for working with HTML emails. Skim through it and come back. If you've really got some time to kill, MailChimp even has a massive Field Guide To Email Marketing. I'm just going to make a cappuccino over here.

Okay so the main things you need to know: you need to inline your CSS, tables are your friend, don't use too many images and don't expect any fancy CSS3 to work. For the latter, checkout this guide that shows what CSS each email client doesn't support, which should just be renamed "Why Outlook Sucks." If you avoid CSS3 and pseudo-selectors you're mostly there.

The hard part is working with an HTML email template where all the styles must be inlined. Fortunately there's Premailer (and the Rails wrapper of it). Premailer does a few things, but of note it'll automatically inline CSS styles from an email.css file you create and generate nicely formatted plaintext version of emails on the fly. Though there are a few cases where I still write my own plaintext emails. For example, an issue with premailer where it ignores alt/title tags on linked images, which we use for certain large call to action buttons.

As an aside, premailer hasn't been updated in a while, most likely as the author is working on the next major version. Be sure to stray away from the premailer default of ASCII-8BIT or you'll be subject to emails from some of your users saying they didn't like all the odd characters in their name. Premailer also has issues with certain CSS shorthands such as the following.

border: 1px solid #d4d6d7;
border-left-color: #c9cccd;
border-right-color: #c9cccd;
border-bottom: 2px solid #b1b7b9;

Akshay found a slick gem called letter opener that lets you preview emails locally instead of delivering them. I used to use MockSMTP.app for this but find letter opener easier. It opens up email previews in a browser tab and lets you toggle between plain text and HTML versions. But it's purely for basic testing; it might look great in there and still be horribly broken in GMail. When it's time to do some real testing, turn off letter opener and send emails to yourself in Gmail and a few other clients. Tweak as necessary.

Getting email templates right is still a pain in the ass. But if you have a pinch of patience and a nice beverage by your side you can get it done. The last thing to do is hook up the all important unsubscribe link. Make it easy for people to unsubscribe if they want to people are less inclined to report as spam.

You can either just link to your user settings page or take advantage of Mailgun's unsubscribe feature. Just include %tag_unsubscribe_url% (if you use campaign tags and only want them to unsubscribe from that kind of campaign) and Mailgun will replace that with their own unsubscribe URL and never let an email get sent to that person again, even if you accidentally do it on your end. However, I'm a bit paranoid and want those unsubscribe settings synced on our end too. (And I once ran into an issue where the incorrect email address was unsubscribed — I only use one email account in Google Apps, with about 7 other accounts either getting forwarded or imported in).

Time for webhooks! Little bit o' this

  # in the webhooks controller. please sign your webhooks
  def verify(api_key, token, timestamp, signature)
    # from http://documentation.mailgun.net/user_manual.html
    return signature == OpenSSL::HMAC.hexdigest(OpenSSL::Digest::Digest.new('sha256'),api_key, '%s%s' % [timestamp, token])
  end  
  
  # email_type provided in X-Mailgun-Variables header; if you have various types of things to unsub
  def unsubscribe
    User.find(params['user_id']).email_unsubscribe(params['email_type']) if verify(APP_CONFIG['mailgun_key'], params["token"], params["timestamp"], params["signature"])      
    render nothing: true
  end

Little bit o' that

  # from mailer
  # notice the X-Mailgun-Variables header where we provide some JSON
  # user id to verify correct user, avoids wrong email unsub issue explained above
  # be careful with JSON spacing or it wont work
  def retention_second_batch_reminder(user)
    @user = user
    tag('Retention: Second batch, first reminder')
    mail(
      :to => user.email,
      :subject => "We've missed you! Send some Picplum Prints today",
      'X-Mailgun-Variables' => "{\"user_id\": #{user.id}, \"email_type\": \"retention\"}"
    )
  end
  
  def tag(title, campaign = nil)
  # helps with setting campaign tags
    headers['X-Mailgun-Tag'] = title
    headers['X-Campaign-Id'] = campaign || title
  end

And there's a lot more you can do for tracking other Mailgun events. Of course Mailgun has their new HTTP sending API (faster than SMTP + no more MIME!), so I'll need to migrate to that in the near future.

Here's an example of one of our Picplum gift emails (though this trigger email doesn't have an unsubscribe link):

This particular HTML layout has the nice benefit of being Mailgun Approved:

Hey guys, very nicely done with design of your emails.
Not only they look great and don't abuse images, they're also very friendly on spam filters as well. Will take a screenshot and keep sharing with our users if you don't mind.
--
Ev Kontsevoy

If you read this far, you've won a Picplum account! Click below to signup.

We're hiring at Picplum!

We're hiring our first engineer! Want to work on a product that actually puts smiles on people's faces? We are a design-minded and data-informed team based in San Francisco working on problems that really affect people. Read more about Picplum and the team.

Want to hear more? Send us an email at founders@picplum.com. Be sure to link us to something funny on reddit too. Then we can tell you about our buzzwords like backbone, coffeescript and rails.

Special Thanks to Noah Kagan of AppSumo for reading a draft of this post. This post made possible by several seemingly endless blocks of time, Sennheiser HD 650 headphones, many Above & Beyond Trance Around the World sets and level 32 in Modern Warfare 3 (gamertag StammyHD). Follow @Stammy and @picplum on Twitter.

This was a long blog post and I no doubt made some errors in here. Please drop me a comment below for any you spot. Thank you and happy holidays.

Enjoy this post? Click through and leave a comment. It will make my day. Startup Idea: User Retention as a Service

Talking Startups and Picplum on BBC News

2011-12-14T18:19:47-08:00

After a gracious introduction to the BBC by Mr Amit Gupta, I appeared in a short BBC News segment about the Silicon Valley startup scene as compared to the NYC startup community. Click the screenshot below to watch the video!

On BBC News talking about Silicon Valley, startups and Picplum

While it's only a 3 minute segment with half that with me, there were quite a few things I mentioned on tape that did not get included. Definitely a more pleasant experience than my Nike commercial where a film crew of 16 people taped for 14 hours to create a 30 second ad, but I digress. I'd like to expand on my thoughts a bit here.

First off, I'm am super happy with the video (aside from my ever-present fast talking) and it was just in time for Picplum as Akshay and I begin switching gears from coding, coding, coding to focusing more effort on PR and marketing. I had to flip on a few more instances on Heroku in the morning when it was also mentioned on Huffington Post.

Silicon Valley is not SF

Some folks on Hacker News were clamoring about how the video appeared to use Silicon Valley and SF interchangeably. While I often said and referred to the "Bay Area" as a whole in the taping, as far as I'm concerned they are pretty much the same. There are tons of startups in SV and SF. That's all that really matters to me. Lots of startups that begin in SV move up to the city to attract young engineers that are lured by the SF lifestyle. And startups like AeroFS love it in SV (my assumption) as they tend to hire folks, such as senior systems engineers, that happen to be older, have families and want to raise them in SV. Both ways work well. And of course there's the Berkeley startup scene as well.

Chance Encounters & Paying It Forward

Call this the "echo chamber" if you want, but everyone in my vicinity in SF works on their own startup or for a startup. I can't walk to get lunch without running into founders. This is a good thing. It's these chance encounters (that Paul Graham so raves about) with people that are in a position to help you out in some way and want to help you that make this a great startup environment.

In the video I mentioned a few people that unfortunately did not get edited in: Hiten Shah, Dan Martell and Noah Kagan (though Noah has since moved to Austin he was instrumental in helping me get on my feet when I moved here).

These folks — and many others like them in SV — are the essence of the startup scene in my opinion. I can't run into them for 15 seconds without them asking "How can I help? What's the hardest thing for you now?" And it's not like they're paying me back for something, they are driven to help fellow entrepreneurs. I'm sure you can find some facet of that in New York, but not as much. Technology is just a tiny part of NYC's vibrant fashion, finance, advertising and PR industries.

When I was growing up I always heard the phrase "surround yourself with people smarter than you," a variation of an early David Ogilvy quote. Well that's what I'm doing in the Bay Area.

Soft Landings

Of course there's a plethora of funds investing in startups of all sorts, so I won't spend any time on that. But the thing that doesn't get mentioned much is the number of talent acquisition offers that get made. It happens a lot more than you hear about on TechCrunch. This is a byproduct of the surplus of founders, where startups are in a hiring crunch. It's almost too easy for talented individuals to start their own company and raise some capital to get started. Sean Parker has gone on record recently saying that small startups are ridiculously overfunded.

What does that mean? If you're talented and your startup isn't working out, or even if it is too early too tell, chances you will receive an email or call from another founder asking if you'd be open to a talent acquisition. These have come up for me a few times in the past and it almost seems like it's the norm in the Bay Area. In New York? Not so much (completely blind assumption added for effect, please dispute in the comments!).

Akshay and I in the office

Bias much?

I might seem like I'm being a bit overly pro-Bay Area and boasty in this post. I realize there are other places to run startups, but I love it here and wouldn't have it any other way. Come and visit for a few days, tour a few startups.. hopefully you'll be able to grok what I'm trying to portray.

I can see myself living in NYC at least for a year just to check it out (and find a Greek wife in Astoria) but as long as I'm doing a startup, I'll be in the Bay Area. Anyways, I felt like I need to write at least some sort of brain dump on my blog so you guys don't think I've abandoned it! Just been working a bunch. I have one other large post coming when I can get a chance to write again. It's about a startup idea that I'm not going to pursue but that someone definitely needs to build.

Send some prints!

Why not share the love this holiday season and buy a Picplum gift for someone in your family or send them prints of your own?

I need your help spreading the word about Picplum. Please do me a huge favor and tweet, Facebook, Google+, blog or whatever it is you do best, about Picplum. I would really appreciate it. Thank you for reading my blog.

Enjoy this post? Click through and leave a comment. It will make my day. Talking Startups and Picplum on BBC News

DNSCrypt

2011-12-07T12:28:36-08:00

Head over to OpenDNS and install DNSCrypt for Mac. DNSCrypt, in a nutshell, encrypts all DNS traffic between you and OpenDNS. If you've been reading my blog since the early days, you've already been up to date on what their primary product does (kickass faster and smarter DNS). DNSCrypt is the next logical progression for DNS infrastructure.

More details on the above linked page. And if you're technical, I'm sure they would love a few extra coders forking their DNSCrypt repos. I made a quick pull request from my fork to change the menu bar icon a bit.

Enjoy this post? Click through and leave a comment. It will make my day. DNSCrypt

Give the gift of Picplum

2011-11-11T16:32:22-08:00

Akshay and I just rolled out our Picplum gift page after receiving countless emails from people asking how they could buy gift Picplum to friends and family. Powered by Stripe, of course.

For more on what Picplum is all about be sure to checkout our revamped Tour page. Also, take a look at our blog where we talk about Picplum's new photo uploader and UI tweaks. There's definitely more where that came from. Stay tuned.

/shameless startup plug

Enjoy this post? Click through and leave a comment. It will make my day. Give the gift of Picplum

Sennheiser HD 650... Wow

2011-10-28T16:14:44-07:00

After I mentioned that I was no longer happy with my Dr Dre Beats Studio headphones in a recent blog post, The Coding Zone, a mysterious package arrived from Amazon. It was a pair of pristine Sennheiser HD 650 headphones; a kickass gift from my friend Noah Kagan of AppSumo. Thanks Noah!

I'll expand on this later but I think it's not that the Beats are horrible headphones -- I once reviewed and loved them -- but that my taste in music has changed in the last 2 years and I now prefer a flat sound rather than overly emphasized bass. In other words, I like listening to my music now, not only feeling it, which is the bread and butter of those battery-powered bass monsters.

I have only had the Sennheisers for a few days, and it supposedly takes anywhere from 40 to 200 hours to properly break them in (high-end headphones require some time for the cones to loosen up. A properly broken-in pair of headphones is described as having 'warm' and 'clean' sound), but I am pretty close to being blown away. It's my first pair of open air, reference headphones so I have a lot to learn. I just ordered a USB DAC/headphone amp and these are 300 ohm headphones that require a bit more power than my MacBook Air wants to pump out. They work just fine with the Air, of course, but max volume definitely lacks a punch. After a bit of searching I ordered the ~$70 Fiio E10. The E10 also has a better DAC than my laptop so that should help clean up the sound.

More on what these headphones are capable of after I break them in and the Fiio arrives!

Thoughts? What's your headphone situation like?

Enjoy this post? Click through and leave a comment. It will make my day. Sennheiser HD 650... Wow

The Coding Zone

2011-10-23T01:27:52-07:00

I've learned there are three main things that set me up for a productive programming session.

My current coding wonderland.

Good Music

An endless supply of new beats works wonders. This is the absolute most important thing for me. If I have to context switch every 3 minutes to find a better song to play, not much is going to get done. Sometimes I'll loop through a Deadmau5 album on Spotify, or listen to a set like Trance Around the World. While I really enjoy leaks and mashups on Hype Machine, it is so hit or miss that I end up having to change the track often.

Getting in the coding zone starts by isolating myself from the rest of the world with my headphones. That's also a sign to Akshay, who works a few feet in front of me, that I'm in get-shit-done mode but have Campfire open if he needs anything.

No Chance of Interruption

I must have a seemingly endless block of time at my disposal. If I have a meeting in one hour that severely limits how much of a zone I can get into. My most productive work tends to happen at odd hours where there is no possible way that I will get a text about going out for lunch, an IM from Olark or a bunch of emails filling my inbox.

For example, it's early on Sunday morning, my cofounder is sleeping (I've slumped into a nocturnal phase.. we're in a no-meetings-until-we-ship-some-new-stuff mode) and I will probably be up until 7am in a blissful coding rage. Everything is perfect right now.

Organization

I'm never far away from our Trello board, my own personal Trello "scratch" board, my trusty Pilot Hi-Tec C Cavalier 0.3mm pen and browser sketch pad on my desk. Anything that crosses my mind worth doing now goes on my sketch pad and anything worth doing later goes on our Trello. I used to hate Trello because I thought it was fugly, but the simplicity has grown on me.

For some reason I can't seem to shake the "to do.txt" file on my desktop. Nowadays it has evolved into more of a scratch pad as well — random snippets of code or copy that I don't need this moment but don't feel like having to browse through github to find later should I need it again.

Honorable mentions: A depth charge or cappuccino on my desk, being motivated about what I'm actually building (that's the easy part for me and why I have only ever worked on my startups), and having a clean workspace, both in my physical living area and on my computer's desktop and Picplum Dropbox folder.

In hindsight I would have rather purchased an external USB DAC and some quality Sennheiser headphones.

Organization as mentioned above also means mental clarity; knowing that both Akshay and I are on the same page about what we're building at all times and sharing our progress with each other as we execute each task. It makes for a smoother product roadmap when the bigger picture has been thought out and every deliverable builds up to it and is not a random wouldn't-it-be-cool-if.

The best thing we have done for Picplum? Purchased this 6 foot by 4 foot whiteboard (better than shower board and Whiteyboards in my opinion -- they become hard to erase after a while). We've got the next three months planned out on it and are constantly updating it with tasks, deadlines, who's doing what or explaining various new user flows or UIs to each other.

Thoughts? How do you dive your coding zone? Have you signed up for Picplum yet? We'll be pushing some cool stuff soon so be sure to sign up now so you don't miss out. :)

Enjoy this post? Click through and leave a comment. It will make my day. The Coding Zone

R.I.P. Steve Jobs

2011-10-05T17:06:19-07:00

Enjoy this post? Click through and leave a comment. It will make my day. R.I.P. Steve Jobs

Thoughts on the Amazon Kindle Fire

2011-09-28T08:39:24-07:00

It was exactly one year ago that I received my first Kindle and fell in love with it. Why? They distilled the essence of a simple, superb reading experience into a lightweight, affordable and hassle-free device (as in WhisperSync and stellar battery life). While the affordability is definitely still there with the new Kindle devices announced today, I'm a bit wary of where Amazon is headed.

Amazon just released some new Kindles today: the 199 Kindle Fire Tablet, 149 Kindle Touch 3G, 99 Kindle Touch, and new 79 basic, no touch screen Kindle.

Amazon's New Kindle Touch, Kindle and Kindle Fire

For one, props to bringing the basic Kindle price down to 79. Aside from that Kindle, it appears that every other Kindle model is now touch screen. Of course, everyone's focusing on the new Android-based, color screen Kindle Fire tablet. It's being touted as a solid iPad competitor. Am I the only one thinking this is messing up the flawless Kindle brand? I think it should have been given a different moniker entirely.

The tablet features apps for Amazon’s Android Appstore, Kindle store, Amazon MP3, and Prime Instant Video. Nearly all of Amazon’s recent news, Amazon Cloud Player, Amazon Cloud Drive, Kindle Cloud Reader, the streaming deals with Fox and NBC Universal, were in preparation for the Fire. With these cloud services in place, the Kindle Fire is a legitimate iPad competitor. But it’s more than just Amazon apps. Users are free to load apps from Amazon’s Android Appstore including Pandora, Twitter, Facebook, and, most notably, Netflix.

TC: Amazon Fires 199, 7-Inch Tablet At Apple

Blah. Sounds like a lot of clutter to me. The original Kindle was purpose-built: create an amazing digital reading experience. The Kindle Fire's MO seems to be create an okay experience for apps, the web, books, movies, music and of course Angry Birds. I really liked Amazon's laser focus on the regular Kindle and that's why I travel with both my iPad and my Kindle. One is great for movies with a larger screen (and that is just about the only thing my iPad gets used for — my Air is not much bigger so I just take that for any real work that I need to do) and the other is super lightweight and makes it easy to read anything.

At first glance the Fire looks like a hybrid between the failed Barnes & Noble Nook and the also 7-inch screen Samsung Galaxy Tab. It sports a dual-core processor and a nifty 'cloud-accelerated web browser' called Amazon Silk.. it's clear that the Fire is being marketed as much, much more of a media device than the pure reading experience the Kindle came to be known for. Especially with all of the Kindle Fire screenshots showing Angry Birds on the home screen.

I was talking about the rumored Kindle Fire tablet with my cofounder the other day. My point was that for it to really work, Amazon would have to deliver on both the tablet/media aspect while simultaneously maintaining the solid reading experience — most likely through a hybrid screen that can easily switch to e-Ink when you are outside or wish to read in a glare-free, black and white mode. Such displays have been in the works since 2009 (search for Pixel Qi e-Ink / LCD hybrid), and it would be great to see Amazon pull a home-run with such tech in their latest device.

I am however most interested in a new Kindle feature that got slighted by all this Kindle Fire news — X-Ray. It's the one feature in today's announcement that is meant for the die-hard Kindlites:

Amazon invented X-Ray, a new feature that lets customers explore the “bones of the book.” With a single tap, readers can see all the passages across a book that mention ideas, fictional characters, historical figures, places or topics that interest them, as well as more detailed descriptions from Wikipedia and Shelfari, Amazon’s community-powered encyclopedia for book lovers.

The Kindle 3 I fell in love with

The regular Kindle got me amped up about reading. Just after six months of owning the new Kindle I had read an average of 2 books a month. It's clear Amazon wants to chase other, larger market opportunities with a more multi-purpose device. Let's just hope they don't wreck the Kindle brand with some cheap Android tablet.

What do you think about the Kindle Fire? Love it or hate it, I have to give it up to Amazon for shipping an entirely new product.

Enjoy this post? Click through and leave a comment. It will make my day. Thoughts on the Amazon Kindle Fire

Canon 7D Test Shots

2011-09-22T22:52:57-07:00

I've been playing with my Canon EOS 7D for about a week now. Just wanted to share a few recent shots. My workflow involves Adobe Lightroom 3, which I have grown to absolutely love. It's fast on my Macbook Air and can easily fix lens distortion with "profile corrections."

I previously enjoyed high-end photography equipment merely for the technological aspect of it and getting caught up in all the features. Now I'm taking the time to read up on techniques and recalling what I learned about photography while working on yearbook staff in high school. I'm sure I will write a beefy 7D-related blog post when I can carve out a few hours, but for now I'm just cranking away overtime on Picplum. Our upcoming photo uploader is slick — you see the photos you just dragged over before they have even uploaded. Gotta love FileReader.readAsDataURL() in HTML 5. Have you made a Picplum account yet? :-)

My nephew Michael

Bay Bridge

Infinity Towers

Playing with some Canon 'speedlighting' techniques and remote flash with the Canon 580EX II.

I have been flipping through some photography related Kindle books recently as well. The pick of the litter seems to be Speedliter's Handbook: Learning to Craft Light with Canon Speedlites (not an affiliate link because Amazon shutdown the Associates Program for California residents!).

Thoughts? What's your favorite photo blog or book?

Enjoy this post? Click through and leave a comment. It will make my day. Canon 7D Test Shots

Canon EOS 7D

2011-09-17T08:39:56-07:00

Well that didn't take long. About a year after I wrote about how much I liked my Sony Alpha NEX-5 camera, I have gone back to big DSLR land. I purchased a Canon EOS 7D last week with quite a few accessories including Canon 24-105mm L, Canon 50mm f/1.4, 580EX II flash, and Rode Videomic.

I was hooked ever since Brendan let me use his 5D Mk II at Y Combinator.

I think the thing that did it for me was the lack of solid accessories for the NEX-5. It doesn't have a hotshoe so you can't use your typical large external flash or plug in your own mic. But most importantly, if you want a good lens you'll have to play with a bunch of adapters to get the kind you want.

I was originally waiting for the 5D Mark III to come out next year but I'm flying home next week to visit my nephew. It's the perfect opportunity to take some quality photos of my baby nephew and print them out for the family with Picplum. I'm only buying full-frame lenses so I can sell the 7D when the 5D Mk III comes out (or the rumored full-frame 7D Mk II). Well, who knows. I'm pretty happy with the 7D and I'm not sure how much full-frame would help me aside from the crop issue on these lenses. Better AF is always appreciated though.

In the meantime I'm looking forward to experimenting with DSLR video as well. My old Nikon D90 did video but the quality was sub-par with lots of 'jelly' motion. I got a rolling dolly and want to experiment with some interesting shots but I'm quickly learning how hard it is to focus while trying to look at the little 3-inch screen. That must explain all the people that tack on 7-inch LCD screens via HDMI and get a Redrock Micro HDSLR rig to make things easier to focus precisely. I first got wind of Redrock Micro rigs when a fellow Ford Fiesta Movement Agent, Beto Lopez, had one for his 7D.

This is the first time I have invested in a quality external flash. It makes a massive difference! I'm very happy with it so far. I'm sure I'll be talking more about my setup and how I'm adjusting to the 7D soon. I'm hoping to build up a small collection of lenses that will last me at least a decade.

Would never have been able to take a night shot like this without the 580EX II. This bar was super dark.

Thoughts?

Enjoy this post? Click through and leave a comment. It will make my day. Canon EOS 7D

Thoughts on Picplum Automatic Photo Prints

2011-08-22T10:00:00-07:00

Hey there! We've haven't spoken in some time. My apologies. For the past 2.5 months I have been keeping busy with my latest startup, Picplum. In this post I hope to dive far, far into Picplum in attempt to provide a critical review of my own startup just as if I was reviewing any other startup. This should prove interesting. Let's start with the basics first.

When in doubt, bokeh it out. Signup Now »

The 140

Upload your best photos. Picplum prints, packages and ships them to close family & friends automatically every month.

Why I'm Psyched

Picplum combines many of my passions. Front-end bliss and a magical UX (getting there..). Consumer web. And of course, photography:

Back in 2009 I presented "HDR Imaging for n00bs" at O'Reilly IgniteATL, based on these three blog posts: How To: Get Started with HDR Photography (Part 1), Part 2, Part 3.

Stammy makes for a horribly fast-talking speaker.

Everyone understand prints. I can walk into a random group of people at Starbucks (or more recently the moms that turn Crossroads Cafe in South Beach into strollerville at lunch) and tell them about Picplum in 10 seconds. They instantly get it. Word of mouth alone is actually a solid distribution model for Picplum.

How We're Running This Startup

User testing in progress

I will likely mention "experimenting" a few times in this post.. what gives? One fundamental thing we're doing differently with this startup is throwing all assumptions out of the window. Neither of us can get away with justifying a feature or default setting with "I think" or "most people." That's usually the start of some likely incorrect assumption. (A habit I believe I picked up from the Chirply brothers.)

Instead we experiment. A lot. Data and real user testing finds the solution for us. Seems obvious but I never really took this to heart with my past startups. Picplum as you see it now is currently on its third product iteration (we started from scratch the first week of June).

The app has essentially been rethought several times. Part of that is that we got better at backbone.js and kept refactoring but we also regularly sought out user feedback. I can't praise user testing enough. User test with family. User test with randoms. User test with peers at Y Combinator dinners and with YC partners at office hours. My love of user testing will probably rise again in a dedicated post later on.

An early version of Picplum before realizing we needed an easy user onboarding process.

One of the first things I learned through user testing is the stark difference between visual design and functional design. We had several UI elements we thought were very slick but when it came time to user test they failed utterly in terms of usability. Take for example my first stab at designing a recipients UI:

Old version of recipients UI

Even after I made the yellow bar that says "Receive photos by mail, email or both?" even larger, it still seemed to be entirely invisible to users. They would fill out a recipient's info and then later ask how they could adjust what that recipient received. Likewise, several users had trouble switching between recipients or knowing where to click to add a recipient. My flaw was making an interface designed for a person having many recipients when the typical user would have just a few.

Users on picplum

Paul Graham often has some brief but amazingly useful feedback: "ask your users." We'll be doing that continually over the next months. On that note, I must plug Olark. Olark is a little support chat tab that sits on the bottom of Picplum and lets us chat with users on our site. I'm sure you've seen it on many sites before. I love it. Here's why: I can see a list of users, where they came from, what pages they have loaded, where they're located, if they're logged in and then I can initiate a chat with them (and even change the page they're viewing!). It has never been easier to chat with your users. Even just a 5 minute chat with a user starting with something like "Hey there, I see that you've been reading our FAQ for a while -- is there anything I can help you with?" can turn a first time visitor into a paying customer. Not only that but I can ask them what they would like to see or how they plan on using Picplum.

We're also trying to be laser focused, finding what works, then moving on. That's why we only do one thing right now and are iterating until that experience is clean. A rigid dichotomy to launching with a bunch of features. That's how we're approaching this startup. Thoughts?

@dodeja @stammy at Y Combinator. Someone brought a 5D Mk II with a massive ring flash to dinner.

Picplum 101

Picplum makes it ridiculously easy to send photo prints. It does that by introducing an automatic component. Upload or drag-and-drop photos on the website, or email us your best digital photos as you take them. That's it. Every month Picplum takes what you've sent, prints them, carefully puts them in a nice package and ships them to people on your recipients list — grandparents, close family and friends.

Picplum works great for anyone but we're starting with new parents and parents with young children as our first users. Why? They don't have the time to print their baby photos any other way and the convenience of Picplum makes the most sense for them.

I can’t even tell you how many times I abandoned the shopping cart on Flickr. Numerous times. My intentions are there, the time and distraction-free-environment is not.
Tina Roth Eisenberg (@swissmiss) — Swiss Miss design blog/studio

I'm a newly-minted uncle and know how this goes — photos of my nephew stay on my sister's phone, point and shoot camera, laptop and DSLR. Maybe they end up on a photo dump site but then nothing happens. Well, sometimes I get this in my inbox:

Sis did you seriously just send me over 1,000 photos? What is this I don’t even.

Aside from the convenience of automatic delivery, there are a few facets that comprise how Akshay and I have been thinking about Picplum: premium prints, best moments and a great experience. All prints are done by a professional photo lab via lightjet chemical process on 4" by 6" lustre photo paper that's thicker than flimsy 9c prints found elsewhere online. Lustre prints have the color saturation of glossy, fingerprint resistance of matte all without the glare of glossy photo paper. The photography snob in me wouldn't have it any other way. (The photography snob in me is also waiting desperately for the Canon 5D Mk III to come out and pair with an 85mm f/1.2 L.)

Shutterfly was really disappointing: pixelated, poor colors, and just a cheap feel - we'll never use them again. [...] Still, none of them were as good when I took a photography class in grad school and went to a camera store for processing, or our wedding photos for that matter. So I think there's something to be said for professional / photographer-quality processing.
Dave Werner

Best Moments

Picplum is not trying to be your photo dump where you plug in your camera's memory card and unleash hundreds of photos thinking that you'll do something with them later. We just want your best photos. That may be just 5-10 a month, or it may be 25, but it's definitely not 300. Curation, uploading and remembering to do something with your photos are the main roadblocks for a utopian photo sharing experience. We're trying to solve this problem to separating the culling process from the uploading process and making everything else automatic.

Maybe that's not the right way to do it but we're starting with this hunch and are going to iterate. Likewise, prints are just the first step. We want to gather mindshare around being the place for your very best photos. If we can do that there are some interesting opportunities available to us. If you asked me where my best photos were, I wouldn't have an answer. I have 16,000 photos on Flickr but you'll have to wade through them to find the best ones. Maybe I tossed a few good ones in a set, but that's about it. I have hundreds more on Instagram, Facebook, iPhoto and Aperture/Lightroom (used both for a while before settling on Lightroom — fast!). We have some ideas about how to get your best photos from these services too and just curation in general. We'll be experimenting in the near future.

Experience

Just like when you see a red Netflix slip in the mail and immediately know what it is and get that giddy feeling, or open an Apple package, we’re trying to do the same for photo prints. When people talk about Picplum we want them to start with, 'I received this amazing package in the mail yesterday,' instead of 'look at this neat website.'
Paul Stamatiou on The Next Web

Crafting a memorable experience encompasses everything a user comes across when dealing with your product or service. For us this meant taking extra care to ensure the offline experience of the Picplum package was excellent. Most people (recipients) will hear about Picplum for the first time via our package so it's important to make a great first impression and ensure that it's not a stale experience in successive engagements.

It's still pretty early on so there's not much to share with what we have learned but we're starting with quality prints, a nice envelope the same color as our website, and an explanatory insert introducing the recipient to Picplum. More on this in the months to come.

The Review

Alright time to critique the actual web app. What's that you're muttering to yourself? Where's the mobile app? Simply put, we won't expand to mobile until we know that the general Picplum concept works first. One thing at a time, separated by validation. Trying to do too many things at once without much validation is a surefire way to spread yourself thin and fail. The peanut butter manifesto comes to mind.

[Now I pretend I'm not Stammy and enter user testing speak-aloud mode..]

Alright, let's signup. Here's the first screen I see:

First login

Oh nice, it has me following some steps: Add Photos, Add Recipients, Send Photos. It wants me to upload photos first. Hrm, I don't really know what photos I want to add right now. Let me see if I can skip to the second step by clicking "Add Recipients." Interface seems very snappy.

Okay that worked, here we go. Let's enter grandma and the parents. Grandma doesn't use email so I'm going to see if there is a Send Prints Only mode that doesn't ask for email in the dropdown; there is. Hrm, I don't know my grandmother's address off the top of my head. Have to switch to my email inbox and search for it, bummer. If I wasn't motivated I would have probably closed the tab and decided to come back later/never. Okay found the address in an old email thread and added grandma. Recipient added instantly; no page load!

Adding my sisters now too. Don't know their addresses off the top of my head either so I'll have to search GMail again. This is getting annoying. I wish Picplum could just ask for an email address and let me click a button to automatically send the recipient and email and have them fill out the info and explain to them what Picplum is all about. Okay, I've added my recipients. I'm going to click this big orange "Add More Photos" button.

Okay that button takes me back to the Add Photos page. This is the hard part. Hrm. What to upload? Opening up iPhoto, plugging in the SDHC card from my aging Sony Alpha NEX-5 into my MacBook Air. Loaded up my latest snapshots. Alrighty. The purple box says I can drag, let's try that out now.

Drag and drop!

I dragged the photos over and let go. They instantly started uploading! I like this uploading status. Makes it easy to understand what is happening and when it will finish. Oh nice, as the photos finish uploading they just appear. This thing is wicked fast. A new button labeled "Send Photos Now" appeared on the screen to proceed to the last step.

Alright, my photos are done uploading. Hrm what is this crap... my head is cropped off! Will it actually print like this? I hope they know how to deal with portrait photos. Can I do any basic post-processing or photo adjustment? Doesn't look like it.

I clicked on the photo and the larger version seems normal. Oh well, I'll go to the next step and see what happens.

Photos look sharp in a nicely modified facebox

I'm now on the last step which seems to be some kind of confirmation page.

Send Your First Batch page

I thought this was supposed to be automatic. Ah I need to send this batch first and then it will become automatic thereafter. Can I pause an automatic batch or will I get charged if I don't use it? I don't see a way to only order these photos and not subscribe to a plan. I guess they only offer a monthly subscription. Hrm, why is it 14 per month and then say that the first batch is free, but then show a 2.00 charge? Some of this pricing stuff is not very clear (in this case it's 7 per recipient and since one was international that's a bit extra).

I don't see any area to edit what I receive. It says it will send prints to my recipients. What kind? Can I include a message with these photos? Can I change my recipients later?

Adding my credit card info now. It seems odd that I need to click "Save Credit Card" and then the "Pay & Send" button — why can't it just be one action? What happens if I want to cancel during the 30 day trial?

Clicking "Pay & Send", let's see what happens. Okay it takes me to the photos page, a notice popped up saying I sent my first batch and some new site navigation appeared.

Now what? Flipping to my inbox to see if any confirmation or receipt was sent. Nothing. If I had "email only" recipients when and how would they receive the photos? How long will it take until my print recipients receive my photos in the mail? I think this step should bring up a modal or guiders.js box teaching me the new navigation that showed up. Can I add a photo for the next batch? I forgot when the next batch will ship.. where can I find that date again? I forgot to add someone to that last batch of photos, can I edit recipients after the fact? Blah! Closing the tab and going back to Hacker News.

[/End user testing voice]

Phew. There is definitely some room for onboarding flow tweaks, but it has come a long way since the middle of Y Combinator:

A very early version of this same new user onboarding flow... yuck!

After having watched real users go through the onboarding flow many, many times you begin questioning everything. Too much text is distracting. Too many unrelated UI elements could cause the confused user to click to other pages and get out of the flow. We've refined this part of Picplum several times. We have yet to add it but we want to put in positive reinforcement in-between steps so the user knows how things are going, and make their next action even more obvious (either by way of making the next action pulse/glow or using a guider box).

After the user sends their first batch of photos and completes the onboarding flow I want to acquaint them with the new UI elements. I'll fade in a help button on the header bar and show a guider box telling the user that if they ever need help with the UI they can click that button to walk them through the interface should they need to reference it at a later point.

But Prints Are Dying

Film photography is dying, not prints. People still want to frame photos, put them on the wall or share prints with close family and friends. Digital photos are surely growing but you will always want the most important ones printed and Picplum makes that ridiculously easy and convenient. We're aiming to make prints cool again — starting with the traditional 4" x 6". The next step may be physical, it may be digital. We'll see what the market tells us.

Checkout the Picplum blog for my mom's take on what photo prints mean to her.

Verdict

I give Picplum 8 out of 10 Stammys. I want to be able to signup without having to add any photos and just have it setup and ready to go for when I want to email in photos. I want larger prints and I want Picplum to send me a frame. I want Picplum to tell me how to take better pictures as it learns what I think my best photos are.

Sending photos every month may not be the right interval for everyone. What about every 2 weeks too? Or what about a "smart" batch that sees how you use it and sends prints accordingly. I want to be able to send different photos in the same batch to different people. I want Picplum to help me pick my best photos, from ones I manually import and ones I want imported from other services.

But first I'll have to see if these are things real Picplum users want too. Signup Now »

Try Picplum

If you've read all the way to this part, I would love for you to take Picplum for a test drive. Signup and send your first batch of beautiful prints today. The first ones are free. We have a pay as you go plan too. Questions? Fire away in the comments below.

Thoughts?

Spotted at Stripe.com HQ

Enjoy this post? Click through and leave a comment. It will make my day. Thoughts on Picplum Automatic Photo Prints

Picplum

2011-08-18T18:30:00-07:00

Just a heads up that I launched my Y Combinator startup, Picplum, last week! That's why I have been heads-down for the last few months.

Read the press! The Next Web, Launch, TechCrunch. Later this week I'll be working on an in-depth Picplum review of sorts. In the meantime if you have any things in particular you want to know about Picplum — either the technical side of things or just about the product or even the Y Combinator experience — let me know here and I'll try to include it in the post.

Cheers,
Stammy

Enjoy this post? Click through and leave a comment. It will make my day. Picplum

Upgrading to OS X Lion

2011-07-09T12:56:40-07:00

After seeing a fellow founder at a Y Combinator dinner this week running the GM seed of Mac OS X Lion without any issues I ended up installing it on my MacBook Pro.

I only ran into a few issues with my development environment. I had to install XCode 4.1, update rvm and ruby 1.9.2, uninstall imagemagick and the rmagick gem, then reinstall imagemagick and run bundle update for my app. It's working great now. That being said, I'm a tad disappointed with Lion. There was so much hype around it and the only real discernible changes are: a sleeker Mail.app, Mission Control (Launchpad.. meh) and an improved Spotlight (cursor down files and a preview pops up).

Then again I've only been using it for 8 hours. I'll provide an update when I have more time to blog and when I've spent more time with Lion.

What do you think of Lion so far if you've installed it?

Enjoy this post? Click through and leave a comment. It will make my day. Upgrading to OS X Lion

In the Y Combinator Startup Grind

2011-06-19T14:55:18-07:00

As you have no doubt noticed my posting has slowed down a bunch recently. The reason? I am now working on my third startup and going through Y Combinator's Summer 2011 batch. It started earlier this month and wraps up in late August.

Akshay Dodeja and I are cofounders working on something interesting. Rails 3.1 and Backbone.js is the current stack. Using Heroku, Mailgun, Stripe and some other cool services. Currently working out of my tiny studio apartment in San Francisco but we're passively looking for a 2 bedroom loft in the city.

More on what we're building when we actually launch! Until then 10am to 2am working.. feels great to be back in the startup grind.

Enjoy this post? Click through and leave a comment. It will make my day. In the Y Combinator Startup Grind

Thinking about Hackintosh

2011-05-29T23:16:56-07:00

I have been thinking about building a hackintosh lately. If you have experience with this, I would love a few pointers in the comments.

I have been told that InsanelyMac is the place to start looking at other setups to find compatible hardware. Ideally I would like a Shuttle SFF hackintosh — love the form factor — but their motherboards do not seem to be hackintosh friendly yet. I am thinking about something like a six core 3.2GHz Gulftown Intel Core i7 processor, SSD RAID 0 with Vertex 3 Pros, 8 or 12GB of RAM and a decent video card.

My Macbook Pro is showing its age and while I'm interested in the upcoming MacBook Airs with LV Core i5 processors (rumor), I'd want a beefier GPU too.

Have you ever run a hackintosh PC?

Enjoy this post? Click through and leave a comment. It will make my day. Thinking about Hackintosh

Bitcoin Mining

2011-05-19T21:21:28-07:00

Back when the Pentium 4E "Prescotts" were causing an outrage in the computer modding community for notoriously overheating, and around when Steve Jobs failed to deliver on his promise of 3GHz from the G5, I was an avid folder. Folding is the term for running a distributed computing program on your computer, Folding@Home, that donates your spare CPU cycles to help Stanford learn more about diseases created from misfolded proteins. This project became and is still hyper-competitive. People join folding teams, install it on as many computers as they can find and let them run 24/7 in hopes of completing many WUs (workunits) and ranking higher.

How does this relate to the title? Well I have recently been playing around with bitcoin mining and I can't help but draw similarities between the two. Just like folding you must run a program that uses (lots of) your computer resources to generate, or mine, bitcoins. But that's where the similarities end. So what exactly is bitcoin? A recently published Slate article, My Money Is Cooler Than Yours, has the scoop:

Bitcoin is a peer-to-peer currency, meaning it is not issued by a central authority, like the dollar or yen. The money supply grows as the network grows and will max out at about 21 million bitcoins. But right now, you can purchase them online on the Mt. Gox currency exchange or an over-the counter market. They do not exist in physical form—only electronically, owned and traded by members of a special, anonymous peer-to-peer network. No third-party intermediary, such as a payment processor or a bank, needs to keep tabs on or process the electronic transactions. The network itself does, with each participating computer running a special, secure program that ensures no user can spend a coin twice or create new money out of thin air.

GigaOm published a similar exploratory piece about Bitcoins: How Bitcoin Wants to Make Money Even More Virtual. As did TechDirt with Can Bitcoin Really Succeed Long Term? Bitcoin is just getting mainstream media attention. I briefly mined for bitcoins some six months ago but didn't really "get it" and the big vision, so I stopped mining. If only I had held onto my bitcoins instead of deleting the app!

My massive bitcoin empire is worth... ~14 cents. And I got those 0.02BTC from the bitcoin faucet. Been mining for all of 2 days on my slow MacBook Pro.

Unlike Folding@Home where you more or less knew how much progress you were making, mining bitcoins is fairly random. You might generate your first bitcoin in one hour or it may take 3 weeks. It depends if you are among the first in the community to solve that block with a hash; the more hashes your computer can generate, the better.

It's important to realize that block generation is not a long, set problem (like doing a million hashes), but more like a lottery. Each hash basically gives you a random number between 0 and the maximum value of a 256-bit number (which is huge). If your hash is below the target, then you win. If not, you increment the nonce (completely changing the hash) and try again.

Bitcoin Wiki

It becomes harder to solve a block as the total computational power of the network increases. As such, bitcoin miners often join pools where the pot is shared (depends on the pool but often in relation to your contributed power). Currently a single bitcoin can be sold on one of several bitcoin exchange websites for around 7. You can buy bitcoins or generate them yourself to then spend online. But wait.. how do you spend them?

I'm only skimming the surface about bitcoin mining and its specifics, but one thing is certain: bitcoin has some pretty lofty goals. If this is to be a viable virtual currency people must begin accepting them as currency. And that's exactly what is happening. Take for example this software developer that has begun accepting bitcoins for payment. And there are more and more directories of bitcoin-accepting service providers popping up; everything from online stores to flash games and web hosts.

To be frank, I'm not 100% on the viability of bitcoin as a currency but I am fascinated about the geeky bits: optimizing computers to mine bitcoins and achieving higher and higher Mhashes/sec rates. Lots of folks are working on custom mining setups to get the most out of their hardware.

While not cost effective in anyway at the moment, I'm currently tinkering around with bitcoin mining on an Amazon EC2 GPU Cluster. Below is completely unoptimized bitcoin install running on a cg1.4xlarge instance with 22GB of RAM and 2 NVIDIA Tesla “Fermi” M2050 GPUs. With some tweaking it's possible to get it up to around 140Mhashes/sec — still a far cry from the 800Mhashes/sec capable from an ATI 5970 Radeon HD video card or overclocked dual 5870s.

[ec2-user@ip-XXX-XXX-XXX-XXX 64] ./bitcoind getinfo
{
    "version" : 32100,
    "balance" : 0.00000000,
    "blocks" : 125020,
    "connections" : 78,
    "proxy" : "",
    "generate" : true,
    "genproclimit" : -1,
    "difficulty" : 244139.48158254,
    "hashespersec" : 16347145,
    "testnet" : false,
    "keypoololdest" : 1305759224,
    "paytxfee" : 0.00000000,
    "errors" : ""
}

I think a commenter on TechDirt put it best:

Bitcoiners don't know if Bitcoin will succeed but they're working hard on making bitcoin success.

Thoughts on bitcoin? I'm still pretty new to bitcoin and have a lot to learn. This post was just to share my enthusiasm for a budding new technology trend and virtual currency. I have yet to join a mining pool, but that seems to be the best way to get started, unless you happen to have a cluster of your own computers with beefy GPUs.

If you've got some bitcoins you want to share, send them to my address: 128jzNVjzacRWYqFsVFMjcPKvUMa6Yfvgx :)

Enjoy this post? Click through and leave a comment. It will make my day. Bitcoin Mining

VorePad, The Convore iPad App

2011-04-22T03:35:51-07:00

My co-founder, Jazzychad, is rolling out his latest iPad app today. It's called VorePad and it's the best (and first) iPad client for Convore. Convore of course is the latest online forum and chat site craze to hit the internet, created by friends from a fellow Y Combinator company.

Chad explains his impetus for writing the app and talks about VorePad features on this blog.

The app is currently on sale in the App Store for $3.99. Get it and head to Convore with your other VorePad-using friends to test out my favorite feature, sounds!

Enjoy this post? Click through and leave a comment. It will make my day. VorePad, The Convore iPad App

Skribit Shutting Down

2011-04-18T21:08:22-07:00

I just emailed all the users of my first startup, Skribit, saying that we will be pulling the plug. For those interested, here is the notice I sent:

[Notice: This is the last email you'll ever receive regarding Skribit. I will personally nuke the 20,621 user email list. - @Stammy]

On July 31st, 2011, Skribit will be closing its doors. Skribit started several years ago at Atlanta Startup Weekend in November 2007 and has had a good run. As a refresher, Skribit aimed to aid writer's block by allowing bloggers to receive post suggestions from their readers, while helping readers keep track of what their favorite blogger's were working on.

Unfortunately, Skribit traction was not as impressive as we had hoped and Skribit had become more of a niche solution for a small percentage of bloggers. Over the past few years, 45,162 blog post suggestions have been completed through Skribit, 2,346 of which were completed/blogged. The vast majority of Skribit users did not receive suggestions from their readers for various reasons. Only 1,214 blogs had more than 3 active suggestions.

We stopped actively developing Skribit last Spring and decided to pursue other opportunities. Thanks for being part of Skribit! We are in the process of refunding current PRO users. We wouldn't have been able to keep Skribit running for so long if it wasn't for a seed investment from Georgia Tech's Edison Fund and lots of advising from Lance Weatherby of the Georgia Tech ATDC.

Follow us on Twitter to see what we're working on now!

Best,
Calvin, Paul & Lance

@cyu
@Stammy
@lance

You can read all about my work with Skribit in these blog posts.

Enjoy this post? Click through and leave a comment. It will make my day. Skribit Shutting Down

Crash Course: Design for Startups

2011-04-08T10:00:00-07:00

I recently stumbled across screenshots of old websites of mine and was hurled into a state of reminiscent shock. I knew they were bad, but wow they were outstandingly horrible (redeemed only by their microformats support! I kid, I kid). Several years and a few Georgia Tech design and HCI courses have passed since those atrocities graced the web but I archived them in a sort of reverse portfolio as a personal reminder of how much my design sensibilities have matured. Only in the last year have I begun feeling slightly more confident about my design quality and process.

I have yet to consider myself a real designer and there are quite a few things I would do differently with my most recent work on Notifo and Pic A Fight. But I've learned why my work nowadays is better than from years past. I am aiming to somehow share some of these thoughts brewing in my head with this post today.

I have been brainstorming for the past few days about how to scope this article. Unfortunately I don't think I can distill everything about design into this or any number of posts. For one, design can be very subjective (or just plain wrong at times). Second, there's a sharp distinction between graphic design and user experience that deserves its own article. Third, there's a whole world of typography, color theory, gestalt laws, fitts' law, hick's law, visual hierarchy, UI patterns, layout mastery and copywriting that needs to be explored first hand. But most importantly, I'm still learning too. This is not a definitive guide, just a friendly pointer for startup folks getting into design.

What I can do is share what has worked for me. I won't get into how to do the technical side of things, because let's face it that's just a Google search away and you'll probably find a great article on Smashing Magazine showing you Sass, writing mixins, learning to put CSS3 vendor prefixes ahead of real properties and so on.

Subtle is key! Except when it's not.

When I was a wee pixel pusher I would overuse whatever graphic effect I had just learned. Text-shadow? Awesome, let's put 5px 5px 5px #444. Border-radius? Knock that up to 15px. Gradients? How about from red to black?

You can imagine how horrible everything looked. Now my rule of thumb in most cases is applying just enough to make it perceivable, no more. This usually means no blur on text-shadow and just a 1px offset, or only dealing with gradients moving between a very narrow color range.

Then what do I mean about "except when it's not"? Take for example visual hierarchy — where to draw someone's eyes first with color, contrast and proportion. If you are going to increase the font size of a particular element, don't increase it by 1 or 2 points. Increase it by 10. Here's a nice test: take a screenshot of your website or layout and make it 3 times smaller. Can you still see the main headline or call to action well? No? Make it bigger!

Get Inspired and Stay Thirsty My Friends Organized

This is not a new concept by any means, but it bears repeating: keep the right side of your brain engaged by regularly seeking great website designs, reading about design, sketching site layouts (or anything really) and more. Whenever I see a website I like, or even just a particular element of a site, I take a screenshot and archive it. I have been doing this for at least a year with the help of LittleSnapper. Be warned, the app is a little slow. I wish someone would make a better competing product. I would pay 100 for it.

Easy to use with their browser bookmarklet. LittleSnapper stays out of sight and saves the screenshots.

I have amassed over 700 screenshots so far. Not a day goes by that I don't archive something nice I see online. There is an app in the Mac App Store called Galleried which is the desktop app equivalent of browsing many CSS galleries and helps too.

Process

My typical site redesign process usually goes like this:

Get in the mindset of the target audience. Since this is your startup this probably won't involve much research as you are likely already the domain expert and ideal customer of your product. If not, checkout the Five W's of UX: Who, What, Where, When, and Why. Keep a clear cut use case in mind throughout the redesign.
Spend a few hours trying to formulate my thoughts about how the first step affects layout. Should it have one big call to action for a primary use case? Are there multiple needs and products that need to addressed? What will the hierarchy be like? What gets the most attention? Flip through the aforementioned screenshots I take everyday and find 5 or 6 layouts I admire most. It might not be overall layouts, but particular elements I like.

For example, these were some sites I had in mind when in the early stages of planning Notifo's layout. The key feature I liked from all these sites was strong header navigation. I always start with navigation, determine the primary call to action and accompanying graphic/illustration/video/et cetera. The rest seems to follow naturally.

The next step is either a few quick layout sketches with whatever I have on me — either my trusty Cambridge notepad and uniball Super Ink pen or UI Stencils pad — or straight to HTML/CSS. More often than not I start directly in HTML/CSS. This is a big point of contention for designers. There's a large camp of folks that start with mockups or wireframes with Photoshop, Mockingbird/Balsamiq, OmniGraffle and so on, and those that begin in markup. The points for starting with the former are that it's easier to change things on the fly and you're more open to trying radical changes that would usually require substantial markup changes. Kyle Neath of GitHub prefers a mixture of both methods: screenshot stuff, cut it up and tweak in Photoshop, then implement.

Little known fact: the Ballmer peak phenomenon doesn't only apply to coding, it works with design too. That explains the two buck chuck.

I sketch 2 or 3 simple layout variants on a notepad, no more than 20 minutes, then go straight to markup. I setup Sass, import my mixins, a reset and get to work. Once a basic semblance of a website is up I actually do a lot of design tinkering in Chrome Dev Tools. I used to staunchly prefer Firebug but webkit and Chrome Dev Tools have come a very long way.
And then I take more screenshots of the Chrome Dev Tools-edited variations I like. I probably had 10 variations before I went with the one I liked for Notifo.
I tend to start with grayscale then tinker with color after I have the visual hierarchy down. I use xScope to help align anything and everything. It's perfect for quickly measuring space between elements (the red lines and measurements in the first image in this post is xScope).

One such work in progress/tinkering with chrome dev tools screenshot. I had just started to add color and texture to the header. Up until then it was all gray. Not really worrying about copy just yet.

Color adjustments and typography tweaks usually continue through to the very last minute. I'm always experimenting to see what it would look like with other tones, hues and font stacks.
Most work up until now has been for the homepage. Mentally prepare a sort of style guide — modules or patterns that will be used throughout the site. Classes to use for various sidebar elements, secondary navigation and so on. Update layout to work for content pages and style one-off pages like login, signup and a tour or benefits page.
Ask around for feedback and incorporate changes.

For smaller sites like Pic A Fight I skip all this and just wing it in HTML/CSS. On the other hand sites like Skribit have several layouts — i.e. the homepage structure was completely different to the structure used on logged-in user pages, so there's some extra work there.

Required Reading

While I could easily recommend many great design books, such as "Universal Principles of Design" and Norman's classic "The Design of Everyday Things", I'll start with some of what I consider to be the essentials for web and graphic design.

Coders that get stumped usually do something non-code related for a while and come back to see that the code gremlins have fixed their problem or going for a walk helped them think outside the box. Something similar applies for design. Keep your brain active by constantly seeking new sources of inspiration and creativity. I got a Wacom tablet to doodle in Illustrator and found that helps with idea generation a bunch. Yes, this is a long caption.

Read the Non-Designer's Design Book and learn about basic color theory and C.R.A.P. — Contrast, Repetition, Alignment and Proximity. Cool colors like blue recede while warm colors like orange seem to move toward the viewer.

For example on Notifo I used a tint of orange and analogous colors for the foreground and call to action, respectively, with complementary blue as the background. Learn about color complements and analogous colors; they are used most often and absolutely come in handy when doing the most daunting task for new designers, picking colors.

Mark Boulton's A Practical Guide to Designing for the Web is fantastic. I purchased the PDF to help support Mark, but a free online version is available as well. There are some sections in the book about how to get started freelancing, business plan stuff, dealing with client briefs and so on, but you can skip that. You're already well on your way with your startup.

If you were going to only go with one design book, this would be it. Mark covers it all: type classification, typesetting, everything about color (with site examples), color as emotion, designing without color, using and not using grids, composition basics including lead room and movement¹. It makes for a fairly quick read. Knock it out on a lazy analog Sunday and achieve design enlightenment.

An old design class homework assignment of mine in Adobe InDesign. Reminds me of my PageMaker 6.0 days on high school yearbook staff.

The Elements of Typographic Style by Robert Bringhurst is widely considered to be one of the great works discussing typography but it is mainly concerned with print. Fortunately Richard Rutter and Steve Marshall have adapted Bringhurt's work vis-a-vis the web. The Elements of Typographic Style Applied to the Web is a great foundation in typography for the web, including various CSS snippets throughout. For example, never use line-height with absolute units as that can actually result in negative leading on browser font-size increases. Use a unit-less value² greater than 1.4 to keep leading proportional to text size.

More Homework

Get a Typekit account and rigorously browse through fonts. Take note of their organization structure. Learn about font stacks. Try out some fonts on a site of yours. Make sure you set fallback fonts. Experiment. Learn about lettering.js. Aim for contrast while avoiding conflict. Play with font size, weight, structure, form, direction and color. Typography is easily one of the most overlooked aspects of design for new web designers. It makes a huge difference and is worth exploring. Great designers treat text as UI has always been Cameron Moll's mantra.

A design is in conflict when you set two or more typefaces on the same page that are similar — not really different and not really the same. [...] When you put two faces together that look too much alike without really being so, most of the time it looks like a mistake. The problem is in the similarities because the similarities conflict.
Robin Williams, The Non-Designer's Design Book

Briefly read up on the Gestalt Principles as they refer to user interface design: proximity, similarity, good continuation, closure, common fate, past experience, figure & ground. And Fitts' Law too. Then find out what UX really means.

But Stammy, we launch in one week!!?!111

Yikes. In that case, here are a few pointers:

Nothing in this list matters if you have shitty marketing copy. Run your copy through a fine-tooth comb. Then do it again. Sell people on benefits, not features. How long has your site/service/app been around? Will you be around in a year? Tell me about your team (I want an about page with mugshots! ³). Who are your current customers and how do they use it? How can I trust you with my info? Can you share any interesting usage/et cetera numbers?
Buy a nice set of icons and use sparingly. If I see yet another site using Silk icon's I'm going to go crazy. Try Picons, Pictos or Helveticons.
Everything that can be clicked needs to have a hover state and preferably an action state as well. Feedback is important in good interface design. LoVe HAte: link, visited, hover, active

A button I added two states to for Skribit's (my first startup) Twitter integration.. feedback galore!

If it can be aligned, it should be aligned.
When selecting colors for gradients in Photoshop, keep in mind that adding black (shade) or white (tint) to a hue (pure color) desaturates it. Not always a bad thing per se but it often makes for some muddled colors. Spice it up by trying different blend modes.
Use complementary or analogous colors to start and don't have more than 2 dominant colors. There are many exceptions to this when you get better. For now, find some palettes on ColourLovers or pick tints/shades from 0to255.
Textures! Download tileables or make your own grain, fabric or other such texture and use as a transparent, repeating background for large elements that would otherwise just be solid colors. But keep it subtle! The texture should only be perceivable when looking closely, not when 3 feet away from the computer. Also make sure that your texture goes with the theme of your design. A rust texture doesn't play too well with your futuristic iPhone app landing page. That can conjure up some cognitive dissonance. Your app is telling me it's the new hotness while your rust background texture is telling me it's old and busted⁴. Similar issues can arise with picking fonts that don't go with the mood of your site.
"Always adjust opacity. Nothing is totally black or white, dark or bright. A semi-transparent black or white line, glow, shadow or shape goes a long way." -Mike Rundle
Put non-essential links (anything that doesn't help new user signup conversion) in the footer. That's the first place users go when they know what they're looking for. Regulars in the footer include a link to a contact page, about, blog, and sometimes sitemap. Available yet out of the way.
Plain edges are boring. Add a subtle 1px inner line slightly lighter than the background if dark. Use rgba(255,255,255, [value from 0-1]).
Not quite sure how to style a particular element? Browse through UI-Patterns.
More white space. A good rule of thumb is that your padding and margin should be roughly equivalent to the font size used near that element.
Do you have a definitive call to action on your homepage?
Aid gestalt proximity and closure by grouping related items together with light bounding boxes or borders.
Have a long list of elements? Zebra-ify them and use alternating and subtle background colors.
Putting padding on your form inputs! Tooltips or extra description for non-standard fields. Style :focus too.
Avoid having more than three levels of boxes inside of boxes — especially if they all have drop shadow and borders, they tend to make a bad effect on the bottom when you see 3 chunks of lines.
Is the largest element or headline on your homepage the most important thing? Make sure that's what you want them to see first.
Finally, you don't have to fill up all of your available space!

And if you have an extra minute to spare before launch, setup Optimizely⁵. Start playing with some simple A/B testing on your homepage. Yeah I know A/B testing sounds scary at first. Optimizely makes it easy, just give it a shot.

Try New Things

While it's not quite the best strategy for my inbox, whenever I see a new site or service launching I readily toss in my email so I can be sure to tinker with it first thing when it comes out. I get to experience new layouts, designs and good UX almost every week by doing this. My co-founder, Chad, is the same way when a new API comes out and must tinker with it.

Most of what I described in this post is about design, not user experience or usability. Your site can be sexy and pixel perfect but if the flow for a user to complete a specified task is unintuitive and requires too many steps, it makes for a poor experience. Likewise well-researched information architecture (layman's: the organization and labeling of your site's sections and pages) is crucial. UX is a field I'm just diving into. Check back in 10 years for my definitive UX how to guide. Probably best if you subscribe. :)

In the meantime, checkout 52 Weeks of UX.

More books..

For those that want a massive list of good design reading, indulge below. I've only read or skimmed through about half and heard good things about the rest. You'll probably want to start with Steve Krug's work. Much of the rest is not quite geared for the web but helps paint a bigger picture about design as whole.

Envisioning Information by Edward Tufte
The Elements of User Experience by Jesse James Garrett
Don't Make Me Think by Steve Krug
Rocket Surgery Made Easy by Steve Krug
User Interface Design for Programmers by Joel Spolsky
Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell
The Nature & Aesthetics of Design by David Pye
Designing for the Digital Age: How to Create Human-Centered Products and Services by Kim Goodwin
The Humane Interface: New Directions for Designing Interactive Systems by Jef Raskin
The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity by Alan Cooper
About Face 3: The Essentials of Interaction Design by Alan Cooper
The Smashing Book by Smashing Magazine
The Web Designer's Idea Book #2 by Patrick McNeil (great for inspiration)
Designing Interactions by Bill Moggridge
The Information Design Handbook by Jenn Visocky O'Grady
Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation by Tim Brown
The Art of Innovation Lessons in Creativity from IDEO, America's Leading Design Firm by Tom Kelley
Thoughtless Acts?: Observations on Intuitive Design by Jane Fulton Suri and Ideo

Thoughts?

Drop me a comment below. This post was very much a raw brain dump. There are many facets to design, especially ones I admittedly have no clue about and am learning, that I couldn't get much deeper than this without making it a 10 part series. Chad says I should. Maybe I will after my secret redesign and UX challenge starting this month. Thanks for reading.

Footnotes

¹ I can't stress enough how important this is! I very much dislike when sites have screenshots facing or angled the wrong direction. The subject of any photo or image can draw the reader where to look next.
² Aside from z-index, line-height is the only CSS property that can go unit-less
³ I want to know you and your company's story. This is a chance to make an emotional connection with the prospective customer. Lure them in so you don't have to waste your time with I N C E P T I O N later! Win.
⁴ MIB reference for 1000 Trebek. Did you know they're filming MIB 3? Crazy.
⁵ Full disclosure: Pete, who you can read about from the Optimizely about page (see footnote ³), once bought me a grande iced tea at a Starbucks on Van Ness.

Disclosure: some book links use my Amazon associates code because I'm broke as a joke.

Enjoy this post? Click through and leave a comment. It will make my day. Crash Course: Design for Startups

Ultimate SEO Guide to Duplicate Content

2011-04-06T17:24:58-07:00

David Whitehouse has a great SEO guide talking about how to deal with duplicate content on your site. I consider this a must read for anyone that deals with websites and online publishing. Anyone who knows me knows that I'm anal about duplicate content and will preach about 301s and canonical URLs until the end of time.

In a nutshell: no particular public resource, article or page on your website should be accessible via more than one unique URL. Make sure your site 301's to either www or no-www, pick one and stick with it. I love no-www. Unless you have to use an Amazon load balancer that requires www, then no-www should also be your pick.

David's post goes into more detail so there's no point for me to rehash it here. Do yourself a huge favor and make sure you abide by these best practices.

And while I'm on the subject of SEO, I thought I should mention that my friend Evan Bailyn just published a book: Outsmarting Google: SEO Secrets to Winning New Business. I received my copy today but have yet to read through it. Between that, Gary Vaynerchuk's The Thank You Economy, Bargaining for Advantage and some design books, I have lots of reading (and not enough time) cut out for me.

Enjoy this post? Click through and leave a comment. It will make my day. Ultimate SEO Guide to Duplicate Content

PaulStamatiou.com - Tech News, Reviews and Guides

Simplify.

Developing a responsive, Retina-friendly site (Part 2)

Going HiDPI

What about icons?

Don't forget the Retina favicon!

Responsive Images

Brief History of Responsive Images

Where are we now?

<picture> the future of responsive images

I'm using foresight.js for now

On-the-fly image resizing and caching with imgix

Speeding up my photo posting flow

What's next with images?

Let me know what you think!

My Setup

Who are you, and what do you do?

What hardware do you use?

And what software?

What would be your dream setup?

Thoughts?

Developing a responsive, Retina-friendly site (Part 1)

Jekyll + Rack on Heroku

grunt watches over

Search

Getting Responsive

Responsive Setup

WTF are Media Queries!?

Breakpoints 101

Working with Media Queries

It's all relative (why you should use ems for breakpoints)

Optimizing your media queries

How do I execute JavaScript for certain media query breakpoints?

Responsive Design Testing

Testing with Adobe Edge Inspect

Responsive Text with viewport-percentage length units

300ms of doom

Enable :active link states

Twitter Cards in yo' <head>

Share this post :) Part 3 coming soon

Joining Twitter

We're hiring

What about Picplum?

The Office

Designing a responsive, Retina-friendly site

Mobile

Picture Perfect

The Retina Revolution

Design

Planning Mobile First RWD

Where to begin with visual design?

Keeping track of iterations

The Sandboxed Cover Photo

I've got the blues

Not all displays are alike

Serifs.. on the web?!?

Photo Layout Ideation

</design>

Share this post :) Part 2 coming soon

Twitter Review: New Gmail iPhone app

The Verdict

Culture

How do you attract those Jobsian A-players?

What about small startups?

My TechCrunch Post for First-time Startup Entrepreneurs

Browser sync is the killer app

My First Hackintosh

Process

Thoughts?

The Life of a Startup in Commits

Inside Votizen

Votizen Specs

Votizen 101

The Office

Q&A — Design and Challenges

Q&A — The Stack

The Culture

If you liked this..

Footnotes

On Keeping Busy and Staying Sane

`<picture>` the future of responsive images

`grunt` watches over

It's all relative (why you should use `em`s for breakpoints)

`300ms` of doom

Enable `:active` link states

Twitter Cards in yo' `<head>`