

A Comfy Helvetica frontpage for Hacker News - godDLL
http://comfy-helvetica.jottit.com/

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

~~~
rsoto
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
Sure. And Emacs is way better than Vi.

------
jerf
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
I didn't put _that_ much thought into it, thank you. :)

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

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

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

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

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

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

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

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

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

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

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

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

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

~~~
godDLL
Option 3: ask nicely.

~~~
taylorbuley
Where/how?

Please? :)

~~~
godDLL
AIM is godDLL, email is yCherkashin on gmail.

------
spitfire
Use this, please.

Oh and add a real search option.

Thank you.

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

~~~
godDLL
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

~~~
taylorbuley
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....](https://encrypted.google.com/search?q=mongodb+%2B+site:news.ycombinator.com&tbs=rltm:1)

~~~
s-phi-nl
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.

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

------
adsahay
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? ;)

~~~
godDLL
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
Great. Look forward to the updates.

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

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

------
daviding
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...](https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe)

~~~
godDLL
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
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
You could pick and use a favourite -- 'Linux Libertine' will do quite alright
I think.

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

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

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

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

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

------
citricsquid
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
I Am Not A Designer (terrible with colors), but I've read this book:
[http://www.amazon.com/Non-Designers-Design-Book-Robin-
Willia...](http://www.amazon.com/Non-Designers-Design-Book-Robin-
Williams/dp/0321534042/ref=cm_lmf_tit_21_rsrsrs0) 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.

------
jjguy
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
> but I'm an engineer so change is tough.

Why the correlation?

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

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

~~~
godDLL
That would be a functional rewrite, not a styling.

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

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

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

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

------
Kilimanjaro
I'd like a bigger font like in <http://www.hackerblogs.com/>

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

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

~~~
edmccaffrey
From his user settings page, the topcolor box.

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

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

------
sgt
I for one welcome our new Helvetica overlords.

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

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

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

