The Hickensian

26.11.08 Here's Helvetireader

60 comments
Tagged with: greader, helvetireader, skinning, theming

Back in June, I talked about Helvetireader, a new approach I was taking to skinning Google Reader. Instead of making it look like an OS X app, this time I was going for minimal, inspired partly by Times, a newspaper style RSS reader, and the postcards that came with the (Deluxe!) Helvetica Film DVD.

As there’s always so many other things to do, it’s only now that I’m announcing it going live. First, here’s a small screenie:

I’ve removed a lot of stuff from the interface that I never use, so it’s not going to suit everyone. If it does suit you – great, if it ‘doesn’t quite’, you can take the CSS and fiddle and personalise to your hearts content!

I’m trying a different delivery system this time around. One of the things that made the previous theme feel like a burden were the different versions that needed to be upkept. Then I would feel guilty about clogging up my blog with news about any updates. Not this time.

Helvetireader is a hosted theme. To use it, you need a browser with user script functionality, which means Opera or Firefox out of the box, or a WebKit browser with the GreaseKit haxie applied. Camino doesn’t yet support user scripts, but you can download the CSS file and apply that manually if you like (see instructions below). This means that when there is an update to the theme, all you need to do is refresh, rather than download anything. It also means all I have to is update a single CSS file.

Before you install, you might want to set up Google Reader to be on expanded view, and check your view settings. After you install, these options will be hidden!

I’m not sure how it’s going to work out bandwidth wise, but I’m going to try it out as an experiment. If it doesn’t work out, I’ll maybe look into Git or SVN as a way of providing updates.

So how will you know when to refresh? By following the twitter feed. You can also use @replies for feedback. While requests to reinstate UI that I’ve hidden will be probably be answered by “take the CSS and change it to suit you”, I’m always interested to hear your thoughts.

That’s enough waffle for something that be used by 10 people at the most – head along to the Helvetireader site if you want to try it out.

Camino users

If you do use Camino, then you’ll need to download the CSS file and add the following around it:


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://www.google.com/reader/view/"), url-prefix("https://www.google.com/reader/view/") {
...css here...
}

And put that in your Library > Application Support > Camino > Chrome > userContent.css file.

Comments | RSS

No.1

∞ Brian said 440 days ago:

I love it! I just installed it and now I’m getting used to the interface – so beautiful, minimal, etc.

The only thing I would say is that it would be nice for there to be a way to differentiate between read and unread posts (unless I’m just missing something).

Great job, I hope this does well!

No.2

∞ Travis Gertz said 440 days ago:

Thank you. Just thank you.

No.3

∞ zeldman said 440 days ago:

You are a beautiful man.

No.4

∞ Luke Dorny said 440 days ago:

Yay! I suppose i’ll get all haxie and SIMBLy install all that. Weee!

No.5

∞ fernando mateus said 440 days ago:

I’m allways amazed by how you find the time to give us all this great gifts we receive here over time.

Thank you sir for all the great work and inspiration.

No.6

∞ Jason Newlin said 440 days ago:

Yeah, I’m with Jeffery – You ARE a beautiful man. Really nice and simplistic.

No.7

∞ Chris Bowler said 440 days ago:

10 people? I doubt that ;)

No.8

∞ SamoSi?NieNamaluje said 440 days ago:

Great! I’m using Helveticareader for a while and it’s amazing! Can’t wait for the update!

No.9

∞ Josue Salazar said 440 days ago:

Lovely. Thank you.

No.10

∞ panpot said 440 days ago:

I love this theme!
Thanks!

No.11

∞ nick said 440 days ago:

That is great, sir! Thank you!!

No.12

∞ alex said 440 days ago:

I like this theme, it coincidentally follows my recent designs.

My first public example of this is deadlineapp.com — I wanted big chunky fonts + minimal interface much like this theme.

I love the idea of hiding options, Google Reader already does too much in my opinion!

No.13

∞ Jason Robb said 440 days ago:

Love it!

Something is wrong, I can’t seem to host my own CSS file and use that, it’s not loading. Any suggestions?

Can’t get it working with Fluid either. Perhaps I’m missing something? I’ve enabled GreaseKit for Fluid.

Works great in FF3 with GreaseMonkey!

No.14

∞ Joshua Brewer said 440 days ago:

I whipped up a quick little Fluid Icon for Hevetireader. You can get it here: http://www.flickr.com/photos/joshuabrewer/3061700983/

No.15

∞ Cory said 440 days ago:

Is there a way to make this work with Google Chrome?

No.16

