NetNewsWire Theme: Fixed

Avatar of Chris Coyier
Chris Coyier on

I love me some Google Reader. I got all my feeds up in there and it’s like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading applications, they are essentially just different user interfaces for Google Reader. That way we can play with lots of different ones but still maintain a unified home for our feeds.

The web interface for Google Reader is pretty good. They have mobile web versions as well that also aren’t bad. But there is one little thing that kills me about the web version of Google Reader. Let’s say you come down to an article you want to read…


Step 1: Keypress: J-J-J-J, Oh cool, this article looks interesting, I think I’ll read it.

Step 2: Oh crap, where did the article go all the sudden? OH YEAH IT WAS PUSHED DOWN OUT OF SITE BECAUSE AN IN AN ARTICLE I ALREADY SKIPPED HAS NOW LOADED ABOVE IT.

Yeah, there are ways around it. I could switch to collapsed view. But it’s the principal of the thing. I specifically skipped the article above and gave a new article focus. Focus should not be ripped away from me for any reason at that point. It happened to me so many times I just had to give up on the web Google Reader.

On the iPhone I use dedicated apps for RSS reading (I like both Byline and Reeder). I figure why not use a dedicated app on the desktop too. I have a friend who swears by NetNewsWire, so I’ve been using that. It’s pretty great. It has a really simple and easy interface. Not much to get in your way, but just about everything that you need. My favorite part is how it has a built in web browser, so switching over to read the article on the site is really quick and painless. It uses WebKit internally to do that.

NetNewsWire also supports themes. Here is one that ships with it:


C’mon, really?

The themes that come with the app aren’t particularly impressive. For one thing, they are literally all fluid width. One of my biggest gripes about fluid width on digital screens is how typically the only thing that happens when a screen is adjusted in the line length of text changes. Ironic, in that in my opinion the only thing that shouldn’t change in a fluid width layout is line length.

If you open up the applications package, you can drill down and find where the themes are kept. They are files with the .nnwstyle extension. If you then show the package contents of those, you can see the how they are built. They are literally just HTML and CSS files. Awesome.


Right click > Show Package Contents

Fixed

So I set about trying to build my own theme. I probably went through 5 different ideas and I’m still not entirely satisfied with this, but I’m just gonna stop fiddling with it for a while and let it sink in. I’m also going to share it here in case anybody else is a NetNewsWire user and wants to try it, or have a base to play with their own.

I’m calling it “Fixed” because:

  • It’s fixed width.
  • It has a fixed header.
  • It fixes a bunch of stuff I found annoying about feeds.

It looks like this:

Hey, it ain’t much, but that’s kind of the point. The idea is to get out of the way and just make articles as readable and cruft-free as possible.

Features

  • Title is big and fixed so you can’t forget what you are reading and are always close to a link to it’s real URL on the web.
  • Source and other meta information are fixed above the title for similar reasons.
  • jQuery is loaded into the theme, which is utilized a number of ways.
  • Line length is fixed at a comfortable length.
  • Images are forced to be block level and spaced out (some sites leave images inline with text and it causes weird layout issues over RSS)
  • Widows in post titles are prevented by inserting a non-breaking space between the last two words like this.

  • Embedded videos (or any embedded content from any source) is forced to be the same width as the line length.
  • iframes are removed. Google ads in feeds come across in iframes, so those are gone. I can’t think of any real legitimate use for an iframe being in RSS.
  • Tweetmeme/ReTweet buttons are removed.
  • Any images that are really small (under 30px in both height and width) or specifically related to FeedBurner are removed. This removed a lot of junk from the end of a lot of feeds, including seeing a zillion “sharing” buttons or FeedBurner cruft.

Download Files

I think you can just double-click it from the desktop, and assuming you have NetNewsWire installed it will install it as a theme.

Only gripe about NetNewsWire: it says “flagged” instead of “starred”, can’t we just use “starred” and keep it consistent? But worse, you can’t “share” things, which I like to do. It does have Delicious and Instapaper support though, which rocks.