7 ms·

A Comfy Helvetica frontpage for Hacker News

176 points by godDLL 16y ago

spitfire 16y ago
Use this, please. Oh and add a real search option. Thank you.
- samdk 16y ago
  Other than not being directly integrated, what's wrong with http://searchyc.com/ http://searchyc.com/ as a search engine?
  - godDLL 16y ago
    I see http://searchyc.com/ http://searchyc.com/ mentioned every other day, might be that HNers are overwhelmingly not aware of it, and many don't know how to search just any site with Google. If that's the case then it begs to be linked to from the front page, or a simple search field needs to be put up that will take your query and put it into Google like so: http://google.com/search?q=site:news.ycombinator.com%20queryterm
    - roxstar 16y ago
      In the footer the google (site:...) one is there, but no one ever checks the footer and it is just a link. I think that it was put there after the previous big complaint thread about search but it hasn't helped any and the best way to search is still searchyc. Edit: previous hoopla http://news.ycombinator.com/item?id=1329334 http://news.ycombinator.com/item?id=1329334
    - Periodic 16y ago
      These days, if all the pages on a site are publicly spidered, then it's likely that Google will do a great job of searching your site for you. I've seen many sites with terrible search boxes that look like they use the built-in MySQL full-text search. I find I often get better results by just searching through Google with a site: tag. It makes me think of cases where OpenID is used over in-house authentication. Why maintain something when there are already free systems that will do that for you and have worked out all the kinks?
    - taylorbuley 16y ago
      Either there's some really whacked out sample bias here or Google is most definitely the better choice.. >= 20 hours indexing differential. http://searchyc.com/mongodb?sort=by_date http://searchyc.com/mongodb?sort=by_date https://encrypted.google.com/search?q=mongodb+%2B+site:news.ycombinator.com&tbs=rltm:1 https://encrypted.google.com/search?q=mongodb+%2B+site:news....
      - nopassrecover 16y ago
        I can live with 20 hours typically when the results are presented better.
      - s-phi-nl 16y ago
        SearchYC's benefit is not that it gives more current results: it allows you to search comments by, e.g., their author in ways that Google, being a general search engine, cannot.
- dchest 16y ago
  pg said, search is in the works: http://news.ycombinator.com/item?id=1955629 http://news.ycombinator.com/item?id=1955629
acgourley 16y ago
Although I'm sure it's simply because I'm used to it, I like the current design better.
- jackolas 16y ago
  His capitals seem too large...
- godDLL 16y ago
  The current design is functional and minimal. It's just what's needed and no more. But I'd say it lacks conveniences. Like text set to 'reading-size', for instance.
  - mapleoin 16y ago
    I find that the text size is perfect in Firefox. It's crappy in Opera, Epiphany and Chrome, but it looks great in Firefox.
  - FluidDjango 16y ago
    Just curious: why is font-size such an issue? I mean, I like my size how I like it - and adjust it all the time ( cntl/cmd -/+ keys) as I move from site to site or use windows of different sizes. [And have even set a hot-key combo to toggle on/off Safari's "Zoom text only" feature.] I've been told that only the geekiest 1% of population are even aware of the possibility of text zoom, but for us... doesn't anybody else tweak on the fly all the time?
    - godDLL 16y ago
      I actually tweak everything around me all of the time. It's a big part of what I am as a person. I do drive-by tweaking like this as well. Gangsta tweaking.
- guywithabike 16y ago
  It's missing that extra "superficial hipster" touch, though, you have to admit.
Breefield 16y ago
Not sure why, but I was expecting something nice like http://feedafever.com/ http://feedafever.com/ I'm going to stick with the current design.
- godDLL 16y ago
  That would be a functional rewrite, not a styling.
deleted 16y ago
[deleted]
taitems 16y ago
I don't want to sound like a jerk, but there are a few things you might want to consider fixing: - The jarring placement of the YCombinator image, throwing out the alignment and flow of the page. - The over-sized numbers for each item. - The excessively big header "Hacker News", and what appears to be a strange effect in the screenshot. - Lack of a fallback font for Helvetica Neue (Helvetica, Arial, sans-serif). - The centred nav items along the top bar are awkward. - The tiny up and down vote buttons are what people struggle with the most in terms of mis-clicks, maybe these could do with some attention. - A slight gap between each article so the "slab of text" effect isn't so strong.
- godDLL 16y ago
  Thanks for the constructive feedback, that's why I love this place. :) - I haven't decided whether I want to keep the logo at all, and where it should go. I may play with it more later. - Thinned out the numbers to reduce their weight, and it seems to be enough IMO. - Here our taste will differ. But that's a good thing, right? - Currently this works on one machine with one browser. If people like it, I'll polish the hell out of it, sure. Cross-browser and cross-platform will be the first thing on my list. - They were awkwardly lumped to the header in the current layout, I think. Just wanted them to have a little space to breathe. - That would be the second thing on my list if the style finds users. - Good suggestion. EDIT: formatting
jerf 16y ago
I just watched Helvetica last night. Apparently you are either a brilliant designer who has mastered modernism or terrible shill for the Vietnam War and all that's wrong with corporatism for using Helvetica. Just thought you should know. Heavy stuff.
- godDLL 16y ago
  I didn't put _that_ much thought into it, thank you. :)
- kaylarose 16y ago
  If you like Helvetica, you should watch Objectified. It's by the same director, and is similar to Helvetica, only about Industrial Design (Dieter Rams, Jon. Ive, etc.). It's on Netflix instant streaming.
taylorbuley 16y ago
Now how do I get you to redesign my site? My plan: (1) Get you to use it; (2) Make it completely unusable..
- godDLL 16y ago
  Option 3: ask nicely.
  - taylorbuley 16y ago
    Where/how? Please? :)
    - godDLL 16y ago
      AIM is godDLL, email is yCherkashin on gmail.
