A Comfy Helvetica frontpage for Hacker News | Hacker News Reader

A Comfy Helvetica frontpage for Hacker News

comfy-helvetica.jottit.com

176 pointsgodDLL89 comments

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.

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

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.

Sure. And Emacs is way better than Vi.

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.

I didn't put _that_ much thought into it, thank you. :)

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.

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.

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

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 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.

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.

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

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.

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?

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.

I find that the text size is perfect in Firefox. It's crappy in Opera, Epiphany and Chrome, but it looks great in Firefox.

It's missing that extra "superficial hipster" touch, though, you have to admit.

Why do you feel the need to tar the person who offered this as a "superficial hipster"?

I didn't call godDLL a superficial hipster -- I said (with, I hope, abundant sarcasm) that Hacker News was missing the superficial hipster touch. I said so because the re-skinned version feels A) superficial (the primary difference is simply the change in typeface), and B) hipster (using Helvetica for the sake of Helvetica). Is it ok if I don't like it? I hope I'm not breaching protocol here -- that would be awful.

If godDLL is offended, I'll promise to next time better structure my criticism with kind words and phrases of subtle encouragement rather than snark and sarcasm.

Not offended, and differences of taste aside -- quite the opposite -- happy to know my English is good enough to spot sarcasm when I see it.

My reading comprehension might be off here, but I think guywithabike was pointing out what he thought I wasn't. As in, making a compliment.

"I like the current design better."

"It's missing that extra "superficial hipster" touch, though, you have to admit."

Seems pretty clear.

I think you're quoting two different HNers.

Yes, I was, for context.

His capitals seem too large...

I also like the current design better. The larger headers in the redesign make it harder to scan. Your eyes have to 'scan' more.

And Helvetica (Arial) is used mostly for large signs. And this is not without reason. Verdana on the other hand was design for readability on screens.

Don't underestimate simple designs. They can contain a lot of tweaking.

12px Verdana measures 'squinty' on a high-rez display, like that of a new MacBook Air. I always had trouble reading those tiny drug inlays, because they are printed with what looks like ants. And if you blow the page up, it don't look so great -- it was optimized for screen and small sizes.

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.

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...

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.

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!

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.

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.

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.

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.

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.

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

I'll try and keep it updated as much as I can.

Wow, cheers mate. You want me to ping you at your email when I change things?

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.

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

Option 3: ask nicely.

Where/how?

Please? :)

AIM is godDLL, email is yCherkashin on gmail.

Use this, please.

Oh and add a real search option.

Thank you.

Other than not being directly integrated, what's wrong with http://searchyc.com/ as a search engine?

I see 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

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

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

https://encrypted.google.com/search?q=mongodb+%2B+site:news....

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.

I can live with 20 hours typically when the results are presented better.

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?

pg said, search is in the works: http://news.ycombinator.com/item?id=1955629

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

I ported it to regular user script: https://github.com/adsahay/Comfy-Helvetica-style-for-HN

Works in Firefox and Chrome. Why should Safari have all the fun? ;)

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.

Great. Look forward to the updates.

There is an Atom feed on the code listing page. feed://comfy-helvetica.jottit.com/user-css?m=history.atom

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

Ubuntu, Chrome Dev 10.0.634 looks like this, i.e. logo broke:

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/fjnbnpbmkenffdnn...

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.

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; }

You could pick and use a favourite -- 'Linux Libertine' will do quite alright I think.

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.

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. :)

Nice. I've added this for the comment reply pages:

    td[bgcolor="#FF6600"] {
      background:white!important;
    }

That will fix the submission page too. Grabbed it, thanks.

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.

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.

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.

I Am Not A Designer (terrible with colors), but I've read this book: 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.

> but something about Hackernews isn't quite right

Agree!

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.

> but I'm an engineer so change is tough.

Why the correlation?

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.

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

That would be a functional rewrite, not a styling.

If we're sharing awesome designs, I own all of you ;-)

http://oi55.tinypic.com/r8yys7.jpg

That would be so much nicer if you were to use Zenburn for the dark color scheme. http://slinky.imukuppi.org/zenburn/

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 ...

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

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

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

From his user settings page, the topcolor box.

Is this some magic box that only gets enabled with so much karma? I don't have it..

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

I for one welcome our new Helvetica overlords.

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 . Mine's definitely not as conventionally handsome tho.

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

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.

Reply on news.ycombinator.com