∞ Greg Leuch said 440 days ago:

Very nice and thanks for the info on using it in Camino.

(fyi: the very last link on http://helvetireader.com doesn’t link anywhere.)

No.17

∞ Dane said 440 days ago:

By default there doesn’t appear to be a mark all as read? I assume I’ll have to dig through the css to bring that back – just wondering how you work without using that functionality?

Or maybe I’m blind and it is here somewhere? Any hints?

No.18

∞ David A McClain said 440 days ago:

Looks abso-frigging-lutely lovely Jon! I’m a NewNewsWire user and the Helvetireader CSS file doesn’t do too much good stuff unfortunately.

Either we need a NetNewsWire theme or I have to switch all my feeds to Google Reader. There is no in-between, there is no going back, there is no pretending that my RSS reader can look this good!

Kudos Mr Hicks!

No.19

∞ Ben said 440 days ago:

Great job!

Thank you very much…

No.20

∞ Martijn said 439 days ago:

Great to see it finally—“officially”—released. As far as the hosting goes, wouldn’t Google Code be a good alternative in case it does have a big impact on your bandwidth?

No.21

∞ KiL said 439 days ago:

I think you should be able to set this up for all browsers on your system using Glimmer Blocker (http://glimmerblocker.org) at least on OS X.

No.22

∞ Michael B. said 439 days ago:

Wow!

Thank you for offering a great, simple clean design that seems to make reading my complicated mess of feeds a bit more readable!

No.23

∞ SanderG said 439 days ago:

I have been waiting for this, hoping you would finish it even after moving to Opera. Great even without Helvetica at work.
However all items take slightly more than 1 line and I do not see how to change it (I read in list view usually). Because of this the layout is pretty hard to use. Hope this can be improved so it’s more compact.

No.24

∞ Michael Heilemann said 439 days ago:

But, but, but, how do I use it with Chrome? :|

No.25

∞ Marcus Olovsson said 439 days ago:

I love the theme, but unfortunately it seems like it doesn’t support list view really well.

Screenshot

Is this something that can be fixed in the future?

No.26

∞ lachralle said 439 days ago:

Great work, thank you for sharing it!

No.27

∞ Tom said 439 days ago:

Love it – however, it seems to have killed my favourite shortcuts (shift-J / shift-K / shift-O) for skipping through and opening feeds. Anybody have any ideas?

No.28

∞ Max said 439 days ago:

Love it! Great work Jon!

No.29

∞ Dirk said 439 days ago:

Nice one. But can i use it with Stylish? I’m not using Greasemonkey, Stylish is good enough for me. Will this work?

No.30

∞ Stefan said 439 days ago:

I love it! Looks awesome and the minimalist approach is great.

No.31

∞ Brian Ewins said 439 days ago:

Dirk: I’ve just put it up on userstyles.org, (follow the link on my name) so yes, you can use it with Stylish.

Leigh, if you want me to remove this so you can put your own one up, I’ll do that. BTW, I just noticed a problem with this (and with the camino instructions above). If you are in the UK, some uses of reader will take you via google.co.uk/reader, so I’ve added those URLs too; I presume this problem applies to other countries as well.

No.32

∞ panos said 439 days ago:

Hi,
It is amazing! Thanks!
However it takes much longer to load up a feed compared to the stock reader (tried in both Firefox and Safari OSX).

Does this have to do with loading the whole feed prior rendering it? Is there a way to speed it up.

Great work!!!!

No.33

∞ Tom said 439 days ago:

Further to my earlier comment about shift-j/k – they still work, but you can’t see their effect as selections are no longer highlighted. Any CSS genius want to make a suggestion?

No.34

∞ Brian Ewins said 439 days ago:

Tom: this brings it back for me (at the bottom of my stylesheet)

.scroll-tree li .cursor {
-moz-border-radius-bottomleft:5px !important;
-moz-border-radius-bottomright:5px !important;
-moz-border-radius-topleft:5px !important;
-moz-border-radius-topright:5px !important;
background-color:#CCCCCC !important;
}

This is exactly the rule that the original skin uses, except with a different colour, so the genius is all google’s.

(BTW: Jon – apologies for calling you Leigh earlier.)

No.35

∞ Matt Robin said 439 days ago:

It’s excellent! :)

(I’ve used an emoticon smiley face there, but I really am smiling like that!)

I’ve just installed it and think it’s one of the best things I’ve seen in a long time – makes Google Reader a nicer place to be!

Cheers Jon!
(Google should give you a commission….)

No.36

∞ Jon Hicks said 439 days ago:

@panos “Does this have to do with loading the whole feed prior rendering it? Is there a way to speed it up.”

No, it’s probably the extra time taken to load the CSS from my server. Shouldn’t be THAT much slower though.

It will work in Stylish, but that requires an extra step of logging in, and uploading the new CSS. I wanted to avoid that burden!

No.37

∞ Tom said 439 days ago:

Brian Ewins – you’re a legend, many thanks.

(For anyone else who wants to use this: you’ll need to load the CSS in with Stylish or similar and add Brian’s lines at the end. Or wait until/if Jon adds them to the hosted GM version.)

Thanks again to Jon for this beauty – it really is excellent work.

No.38

∞ Christoph said 439 days ago:

Great Work, Mate! Rocks!

Works brilliant in Opera. Thanks…

No.39

∞ dedenf said 439 days ago:

thank you Jon

No.40

∞ Ivy said 438 days ago:

Amazing! What i was looking for.
Better if it is possibile to still have (or hide/show) the feed options “button”

No.41

∞ Mats Taraldsvik said 438 days ago:

Ah, brilliant! Google reader is now beautiful. I finally taught myself the keyboard shortcuts for refresh ® and mark all as read ( shift+a ) – it’s all I need.

No.42

∞ Burun Esteti?i said 438 days ago:

Ok, I have an inkling (pun not intended) to modify that book image to the right to say “Schneier on Squid.”

“The closest the squid industry has to a rock star.”

No.43

∞ timdoug said 438 days ago:

Love it. I switched to Google Reader a few months ago, and this theme makes it quite pretty. I’m a huge fan of Helvetica’s simplicity, and can’t stand Arial’s ugly capital-Rs, angled stroke ends, and general unpleasntness, so I just had to whip up this:

Arialreader

Hope you don’t mind. I’ll take it down if you wish — I find it rather repugnant anyway, so I’m not so sure how long I’ll keep it up. ;-)

