Building a Better BrentOzar.com Blog

I’m so proud. My baby’s all grown up now.  When I started BrentOzar.com more than ten years ago, I never would have dreamed it’d turn into a consulting company, but here we are.  Getting from Point A to Point B is hard as hell, though, so today I’ll give you a peek behind the scenes at some of the stuff we’ve been up to lately.

Adding Pull Quotes

I love to dress up – my blog posts, that is.  Pictures are good, but for years, I’ve wanted to do pull quotes: standalone sentences that pop out visually from the rest of the text.  They grab a reader’s attention, show off your fancy punchlines, and save them from the tedious monotony of your boring writing.  Some posts just don’t lend themselves well to pictures, and sometimes you’re just really proud of a particular line.  (No, I’m not proud of most of the lines I write here.  In fact, I’m going to go cower in shame right now.)

There’s a really good WordPress plugin for pull quotes, but it doesn’t work for people who subscribe to the blog via RSS or email.  We’ve got thousands of RSS and email subscribers, so that wasn’t good enough.

Or at least, mine.Out of nowhere, Kendra Little (b|t) emailed a picture of a magazine article to discuss the typography layout, and it hit me – I could use pictures of text instead.  Hard-core web designers will point out that using pictures of text is very bad form: the text isn’t searchable, doesn’t work with screen readers, and kills kittens.  I’m not really a cat guy, and the text doesn’t really need to be searchable, and the results are just so damn gorgeous.

To create image-based pull quotes, fire up your picture editor of choice (Photoshop, Gimp, or MS Paint for the Access guys) and lay out your text.  Save it as a PNG (gets you image compression with minimal loss) and upload it just like any other picture you’d use in your blog editor.  Presto, beautiful pull quotes.

With this method, you can use any font and layout without the hassles of CSS and web-friendly fonts.

Refining Past Posts and Combining Series

Through a lot of careful analysis, I’ve learned that multi-part series posts just don’t work well over time: people randomly stumble upon a single article in the series, but they don’t start at Part 1 and click all the way through the end. I fixed this by combining the posts: I take the Part 1 post, merge the other blog posts into it with copy/paste (yes, I plagiarize my own work) and turn Part 1 into a comprehensive, long post that covers the subject start to finish.

Between combining posts and refining & expanding content as described in my post how to find buried treasure with Google Analytics, I’ve put a lot of work into some of my past stuff. A few examples include:

On some of those pages, I went so far as to embed a contact-us form with Contact Form 7 directly on the page.  This represents another step in the evolution of BrentOzar.com.  In the beginning, I begged people to contact me.  Years later, I ripped out that wording because I was getting overwhelmed with homework questions, and just let people leave comments when they were really struggling.

These days, since we offer consulting services, we’re trying to gracefully offer help where we can.  If somebody has a question we can answer in 5 minutes or less, generally we just do it for free.  If it’s something that would take an hour of dialog, we need to bill for that.  The stuff in between is probably best handled on sites like StackOverflow.com and DBA.StackExchange.com.

Another Social Media Experiment

Social Media Buttons

We’d tried social media toolbars like Wibiya before, and I just wasn’t impressed.  Web site metrics didn’t improve (although we did get a big rush of Facebook fans) and the toolbar looked spammy.  However, with the launch of Google+ and Facebook Video Chat, we decided to give social media buttons another shot.  We added the Twitter, Facebook, and Google +1 buttons right under the post titles.

Did it work?  I’m not sure yet – this one’s too early to tell right now, but early results from Backtweets look positive.  I’ll keep an eye on the metrics and see if it matters.

Public List of GoCodes

When we work with clients, some issues pop up really frequently.  I constantly have to refer people back to certain posts.  Rather than trying to remember some obscure URL or hoping that an outside link service doesn’t go down, I used the WordPress GoCodes plugin to create my own list of useful short links.  This way, when someone wants to learn more about how to do backups, I can just say, “Go to BrentOzar.com/go/backup and I’ve got my best practices and posts on there.”

This set of specialty landing pages is something I’ll be putting more work into over time.  We write a lot about our favorite topics, and we need to group together our best past posts by topic into a single resource page per topic.

Added Author Info Section

BrentOzar.com has four authors now, but we kept getting confused readers complimenting me for a post that someone else wrote.  The sweet WP About Author plugin fixes that elegantly by adding the post’s author profile to the bottom of every blog post:

