Georgify: Make Hacker News More Readable

http://tuhinkumar.com/georgify.html

by wyclif • 13 years ago

35 61 13 years ago

tuhinkumar.com

maximem• 13 years ago

2 minutes later: It's installed ;)

But the menu a little bit small and this light grey is hard to read but the rest is really good ;).

flix• 13 years ago

Gorgeous indeed!

ColinWright4• 13 years ago

I'm probably in a minority here, and I'm speaking purely for myself, and it's a strictly personal view, but ...

I hate it.

I'm sure it's technically very clean, elegant, and "nice", but more and more as I look at the "gorgeous" and "beautifully designed" sites pointed to from HN, I just feel like my face is being pushed through mush.

I know that sounds entirely negative, and I'm sorry about that, but the obsession with blended buttons and perfect pastels and crafted corners and so on just makes the whole thing feel wishy washy.

Am I alone in this? I'm sure lots of people love it, and I hope you get lots of great comments, but I just thought I'd mention that not everyone is the same in their perceptions.

Please, can someone with design skills equal to the ones demonstrated here have a go at something with a bit more "edge."

Oh, and here's the discussion from last time:

https://news.ycombinator.com/item?id=2410195

It's great to see that many of the comments from that discussion were taken on board and acted on.

Added in edit: I see that this is a controversial comment. It's getting both upvotes and downvotes, so people clearly agree, and disagree. But I think this comment is genuinely of value. If you create something and there were dissenting opinions, would you not like to hear them? Do you only want "Yes Men" in your entourage? Dissenting opinions can be hard to take, but if you block them out you get an echo chamber. Please, if you think this comment is of negative value and doesn't belong on HN, tell us why. For the downvoters, that's certainly your right and privilege, but ask yourself: are you downvoting because you think this comment doesn't belong on HN, or simply because it's an opinion contrary to yours? FWIW, I've upvoted the submission.

fredsted• 13 years ago

I get you don't like it, but why? I've never heard about "wishy-washy" in relation to Web layout and design. If you could be more specific, that would certainly make your comment better.

With that said, I personally think it needs less whitespace and smaller fonts. I'm not a fan of Georgia either.

Off-topic: Also, I'm tired of all these Hacker News iPhone apps, scrapers, browser plugins and whatnot. It gets too "meta" for me that these things are posted constantly.

ColinWright4• 13 years ago

I'm not a design person, I don't have the language to talk about these things, and I certainly can't articulate clearly exact points. I've been as clear as I can, I really have. I took a long time trying to write that comment, trying to explain my point, and trying to be clear.

It just feels, well, I don't know, "Energy Free", "Hypnotic", "Soporific". There's no sharpness, no hustle, no contrast, but those are terms that make you think of image contrast and sharpness, and that's not what I mean.

My father was a sign-maker, and he loved jobs that were specified by an architect. Why? Because they produced gorgeous designs that were harmonious and free flowing. The signs were specified to fit with the color scheme and blend with the decor. As a result, he would always be called back 6 months later to augment or replace the signage.

I wonder if I feel a little the same here. I'm slowly being hypnotized by "beautiful design."

onli2• 13 years ago

> Please, can someone with design skills equal to the ones demonstrated here have a go at something with a bit more "edge."

I tried an approach here: http://userstyles.org/styles/71445/better-hacker-news-design

I don't think it reaches the quality of this submission - i am not enough of a visual designer for that - and maybe it is also not what you search for, but you could give it a try. I tried to maintain a bit of what defines the original design, like the orange header, maybe it is that what you are missing.

ColinWright4• 13 years ago

Interesting. I've installed it and will try living with it for a time to see which I prefer. Sadly, I can only install it on two of my five systems, but that will give me a chance to switch between them and compare.

Quick feedback, I don't like the white text in the top bar, and you seem to have shrunk the width. I do like the different font, and am undecided about the blue links.

But I'll certainly give it a go. Thanks.

lmm2• 13 years ago

I think your habit of complaining in the guise of asking for explanation whenever you get downvoted constitutes gaming of the moderation system, which presents a greater danger to HN than even outright trolling. I want to discourage that behaviour, and will downvote it whenever I see it. I also find it rather distasteful that you're so defensive about being downvoted given that you of all users can clearly afford the karma.

ColinWright4• 13 years ago

