It continues to amaze me how some of the design elements I now take so much for granted, are missing, hidden, or confusing on other blogs. If we assume the intent of a blogger is to share their writing with others, the apparent (although, I’m sure, accidental) pains some take to inhibit that sharing are comical, at best.

I recently updated the Twisted Nether Wiki with a new World of Warcraft blog. One of the items we request (so I don’t have to go hunting for it) is a link to the blog’s RSS feed. This particular blog was on blogspot.com, and the author stated she wasn’t using RSS yet. Of course, I know better: On every Blogger theme, down at the very bottom of the home page, is an RSS link: http://blogname.blogspot.com/feeds/posts/default. Somewhat hidden, true, but if you know where to find it…

Item 1: RSS Feed Link

Sure, almost every blog has one, but not all (by a long shot!) are easy to find. This is quite a simple thing to add to any blog (both wordpress.com and blogspot.com support more than the "bottom of the page" default; it’s quite easy to make it more visible).

Your RSS link should be at or near the top of your blog

Your RSS link should be near the top of your blog, definitely "above the fold" (that’s newspaper-speak for the part of your page a viewer sees when it first loads). My very strong recommendation is to place it no lower than immediately below the title of your blog or navigation bar, whichever is lower; in other words, at the very top of one of your sidebars. For example, my nav bar is immediately below my site banner, and my RSS feed links (for both RSS reader and email) are immediately below that. Some themes position the RSS button at the very top of the page; others, as part of the navigation bar. In fact, that’s the default position for Thesis.

You’ll note my RSS links are stylized to fit within the overall color and design of my blog, but that is by no means essential. In fact, sometimes I wonder if they blend in too well! The ubiquitous orange RSS symbol is now a web standard, and there’s not a thing wrong with it. But I’m sure you’ve seen all manner of stylizing, as well. One of my favorites is at Pike’s Aspect of the Hare, and is pictured to the right. If you know hers is primarily a blog devoted to Hunters in World of Warcraft, and if you know also that WoW Hunters use "traps" quite a bit, the awesomeness of the visual pun really hits home.

Want something unique for your blog? A quick search across the ‘net will reveal thousands of possibilities. The most important thing is to be sure you have that link. Oh, and while we’re at it: Be sure all RSS links point to the same place! I’ve found a lot of blogs with links to FeedBurner, but the blogger never redirected the default link. That generally takes a very small tweak to one of your theme files (index.php, footer.php, or header.php), but will ensure, if you’re using FeedBurner, you see a more accurate number of subscribers.

Item 2: Contact Link

Something that is harder to find on many blogs (because it flat-out isn’t there!) is an email link to the blogger, or a link to a contact page. Why is this important? A few days ago, I was visiting a friend’s blog and noticed she had two fairly prominent RSS links, one right above the other. On a hunch (because one was clearly a FeedBurner link, and the other looked like a theme default), I moused over both. Yep, two different links. It’s really not a huge deal: FeedBurner aggregates all feeds from a site pretty effectively. But stylistically, it’s probably something most of us would want to correct. After all, not all of our readers (in fact, probably not all bloggers) might know that either link will provide an equally robust RSS feed.

There will be times when a reader will want to interact with you…give them a contact point!

It was a pretty simple task to find the blogger’s contact page, fill in the short form and give her a head’s up. But there have been other times, when a more serious coding error was evident, that I couldn’t do that, and had to resort to commenting on a blog post to alert a blogger to an issue.

There will be times–perhaps not many, but at least a few–when a reader will want to interact with you outside the comments section of your posts. Give them that outlet! It can be an email link, a graphic that shows your email address (thereby reducing the chance for spam), or, as I have done, a contact form.

Item 3: Tell Your Readers About You

An "About" page tells readers why you are qualified to write about your subject.

There are a lot of people who are very reluctant to share personal information with strangers, whether over the Internet or otherwise. I certainly appreciate that. Your "About" page doesn’t need to be an autobiography. But it should describe you to the extent that it establishes your bona fides: Why are you qualified to talk about whatever it is you’re going to discuss on your blog?

Now don’t get hung up on the "qualifications" idea: A simple desire to write is plenty of qualification for many. But if you’re going to blog about how to play a holy priest in World of Warcraft, a static statement of your experience and other relevant factors isn’t too much to ask.

Many bloggers do this with a simple text widget in a sidebar, with a couple of sentences about who they are or why they’re blogging. Others (the minority, to be sure) provide a life story, résumé, and curriculum vitae! My own "About" page describes my gaming background, as well as some details of my academic and personal careers, concluding with a bit more personal information. I’m not concerned about "Internet stalkers" but I’m also not going to put my cellphone number out there (or my street address).