WP About Author Plugin Profile

It even works on the main page of the blog, and you can customize which pages show it.  On a single-author blog, you probably only want it on your single-post pages.  That way, when people arrive at your post via a Google search, they learn a little more about you and might remember you by name later.

The one drawback is that it doesn’t show up in the RSS feeds.  <sigh>  A blogger’s work is never done.

Previous Post
The Difficulty with Deadlocks
Next Post
Land a Dream DBA or Developer Job: Seven Questions to Ask

17 Comments. Leave new

  • Love WordPress. It was my first blogging platform, and I can’t wait to migrate our blog off of Confluence and back into its sweet, funky little CMS 🙂
    Amen to the pull quotes–back in my print mag days, we would spend a week finding the perfect pull, head and lead because these are the three things all readers will read.
    Regarding social sharing, so far my issues with the + button is that you can’t decide which circles you want to + it too, and if you’re anything like me, you have a bunch of wildly disparate circles.
    New blog design looks v. professional, btw!

    Reply
  • The image-based pull quotes idea is a neat concept but it’s a terrible method to use if you want pull quotes to be readable by search engines and disabled users. You should at least put the content of the pull quote in the alt attribute of the image tag.

    CSS-based pull quotes would be better for accessibility and probably easier to drop into a post. You’d just use a

    tag and give it a particular CSS class depending on how you want it to appear.

    You also mentioned wanting to use more fonts than the standard half-dozen “web fonts” that most sites use. Most browsers now support many more fonts via the @font-face CSS directive. Check out Google Web Fonts and Typekit.

    Reply
    • Howdy Brett! Yep, as I mentioned in the post:

      Hard-core web designers will point out that using pictures of text is very bad form: the text isn’t searchable, doesn’t work with screen readers, and kills kittens.

      And that would be you. 😉 Unfortunately, CSS doesn’t seem to work well in RSS readers, and since I’ve got thousands of RSS and email subscribers, I needed something that worked well for them. Good idea though!

      Reply
      • Sorry for the gnashing of teeth – I missed your bit about us hard-core folks. 😛

        You’re right that RSS readers don’t really respect CSS. There must be a good way to mark up pull quotes in HTML so that RSS readers will display them correctly, though. Maybe you could play around with the HTML5 aside tag?

        But if that doesn’t work, like Jeremiah said, the alt attribute is your friend and will do much to prevent future teeth gnashery.

        Reply
    • We could also use W3C approved ALT attribute which helps gain search engine mojo and can deliver witty repartee to the visually impaired.

      Reply
  • jonmcrawford
    July 19, 2011 9:48 am

    Great post, Jeremiah.

    Reply
  • Geesh Brent,

    I love your blog and since I’ve implemented most of your suggestions on mine, (which I will omit here so you don’t think I’m trying to publize my Access blog, or I just did?), I’m also a fan.

    Do I have to endure the Access jokes and puns? Yes, but my quest lives on to convince SQL guys Access does have a place in small businesses.

    Thanks for the great tips, I’m going to start coming up with quips about SQL guys on my blog soon.

    Juan

    Reply
  • I noticed the author section last month and I knew immediately what problem you were trying to address.

    Great post Jeremiah! Keep it up.

    Reply
  • You could have a plugin that enhances your wordpress editor to generate the images for you.

    With regards the series merging, that’s a good point and I like your solution to the problem. Perhaps if you are doing that a long time after the articles are published you might want to redirect the old pages to your new one?

    Some good tips here, thanks

    Reply
  • Shawn Melton
    July 19, 2011 11:33 am

    Regarding the Author Info section, it was a nice touch. To just let you know though with Google Reader it does tell you who wrote the post under the title. I don’t know if you set it to do that or not.

    That is usually how I tell, other than the fact you each write differently so I have come to recognize which post was written by whom.

    Reply
    • Here’s my suggested algorithm to determine author:

      If begins with “You need to poop” then author=Brent

      If it makes you snort whatever you’re drinking from your nose then author =Tim

      If it could appear in an encyclopedia in the show Futurama author=Jeremiah

      If, it uses, lots, of, commas, then author, =, Kendra

      Reply
  • Brian Tkatch
    July 20, 2011 7:47 am

    Great stuff Brent. I can hear you smiling the write way.

    For us RSS readers, you could put initials at the beginning of the post. Then your BO will give you away.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu
{"cart_token":"","hash":"","cart_data":""}