I appreciate your candour - it's useful to see another point of view, and I will take it into account.

Having said that, I usually don't see the reasons for the down-votes, and I genuinely do want explanations. I don't mind the down-votes - whether or not I can "afford the karma" is beside the point. Down-voting people is a part of how the site works, causing comments and submissions to bubble up and/or down, and I think that's a good thing. Not being given the chance to learn something or to see an alternate point of view is disappointing.

But when someone disagrees with a comment and just performs a "drive-by down-vote" I think it's of negative value to the site, and I'd like to discourage that. Sadly, I suspect that ship has sailed.

So again, thank you for the feedback. If we're ever co-located, and you think you can stand my company, I owe you a coffee. FWIW, I've upvoted your comment, even though I (obviously) don't agree with it.

tathagata• 13 years ago

Readability often conflicts with the geek-aesthetics on digital screens and devices. For example, I personally like to code with anti-aliasing off - I just find the code more readable that way (maybe I am used to that?). I also don't much like the retina-display because it tries to hide the digital nature of the device (can't see the pixels - makes sense?). Lastly, while serif fonts might be more readable when viewed from top there does seem to be something intangibly wrong with them when viewed head-on horizontally.

jrnkntl• 13 years ago

I am using the HackerNew Chrome extension, more spacing seems to be the consensus;

https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

arbus• 13 years ago

I would also like to point out another alternative that does something similar that is just a pleasure to use: https://github.com/tommoor/HackerNew

blowski2• 13 years ago

Looks lovely, but I feel uncomfortable weakening my security just for a bit of sugar.

I use ihackernews.com/ for reading on mobile, and log in at news.ycombinator.com itself for posting or upvoting.

It takes longer, but I feel safer.

markild• 13 years ago

I'm sorry if this comes off as uneducated, but why exactly would this be weakening your security?

When installing the Chrome plugin, Chrome clearly states which domain(s) it will allow the plugin to interact with.

I would see your point if this was for a banking site, or any other site where you would want to keep some information private, but I don't really see how this applies in this context.

jurassic2• 13 years ago

Maybe he means privacy? https://panopticlick.eff.org/

blowski2• 13 years ago

Possible attack vector here? Developer is malicious (or their machine is compromised), plugin is updated to include naughty JavaScript on Hacker News. Or already does something malicious.

Running any executable code on my machine is a risk, and should involve a cost-benefit analysis.

In this case? Benefit - makes Hacker News look a bit nicer. Cost - I have no idea, without spending a time looking at the source code and Chrome's security policy.

So my analysis makes me think it's just not worth installing.

shanselman• 13 years ago

Try http://hackerwebapp.com/ for mobile.

johnchristopher2• 13 years ago

This is indeed more elegant than the original HN style.

But:

Installing stylish wasn't straightforward. It didn't tell me if I had to restart firefox or not. I restarted firefox and it had lost my opened tabs. This is stylish's fault.

I also noticed that firefox navigation toolbar is twice as big as before and it uses Georgia to render text inside the url and search fields. Weird and stylish's fault.

Ah, it turns out every site is using the new CSS. That won't do it :(

One thing that could be improved: the text field I am typing this text in can't be resized :( and its borders don't match the rest of the theme.

But it's indeed an elegant and readable theme. I like the 50-60 character limit for each line.

Good job, but I won't use it because of stylish disruptive effects on my browsing experience. I remember that before stylish I would drop css in the firefox profile and it would just apply to a specific domain. Is that still possible ?

mhd3• 13 years ago

Read my other comment in this thread, the stylish file has a bad domain restriction, enclose everything after it in a set of braces ({}), and it's fine.

oneeyedpigeon2• 13 years ago

Still didn't work for me in Chrome. I wasn't sure how that conflicted with the 'applies to' config setting in the UI, and I tried various combinations before giving up. A shame, but it seems that Stylish just isn't production-ready.

johnchristopher2• 13 years ago

Thanks, maybe I'll try later.

Note: I have to ask myself why stylish seems to allow modification of firefox's chrome. I have lost touch with the state of things in firefox extensions but I don't remember it being promoted as a skinning extension.

lotsofcows• 13 years ago

Yay, let's all use light grey text on a black background!

adwf• 13 years ago

Yeah I sometimes think there must be a kind of Muphry's Law for designers: "If you complain about a design, your own design will have numerous flaws"?

