But the tipping point for me to set up automatic re-posting of links and articles to Twitter came for two reasons:

1. I really appreciate it when cool dudes like Marco or Rands tweet links back to their own articles.

2. More and more I have been finding interesting news and good reads via Twitter (some days, more so than what’s in my RSS reader). And even though much of the content I’m finding in Twitter is the same as what’s being delivered to my RSS reader, lately I’ve been interacting with Twitter much more than my RSS feeds.

But there were a couple drawbacks to having this site’s RSS feed systematically re-posted to my personal Twitter account.

1. Some folks don’t care a dime about my nerdy posts, but have great concern about what I eat for lunch.

2. Some folks are already subscribed to my RSS feed and would prefer to keep it there and nowhere else.

For those who do want to get this site’s posts in Twitter, it is not hard at all for you to follow another account. And the noise level is identical to what it would be if the posts were coming through my personal account.

So really, the only drawback I see is that I have to start over with a new account. But come on… what a pathetic and prideful excuse.

• Follow the shawnblanc.net RSS feed: @shawnblancnet
• Follow me: @shawnblanc

In WordPress using the_title and the_guid functions you can build a dynamic “retweet” link for each post that works on your home page and on individual post pages.

The code I’m using here looks like this:

<a href="http://twitter.com/home?status=<?php the_title(); ?> - <?php the_guid(); ?> (via @shawnblanc)">Retweet.</a>

The advantage of using the_guid instead of the_permalink is that it’s the shortest URL your WordPress site automatically generates. And assuming you use clean, human-friendly, URLs set in your WordPress preferences, these post ID URLs will simply re-direct to your desired permalink.

For example, below are two different yet legit URLs for my review of Yojimbo. The first one is what’s generated using the_guid and the second is the actual permalink URL and is what’s generated using the_permalink.

• http://shawnblanc.net/?p=1455
• http://shawnblanc.net/2009/09/yojimbo-and-anything-buckets/

The second link, which is the standard, permalink address to the Yojimbo article is more human friendly and makes for better search results. However, it also has 29 more characters than the first link listed. The second link is best for normal use, the first is best for Twitter.

What I like about this way of implementing a Twitter-sharing feature is that it uses plain and simple code, rather than a plugin. Plugins are great, but I like to keep their usage here to a minimum.

I have yet to see anyone really use these Twitter-sharing links yet. In the past few weeks of testing this, I’ve seen amongst my own little readership that people are much more inclined to re-tweet something already tweeted. Which leads me to my next point…

I have added the shawnblanc.net RSS feed to my Twitter using Alex King’s Twitter Tools plugin. Which means all new posts (articles and links) on shawnblanc.net are automatically tweeted. (Example.)

For months now I have been finding the most interesting news and best reads via Twitter (much more than via my RSS feeds). Even though much of the content I’m being told about in Twitter is the same content that’s being delivered to my RSS reader, I interact with Twitter much more than my RSS feeds.

And so I assume it’s more than likely that you’re doing the same. There will certainly some overlap for those of you who follow me on Twitter and get my RSS feed, and if that bugs you I am sorry. Nearly every RSS feed I am subscribe to I also follow the author on Twitter, And I have never once been bugged to see them plug their own content.

?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A%20shawnblanc%20(Shawn%20Blanc)&utm_content=Google%20Reader

This excess metadata is added by FeedBurner when you click through their feedproxy, and is used in Google Analytics. This way, you can track your feed’s click-throughs right alongside your other statistics.

So far as I can tell, this tracking code was automatically turned on by FeedBurner for shawnblanc.net about a month ago.1 Since it’s been running for a few weeks, if I look in my Google Analytics account I can now tell that my top three traffic sources (and mediums) are:

1. Direct (none)
2. Google Search (organic)
3. FeedBurner (Feed)

There are additional feed stats as well. Such as what feed reader people are using, the bounce rate and average time on your site for reader visits, and more. It’s fantastic feature if you’re into excess data and you don’t mind the URL invasion. But personally, I don’t care. I prefer the simple broad strokes: how many visits? how many subs?