jhrobert 16y ago
I had no clue such things were even "possible" using CSS, thanks!
jjguy 16y ago
your proposed layout isn't bad, but I'm an engineer so change is tough. hackernews as it is feels like home, a new layout will take some to settle. btu thanks for the topcolor=ffffff suggestion. I like that topcolor change a lot, and the homepage still feels like home.
- DougBTX 16y ago
  > but I'm an engineer so change is tough. Why the correlation?
  - TimothyBurgess 16y ago
    Yeah... I'm an engineer (a bit OCD too but who isn't these days?) and perfectly okay with change. I enjoy it rather... but I definitely prefer HN's current look over the OP's. The current font size is perfect as it is. I feel like larger fonts make sites look less professional... can't quite put my finger on why though. Maybe it's because larger fonts require more scrolling and is less efficient when I can read 12px (or even 11px) font without squinting just fine. There may also be a correlation (at least for me) with large fonts and say... children's books/sites and those with poor vision (typically the older generations who are mostly computer illiterate)... i.e., less professional and more casual.
citricsquid 16y ago
I'm not someone who desires fancy design, I like reddit, but something about Hackernews isn't quite right. I can't put my finger on it and I don't like this "redesign" either. I wish I could work out what it is, something just doesn't feel right. It's functional though, so that's good.
- jerf 16y ago
  I Am Not A Designer (terrible with colors), but I've read this book: http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/ref=cm_lmf_tit_21_rsrsrs0 http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... Which I very much recommend. What you're observing is probably the lack of a strong line on the left side. The right edge of the Y Combinator logo ought to form a guide line down the page, with the voting arrows' right edge X pixels to the left and the text X pixels to the right of that, and this line should also propagate through the text entry box and the reply button and so on. Instead, there's the logo, the link, the textbox and reply button (which do at least line up with each other), and the first layer of comments, each of which has its own individual vertical line. (I think. Comments and the title text are close but I'm not sure it's quite right, and there's so much interference in between it doesn't matter.) I Am Not A Designer but I know enough to know that's wrong. Also, the bottom of the Y in the logo should form a horizontal line that the rest of the text in the title bar lines up with, whether or not that happens for you appears to depend on the zoom level of your browser. (For me right now the "Add Comment" is visibly above the Y, but when I zoomed in to look closer it actually dropped below that line. By the way, designing on the web is hard. Also my website sucks and I know it. It's on the list.) Something should probably also be done with the horizontal line the voting arrows line up on. Cleaning that stuff up would be a start. It probably wouldn't be enough, and then I'd be stuck, because I only get the really basic mechanical stuff. Everything I've phrased as fact in this comment should be taken to be opinion, it would just be very tiresome for me to type and you to read the same caveat over and over.
- mino 16y ago
  > but something about Hackernews isn't quite right Agree!
daviding 16y ago
Ubuntu, Chrome Dev 10.0.634 looks like this, i.e. logo broke: http://i.imgur.com/plzvg.png http://i.imgur.com/plzvg.png I'll try it out for size for a while - easy to apply using Stylish extension here for Chrome users: https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnn...
- godDLL 16y ago
  If you set your top banner color to white either with user CSS or in your profile (if your karma is sufficient) it will fix the header.
  - daviding 16y ago
    Yes, thanks - have done that now. Also Ubuntu doesn't have Helvetica Neue installed natively, so I change the body to fall back more gracefully to sans-serif: body * { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
    - godDLL 16y ago
      You could pick and use a favourite -- 'Linux Libertine' will do quite alright I think.
      - nagnatron 16y ago
        You can, of course, use whatever you like, but I think that putting a serif font as an alternative for Helvetica Neue/Helvetica for Linux users is a bit silly. There's plenty of Helvetica alternatives on Linux.
        godDLL 16y ago
        Believe it or not, but I actually like Libertine and have no particular fixed interest in Helvetica. I could have suggested Liberation Sans, or DejaVu Sans just the same. I just saw a similar re-layout with Georgia that I liked and was a bit primed for serifs. :)