Share what you’re comfortable with, but try to put something out there to help your readers get to know you better.

Item 4: Provide a Search Box

This is a default in just about every blogging theme, regardless of platform.¹ Believe me, there will come a time when a reader–or you, yourself–will want to find something in your blog.

Give your readers tools to explore more of your blog!

For WordPress, there are plenty of search addons, but I’m pretty happy with the default function built in to the platform. Most addons do more in-depth indexing, so searches may be faster and results more robust. If you find your default isn’t meeting your needs, it’s a pretty easy task to implement a better solution.

The key is, give your readers the tools they need to explore more of your blog…and that is a perfect seque into:

Item 5: Organize Your Archives

I will be the first to admit, I am pretty bad at providing internal links in my articles. In fact, let’s be honest: I suck at it. Complete and epic failure: that’s me. However, I have provided you several ways to find stuff. First, of course, is the (currently MIA) search box. I also have a sitemap listed in the navigation bar. I have a calendar, to show you on what days I published stuff. I use categories (and fortunately for all of us, a lot fewer than I used to have!) for every article and tags for most articles.

I also have a tag cloud (which isn’t as comprehensive as I’d like, but there were aesthetic considerations at play in that area). But most importantly, I have a couple of handy drop-down boxes in the first sidebar. The first organizes all my posts by month, so if you know what you’re looking for was earlier this month, you can pull up a listing of everything I wrote in September. The second lists items by category, which is okay unless you’re looking for a generic WoW article or one on blogging. Hey…I never said it was perfect!

The point is, if you want to find something here that isn’t necessarily on the front page, I’ve given you a lot of tools to do that. Do the same for your readers, and they will love you for it!

So there are my five "must-haves" for blog design. Are there any you find fault with? What did I leave out that you believe is critical to a successful blog? Share your thoughts with us in the comments!

Friday Five: “Must-Have” Blog Design Elements is a post from: Kestrel's Aerie

 

Incidentally, all that subscriber stuff is not part of the header, nor is it part of the sidebars. Rather, it is embedded in Thesis theme’s Multimedia Box, which can be used for all sorts of neat things. At one time, I had the subscription links located "after the header" (but "before the sidebars"), which was fine, but I think this is more elegant (until I want to do something fancier with the multimedia box).

Okay…back on point. We have a nice RSS icon, a cute Twitter bird…and then, for the folks who prefer to subscribe via email…well, let’s just say the envelope is "plain." (Hey…I heard that! "Boring"? *sigh* Yeah, you’re right. It is boring!)

Now, this is where you come in. Well, some of you, maybe… I have Photoshop (PC version); I have Iris for the Mac. What I do not have, are mad skills. In fact, my skills are so bad, they make me mad. Yeah…they drive me nuts. Anyway…what I’m looking for is someone to take pity on me and either find or create a knock-out email icon for that spot. I can’t offer anything in return, except full credit and my thanks.

If you’re interested, the icon should have a height of 32 pixels (to match the RSS icon). I did see a pretty cool icon that took the "standard" orange RSS icon and replaced the curved white lines with the angled lines of an envelope…but I don’t want orange. Yes, blue would be nice. Very nice. Shiny like the RSS icon would be nice too.

While this isn’t strictly a contest, I’ll happily publish all the submissions, with full credit given to the submitter. (If it’s not your original artwork, please be sure your submission is in the public domain, and provide the artist’s info as well.) I’d certainly be willing to let the ‘winner’ write a guest post, if you like. Or feature some other original artwork here as well. I’m pretty easy that way.

Feel free to send any submissions to kestrelsaerie AT gmail dot com.

In the meantime…I’ll be waiting…

Looking For A Better E-mail Icon: Can You Help? is a post from: Kestrel's Aerie

 

Right now, my frustration mostly stems from my very, very limited knowledge of php coding, and trying to incorporate changes via the custom_functions.php file in Thesis.

"Out of the box," Thesis comes with a sample file. However, simply adding functions (generally, code pasted from "how-to" sites) seems to break the file, resulting in a completely blank web page. Definitely, NOT a good thing. 

I have figured out a kludge (I think; at least it works for the most part, so far), but I suspect it’s too simple, and will fail me when I try to do anything especially fancy. I started a thread on the Thesis support forums, however, so we’ll see whether some kind soul will take pity on this poor birdie.

In the meantime, if you’re interested in viewing the progress (well, the changes, anyway), I’m documenting them via webshots, using Little Snapper and Ember. You can see the progress so far on this page. I do need to be sure I’m capturing a single-post page, so you can see how the Comments section evolves.