And so today I finally got around to logging into FeedBurner and turning off the Feed Click Tracking option. And you can too if you want.

• Go to: Analyze → Configure Stats
• Uncheck: “Track Clicks as a traffic source in Google Analytics”
• Save

If you too have not been reading (online) lately, I’ll be curating some worth-while stuff for you today from my reading this morning.

It’s funny, because I don’t even make a big deal of categories here. The WordPress search engine does a great job of finding any and all instances of a longed-for word or topic.

Even if I did parade the list of every post’s category you’d be sure to ignore it — as even the names are redundant and ordinary. For instance, there was Software, Software Reviews, and then, just, Reviews. There was Apple, and iPhone, and Technology; even a Life and Journal category.

Looking deeper, I could see how nearly every post was mingled within in a slew of uneventful definitions; far from simple and enticing. So this morning I deleted all but ten categories and renamed the unimaginative ones.

Journal and Life got the axe as Life in Full Color emerged in their stead. (Speaking of which, this is a category I very much want to add more to. I think this site would do well to have a more personal touch and some transparent stories. Posts such as “Marketing Shoes” and “Josephine” come to mind as the type of writing I’d like to do more of in the future.)

While shoring up the categories I also took time to read through a lot of older posts. And I remembered how I try to forget that so much of what I used to write is riddled with embarrassing grammar, poor attempts at wit, and a generally dull use of the english language.

I like to assume that I’ve always written as I do now. Though I suppose from my own point of view I have — insofar as I have always written as well and honestly as I can at that moment. But now, when I read what two years ago I thought was well written, I want to edit the snot out of it. But I restrained; I want to leave my previous links and articles as-is.

Hopefully in another two years time I’ll look back at what I’m writing now and feel the same abashment I felt this afternoon.

One for Sweet Setups, one for Reviews;
and now,
one for the Interviews too.

Currently, there are nearly 30,000 words worth of software and hardware reviews hidden on this site. And until today there wasn’t a one-stop-spot for all the reviews I’ve written. Which is why I felt it was high-time these articles became first-class citizens by receiving a dedicated table of contents page.

Up until today, a link post could be identified in my RSS feed by its duplicate “sub-title”.

If you arrow out or click on the item’s primary title link you arrive at the post’s permalink here on shawnblanc.net. Clicking the “sub-title”, which is in the body of the post, takes you to the linked-to article.

This isn’t a new technique. And how it’s done is actually quite simple — the sub-title is hand written into the post’s body, and on shawnblanc.net link posts are coded to not display the main title.

What I like about this design for the RSS feed is that the default <link> element for the article points to shawnblanc.net/example-permalink/ rather than to the linked-to article. (This is the same as how kottke.org, Subtraction, Justin Blanton, and many others do it, but is the opposite of Daring Fireball or Waxy Links.)

More and more weblogs writers are adapting link posts as part of their publishing routine. But most of them do not post dozens of links every week.

This past July, John Gruber posted 200 linked list items to Daring Fireball. Andy Baio posted 136; and Jason Kottke, 146. I, on the other hand only posted thirteen. If you add June in there too, then John, Andy, or Jason each posted more (or nearly as many) links as I have in the entire life of this weblog (367).

Which is why, in my opinion, the behavior of a link post in its RSS feed should not be defined based on the type of post it is, but rather by that post’s relationship to the website publishing it.

Authors who publish only a handful of links may want to consider a different type of link post behavior in their RSS feed, as compared to those who post half-a-dozen per day.

In my interview with John Gruber, his attitude towards his Linked List was that it’s not the individual links that are important so much as it is the whole day’s worth:

As for what I link to and what I don’t, it’s very much like Justice Stewart’s definition of obscenity: “I know it when I see it.” There’s a certain pace and rhythm to what I’m going for, a mix of the technical, the artful, the thoughtful, and the absurd. In the same way that I strive to achieve a certain voice in my prose, as a writer, I strive for a certain voice with regard to what I link to. No single item I post to the Linked List is all that important. It’s the mix, the gestalt of an entire day’s worth taken together, that matters to me.

The intense frequency of the Daring Fireball, Waxy, et al. links warrant a more direct-to-link style of RSS behavior.