Half the time when I follow these design blog links I find a website with nigh on unreadable text. Usually it's down to a tiny font-size, this time it's down to grey text on dark grey background combined with fairly cramped looking text.

jgrahamc• 13 years ago

As a high karma user I get the opportunity to change the color of the top bar. It would be cool if PG allowed me instead to insert some arbitrary CSS then I would make small style changes myself.

shanelja2• 13 years ago

What counts as high karma? As far as I can remember, I've always been able to change the colour of the top bar, although it may just be my lapsing memory.

crm416• 13 years ago

I only have ~300 and I can do this. IIRC, I've always been able to.

pooriaazimi• 13 years ago

Yes, this is what I've been dreaming of for maybe a couple of years...

I like HN's simple look and feel - my custom CSS would be just a couple of lines to make the damn text bigger on iPhone.

vidarh• 13 years ago

There are tons of browser extensions that allows you to do this on a site by site basis. I use Minimalist on Chrome.

tuananh• 13 years ago

I got only like 300 and I can do it. It's def not consider as high IMO.

muyuu• 13 years ago

You can easily do that browser-side.

There are helper tools for this, too. Like stylebot for Chrome.

In Firefox the usual way is just to create a userContent.css in your profile folder, then add sections like this:

@-moz-document domain(whatever_domain.com) {

// your site-specific css comes here, use !important for overrides

}

kungpoo• 13 years ago

The text on that site is annoyingly difficult to read

elktea• 13 years ago

It's working on all sites, as well as the address bar?

Firefox on Linux with Stylish.

mtgx• 13 years ago

Can you at least reduce the space between the headlines? It may look nice, but I don't want to scroll 3x as much as before.

otsdr• 13 years ago

I suppose it _is_ gorgeous, but I can't really read anything without having to scroll every 3 seconds. Uninstalled.

mhd3• 13 years ago

Some nice elements, although for something as dense as HN, I still prefer if it uses more of the screen estate. But it's a good starting point to fiddle with.

One note: At least with my firefox/stylish setup, it seems that the domain restriction was wrong.

       @-moz-document domain('http://news.ycombinator.com/'), url-prefix('http://news.ycombinator.com/')

should be followed by an set of parens encompassing the rest of the file, or else it gets universally applied (also I think that "@-moz-document domain('news.ycombinator.com')" is sufficient).

jurassic2• 13 years ago

I think the default HN theme could be improved with tasteful typography, but this alternative offering sacrifices too much information density. Dropping from 21 to 8 items above the fold on my MacBook isn't acceptable to me. Without the gratuitous padding I think this would be much better.

Semaphor• 13 years ago

I love it. Most other extensions either annoy me or leave the text too small. This is great.

And from the last thread for it, here is a great dual column chrome extension that works perfectly with Georgify: https://chrome.google.com/webstore/detail/chngbdmhgakoomomnn...

Samuel_Michon• 13 years ago

An article about readability on a page that has gray text on a gray background? This guy must be trolling.

gordaco• 13 years ago

I feel that this new design makes HN lose its personality and look more like some random, more generic page or blog following pervasive trends of design. Maybe it's the font or the spacing, I'm not sure.

I'd stick with the current design.

EDIT: as others have pointed out, there's also a significant loss of information density, and that can be quite annoying for the average HN reader.

Kiro• 13 years ago

It's interesting that all these Hacker News makeovers always look the same.

vbrendel• 13 years ago

Chrome users, no need to look further than HipsterNews: https://chrome.google.com/webstore/detail/hipsternews/midncc...

shanelja2• 13 years ago

This is fantastic. Just installed it and I love it already. I would however make the links slightly darker.

What I liked most about this, as a Chrome user, was one click installation through an add-on. It was as simple as clicking a link and pow! It's in. This is both a testament to yourself and the Chrome team themselves.

Now... All we need is an iPhone app and my HN reading experience will be complete...

stevoski• 13 years ago

The only thing I want changed in the way Hacker News rendered is this: make it easier to use on my iPhone. It is difficult to touch the right link on a small screen, and I often go to the wrong page.

The voting buttons are just not possible to use on my iPhone - the chance of accidentally voting down when I want to vote up is too high.

oneeyedpigeon2• 13 years ago