Things to Do

• I’m still not completely happy with the comment styling; it’s better, but not great. Main concern is threaded comments.
• I still want to work on the backgrounds for the post area and the sidebars. I want to use gradients, but I have had thoughts that that may not be the most attractive way to do things; on the other hand, maybe I need to use fancier gradients. I really like the blue bar just below the nav menu and above the content area, and the way I matched the sidebar background to it.
• I want to play around with trying to substitute code within Thesis for some of my plugins, but that’s probably the longest-term item on the list.
• I really need to put in a blogroll or links page; however, I really don’t know yet how I want to do that. Part of the homework Tami gave me will include getting some good ideas for that. 
• Oh yeah…and then there’s the homework assignment I have. I really need to quit putzing around with changing stuff, and go look for what looks good!

*Sigh*

And it appears that something I’ve done with custom_functions.php, while still able to render the site, has mucked up my ability to preview posts from within WordPress. *grumble* 

Slowly, But Surely, We’re Getting There is a post from: Kestrel's Aerie

 

As you may be able to tell, the Aerie is undergoing a bit of a renovation (no, really! don’t trip over any power cords or sawhorses!). One reason is because I’m reveling in the awesomeness that is the Thesis theme for WordPress: For a non-coder such as myself, the ability it easily change virtually every element of the site is like putting my wife in a quilting store with a blank check. Seriously.

Another reason is in keeping with the changes for the site I alluded to in early June: To redirect the Aerie into a more personal, but more broadly-based direction, rather than so narrowly focused on World of Warcraft. You can see some evidence of this new direction in the modified banner at the top of the site. The fonts are modernized, instead of the Celtic title font, and the tagline has been changed to reflect my vision for the Aerie: to present "An Eclectic Collection of Musings on Life, Living, and Blogging."

Sure, I could create a sandbox site and play with stuff there, out of sight (and not inflict some of my not-so-great design thoughts, no matter how transient, on the casual passer-by). But that involves a bit of work on its own. Instead, I’ve copied all the files I’ll be changing to my desktop, so at worst, I can revert to what I had here on August 2.

The current color scheme is very similar (especially the content column) to an earlier version of the Aerie; I’m sure some of you will remember it. I doubt it will remain close to what it is now, but these backgrounds are what I had that was working when I knocked off for the evening. (Yes, I know the footer’s a bit wonky, believe me! You should have seen some things that were going on with the header, too!) But the great thing is, I learned a couple small lessons about design here as I played around today. So the learning curve isn’t quite as steep as it was. (I do try to catch those thermal updrafts when I can, you know!)

For the next few days, there probably won’t be a lot of changes, for a couple reasons. First, I doubt I’ll have as much uninterrupted computer time as I’ve had the past two or three days. Second, I have homework. I’ve enlisted the aid of a consultant in the person of the lovely and superbly multitalented Tami Moore.¹

I was flailing wildly today, and in desperation reached out to someone whose artistic sense I not only respect, but greatly admire. Tami was gracious enough to offer some suggestions that gave some direction to my flailings,² but she also established some goals and expectations I need to work toward. (Since her assistance is pro bono, I decided I better follow her suggestions, or I expect she’ll either present me with a bill, or just give up on me. Or both.)

So while you’re here, go ahead and dust off a chair before you sit, and try to ignore the occasional outburst if I hit my thumb with a hammer. Again.

Please Excuse the Twigs is a post from: Kestrel's Aerie

 

One of the smaller changes I’ve made was prompted by this article at MattFlies.com. Matt showed how to style the CommentLuv box (see last week’s Friday Five to see what I’m talking about) to make it a bit more attractive. Although I didn’t quite follow how Matt said to apply his code, I was able to add it to the CommentLuv .css file in /wp-content/plugins/commentluv/style/cl_style.css.

If the thought of modifying a plugin file frightens you, it shouldn’t. First, get FileZilla, a multi-platform (Linux, OS X, Windows), open-source file transfer program.¹ When you set it up, identify a text editor to call from FZ. For OS X, I use the free Text Wrangler; for Windows, I recommend the open source Notepad++.

NOTE: Before you change anything, copy the file to be modified to your computer in case something blows up and you need to revert!

With cl_style.css open in your editor, find the following:

.cluv {
border:1px solid #fff;
padding: 5px;
display: block;
font-size: 100% !important;
text-transform: none !important;
}

Replace² the five lines between {curly braces} with the following:³

display: block;
padding: 8px;
border: 1px solid #E1E1E0;
background: #CFE9FF;   //This can be any color you want for the background of the CommentLuv citation
text-transform: none;
font-style: normal;
letter-spacing: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 8px;

