7 ms·
Georgify: Hacker News meets beautiful typography
- gregparadee 16y agoNot perfect but nothing ever is the first time. Installed and love it so far can't wait to see some of the suggestions mentioned put into use in the future!
- tuhin 16y agoThis is my first every public release of such a thing! So please be gentle and do give any feedback that can improve the extension.
- ryan-allen 16y agoI think it's really pretty! I'll be using it day to day, thanks!
- cloudwalking 16y agoI like to scan comments by point values so it's easy to pick out good threads (shallow? maybe. effective? yes). Putting points next to the upvote arrow--and hence on the right side--seems like a better way to display them. It also helps frame the comments better.
- tuhin 16y agoThe idea originated from a restriction that I wanted a particular styling on homepage with the source website link flushed right. On second thoughts I realised that this works way better for comments since the upvote should NOT have anything to do with current points or who posted a comment. Brings a fair setup IMHO.
- justinchen 16y agoBut since you read left to right and people want to filter out comments that don't have lots of upvotes, doesn't it make sense to have the point values on the left? If anything, what about moving the vote action to the right? Or at the end of the comment ala Amazon.com?
- edu 16y agoCongratulations, it's a really nice work. I'd do just two small changes: First, the comment's points are important and right now are hard to read/notice. Second, I'm not a designer, but I've always heard you shouldn't use black typo on white background as it's a little bit to hard contrast, it's better to use a (very) dark grey on the type.
- edu 16y agoI just notice the vertical rhythm between paragraphs in comments is not constant, see: https://img.skitch.com/20110405-q2a81di6ew4gi1fcrckna6dwft.jpg https://img.skitch.com/20110405-q2a81di6ew4gi1fcrckna6dwft.j... the 1st and 2nd line and much closer than the rest. I'm using Chrome 10.0.6.648.204 on OS X.
- tuhin 16y agoYes, that is an issue I am looking to fix. Basically has got to do with HN markup being the ugliest thing I have seen. Tables all along with no classes and whatsoever. So targeting is a pain in the ass. Will see if using pseudo class for first element helps me out.
- tuhin 16y agoIt is hard to target comment points specifically without changing the color of entire line. Also I normally avoid looking at Comment points to avoid any bias and bring neutrality in my reaction to a comment. Again this maybe different for you guys. Also as a golden rule the popular comments (unless threaded) are on the top so not really that important for me. Second: In design specifically the rules are not hardwired like physics. You can break them but you must know that you are breaking a rule when you do. Normally I use #333333 in all my works but somehow missed it here. Will correct and put up an updated version tonight.
- petenixey 16y agoThis whole setup is really nice however I would like to +1 the request to see points next to the up/down mod. It would also be nice to see the font-size of the meta line be larger as its so small at the moment it's hard to read.
- deleted 16y ago[deleted]
- ck2 16y agoCould you make just a stylesheet for Stylish users? https://addons.mozilla.org/en-US/firefox/addon/stylish/ https://addons.mozilla.org/en-US/firefox/addon/stylish/ https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnn...
- tuhin 16y agoYes, will be putting the CSS on Github later in the day.
- ck2 16y agoNote that stylish has a repository too, so people can easily find it by site. http://userstyles.org/styles/browse/all/news.ycombinator.com http://userstyles.org/styles/browse/all/news.ycombinator.com So be sure to submit it there too, I will definitely try it.
- itsnotvalid 16y agoAfter seeing the headline I immediately thinks of Stylish (+ Greasemonkey, just to note) as well. The thing is, if it is just style changes, it is better to be done via Stylish. Extensions, for most of them in chrom(e|ium), would would absolve resources in the system via a separate process. For computers with less memory, running multiple chrome extensions would not be a good idea. Better to run extensions that benefit all sites than just one. [edit] just went to check whether a new process would be created - in fact, no, since there is no JavaScripts loaded. Please ignore the comment on resource and memory stated above, thanks. Also as a side note for using that in Firefox 3.6 , it seems that submit button's orange background is not applied like in chrome, so it would be harder to read the text on the button. Someone with Firefox 4 on hand may to see check on that as well.
- wewyor 16y agoHere is the stylesheet extracted from the chrome extension: http://pastebin.com/zkzHDSP2 http://pastebin.com/zkzHDSP2 raw: http://pastebin.com/raw.php?i=zkzHDSP2 http://pastebin.com/raw.php?i=zkzHDSP2
- 16y ago
- unwind 16y agoCan someone please fix the typo in the title? It hurts!
- mjac 16y agoI like this a lot. Could we make it the default theme?
- KarlFreeman 16y agoI'd second that. Its damn nice.
- marcomonteiro 16y agoI just download Chrome specifically to use this. It looks great! Thank you.
- nyellin 16y agoThe grey color for a:visited is too light. I have to strain my eyes to see it. edit: Also, the extra space in comment-headers is wonky. And even with my nitpicking, great job!
- tuhin 16y agoNormally you would not want to see that. I do not want to see it atleast. Also that makes the URLs work as an Inbox/Unread badge for me. With what I can see as the unread ones I need to read before the end of day. Will tweak it a bit though. Also different screens with different color gamut make it troublesome in corner cases. edit: The comments whitespace treatment is next in line on by issue list.
- sunsai 16y agoI have tried to tweak the layout without any browser extensions. This will work on any browser but it's a 'lite version' so you can only use these to read HN. Have a look: Non AJAX version: http://www.skillendar.com/hackernews/noajax.aspx http://www.skillendar.com/hackernews/noajax.aspx AJAX version: http://www.skillendar.com/hackernews/ http://www.skillendar.com/hackernews/
- tuhin 16y agoGood work. You might want to reduce the width since long lines are bad readability wise. Golden rule of 40-60 chars each line.
- sunsai 16y agoThanks mate; but I actually did this to make it easy for me to read HN posts on my netbook (1024x600). Reducing the width would mean lots of scrolling :(
- tuhin 16y agoUse a fluid width with min and max width so that the reading span does not grow too big or small. No matter what screen you have, anything longer than 70-80 chars in a single line is a pain to read. That is the reason readability and Safari Reader are designed the way they are. Use em/% to go screen size free.
- jackolas 16y agoNo voting? Seems like an odd omission or is it a cross-domain issue?
- oemera 16y agoThis is awesome! Thank you
- gizzlon 16y agolol.. the chrome store does not support my browser "just yet"
- statictype 16y agoI bet it's possible to write a Firefox extension that allows you to 'apply' Google Chrome extensions. They are, after all, just html pages and javascript with access to certain APIs that may already be available in Firefox in some form or other.
- jackolas 16y agoI think Firefox's JetPack labs initiative might be close to that. https://jetpack.mozillalabs.com/ https://jetpack.mozillalabs.com/
- rnadna 16y agoI like the idea, and there are several aspects of the georgify format that are pleasing. My main comment is that there is far too much vertical whitespace. The compactness of hn is pleasant to the eye, and it lets readers scan headlines quickly. A little tweaking will prevent readers from having to scroll so much.
- dasil003 16y agoIt's easy enough to add generous whitespace and make a design instantly more elegant and viscerally appealing, but when you are trying to extract value from information there is something to be said for information density. This is my beef with the new Sparrow Gmail client on OS X as well. When I open up Gmail in Chrome I can see 33 messages at once (40 once I scroll). By contrast Sparrow shows me 13 (always utilizing the full vertical of the screen). Now arguably it presents them in a better fashion (although the label display is lacking, but I digress), but is it worth sacrificing 2/3rds the visibility? Not with my email volume. Granted, information density is less important for HN, but then so is aesthetic appeal (the last thing I want is more people joining HN because it has an elegant appearance).
- Void_ 16y agoI would very much like a Safari extension.
- lwhi 16y agoI like this, but there's a lot of white space .. perhaps too much. Maybe a more compact view would be useful? Like others have said, the grey is too pale. EDIT: It would be nice if the layout made use of columns .. this could provide innovative use of wide-screen resolutions.
- quinndupont 16y agoI agree, far too much white space.
- trotsky 16y agoA bug here: http://img852.imageshack.us/i/hngeorgify.png/# http://img852.imageshack.us/i/hngeorgify.png/# (fixed image link) The parent post is being shown as a reply to a peer and not the post it actually replied to. Seemed like normal threading until I noticed the reply was older than the grandparent.
- tuhin 16y agoSurprised since the only change I did was add padding to the top and bottom. Wonder how that changed threading. I am not using one line of JS for this. Any suggestions as to what could be causing this?
- btipling 16y agoI disagree. I like the whitespace.
- gumbo 16y agoI also agree. There is too much white color, the readability is not very good. I was exited about it as i already mentionned here that there is room for improvment of HN. i'll uninstall it now. looking forward to try a corrected version.
- kami8844 16y agoColornazi in me has to point out that white isn't really a color, otherwise I agree.
- vnchr 16y agoI could feel myself stop squinting....is this what usability feels like?
- justinchen 16y agoI sat back in the my chair instead of hunching forward.
- nddrylliog 16y agoYou should've used csspivot.com for a quick preview link :)
- antirez 16y agoThanks, I'm loving it. It is a bit biased for aesthetic but well still an improvement over the default HN css.
- emp_ 16y agoI still think this suffers from the same issue on the Stylish option, when you are way down on the comments you have a hard time knowing if the comment is an answer to the OP or to another comment, the increased indent helped but a left align or vertical line all the way from the OP post would help a ton.
- tommoor 16y agoVery nice, i'll be keeping this installed
- Nanofied 16y agoStill could use a little touching up, but I love it none the less :)
- abeh 16y agoVery nice to look at, well done. A couple of points for me are that: 1. While it is easier to read, the combination of the larger size of the text and the vertical spacing makes it harder to scan all the topics quickly, as was possible without this style. 2. as already mentioned, the info sub-text is a bit soft in contrast and hard to read quickly, even though it looks nice. Suggestion: make the important info such as the numbers and username a bit more darker, but leave the repeated info such as 'points by' and 'comments' as they are.
- tomlin 16y agoI like it. A little off topic, but the Google Chrome Extensions that override CSS get my brain thinking about something like this on a different scale. For instance, could someone build complete Facebook or Twitter face-lifts? If it's possible, the consequences of that permutation would be interesting. Especially now that the modern browsers are moving towards auto-update, which encourages a higher likelihood of something like this taking off. If marketers starting picking up the idea, I see "shoot here to win the prize", phone number, email address collecting type of ads promising to "bring facebook back the way it was", "just enter your email address and we'll send you the link!" If you don't think this could work, just remember that a few years back people were installing emoticon packs and CometCursor just so they could have a customized, albeit terrible, experience.
- Diabeetus 16y agoAren't there chrome plugins that remove facebook ads? I'm not sure if it's done through CSS or some other way, but it seems like something you're describing.
- hammock 16y agoAdblock Plus for Firefox removes every ad you could ever think of, even the ads inside of youtube videos.
- rubergly 16y agoThere are definitely already extensions that completely remodel the UI experience of sites like Facebook. They've only been targeted at making things more usable and adding features that people want, rarely undoing new Facebook redesigns. The people who would install a Chrome extension to improve the design of facebook aren't going to be the kind of people who blindly say "ugh, Facebook looks differen, wtf!", and those kinds of people are especially not going to be the kind of people who would write up lots of complicated CSS and JS (both, not just CSS, would be necessary to roll back Facebook's upgrades) to redesign facebook. But this raises a good point: when Facebook rolls out a redesign, do they change the backend enough that an extension that overrode the CSS and JS with the previous design's CSS and JS would break?
- deleted 16y ago[deleted]
- deleted 16y ago[deleted]
- gunmetal 16y agoToo much space, going back to old way.
- tomkarlo 16y agoI like it, but I have to agree it's about 25% larger than I'd want, including both the input field for adding a comment (which takes up 1/5 of my screen height on a large monitor) and the comments, which end up being way too long. Just reducing the font sizes a little would help - having the default font so large kind of apes apps like readability, it's much bigger than is necessary. (Just zooming out on my browser isn't enough, since it also reduces the width of the lines.)
- grannyg00se 16y agoI don't see how the legibility is improved. It's different, but I think the current look is just fine. Maybe I'm just lacking an eye for typography.
- bonaldi 16y agoLove everything apart from the fixed-width main column. Leaves me with huge margins at either side with my usual window width.
- djacobs 16y agoThis is, of course, a personal preference, but I would much rather have a column with a fixed width based on how many characters we can expect in that column. Lines stretching across the screen at 120+ characters can be unwieldy. That's the reason i don't maximize windows. Sites like HN let lines of text go way too far for a window that's 1000+ px wide.
- adambard 16y agoI'll take that over a way-too-long line of text any day. Improves readability.
- joshellington 16y agoOn larger monitors, I usually Ctrl and + (Windows and Linux) or ⌘ and + (Mac) which increases the font sizes. Georgia looks awesome at 18-24px.
- l0c0b0x 16y agoWe need the option of fixing the margins ourselves, other than that great job!
- l0c0b0x 16y agoWe need the option of fixing the margins ourselves, other than that great job!
- jarin 16y agoI'm not 100% on some the details (like whitespace and contrast), but definitely A++ for effort.
- cptvideo 16y agonice try, but its way better to see 20 items at a glance than to mouse around a acre of white space. readability isn't everything, workability matters too. "<ctrl> +" is a good compromise if your eyes are going!
- vladocar 16y agoI suggested similar thing one year ago: http://www.vcarrer.com/2010/03/hacker-news-mini-redesign-unofficial.html http://www.vcarrer.com/2010/03/hacker-news-mini-redesign-uno... and the bookmarklet http://www.allapis.com/HN/HN-bookmarlet.html http://www.allapis.com/HN/HN-bookmarlet.html
- csomar 16y agoI think the next thing is to provide customization. That is, you can change colors and some settings (like padding and margin) to control white space. You may want also to change the font. I actually like the white space. Just the grey is a little bit pale, but this helps for concentration on the text that matters. Taste differs, not good to argue about it. It's still a good move from the Author. I was thinking of something similar, but time was a constraint. I might look to help improving that one. Any Github?
- Indyan 16y agoAn Opera port please.
- tuhin 16y agoNew update solves most of the issues raised by you guys. Thanks a lot for all the feedback.
- jjcm 16y agoSome thoughts: 1.) There's a lack of contrast in the page. A visited link is the same color as a comment that is rated < 0. 2.) The up/down vote arrows are visually far away from the name of the user. Knowing the context of who's saying something can mean the difference between a troll post and an insightful one. 3.) The page is no longer fluid. While this is more preference than an actual issue, I think that a fixed width format is detrimental for those of us who have widescreen monitors (or for those of us who like to tile our windows in small patches). 4.) Whitespace. There's a lot of it. Without your plugin, I can see all of the articles on the front page in ~1400px. With the stylesheet patch, it's about 3x that. I visit HN a lot, and will click on just about every story. As such, when I'm done reading HN all of the links have changed color. When I visit it later in the day, I can at a glance see every story that's new. Sometimes I have it autorefresh every few minutes on a separate monitor, and keeping everything concise allows me to do that. Those are my thoughts. At this stage I'd say that it's pretty, but not yet functional. Work on the functional portion and I'll keep this plugin installed. Great work, keep it up!
- tuhin 16y agoAn update has been posted that solves some of these issues (2, 4). (3) Fluid has a deterimental effect at lengthier line span (when it exceeds 50-60 chars). Hence limited at 700 px. (1)On HN visited links are read emails for me. Hence they are of not much use and thus same treatment as the dead link. Also it is funny since the reason most people gave for requesting flushing commenter's name to left was that they upvote or downvote with help of points/commenter's name! Atleast that was my interpretation. I had thought of the exact opposite reason and hence put it in right earlier. Upvote should have nothing to do with who said it or how many points it has already received.
- jjcm 16y ago"Upvote should have nothing to do with who said it or how many points it has already received" Not necessarily. While I'll agree with that the current score of the comment should have little to do with your vote, who said it is necessary for context. Consider this hypothetical comment: "The backend code behind the current search functionality at google is absolutely horrible. The search ranking algorithm is pathetic to say the least." Had this been said by an SEO guy or an employee of yahoo/bing, I'd have downvoted the comment. However, if it were a comment by Matt Cutts (http://news.ycombinator.com/user?id=Matt_Cutts http://news.ycombinator.com/user?id=Matt_Cutts), it presents itself in a whole different context. It's no longer a flamewar comment, but rather an admittance of areas where someone/something needs to improve.
- muitocomplicado 16y agoWorks great with the Collapsible Comments extension. https://chrome.google.com/webstore/detail/hockhafcdegocajmjhafgjncjpodihkd https://chrome.google.com/webstore/detail/hockhafcdegocajmjh...
- logic 16y agoFrom the screenshots, it reminds me a bit of Comfy Helvetica, which we discussed here a while back: https://comfy-helvetica.jottit.com/ https://comfy-helvetica.jottit.com/ http://news.ycombinator.com/item?id=2098340 http://news.ycombinator.com/item?id=2098340 http://news.ycombinator.com/item?id=2106056 http://news.ycombinator.com/item?id=2106056 (Not passing judgement on this theme, which seems quite nice; just thought I'd throw in a recommendation for a theme I've been using on HN since it was originally posted.)
- ile 16y agoUsing the CSS in Stylebot now. TY.
- bradhe 16y agoI thought this was gimicky at first but then installed it and went back to the HN homepage and...I'm blown away. This is really REALLY great and solves a problem people have been rehashing for a long, long time -- kudos!
- jbuzbee 16y agoIt may not be perfect, but it's a much-needed improvement that improves readability. Thanks!
- estel 16y agoI've had to stop using this now because the indents seem completely broken and all over the place. Replies appear threaded in a completely incorrect order.
- balakk 16y agoHere's a darker version of this, aka Metrofy. http://www.csspivot.com/33z8z http://www.csspivot.com/33z8z LCARSish too!
- tuancao 16y agoI really really like this extension. Make my reading on HN much more enjoyable.
- deleted 16y ago[deleted]