Anatomy of a Blog Redesign – 10 Best Practices from Marketo

0
158

Share on LinkedIn

The Marketo Marketing Blog has long been one of Marketo’s most important and valuable marketing strategies. We started writing it in 2006 (here’s the first post) and have since published more than 950 articles. Our efforts have generated more than 27,000 inbound links plus 400,000 unique visitors and almost $2 million in directly attributed revenue each year (plus influence on much more).

The years since 2006 have brought changes in style and web technology, and I’m thrilled to announce that we just released an all new blog design that incorporates many of the latest and greatest best practices. If you are reading this post on our site, you’re seeing the new design; if you are reading it over RSS, please come on over to see the new design for yourself!

This post shares 10 best practices for blog design that we have incorporated into our new blog, and why.

The Old Design

But first, here’s what the old design looked like. It wasn’t terrible, but at the same time it left something to be desired in terms of visual appeal as well as usefulness for driving to our key goals.

old-blog-design


10 Principles for Blog Design

Here are the principles we’ve incorporated into the new design.

  1. Highly visual content design
  2. Clear conversion goals that don’t get in the way of reader experience
  3. Multiple paths to social
  4. Give them Tweetables
  5. Social validation
  6. Fast page load
  7. Great mobile experience
  8. Merchandise our best content
  9. Connect content to authors
  10. Cherish guest posts

Highly visual content design

At Marketo, we’ve been using “content marketing” since before the strategy even had a name, and since the beginning our blog has been at the center. As content becomes more and more popular, however, our readers are becoming overwhelmed with words. That’s why visual content is becoming an important way to engage – especially with our audience of marketing professionals.

I believe this idea extends to the design of the content as well; in other words, a good visual design can make “copy-pasta” content stand out. (Yes, even quant-heads like me are attracted to a shiny visual design.) Many sites are embracing the use of bold images and visuals to merchandise their content, including the new Facebook Timeline, LinkedIn Today, and Mashable.

We took inspiration from all these sources, and as a result, the new Marketo Blog design is highly visual, emphasizing images and headlines over lots of copy. Here’s what the homepage looks like:

new-blog-design

Clear conversion goals that don’t get in the way of reader experience

The #1 goal for the blog has been and will always be to serve as a source of thought leadership and expertise for our target audience. It’s imperative that our content speaks for itself, and that we never put conversion ahead of this primary purpose. At the same time, we do want the blog to help us achieve measurable goals, so we specified three main conversion goals at the beginning of our design effort:

  1. Build our opt-in email list
  2. Generate leads
  3. Build our social networks

I’ll talk about the first two here, and the third in the next point (multiple paths to social).

Build the opt-in list

To drive this, we amped up the design and attractiveness of the offer to subscribe. Here’s what it looks like before and after; it doesn’t take a conversion genius to assume that this new one will perform better (though our testing will prove or disprove).

subscribe-box-before-and-after

We also decided to use a lightbox pop-up for the Subscribe box. Why? Test after test shows these things just plain work.

blog-lightbox-subscribe

Now here’s the cool part. Because we’re using the Marketo product to keep track of who has subscribed to our blog AND because we’ve integrated the blog design with Marketo, the subscribe box ONLY shows up for folks who have not yet subscribed. This applies to the lightbox pop-up as well as the box on each page. That way, our subscribers can focus on the content, not our conversion goal. Neat, huh?

Generate leads

We wanted to avoid presenting traditional conversion offers to our readers, since in our experience we find that people have “banner blindness” – meaning they literally ignore the ads.

On the other hand, we saw with click tracking that when people get to the bottom of the post, they often ask “what should I read next”. So, we created a section at the end of each post called “Related Resources”. This presents three contextually relevant pieces of our premium content from the Marketing Resource Center on our main website.

related-resources

Again leveraging the integration between Marketo and the website, if the reader is already a known lead, they are simply presented with a download button. But if they are unknown, then there will be a form to fill out to download this premium content.

resource-center-forms


Multiple paths to social

