Practical Copywriting - GitHub CLI Teardown

If you don't know what GitHub is, well, you should. It is one of those tools that underlies all of our software-driven lives. When Marc Andreessen made his famous statement that "software is eating the world," he may have been talking about this little guy.

That new feature on that app you like that does that thing that makes you feel feelings - that was probably built using GitHub in one way or another.  If you don't care about that, let me just tell you that Microsoft bought GitHub in 2018 for $7.5 billion in stock. Cool. Now that I have set the stage, let's jump into the action. GitHub released their brand new CLI (command line interface) and with it, something I am personally more excited about, a new landing page. 🥳

As always, see the full page at the bottom of this post.

The way I see things...

When I look at a landing page, I look at four key areas.

• Audience Is there a clear audience and does the page speak to that audience?
• Copy Is the copy concise, engaging, and is there a consistent voice?
• Design Is the overall design functional, nice to look at, and accessible? How does it make me feel?
• Calls to action Are there clear CTAs that demand attention and do what they say they are going to do?

First impressions

People who are on cli.github.com know what GitHub is and know what a CLI is. Github is well aware of this fact (remember the $7.5B) and they do not waste precious moments of a human's short attention span with an explanation. In copywriting (and any communication) it is critical to have a clear understanding of your audience - that way you can create the most effective message.

The header "Take GitHub to the command line" is about as concise as it gets. I know exactly what this product is and who it is for.

Letters are just shapes

From a messaging standpoint, the subheading is well-written. It uses active voice and clear language, but is unnecessary given how utterly and completely the heading succeeds.

The subheading is important, however, because it adds nice visual hierarchy and bridges the bold white letters of the headline and the blueishy-purpleness of the CTA. It draws your eyes downward, and at that point you are so excited to smash that CTA the rest of the page doesn't even matter.

Mmh whatcha say

Moving below the subheading, the CTA is clear and doesn't force me to jump through any hoops. There are no fields to fill out and I am not directed to a page that sits between me and where I am trying to go. When I click "Download for Windows," that is exactly what happens.

"View installation instructions" is another example of GitHub knowing its audience.

Developers make it through the cold and lonely nights of winter consuming nothing but documentation, and if I click that link, guess what - just excellent documentation.

Out of order, sorry for the convenience

One interesting note on the top section of the page here is that the "Take GitHub to the command line" is actually an <h2>. The <h1> text is the small "GITHUB CLI" written above the headline. Why break the normal hierarchy? So the complete phrase "GITHUB CLI" is in their <h1> for SEO purposes. It is so you can find the site right at the top of your search, even if you use Lycos.

Sweet, sweet visual aides

This is a great piece of content. Everyone visiting this site knows what a CLI looks like and how it works, but this is GitHub CLI, this is going to change your life, and we can prove it.

I can't say for sure, but significant thought went into selecting these 8 commands to showcase on the landing page. There are 5x as many commands available, but these 8 were chosen because GitHub knows they matter. GitHub knows its audience. There is also another well-placed CTA that does exactly what I expect if I click on it.

We charge by the word

Perhaps the GitHub team forgets how well they know their audience when designing against a white background. Or, perhaps they felt they just didn't get the chance to write enough sentences and were looking for more work. If someone hasn't clicked download, view installation instructions, or view GitHub CLI commands yet, they probably aren't going to. They probably also don't understand or care about this buried copy. Also, really uncalled for, you know... pulling me out of dark mode like that.

So, what did we learn?

✔️ If you really know your audience, the rest is easy.
✔️ Text can be used very effectively as a visual design element.
✔️ Clear CTAs that do what they say are a powerful way to boost conversion.
✔️ Sometimes the h1 shouldn't be the headline.
✔️ Visual aides and demos are a powerful tool.

What do you think?

Reach out on twitter and let me know what you think.

Check out the full landing page here.