The result will give you something that looks like this: 

Note the nicely rounded corners. If you look at the post I linked above, you’ll see the background color fits in nicely with the overall theme, whether it’s in an original or nested comment.

The text output has been modified from the WordPress Settings > CommentLuv page. (The default is "Kestrel’s last blog..Recommended Reading"; if anything, I prefer a true ellipsis (…), and my last blog is my current blog!) You could also change it to something like "Kestrel last blogged about Recommended Reading" but that might make for some strange reading, depending on article titles.

I hope you enjoyed this little diversion into how you can make your blog just a little cooler, but if you have any questions on anything I’ve covered here, please ask! And look for similar articles in the future.

Quick’n'Easy CommentLuv Style Enhancement is a post from: Kestrel's Aerie

 

One of the most important pieces of information we request for each entry is a blog’s RSS feed URL.

Default RSS Feeds

For Blogger blogs (blogspot.com), the default Atom feed is found at http://yourblog.blogspot.com/feeds/posts/default. Unless you scroll way down to the bottom of many Blogger blogs, you may not find the link to the Atom feed. Until I added this to our instructions on how to provide information to the BLOB, a lot of bloggers—old and new—had no idea what “RSS feed” meant. (More on the answer to that question shortly.)

Likewise, for WordPress bloggers at wordpress.com, the default RSS links (http://yourblog.wordpress.com/feed) are found in the footer of the main page (click the picture to expand):

Of course, not many people use the default theme, and most WordPress themes do put RSS links in a more prominent position. However, the point of this post isn’t to address why or how to implement RSS, but to advocate something other than the defaults for these two popular blogging platforms.

I would guess that 99 percent of the blogs listed in the BLOB are either Blogger, WordPress.com, or self-hosted WordPress blogs. The other one percent are TypePad, LiveJournal, or semi-self-hosted.¹

Again, I haven’t counted, but of that 99 percent majority, I’m going to guess well over half are either on blogspot.com or wordpress.com. After all, they are free, they’re reliable, they work (for most people). I’d go further and guess that 90 percent of the self-hosted bloggers started with either Blogger or WordPress.²

Move Your Blog…Lose Your Feed (and Readers!)

So what happens to all your loyal RSS readers when you make that leap from Blogger or WordPress to hosting your own site? (And in case you didn’t know, the vast majority of your loyal readers subscribe to your feed, rather than visit your blog directly: Of the 200-800 hits my blog gets each day, almost all are from IPs that have not been here before (or at least, not in the last 15 days—so they aren’t exactly regular readers!))

Your default Blogger or WordPress.com RSS feed is not transferrable

What happens is, unless you post an article and tell them you’ve moved, and include your new RSS feed, you will probably lose them. That’s because your default RSS feed isn’t transferrable!

Even if you do those things, you’re still going to lose some readers; it’s the nature of the beast. Of course, if you knew the email addresses of all your readers, you could tell them that way. Or you could Tweet it (yeah, like everyone will see that!). In other words, it’s a crap shoot as to who will follow you to your new digs.

FeedBurner to the Rescue

Of course, there is a solution (you saw that coming, didn’t you?). Your knight in shining armor, who is going to lead all your readers to the Promised Land of your brand-spanking-new blog, is…(cue trumpet fanfare)…FeedBurner!

FeedBurner is extremely easy to use; the only requirement is to have a Google account (and if you have GMail, then bingo!).³

With FeedBurner, once you’ve claimed your feed, that feed URL is yours forevermore, no matter where your blog is! Even if you change the name of your blog from, say, Kestrel’s Aerie to Osprey’s Outpost, as long as you update your FeedBurner feed with the new URL, all of your subscribers will continue to receive your feed and all of your pearls of wisdom without any interruption.

Why Does It Matter?

Of course, the assumption I’m making here is that you are blogging because you want someone else to read what you have to say. If you don’t, why not just jot your thoughts down in an unshared Google Document? So if my assumption is accurate, then a corollary is you want to build and retain an audience. Again, if you don’t, you could just send emails to the people you want to enlighten.

So what generated my advocacy of FeedBurner? As it happens, I was doing some cleanup on the BLOB this week. Besides moving a whole bunch of blogs to a page of inactive blogs⁴, I found a lot of blogs that had moved from Blogger to WordPress, or from free to self-hosted, or from one self-hosted site to another. In almost every case, besides a URL change, the RSS feed changed as well.

Save yourself the headache! Set up a FeedBurner feed now, and don’t worry about losing readers when you do move your blog.

Why FeedBurner? is a post from: Kestrel's Aerie