fghrthfgbr 16y ago
Click on our website: ====== ( http://vurl.me/YDW http://vurl.me/YDW )==== jordan air max oakland raiders $34a€“39; Ed Hardy AF JUICY POLO Bikini $25; Christan Audigier BIKINI JACKET $25; gstar coogi evisu true jeans $35; coach chanel gucci LV handbags $36; coogi DG edhardy gucci t-shirts $18; ----- ~ ¤ ╭⌒╮ ╭⌒╮ ╭⌒╭⌒╮╭⌒╮～╭⌒╮ ,））））,''）~~ ,''~） ╱◥█◣ ╱◥█◣====== ( http://vurl.me/YDW http://vurl.me/YDW )==== ｜田｜田｜｜田｜田｜ ╬╬╬╬╬╬╬╬╬╬╬╬╬╬
Periodic 16y ago
The low-contrast karma-number is a nice touch. I agree that my karma rating shouldn't be as prominent as it is. I hate logging scanning the site, having my eye hit the karma number and mentally doing calculations of how it changed.
jqueryin 16y ago
My personal favorite touch was the increased fontsize of headlines. I had a much easier time scanning for topics of interest.
andrewljohnson 16y ago
I usually don't like these "look at my awesome new design for your already successful website" posts, but this one is an exception. This design makes what I would say are clear improvements, and doesn't try to throw out the design wholesale. This design makes just a few improvements - better use of white space, easier to read text, and I happen to think the header is better too. This pleases the part of my brain that knows how to lay out broadsheet newspapers. Bravo, looks good! I also think the arrows should be bigger.
- godDLL 16y ago
  Thanks, I really appreciate it. Others have said nice and useful things as well, including the thing about the voting arrows being hard to hit http://news.ycombinator.com/item?id=2098502 http://news.ycombinator.com/item?id=2098502
- rsoto 16y ago
  Yeah, I like HN just as it and understand this is a design made by a coder, but using tables is just plain wrong IMHO.
  - eru 16y ago
    Sure. And Emacs is way better than Vi.
dandelany 16y ago
Overall, I really dig it - good work! But why did you use 'Menlo' for the headline? It seems a bit out of place. I'm assuming you were going for a "monospace hacker" look, but it just ends up clashing with the Helvetica in an uncanny-valley sort of way. (http://www.noupe.com/design/mixing-multiple-fonts.html http://www.noupe.com/design/mixing-multiple-fonts.html see rule 4) Try it with a bold/heavy/black version of Helvetica, like the "Comfy Helvetica" header you have on your page! I just tried it and I like it much better now.
- godDLL 16y ago
  I tried both versions earlier, and the monospaced one sat better with me. Originally I decided on it because I didn't want to bring another typeface into the mix where I already had Menlo and Helvetica, so I tried both and settled on the one that fit my taste better.
DougBTX 16y ago
Nice. I've added this for the comment reply pages: td[bgcolor="#FF6600"] { background:white!important; }
- godDLL 16y ago
  That will fix the submission page too. Grabbed it, thanks.
deleted 16y ago
[deleted]
varikin 16y ago
I think I dislike about the HN design is the visited link color. If I find that it blends in with the background to the point that I scan right over it when looking for visited links. It needs just a bit more contrast.
- mise 16y ago
  I was thinking about this yesterday, about how useful it was the visited links are down-played! There's always monitor setting differences too, I guess.
  - varikin 16y ago
    That is a good point but the problem I have is that I click a link, read the article, go back to HN, and look for the link to view the comments. At that point, I sometimes can't find it because the link blends in and I scan right over it. I wouldn't have this problem if I just started opening all the links in new tabs, but that isn't my normal browsing habit. I guess I am a depth-first instead of a breadth-first user.
    - eneveu 16y ago
      I had the same problem, which I solved by adding the following to my user style (using Stylish): @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("news.ycombinator.com") { .title > :visited, .subtext > a[href*="item?id"]:visited { color: #ff6600 !important; } } It marks visited links / comment threads in orange. I use Firefox but think you can do something similar for Chrome.
Kilimanjaro 16y ago
I'd like a bigger font like in http://www.hackerblogs.com/ http://www.hackerblogs.com/
Osiris 16y ago
The user.css file works just file in Opera as a site-specific user CSS file, though it does look slightly different than the screenshots.
yason 16y ago
I think that without the orange bar the page is too airy—should I say appleish—elements are just floating in out there somewhere. The bar gives the page clear frames. As for the font, why define one at all? Browsers already provide a default font which hopefully is configured by the user.
wookiehangover 16y ago
This looks pretty swell. I'm a fan of the UI improvements. I also use a chrome plugin to inject some styling and other fun features to HN. It's on github at https://github.com/wookiehangover/grapeDrink-for-hackernews https://github.com/wookiehangover/grapeDrink-for-hackernews . Mine's definitely not as conventionally handsome tho.
- godDLL 16y ago
  You could easily borrow some or all of the CSS in mine, I won't mind.
diamondhead 16y ago
Current design is very transparent, it's like there is no design. Logo is very small (truly, why do you need a bigger logo?!), navigation is placed on where we expect with the size we even don't notice it's 14px. Font type is as simple as possible. I wish I did not see this topic because from now I'll think about design of the site while I read it.
calbear81 16y ago
http://imgur.com/VFLOs http://imgur.com/VFLOs I went the opposite direction and went with Georgia (a serif font that was designed for better online legibility) and made the following tweaks: - Tested out a block style button (1st listing) and adding more horizontal padding to make it harder to misclick on upvote. - Made the header a neutral grey because someone said their eyes always moved to the top. - Added more padding to the top just to give it some breathing room. - Made the font underneath the titles slightly larger and made links turn "black" when hovered over. I messed around in Firebug for this and in doing so realized the whole HN site is a gigantic table. Very interesting...
- godDLL 16y ago
  That is very, very tasty. And you gave me an idea of how to fight those tiny vote arrows, thanks. EDIT: updated with spiffier voting arrows.
  - calbear81 16y ago
    Did you want the GIF I created for the voting arrow? It appears that the voting arrows are not styled in so the GIF is written in every cell in that column. Here's what else I would change if I could: - Instead of arrow disappearing after you upvote, turn it orange so you know what you've already read and voted up. - Offer a checkbox option on top to "hide articles already read" which will then leave only unread items in the list!
    - godDLL 16y ago
      That would require more than simple CSS. I'd have to venture for the first time into the Greasemonkey. I'm not sure I like how that sounds.
aditya42 16y ago
I took the liberty of turning this into a userjs, for those of us who don't want to install an extension to run an extension in Chrome : http://userscripts.org/scripts/show/94618 http://userscripts.org/scripts/show/94618 I'll try and keep it updated as much as I can.
- godDLL 16y ago
  Wow, cheers mate. You want me to ping you at your email when I change things?
  - aditya42 16y ago
    If that's convenient for you, sure. But I think setting up a Github repo that I can watch will be easier for you and me (you do use Github, right?). Otherwise I can check the code page once a week too; not really an issue.
adsahay 16y ago
I ported it to regular user script: https://github.com/adsahay/Comfy-Helvetica-style-for-HN https://github.com/adsahay/Comfy-Helvetica-style-for-HN Works in Firefox and Chrome. Why should Safari have all the fun? ;)
- godDLL 16y ago
  That's fantastic, thank you. I'm updating it to eventually be reasonably cross-platform and cross-browser as well as mixing in things suggested in this thread, so keep an eye on that page – a GitHub link may pop up there if I get around to it, and the updates are generally posted right up on that page.
  - adsahay 16y ago
    Great. Look forward to the updates.
    - godDLL 16y ago
      There is an Atom feed on the code listing page. feed://comfy-helvetica.jottit.com/user-css?m=history.atom
Luff 16y ago
Here's a version that works in Firefox (minus the zoom): http://pastebin.com/AaWkNdjF http://pastebin.com/AaWkNdjF I use the addon Stylish to load it.
shortlived 16y ago
It looks like you changed the header color before the redesign -- how?
- edmccaffrey 16y ago
  From his user settings page, the topcolor box.
  - shortlived 16y ago
    Is this some magic box that only gets enabled with so much karma? I don't have it..
hbt 16y ago
If we're sharing awesome designs, I own all of you ;-) http://oi55.tinypic.com/r8yys7.jpg http://oi55.tinypic.com/r8yys7.jpg
- godDLL 16y ago
  That would be so much nicer if you were to use Zenburn for the dark color scheme. http://slinky.imukuppi.org/zenburn/ http://slinky.imukuppi.org/zenburn/
  - aditya42 16y ago
    For dark schemes, Wombat (for Vim) would be better, in my opinion, which is based off Desert. Or even Twilight (for Textmate). To OP: no, that's not too nice. Maybe if you were going for accessibility and high-contrast ...
sgt 16y ago
I for one welcome our new Helvetica overlords.
jaredstenquist 16y ago
Much Thanks, especially from my eyes. PG's CSS coder needs to use something bigger than 10px!

176 points by godDLL 16y ago

spitfire 16y ago

Use this, please. Oh and add a real search option. Thank you.

samdk 16y ago
Other than not being directly integrated, what's wrong with http://searchyc.com/ http://searchyc.com/ as a search engine?
- godDLL 16y ago
  I see http://searchyc.com/ http://searchyc.com/ mentioned every other day, might be that HNers are overwhelmingly not aware of it, and many don't know how to search just any site with Google. If that's the case then it begs to be linked to from the front page, or a simple search field needs to be put up that will take your query and put it into Google like so: http://google.com/search?q=site:news.ycombinator.com%20queryterm
  - roxstar 16y ago
    In the footer the google (site:...) one is there, but no one ever checks the footer and it is just a link. I think that it was put there after the previous big complaint thread about search but it hasn't helped any and the best way to search is still searchyc. Edit: previous hoopla http://news.ycombinator.com/item?id=1329334 http://news.ycombinator.com/item?id=1329334
  - Periodic 16y ago
    These days, if all the pages on a site are publicly spidered, then it's likely that Google will do a great job of searching your site for you. I've seen many sites with terrible search boxes that look like they use the built-in MySQL full-text search. I find I often get better results by just searching through Google with a site: tag. It makes me think of cases where OpenID is used over in-house authentication. Why maintain something when there are already free systems that will do that for you and have worked out all the kinks?
  - taylorbuley 16y ago
    Either there's some really whacked out sample bias here or Google is most definitely the better choice.. >= 20 hours indexing differential. http://searchyc.com/mongodb?sort=by_date http://searchyc.com/mongodb?sort=by_date https://encrypted.google.com/search?q=mongodb+%2B+site:news.ycombinator.com&tbs=rltm:1 https://encrypted.google.com/search?q=mongodb+%2B+site:news....
    - nopassrecover 16y ago
      I can live with 20 hours typically when the results are presented better.
    - s-phi-nl 16y ago
      SearchYC's benefit is not that it gives more current results: it allows you to search comments by, e.g., their author in ways that Google, being a general search engine, cannot.
dchest 16y ago
pg said, search is in the works: http://news.ycombinator.com/item?id=1955629 http://news.ycombinator.com/item?id=1955629

acgourley 16y ago

Although I'm sure it's simply because I'm used to it, I like the current design better.

jackolas 16y ago
His capitals seem too large...
godDLL 16y ago
The current design is functional and minimal. It's just what's needed and no more. But I'd say it lacks conveniences. Like text set to 'reading-size', for instance.
- mapleoin 16y ago
  I find that the text size is perfect in Firefox. It's crappy in Opera, Epiphany and Chrome, but it looks great in Firefox.
- FluidDjango 16y ago
  Just curious: why is font-size such an issue? I mean, I like my size how I like it - and adjust it all the time ( cntl/cmd -/+ keys) as I move from site to site or use windows of different sizes. [And have even set a hot-key combo to toggle on/off Safari's "Zoom text only" feature.] I've been told that only the geekiest 1% of population are even aware of the possibility of text zoom, but for us... doesn't anybody else tweak on the fly all the time?
  - godDLL 16y ago
    I actually tweak everything around me all of the time. It's a big part of what I am as a person. I do drive-by tweaking like this as well. Gangsta tweaking.
guywithabike 16y ago
It's missing that extra "superficial hipster" touch, though, you have to admit.

Breefield 16y ago

Not sure why, but I was expecting something nice like http://feedafever.com/ http://feedafever.com/ I'm going to stick with the current design.

godDLL 16y ago
That would be a functional rewrite, not a styling.

deleted 16y ago

[deleted]

taitems 16y ago

I don't want to sound like a jerk, but there are a few things you might want to consider fixing: - The jarring placement of the YCombinator image, throwing out the alignment and flow of the page. - The over-sized numbers for each item. - The excessively big header "Hacker News", and what appears to be a strange effect in the screenshot. - Lack of a fallback font for Helvetica Neue (Helvetica, Arial, sans-serif). - The centred nav items along the top bar are awkward. - The tiny up and down vote buttons are what people struggle with the most in terms of mis-clicks, maybe these could do with some attention. - A slight gap between each article so the "slab of text" effect isn't so strong.

godDLL 16y ago
Thanks for the constructive feedback, that's why I love this place. :) - I haven't decided whether I want to keep the logo at all, and where it should go. I may play with it more later. - Thinned out the numbers to reduce their weight, and it seems to be enough IMO. - Here our taste will differ. But that's a good thing, right? - Currently this works on one machine with one browser. If people like it, I'll polish the hell out of it, sure. Cross-browser and cross-platform will be the first thing on my list. - They were awkwardly lumped to the header in the current layout, I think. Just wanted them to have a little space to breathe. - That would be the second thing on my list if the style finds users. - Good suggestion. EDIT: formatting

jerf 16y ago

I just watched Helvetica last night. Apparently you are either a brilliant designer who has mastered modernism or terrible shill for the Vietnam War and all that's wrong with corporatism for using Helvetica. Just thought you should know. Heavy stuff.

godDLL 16y ago
I didn't put _that_ much thought into it, thank you. :)
kaylarose 16y ago
If you like Helvetica, you should watch Objectified. It's by the same director, and is similar to Helvetica, only about Industrial Design (Dieter Rams, Jon. Ive, etc.). It's on Netflix instant streaming.

taylorbuley 16y ago

Now how do I get you to redesign my site? My plan: (1) Get you to use it; (2) Make it completely unusable..

godDLL 16y ago
Option 3: ask nicely.
- taylorbuley 16y ago
  Where/how? Please? :)
  - godDLL 16y ago
    AIM is godDLL, email is yCherkashin on gmail.

jhrobert 16y ago

I had no clue such things were even "possible" using CSS, thanks!

jjguy 16y ago

your proposed layout isn't bad, but I'm an engineer so change is tough. hackernews as it is feels like home, a new layout will take some to settle. btu thanks for the topcolor=ffffff suggestion. I like that topcolor change a lot, and the homepage still feels like home.

DougBTX 16y ago
> but I'm an engineer so change is tough. Why the correlation?
- TimothyBurgess 16y ago
  Yeah... I'm an engineer (a bit OCD too but who isn't these days?) and perfectly okay with change. I enjoy it rather... but I definitely prefer HN's current look over the OP's. The current font size is perfect as it is. I feel like larger fonts make sites look less professional... can't quite put my finger on why though. Maybe it's because larger fonts require more scrolling and is less efficient when I can read 12px (or even 11px) font without squinting just fine. There may also be a correlation (at least for me) with large fonts and say... children's books/sites and those with poor vision (typically the older generations who are mostly computer illiterate)... i.e., less professional and more casual.

citricsquid 16y ago

I'm not someone who desires fancy design, I like reddit, but something about Hackernews isn't quite right. I can't put my finger on it and I don't like this "redesign" either. I wish I could work out what it is, something just doesn't feel right. It's functional though, so that's good.

jerf 16y ago
I Am Not A Designer (terrible with colors), but I've read this book: http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/ref=cm_lmf_tit_21_rsrsrs0 http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... Which I very much recommend. What you're observing is probably the lack of a strong line on the left side. The right edge of the Y Combinator logo ought to form a guide line down the page, with the voting arrows' right edge X pixels to the left and the text X pixels to the right of that, and this line should also propagate through the text entry box and the reply button and so on. Instead, there's the logo, the link, the textbox and reply button (which do at least line up with each other), and the first layer of comments, each of which has its own individual vertical line. (I think. Comments and the title text are close but I'm not sure it's quite right, and there's so much interference in between it doesn't matter.) I Am Not A Designer but I know enough to know that's wrong. Also, the bottom of the Y in the logo should form a horizontal line that the rest of the text in the title bar lines up with, whether or not that happens for you appears to depend on the zoom level of your browser. (For me right now the "Add Comment" is visibly above the Y, but when I zoomed in to look closer it actually dropped below that line. By the way, designing on the web is hard. Also my website sucks and I know it. It's on the list.) Something should probably also be done with the horizontal line the voting arrows line up on. Cleaning that stuff up would be a start. It probably wouldn't be enough, and then I'd be stuck, because I only get the really basic mechanical stuff. Everything I've phrased as fact in this comment should be taken to be opinion, it would just be very tiresome for me to type and you to read the same caveat over and over.
mino 16y ago
> but something about Hackernews isn't quite right Agree!

daviding 16y ago

Ubuntu, Chrome Dev 10.0.634 looks like this, i.e. logo broke: http://i.imgur.com/plzvg.png http://i.imgur.com/plzvg.png I'll try it out for size for a while - easy to apply using Stylish extension here for Chrome users: https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnn...

godDLL 16y ago
If you set your top banner color to white either with user CSS or in your profile (if your karma is sufficient) it will fix the header.
- daviding 16y ago
  Yes, thanks - have done that now. Also Ubuntu doesn't have Helvetica Neue installed natively, so I change the body to fall back more gracefully to sans-serif: body * { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
  - godDLL 16y ago
    You could pick and use a favourite -- 'Linux Libertine' will do quite alright I think.
    - nagnatron 16y ago
      You can, of course, use whatever you like, but I think that putting a serif font as an alternative for Helvetica Neue/Helvetica for Linux users is a bit silly. There's plenty of Helvetica alternatives on Linux.
      - godDLL 16y ago
        Believe it or not, but I actually like Libertine and have no particular fixed interest in Helvetica. I could have suggested Liberation Sans, or DejaVu Sans just the same. I just saw a similar re-layout with Georgia that I liked and was a bit primed for serifs. :)

