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)
- 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.
Widows in post titles are prevented by inserting a non-breaking space between the last two words like this.
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.
Looks great but I can’t download it to try it. It’s an Apache forbidden page.
Sorry, fixed I think!
Looks Really Great!, but as Louis said above me, the link is broken…
Thx :P
Yep, same thing here. Seems there is a rights issue on the files.
True… forbidden… anyway, I didn’t even remember that NetNewsWire supported themes!!! Looking forward to try this on!
The server didn’t like the file extension, so I just zipped it up.
B b b b b roken dude!
But the Theme lokks really stylish.
Could you elaborate a bit more on the issue you have with Google Reader? I’m not quite grasping it.
My main gripe with it is that I can’t collapse the current article I’m reading without scrolling all the way to the top, because I tend to read from oldest to newest (of the unread articles, that is).
Yeah.. I didn’t get it either.
BTW Chris: Is this a recent issue or you gave up on it some time ago because back then you had an issue?
He means you skip past an article you don’t care about, and try to read the next. The skipped article had big images in it, and once finally loaded, move the whole feed downwards. You’re suddenly staring mid-article of the one you just skipped.
It’s quite difficult to read when the text suddenly disappears.
Theme doesn’t work for me at all. The headline is placed over the following content, so for long posts the first paragraph is cut off, and you don’t see short posts at all… (NNW 3.2.7, Snow Leopard)
I had a similar issue on my hackintosh netbook with a smaller screen. I just opened the theme and removed ‘fixed’ on the title so it scrolls with the text. Sure you don’t see the title but the rest of the theme is awesome.
You’ll have to enable JavaScript for news items in “Preferences → Browsing → News Items”.
Impressive, thanks for sharing this.
Want to know how appropriate the timing was on this? I couldn’t read the article in Google Reader because the Smashing Magazine article above it kept pushing it down.
Great mod! I love netNewsWire but the default themes are so horrible!
Yea the default themes are horrid, but Legistyles takes care of that: http://www.legistyles.com/.
Here’s a screen of “Serif Black” (I think): http://cl.ly/e7c5cf63355898ae0180
Oh and its fixed width :)
This is a solid theme, thanks! And there’s quite a few other great themes out there. Head on over to LegiStyles (http://www.legistyles.com/) to see some. My current theme is AisleOne, but there’s some other great ones too.
Any ideas for an RSS on Android?
This theme is really nice Chris! Thanks for contributing. Maybe the dev will hear about it and put it in.
One thing that may need addressing though is the max-width in images. Some articles have the images’ width and height set inline, so the max-width override changes the width, but doesn’t keep the proportions and is squishing some of those images. Here’s an example of how Panic’s blog looks: http://cl.ly/1JxL
Saw this ‘bug’ also and could solve it through adding ‘height: auto;’ to ‘#content img’ in the stylesheet (~/Library/Application Support/NetNewsWire/StyleSheets/Fixed.nnwstyle -> Show Contents).
Full line looks like this:
#content img { max-width: 526px !important; height: auto; background: white; border: 1px solid #ccc; padding: 15px; text-align: center; -webkit-box-shadow: 2px 2px 5px #ccc; }
After adding, you need to restart NetNewsWire for the changes to take effect.
But I’m quite sure Chris will add the to his stylesheet and thus update this nice Download. ;)
BTW: Nice work & thanks for sharing Chris!
Great idea. I had noticed this problem before and kinda forgot about it, as a solution didn’t come to me right away. I haven’t tested this but theoretically I think it will work. I updated the download.
Nice, easy fix. Yeah, works fine now. Loving this theme. Thanks for the fixed download Chris!
I use the Google reader bookmarklet to view each web page from my feeds in order. No worries about focus disappearing with that. Google also allows you to ‘create’ bookmarklets for specific folders, so today I read this article whilst hitting Next (Web) >> on my Chrome bookmarklet bar.
Just go to Reader settings –> Goodies. They also have a Subscribe bookmarklet and a Note in reader bookmarklet. All very handy.
This theme is broken for me. On long articles I use the spacebar to page down. The fixed header blocks out the top few lines of the text after paging down.
I’ve noticed a similar problem on some websites which use fixed headers or footers. Google Friends Connect used a fixed footer bar which also got in the way of spacebar scrolling.