I am not convinced that this is also the best feed behavior for shawnblanc.net. But based on a lazy poll I did on Twitter it seems a lot of people wish it were. The advantage to the DF-style link post behavior is primarily that it saves a click. But according to the shawnblanc.net feed and click-through stats, the majority of this site’s readers seem have no trouble clicking directly on the sub-header and going directly to the linked-to article from their feed reader if they want to.

Moreover, the primary reason I prefer this site’s current link post behavior is that it falls in line with my own feed reading habits.

The way I read online is that at some point in my day I will open up my aggregator and read through what’s new. I rarely read an article in my reader. Instead I open up the interesting stuff in Safari in the background, and then go to Safari’s open tabs and start reading.

At this point it’s common to have a dozen articles ready to read. Which is why being sent directly to someone’s linked-to article is not the best design.

Since I’m reading articles by folks I’m familiar with, the majority of the open tabs in Safari are websites I recognize. But when I come to a tab with a site I don’t recognize my first thought is usually, “What is this? How did I get here?”

Not because I’m confused, but because I don’t always remember exactly who’s link post I read and clicked through to that sent me to whatever it is I’m now staring at. Nor do I remember what it was they had to say about this link that prompted me to visit. It is very much like coming back to the middle of a conversation without being able to ask, now, where were we?

Through an email dialog, Sean Sperte gave me some wise input, saying that when someone clicks on the title link it indicates their desire to read more. Which means it is up to the author to decide what “read more” means. Does it mean, go to the link I’m talking about right now? Or does it mean, this trail is best begun on my site. On shawnblanc.net I think the latter is more appropriate.

Which Brings Us to the New RSS Format Experiment

Though I’m not too keen on moving to a DF-style format for my link posts, I am certainly wanting to move away from the duplicate “sub-title” design. My desire is to make the link-posts very easy to use and read while maintaing a clean design and logical behavior.1

In truth, I have always had these goals but they were not easily attained in WordPress. To implement this new feed and on-site post formatting required the use of custom fields. No problem if you publish from your WordPress web interface. But I don’t. I am a hard and fast MarsEdit user.

Unfortunately, MarsEdit has never had support for custom fields in WordPress. Which meant that for me to change my link-post behavior in the RSS feed I would have to publish all link posts from my WordPress Web interface. And that just isn’t going to happen. But praise the Lord, the latest builds of the 3.0 alpha, which I’m fortunate enough to help with testing for Daniel, now support custom fields in WordPress.

Which means that with this new feature in MarsEdit all I needed was a simple plugin, a few tweaks to my site’s theme and RSS code, and now a world of opportunities for RSS link post behavior have opened up.

The previous formatting for a link post in the RSS feed looked like this (as also seen in the screen shot at the beginning of this article):