Cheers and thanks!

No.44

∞ perke said 437 days ago:

mmmm, you just made me go back to G-reader again.. Thanks a lot, sir!

No.45

∞ loleg said 437 days ago:

Simply gorgeouRSs!

No.46

∞ Christoph said 436 days ago:

@loleg: Hehehehe! great!

No.47

∞ Manuela said 435 days ago:

Absolutely brilliant. Switched back from NNW instantly :-).

No.48

∞ Chris said 435 days ago:

Beautiful. Love it. Thank you.

No.49

∞ Kyle said 435 days ago:

This is amazing. Thanks a bunch.

No.50

∞ Douglas said 435 days ago:

Love it. But is there any way to access the search bar?

No.51

∞ Fabio Romeo said 435 days ago:

Pretty cool with expanded view, but the list view is pretty ugly. I have the same problem showed by Marcus… Is there a chance of seeing it fixed?

No.52

∞ Jon Hicks said 434 days ago:

@Fabio – it not so much, something that needs ‘fixing’ – Helvetireader is designed for expanded view. List view may come later…

No.53

∞ Hugh Isaacs II said 433 days ago:

This theme would look great on the regular Google search page (and from the way they’re search business is going the name helvetica may fit).

No.54

∞ devolute said 433 days ago:

This looks great. It’s a pity I have to stop using the OS X-styled reader now though!

No.55

∞ Jordan Klassen said 432 days ago:

Fixed it to work with list view, although it messes up a tiny bit of positioning with the star in expanded view; it’s also not perfect with the borders, but it’s a step in the right position.
Here it is
Thanks for the sweet theme!

No.56

∞ Jordan Klassen said 432 days ago:

And Google just completely changed the default, breaking helvetireader. My guess is that they’ll be bringing in themes like the gmail themes soom too.

No.57

∞ Douglas said 432 days ago:

I knew this would happen. They changed gmail the other day, reader had to be next. No more helvetireader :(

No.58

∞ Groove said 431 days ago:

Installed it and it is absolutely awesome. Can we possibly have a ‘mark all as read’ button please?

No.59

∞ Colin Devroe said 431 days ago:

I will send you .50c if you update for the latest release. Google just released a horrible redesign. Ugh.

No.60

∞ John Ritterbush said 431 days ago:

@Groove – It actually had a “Mark All As Read” button, but Google’s latest update broke that. You will have to wait for the update here to see that again.

I have used your Mac OSX version and love it, but this one is even better. Thanks for creating 2 great options for Greader. I spend so much time in Greader that having a nice design makes it much more enjoyable to use.