This problem is significant enough on the ipad, so I dread to think what the iphone experience is like. I've gotten used to holding down links rather than tapping them, so it's easy to cancel a mispress. Certainly less arduous than constantly zooming in/out.

mattbot5000• 13 years ago

I use http://ihackernews.com/ on my phone. I saw it posted on here a while ago and found it useful.

oskarth• 13 years ago

I think it's interesting how many people make "better" versions of HN. Without exception none of these get to heart of the problems with HN (middlebrow dismissals getting upvoted, mob mentality, etc), something that pg has alluded to several times.

As an exercise in design, great, knock yourself out. As an attempt to make HN better? I think less action and more reflection on what really would make HN better would be appropriate.

This is just a general feeling I get from seeing these meta-HN things over and over again. I lump them all together in my mind, perhaps unfairly so, because they all seem to be solving the easy - but ultimately the wrong - problem.

RustyBus• 13 years ago

"I always had to hunch forward to be able to read through the micro sized type."

Press CTRL and +. No more hunching required.

pstadler• 13 years ago

The version for Stylish was broken. Fixed here: https://gist.github.com/pstadler/5684154

mikecane• 13 years ago

Pretty. But if the goal is to make the text larger, I can just do CTL-+ in Firefox (which I seem to use a lot these days, but not at HN) to make the text bigger without inflicting it on everyone else.

ZenoArrow• 13 years ago

It looks nice, but I kind of feel it misses the point (at least for people like me). I like the information-dense nature of HN, adding in a bunch more whitespace reduces this advantage. There are improvements that can be made to HN (such as being able to collapse comment trees that are obviously descending into pointless bikeshedding), but improving HN by reducing one of it's key advantages is not what I'd be looking for. Just my opinion of course, other people here have responded to it positively.

greyman• 13 years ago

Honest question: Why larger space between lines should make the HN more readable? I don't get it. Sorry to sound negative, but I feel it is less readable, because I need to scroll more and see a less text on a screen.

jituiitm• 13 years ago

installed..... one minute.....removed. Old view still better

drcongo• 13 years ago

I'd be happy to port this to Safari once it's up on GitHub. I like it.

davidjohnstone• 13 years ago

I like it, but I agree with the complaints here that it causes a large loss of information density because it's so spaced out.

So, I had a play around in Chrome Dev Tools and came up with this: https://dl.dropboxusercontent.com/u/41899939/georgified-hack...

This involved making it wider and reducing a lot of padding, and it increases the number of visible items on the front page by 50%. (Rough numbers: in the same space, mine shows 14 items, original Georgify shows 9, default HN shows 23.)

I think comments pages would be better if they were wider, but had a max-width applied to comments, so nested comments aren't squeezed so quickly.

Side note: Whenever I look at HN's HTML, I am horrified. Today's revelation: The first paragraph in comments are wrapped in a <font color="#000000">, the rest are <p>s.

Edit: There appears to be a bug that's causing comments that should be horizontally aligned to not be. The top and bottom comment here are responding to the same parent, but aren't indented equally: https://dl.dropboxusercontent.com/u/41899939/georgify-commen... (I drew the vertical line).

Edit 2: 32 points in one hour, yet this story is off the front page — this must be getting a lot of flagging.

hardwaresofton• 13 years ago

why is there not a open-source hacker news enhancement suite? I kinda wanted to make one but am so swamped I never get the chance -- someone do it, and make it an extension or something

adventured• 13 years ago

I like the improved spacing between text objects and I like the font sizing, but I really don't like the Georgia font. I can't stand the way some numbers line up next to each other, eg 38 or 63. I don't like the tail on the f (eg in flag). I don't like the kerning or letter spacing, I think the design of the letters lends poorly to packing them very closely together.

It's my opinion that Georgia has a mediocre readability value to it.

dsowers• 13 years ago

I've been using this theme for a year now and can't live without it. The density is too high with the regular hacker news and it's hard to read.

tuhin• 13 years ago

Hey all. I created this over two years ago.

I created this for myself, which means it is highly opinionated. Some will love it and others will hate it and that's ok. I have been using it for the last two years and there is no way I can go back to the old HN. That said it is equally possible that most of you do not like it as much. And really that is fine. There are more important things for us to argue about. :)

Feel free to reach out at tuhin @ me.com or ping @tuhin on twitter in case you guys have more constructive feedback.

Georgify: Make Hacker News More Readable

Related Stories