• Main Title (pointed to http://shawnblanc.net/example-permalink/)
• Sub Title (duplicate text as Main Title, and points to the linked-to item)
• Commentary, additional content, etc.

The new, experimental, formatting looks like this:

• Main Title (points to http://shawnblanc.net/example-permalink/)
• Commentary, additional content, etc.
• Visit This Link ➚ (points to the linked-to item)

The design and behavior on shawnblanc.net has remained unchanged. (Though the back-end code has not.)

Since this is a new design, and the duplicate “sub-titles” were very good at allowing for quick identification of a link post, I am debating over the need for another way to quickly and easily identify a link post versus a full-length article. Sean Sperte does this by placing check marks next to his “asides” posts; Gruber places a star next to his articles. As of yet, I haven’t implemented any type of identification.

Feedback Please

As readers who interact with this feed every day, I would be delighted to hear your guys’ feedback (positive or negative) on the new format. And especially if you encounter any problems with the feed.

Subscribe to the RSS Feed here: http://shawnblanc.net/feed.

Email me here: sbnet@mac.com.

Now this weblog is over two years old with about 4,000 feed subscribers, and all sorts of reviews, interviews, and other interesting things in the archives. Which is why today seemed like a good day to post another survey.

There are two new questions. The others are either identical to last year’s, or just slightly updated. And the last one is no longer my favorite, though you’ll still geek out over it.

Click on the topmost link or right here to take the short survey. In a few days I’ll publish the results so you can see more about the other nerds who you’re reading with.

Thanks.

— Shawn

But instead of hunting down more people, I thought it would be fun to feature the setups of those who are already reading the same site you are.1

If you want to showcase your (cool/dorky, clean/messy, old/new, etc.) setup to other shawnblanc.net readers, send an email to sbnet@mac.com, and I’ll reply back to you with the details.

Thanks for reading, and, as always, thanks for being awesome.

— Shawn

A new website by yours truly. It’s a gallery of iPhone wallpapers shot with my iPhone Camera.

(You can expect the nerdy details on the unique differences between designing an image-based website and a text-based one in the near future.)

For the past few months I was seriously considering a complete redesign of shawnblanc.net. When I finally sat down to begin the project I decided against a total re-do from the inside out, and went for a bold but familiar realign instead.

The Header

The idea to pull the header down was originally inspired by Phu Ly’s WordPress theme, Ambiru. That theme is now 3 years old, and I’ve always admired it. My thoughts to go with a tall header were encouraged even more by the fantastic designs of A Working Library and Designing The News.

My initial Photoshop mockups were with a shorter, 235-pixels tall, header. (235 pixels being one-half the measurement of the text column.) But I didn’t like that height. It felt as if it was reaching for something unique and bold but not quite landing it.

When I launched the design on Monday morning, the header was 350 pixels tall. I liked how bold and un-apologetic that size was. Not only did it look particularly great in a large browser window, but even those viewers with the shortest browser-window height of 410 pixels (according to my Mint stats), could still see the first post’s heading.

However, after letting it sit for a few hours and then coming back and staring at it, I got to thinking about those 350 pixels; that perhaps they were, in fact, a bit too much. As if they made the statement that the header was the most important element on the website — which it’s not. I then dropped it to 313 pixels (two-thirds of the text column’s width) but it still felt like too much.

The header is now 300 pixels tall, and, like Goldilocks’ 3rd bowl of porridge, is just right. Though 300 pixels does not fall onto the grid of the site, the baseline of the masthead and navigation menu sits at 255 pixels from the top, which is one-third the site’s total width of 766 pixels.

The header has been, by far, the primary topic of feedback; a lot of people like it, but a lot don’t. I wonder how much the power of suggestion influenced their opinions? My previous post which announced the new design was titled “A Very Tall Header”. What if instead the post had been titled “Finally, Some White Space and Breathing Room”? Perhaps the negative response would have been less? Who knows? Nevertheless, the negative feedback about the header has ceased. Perhaps shrinking to 300 pixels tall was all that was needed.

Ultimately, what I like most about the header is that it’s so big it’s polarizing. It is such a stand-out design element that people seem to either really love it or really not. And I’m o.k. with that because, like it or not, the thing has personality. And that is precisely what I wanted.

Color and Texture

As mentioned earlier, for a long time I considered a total overhaul of the site, which would have meant taking it to a dark on light color scheme with serif body text. The colors and fonts that people like Sean Sperte, Pat Dryburgh, Mandy Brown or Daniel Mall use on their sites kept teasing me to abandon the current branding of shawnblanc.net for something on the opposite side of the spectrum…

But I just couldn’t do it.

This site is nearly two years old, and even though I had the itch for something totally new with this refresh, I felt that keeping the visual familiarity was important for two reasons:

First of all, when you read someone’s site you are imagining their voice. Not only is that voice influenced by the style of their writing, but also by the design of the site itself. Drastically changing the colors and fonts of a site can have serious impact on the reader’s pre-established and familiar voice of your site.

Secondly, not everyone subscribes to a site the first time they visit. It could be months or years in-between visits, and most likely not by the same channels. Having a familiar element is, in my mind, crucial to a visitor thinking “Hey… I’ve been here before. This site must be pretty amazing; I think I’ll subscribe.” 1

What I did do to improve readability was take the texture that used to sit behind the content and move it into the header. I then made the header a little darker, and lightened up the background color for the main content.

Here is a side-by-side comparison of the same text with the previous, darker background on the left and the new, lighter background on the right:

An Aside Regarding Fonts

One negative about light text on a dark background is that, in general, the font weight often appears to be more bold. It is not actually bold, but the color-contrast as the stroke blends into the background is more harsh with a light-colored font on a dark background than the opposite.

Compare these two screenshots of the same title, in the same font family and size, but on flip-flopped color schemes. The darker letters on the right look thinner:

Looking at this cross-section of the “H” from the “Hello” zoomed in to 1120%, and comparing the stroke width, you can see how the darker colored letter blends into its light background much quicker, giving the appearance of a thinner stroke, though in reality the light and dark legs are both 5 pixels wide.

Styling of Links

Continuing on the issue of color: I got a couple questions regarding my rhyme and reasoning behind the seemingly sporadic styling of links.

If you count them up, there are about 10 uses for links on this site — each one with a unique placement and/or styling. But I see them all as just two types of links: expected or unexpected.

Links such as the navigation bar, the article titles, the word “Permalink” at the bottom-right of a post on the index page, and others are expected — the reader sees that word and they don’t need it to be orange to tell them it’s a link. Simply due to its context on this site and the consistency of the web, the reader is rightly and easily able to identify it as a link.

Since the orange is such a bold color (and too much of a good thing can spoil it), expected links, when in their un-active state, are the standard body-text color. Hover over those links and you’ll see the orange right away — proving your assumption was right.

Those links that are unexpected — such as words in the middle of a paragraph — need to be highlighted and styled so the reader knows they are links. Welcome to web-design 101. No further explanation needed.

And why the inconsistency between underlined and not underlined? That comes down to my personal taste. You’ll notice that only links in body text are underlined. I think the underline looks great there but not in the sidebar or footer (where I think it looks cramped). Thus, for the sake of design rather than consistency, not all links are underlined.

The Sidebar

A primary goal of the realign was to clean up and simplify the sidebar without loosing any of the elements in the process.

The previous sidebar’s contents were center-aligned. Though it looked good by itself, when looked at in context to the whole site it felt, to me, that the contents were floating and cluttered rather than securely and carefully placed. Left-aligning the sidebar helps the contents feel more secure.

Shrinking the sidebar from 232 pixels wide to a more slender 219 not only tightens the whole thing up, but also gives some additional breathing room between the left edge of the sidebar and the right edge of the content.

The “Get the Best RSS Feed Known to Man” button has been removed and replaced with a simple “RSS” link in the navigation menu. I am banking on the fact that those who want to subscribe to this site’s RSS feed don’t need me to remind them by placing a big button in their path. If they don’t already have a bookmarklet set to add a site’s feed to their reader, they are using a browser that identifies and provides a link to the site’s RSS feed right in the address bar.

I will admit that I was a fan of that button. It, too, had personality. It will be interesting to compare RSS readership growth over the next few months and see if it’s effected or not. My guess is it won’t be.

The previous sidebar had two typographic images highlighting some quality archives. In the original mock-ups I toyed with some new revisions of those designs, but I couldn’t land a concept that I liked. I still wanted a way to point people to some of the quality articles I’ve published here over the years, but I didn’t want to simply post a list of articles right in the sidebar. So I decided to try the route of a Popular Articles page. Unfortunately those are quite common and not always viewed as exciting or interesting.

Ironically, the content on my 404 page is specifically built for the uncertain, first-time visitor. (Though I will admit it still needs some help.) And being challenged to check out a 404 page is much more intriguing than a popular articles page any day.

However, I have a feeling that there is still a better solution out there, I just don’t know what it is. Reworking the 404 page? Making a dedicated “favorites” page after all? Something else all together? I’m not sure at the moment.

An Element of Style

Link posts now no longer have a dash after the title. My original intention for doing that was to help distinguish the title of a link post from the commentary underneath it, and to set it apart as being its very own post title, and not just a link that is part of the previous article.

But I learned that the dash after the title is poor form. And more than that, I don’t think it’s necessary. The link-post title is clearly identifiable as-is. I should have stopped doing it a while ago, but just never did.