Anatomy of a Blog Redesign – 10 Best Practices from Marketo

BLOG FEATURED IMAGE

By:

Posted: May 13, 2013 | Content Marketing

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 written-word 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 J. 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!

Related Resources

  • http://about.me/decaussin Matt de Caussin

    Jon and Dayna – Amazing job on revamping the Marketo blog. It’s bold, visually brilliant, and just plain smart. I particularly like how intuitive the ‘multiple pathways to social’ are. Bravo!

  • http://twitter.com/CoolHandLukette Jennifer Vodvarka

    Just a note…the subscribe pop-up lightbox on Chrome blacked out my screen and I couldn’t read any content (and the pop up wasn’t visible). I didn’t resolve this issue until I maximized by browser window and the whole popup appeared so I could close it and resume my browsing, and this fix I found by accident. I think the popup is wider than the page design, which is an unfixed width, so there was no visual clue (horizontal scroll bar) to indicate there was an issue. Working on a smaller laptop, I have screen resolution limits, and I don’t maximize everything, so you may want to take a look at that with a designer to see if there’s a quick fix if you think this could affect more people. I was frustrated because I couldn’t figure out how to get to the content!

  • http://blog.marketo.com/ Jon Miller

    Thanks for the kudos! We’ll do some A/B testing on the value of anchoring the subscribe box versus letting it scroll. I hear your point!

  • http://blog.marketo.com/ Jon Miller

    Hi Jennifer — I think we have this fixed now, thanks for pointing it out. If anyone else seems a similar problem please let me know.

  • http://twitter.com/CoolHandLukette Jennifer Vodvarka

    Wow Jon, that was quick! Thanks! You get a gold star! Please note, I said “star,” not “car.” I ain’t Oprah.

  • Susan McHugh

    Hi – Thank you for wonderful suggestions. Debbie Downer alert: When I used the (tweet this) in the author section – genious! – I was unable to return to the page of the blog but had to back out and go back in via the email. We are in the process of packaging content and your suggestions are helpful.

Jon (@jonmiller) leads Marketo's product marketing, strategy, and content marketing initiatives. He is the author of multiple Definitive Guides including Marketing Automation, Engaging Email Marketing, and Marketing Metrics & Analytics. In 2010, The CMO Institute named Jon a Top 10 CMO for companies under $250 million revenue. Jon holds a bachelor’s degree in physics from Harvard College and has an MBA from the Stanford Graduate School of Business.

Read Jon's Blogs

The @Marketo blog generates 400K visitors and almost $2 million in revenue each year, says @jonmiller

Follow Us

Most Shared

true colors feat

True Colors: What Your Brand Colors Say About Your Business [Infographic]

Visual Gold 2

Visual Gold! The New Revolution of Content Marketing [Infographic]

Instagram Infographic

What Your Instagram Filter Says About You [Infographic]

killingtimetop

Killing Time: How to Destroy Your Productivity [Infographic]

Evolution

The Evolution of Modern Marketing Automation [Infographic]

Top Articles

Tighten your belt!

7 Strategies for B2B Marketing during a Recession: The Definitive Guide

Evolution

The Evolution of Modern Marketing Automation [Infographic]

promo_top_b2b_blog_med

Big List of B2B Marketing Blogs

The ROI of Paid Social Media Advertising

The ROI of Paid Social Media Ads

100th blog post

Marketo’s 1,000th Blog Post: Our Modern Marketing Definition Revisited