We also had a clear goal to encourage social with the blog. We identified three distinct social paths for social, illustrated below.

  1. Sharing the blog homepage and category pages (blue). This helps new readers to find us, improves the SEO for each of those pages, and incidentally helps with our AdAge Power150 ranking.
  2. Share individual posts (yellow). This helps our content to spread with social amplification.
  3. Follow the company on various networks (pink). This builds our reach and helps us maintain a multi-channel connection over time. An engaged Facebook connection can be just as valuable as an opt-in subscriber.
social-follow-us

Give them Tweetables

Conversion experts Bryan & Jeffrey Eisenberg suggested that we make it easy for our readers to “sound smart” by crafting ready-to-go tweets for each post. This is yet another great way to encourage readers to help spread the word about our content.]

tweetables


Social validation

Robert Cialdini, author of Influence: The Psychology of Persuasion writes, that “When we are uncertain about what to do we automatically look to other people to guide us. And we do this automatically and unconsciously.” This is called social validation, and we believe it can play an important role in helping buyers find and trust our content. See a post with 1,000 shares? It just seems more credible than one with 20 shares. So, we made it easy to see exactly how many shares each post gets.

social-shares

Fast page load

Adding all these social sharing buttons including share counts can really slow down your page, since each button ends up being a call to the underlying social network. So instead, we built a process that stores the share counts locally (updating every few minutes). This lets us load our page much faster than the other method. That’s why each post shows the total number of shares, but if you mouse-over you can see the specific details.

fast-page-load

Great mobile experience

Our old site did not present a good experience for mobile visitors. Mobile visits made up 6% of the traffic, but bounce rate was 4% higher and average visit duration for mobile visitors was a whopping 280% shorter.

So, we used responsive design to make the experience great for our mobile visitors. Here’s what it looks like on iPhone (also looks great in iPad). Mobile visitors can even subscribe by clicking on the email icon at the top.

iphone-blog-design

Merchandise our best content

Since 75% of our visitors are new to the blog, we are faced with the challenge of guiding new visitors to additional posts they may want to read (or that we want them to read). This is especially important since many of our first-time visitors come from marketing infographics or other popular posts that may be less “straight up the center” than our core editorial content.

We do this in a variety of ways:

  • Placing three popular or hot posts in the top section of the blog home page (two for non-subscribers, since the subscribe box takes up a slot)
  • Rich, visual menus highlighting the top content in each category (see below)
  • Sidebars, one showing the most shared posts, the other showing editorially-controlled top posts
merchandise-best-content

Connect content to authors

Blogs are written by people, not companies (tweet this). So one of the things I personally hate about blogs is when I can’t easily find who the author is, or their key social handles. That’s why this new design highlights the author’s picture, bio, and social networks in a much more prominent way than our old design. We also use Google+ Authorship tags to help tie our authors to their content in the search engines. Thanks to the OpenView Venture Partners blog for inspiration here.

blog-author-profile


Cherish guest posts

Lastly, we encourage our employees and community to contribute posts to our blog, and we wanted these guest authors to have the same exposure as our regular authors. I hate it when one of my articles is posted to another site, but someone else is listed as the author. So, we made it so guest authors also get rich bios and profiles. As a side note, this required us to use an author image plug-in instead of Gravatar for our author bios.

Thank You

I’d like to say thank you to everyone who helped design and build our blog, including Davis Lee, Lynn-Kai Chao, Glen Lipka, and Carina Boo from Marketo for design and user experience, Nathan Brauer from Marketo and the team at Adair Creative for development; Dayna Rothman for managing the content; and Mike Tomita for project management.

Let us know what you think of the design, and how else we can make it better!

Republished with author's permission from original post.

Jon Miller
Jon leads strategy and execution for all aspects of marketing at Marketo and is a key architect of Marketo's hyper-efficient revenue engine (powered by Marketo's solutions, of course). In 21, he was named a Top 1 CMO for companies under $25 million revenue by The CMO Institute.

ADD YOUR COMMENT

Please use comments to add value to the discussion. Maximum one link to an educational blog post or article. We will NOT PUBLISH brief comments like "good post," comments that mainly promote links, or comments with links to companies, products, or services.

Please enter your comment!
Please enter your name here