Reducing Churn in Subscription Services

You’ve probably heard by now that we’ve launched a learning community for passionate Rails developers called Prime.

Since Prime is a subscription service, one of metrics we’re interested in is churn, defined as the percentage of total customers who cancel. Over the last 30 days, Prime’s churn has been 18%.

Estimates of what a “good” churn is vary. One broad survey of SaaS companies with less than $10M in revenues showed a median churn of 20%, while some blog posts insist that anything over 8% should be panic-inducing.

To gain some perspective and get advice, I reached out to a friend and former podcast guest, Brennan Dunn.

Brennan is creator of a successful SaaS app called Planscope, author of several excellent ebooks, and overall “good at making money on the internet” kind of guy.

Below, you’ll find a recording of our 40-minute chat. In it, we dig into Prime’s current stats (including subscriber count and revenue growth), and Brennan’s suggestions for how to improve the site. What started off as recommendations for reducing churn turned into a broader discussion of how to position the entire service. If you run a subscription service of your own, you’ll likely learn a thing or two from Brennan’s battle-tested advice.

Check it out!

Direct download.

If our discussion left you with further questions for Brennan, leave them in the comments below and perhaps we can convince him to respond.

Quick start your Bourbon and Neat

As a designer, initializing a new project with dependencies, gems and general command line head-scratching can be a hassle, especially if you just want to get going with the actual designing and front-end coding.

thoughtbot built the Sass mixin libraries Bourbon and Neat to make the front-end coding consistent, fast and more fun. To have you focus on the design rather than vendor prefixes, re-inventions of the wheel or breaking grids.

Although these libraries are fairly simple to install and use, the screencasts below might make the transition into taking advantage of the Bourbon and Neat mixins even smoother. Sometimes you just want to start the car and drive without having to go through every part of the motor, so if you are a visual learner you may enjoy these screencast tutorials:

Installing Bourbon for a non-rails project

Installing Neat for a non-rails project

Installing Bourbon for a rails project

Installing Neat for a rails project

To learn more about what Bourbon and Neat can do, go here for Bourbon and here for Neat.

Version 1.0 of Bourbon Neat, a Sass-based responsive grid framework

When we released Neat—a semantic grid framework built on top of Sass and Bourbon—earlier this fall, it was welcomed with great enthusiasm in the Sass community. Today I’m pleased to announce that Neat is finally out of the beta, introducing new responsive features, a visual grid, and better support for non-Rails projects.

Responsive Web Design

The breakpoint() mixin becomes media() in Neat 1.0 in order to keep the syntax as close to CSS3 as possible.The update also introduces new-breakpoint(), a helper function that you can use to define new media contexts and use them throughout your project.

A media context is comprised of a width breakpoint and an optional total column count that would redefine the grid. For instance, using a four-column grid for mobile devices would involve defining a new media context with a max-width of 480px and a grid column count of 4, like so:

$mobile: new-breakpoint(max-width 480px 4);

Once defined, you can use the $mobile context throughout your project using the media() mixin:

div {
  height: 500px;

  @include media($mobile) {
    // All layout mixins in this context will use a base grid of 4 columns
    height: 100px;
  }
}

Which would output the following CSS:

div {
  height: 500px;
}

@media screen and (max-width: 480px) {
  div {
    height: 100px;
  }
}

Additionally, you can now use both min-width and max-width in the same context:

$tablet: new-breakpoint(min-width 481px max-width 991px 8); // Use an 8 column grid on tablets

Keep in mind that each call of the media() mixin would result in a separate @media block in the CSS output, a Sass limitation that is still being actively discussed.

Visual Grid

Due to popular demand, we’ve baked in a pure-Sass visual grid in this milestone release. You can now display the underlying grid either as a background or as an overlay, and even change its color and opacity to better fit your content. Add the following line in your Neat settings to turn the visual grid on:

$visual-grid: true;

You can then change its look by overriding the default variables:

$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;

Bonus: If you use new-breakpoint() to change the base grid, the visual grid will automatically follow. You’re welcome.

Non-Rails Workflow

If you are planning to use Neat on a non-Rails project, you’re in for some good news. Neat 1.0 comes with a command line interface that allows you to install, update and remove the framework without hassle.

Start off by installing the gem in your Ruby environment:

gem install neat

Then run the neat install command in your project Sass folder:

cd your-project/your-sass-folder
neat install

To update Neat:

gem update neat
cd your-project/your-sass-folder
neat update

Make sure you don’t alter any internal Neat files as any changes would be overridden when you run this command. Lastly, you can remove Neat either by deleting the folder or by running neat remove.

Minutiae

This update also comes with a few bug fixes, namely the compatibility between nested columns and the shift() mixin, and a new _neat-helpers.scss file that you can use to access helper functions without having to import the whole framework.

Your Turn

The only thing we’re missing at this point is your feedback, so give Neat a spin and let us know what you think through comments, tweets and pull requests.

Introducing Bourbon Neat, a Sass-based responsive grid framework

Bourbon Neat—or Neat for short—is a lightweight, open source fluid grid framework built on top of Sass and Bourbon with an emphasis on flexibility and ease of use. The framework comes with sensible defaults and useful mixins to help get both developers and designers up and running in minutes.

For instance, applying a grid-based layout to this markup…

<body>
 <section class="blog">
  <aside></aside>
  <article></article>
 </section>
</body>

…is only two mixins away:

section.blog {
  @include outer-container;

  aside {
    @include span-columns(4);
  }

  article {
    @include span-columns(8);
  }
}

And the result would be:

Here are some live examples of what you can build with Neat.

Why another grid framework?

We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute the HTML with presentation classes and extra wrapping divs. It is less explicit—as in requires fewer mixins—than most other Sass-based frameworks and comes with built-in table-cell layout support.

The main motivation behind Neat is allowing anyone to build fluid, entirely semantic grid layouts without having to wade through hundreds of lines of documentation. We also believe that giving designers the ability to override the default behavior without hassle is key.

Getting Started

To start using Neat in one of your existing projects, place the /neat directory in your main stylesheets folder and make sure you have Bourbon installed. Import both mixin libraries in this order:

@import "bourbon/bourbon";
@import "neat/neat";

Although not required, you are welcome to override the default settings, namely $grid-columns and $max-width, by redefining them in your site-wide _variables.scss and importing it before Neat:

@import "bourbon/bourbon";
@import "variables";
@import "neat/neat";

Ruby Gem

For Rails apps, use the gem instead. In your Gemfile :

gem 'neat'

After running bundle install you will be able to use Bourbon and Neat together.

If you get this error:

Bundler could not find compatible versions for gem "sass"

Run:

bundle update sass

Within your application.css.scss file place the following:

@import "bourbon";
@import "neat";

Neat is fully responsive

Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. The breakpoint() mixin allows you to change the total number of columns in the grid for each media query. You can store these values in project-wide variables to DRY up your code:

$mobile: max-width 480px 4;

When used as a breakpoint() argument, $mobile instructs Neat to use a 4 column grid in mobile-size viewports:

.my-class {
  @include breakpoint($mobile) {
    @include span-columns(2);
  }
}

Would compile to:

@media screen and (max-width: 480px) {
  .my-class {
    display: block;
    float: left;
    margin-right: 7.42297%;
    width: 46.28851%; // 2 columns of the total 4
  }

  .my-class:last-child {
    margin-right: 0;
  }
}

Feel free to refer to the documentation for more on how to use breakpoint() and all the other mixins. Don’t forget to check out the examples for some inspiration.

Now go get Neat and build something awesome.