fghrthfgbr 16y ago

Click on our website: ====== ( http://vurl.me/YDW http://vurl.me/YDW )==== jordan air max oakland raiders $34a€“39; Ed Hardy AF JUICY POLO Bikini $25; Christan Audigier BIKINI JACKET $25; gstar coogi evisu true jeans $35; coach chanel gucci LV handbags $36; coogi DG edhardy gucci t-shirts $18; ----- ~ ¤ ╭⌒╮ ╭⌒╮ ╭⌒╭⌒╮╭⌒╮～╭⌒╮ ,））））,''）~~ ,''~） ╱◥█◣ ╱◥█◣====== ( http://vurl.me/YDW http://vurl.me/YDW )==== ｜田｜田｜｜田｜田｜ ╬╬╬╬╬╬╬╬╬╬╬╬╬╬

Periodic 16y ago

The low-contrast karma-number is a nice touch. I agree that my karma rating shouldn't be as prominent as it is. I hate logging scanning the site, having my eye hit the karma number and mentally doing calculations of how it changed.

jqueryin 16y ago

My personal favorite touch was the increased fontsize of headlines. I had a much easier time scanning for topics of interest.

andrewljohnson 16y ago

I usually don't like these "look at my awesome new design for your already successful website" posts, but this one is an exception. This design makes what I would say are clear improvements, and doesn't try to throw out the design wholesale. This design makes just a few improvements - better use of white space, easier to read text, and I happen to think the header is better too. This pleases the part of my brain that knows how to lay out broadsheet newspapers. Bravo, looks good! I also think the arrows should be bigger.

godDLL 16y ago
Thanks, I really appreciate it. Others have said nice and useful things as well, including the thing about the voting arrows being hard to hit http://news.ycombinator.com/item?id=2098502 http://news.ycombinator.com/item?id=2098502
rsoto 16y ago
Yeah, I like HN just as it and understand this is a design made by a coder, but using tables is just plain wrong IMHO.
- eru 16y ago
  Sure. And Emacs is way better than Vi.

dandelany 16y ago

Overall, I really dig it - good work! But why did you use 'Menlo' for the headline? It seems a bit out of place. I'm assuming you were going for a "monospace hacker" look, but it just ends up clashing with the Helvetica in an uncanny-valley sort of way. (http://www.noupe.com/design/mixing-multiple-fonts.html http://www.noupe.com/design/mixing-multiple-fonts.html see rule 4) Try it with a bold/heavy/black version of Helvetica, like the "Comfy Helvetica" header you have on your page! I just tried it and I like it much better now.

godDLL 16y ago
I tried both versions earlier, and the monospaced one sat better with me. Originally I decided on it because I didn't want to bring another typeface into the mix where I already had Menlo and Helvetica, so I tried both and settled on the one that fit my taste better.

DougBTX 16y ago

Nice. I've added this for the comment reply pages: td[bgcolor="#FF6600"] { background:white!important; }

godDLL 16y ago
That will fix the submission page too. Grabbed it, thanks.

deleted 16y ago

[deleted]

varikin 16y ago

I think I dislike about the HN design is the visited link color. If I find that it blends in with the background to the point that I scan right over it when looking for visited links. It needs just a bit more contrast.

mise 16y ago
I was thinking about this yesterday, about how useful it was the visited links are down-played! There's always monitor setting differences too, I guess.
- varikin 16y ago
  That is a good point but the problem I have is that I click a link, read the article, go back to HN, and look for the link to view the comments. At that point, I sometimes can't find it because the link blends in and I scan right over it. I wouldn't have this problem if I just started opening all the links in new tabs, but that isn't my normal browsing habit. I guess I am a depth-first instead of a breadth-first user.
  - eneveu 16y ago
    I had the same problem, which I solved by adding the following to my user style (using Stylish): @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("news.ycombinator.com") { .title > :visited, .subtext > a[href*="item?id"]:visited { color: #ff6600 !important; } } It marks visited links / comment threads in orange. I use Firefox but think you can do something similar for Chrome.

Kilimanjaro 16y ago

I'd like a bigger font like in http://www.hackerblogs.com/ http://www.hackerblogs.com/

Osiris 16y ago

The user.css file works just file in Opera as a site-specific user CSS file, though it does look slightly different than the screenshots.

yason 16y ago

I think that without the orange bar the page is too airy—should I say appleish—elements are just floating in out there somewhere. The bar gives the page clear frames. As for the font, why define one at all? Browsers already provide a default font which hopefully is configured by the user.

wookiehangover 16y ago

This looks pretty swell. I'm a fan of the UI improvements. I also use a chrome plugin to inject some styling and other fun features to HN. It's on github at https://github.com/wookiehangover/grapeDrink-for-hackernews https://github.com/wookiehangover/grapeDrink-for-hackernews . Mine's definitely not as conventionally handsome tho.

godDLL 16y ago
You could easily borrow some or all of the CSS in mine, I won't mind.

diamondhead 16y ago

Current design is very transparent, it's like there is no design. Logo is very small (truly, why do you need a bigger logo?!), navigation is placed on where we expect with the size we even don't notice it's 14px. Font type is as simple as possible. I wish I did not see this topic because from now I'll think about design of the site while I read it.

calbear81 16y ago

http://imgur.com/VFLOs http://imgur.com/VFLOs I went the opposite direction and went with Georgia (a serif font that was designed for better online legibility) and made the following tweaks: - Tested out a block style button (1st listing) and adding more horizontal padding to make it harder to misclick on upvote. - Made the header a neutral grey because someone said their eyes always moved to the top. - Added more padding to the top just to give it some breathing room. - Made the font underneath the titles slightly larger and made links turn "black" when hovered over. I messed around in Firebug for this and in doing so realized the whole HN site is a gigantic table. Very interesting...

godDLL 16y ago
That is very, very tasty. And you gave me an idea of how to fight those tiny vote arrows, thanks. EDIT: updated with spiffier voting arrows.
- calbear81 16y ago
  Did you want the GIF I created for the voting arrow? It appears that the voting arrows are not styled in so the GIF is written in every cell in that column. Here's what else I would change if I could: - Instead of arrow disappearing after you upvote, turn it orange so you know what you've already read and voted up. - Offer a checkbox option on top to "hide articles already read" which will then leave only unread items in the list!
  - godDLL 16y ago
    That would require more than simple CSS. I'd have to venture for the first time into the Greasemonkey. I'm not sure I like how that sounds.

aditya42 16y ago

I took the liberty of turning this into a userjs, for those of us who don't want to install an extension to run an extension in Chrome : http://userscripts.org/scripts/show/94618 http://userscripts.org/scripts/show/94618 I'll try and keep it updated as much as I can.

godDLL 16y ago
Wow, cheers mate. You want me to ping you at your email when I change things?
- aditya42 16y ago
  If that's convenient for you, sure. But I think setting up a Github repo that I can watch will be easier for you and me (you do use Github, right?). Otherwise I can check the code page once a week too; not really an issue.

adsahay 16y ago

I ported it to regular user script: https://github.com/adsahay/Comfy-Helvetica-style-for-HN https://github.com/adsahay/Comfy-Helvetica-style-for-HN Works in Firefox and Chrome. Why should Safari have all the fun? ;)

godDLL 16y ago
That's fantastic, thank you. I'm updating it to eventually be reasonably cross-platform and cross-browser as well as mixing in things suggested in this thread, so keep an eye on that page – a GitHub link may pop up there if I get around to it, and the updates are generally posted right up on that page.
- adsahay 16y ago
  Great. Look forward to the updates.
  - godDLL 16y ago
    There is an Atom feed on the code listing page. feed://comfy-helvetica.jottit.com/user-css?m=history.atom

Luff 16y ago

Here's a version that works in Firefox (minus the zoom): http://pastebin.com/AaWkNdjF http://pastebin.com/AaWkNdjF I use the addon Stylish to load it.

shortlived 16y ago

It looks like you changed the header color before the redesign -- how?

edmccaffrey 16y ago
From his user settings page, the topcolor box.
- shortlived 16y ago
  Is this some magic box that only gets enabled with so much karma? I don't have it..

hbt 16y ago

If we're sharing awesome designs, I own all of you ;-) http://oi55.tinypic.com/r8yys7.jpg http://oi55.tinypic.com/r8yys7.jpg

godDLL 16y ago
That would be so much nicer if you were to use Zenburn for the dark color scheme. http://slinky.imukuppi.org/zenburn/ http://slinky.imukuppi.org/zenburn/
- aditya42 16y ago
  For dark schemes, Wombat (for Vim) would be better, in my opinion, which is based off Desert. Or even Twilight (for Textmate). To OP: no, that's not too nice. Maybe if you were going for accessibility and high-contrast ...

sgt 16y ago

I for one welcome our new Helvetica overlords.

jaredstenquist 16y ago

Much Thanks, especially from my eyes. PG's CSS coder needs to use something bigger than 10px!