HN Explorer

Would it be hard to have a mobile style sheet for HN with pressable buttons?

108 points by techtalsky ↗ HN
Really, some fairly high percentage of readers must be reading on mobile. I can tell YC is committed to keeping the site simple as possible but 30 minutes of work would save actual man-hours of zooming in 500% in order to click that astoundingly tiny arrow.

44 comments

[ 2.9 ms ] story [ 52.3 ms ] thread
noonespecial
And the accidental down-votes despite my best efforts and intentions.
jQueryIsAwesome
One line of JS would fix this:

    if (/dir=down&/.test(node.href) && !confirm("Confirm downvote:")) return;
pbreit
That would have the unintended and probably undesirable effect of decreasing purposeful down votes.
jjcm
Make one and send it to pg.
rsoto
Maybe it would be easier if he open sources HN, as a stylesheet alone won't cut it when the layout is table-based.
spdy
It is open source found a GitHub Mirror here https://github.com/wting/hackernews

And the site gets rendered in this file https://github.com/wting/hackernews/blob/master/news.arc

The main problem is HN looks like a science project to me and has proven that arc can be used to power a site like this. It works and thats probably enough for pg right now :)

rsoto
Yes, it works. But it's not up to what it should be its standard. Also, what is the repo good for if it's not official and it has no chance in being put that into production?
jconley
I think that would be great! Personally I use the news:yc [1] app on iPhone (no affiliation). It works well and the author updates it when there is a parsing problem.

[1] http://newsyc.me/

rsoto
Yes, it would be really hard. For as much as I love HN, I think it does not stand to the standards of what it is: a meeting place for hackers.

When we work on the web, we focus on being semantic, conscious about the actual web in which one size does not fit all, usability and design. None of which HN has: tables, it doesn't work on mobile (and the links on the submission aren't clickable) and you can't undo your vote. I understand another hacker value is protoyping and MVP-thinking, but when you have a vibrant community a few years old, that's not the case.

Maybe the hacker thinking on HN is doing it yourself, maybe you can come up with a browser extension that fixes this stuff.

In the meanwhile, you can use ihackernews.com for when you're on the go.

kibibu
> None of which HN has: tables

...spacer gifs, font tags, unquoted attributes, no doctype.

I just had a rather nice little reminisce in the html source. All it was missing was a <layer> or two and I would have been right back in 1997.

yuhong
Yet they used getElementById in the JS anyway.
brown9-2
When we work on the web, we focus on being semantic, conscious about the actual web in which one size does not fit all, usability and design

What does this mean?

bkendzior
On the DIY note, it would be pretty trivial to create a personalized version of Hacker News using Moovweb. Move a little HTML around, add your own CSS, bam -> mobilized hacker news to your customization.

http://www.moovweb.com/developers/moovwebsdk

[deleted]
(comment deleted)
edouard1234567
-1 not sure what you mean by "standards"

HN looks like it was hacked overnight which makes its design perfectly adequate for a community of hacker...

Something becomes a standard when used by the majority. In this case it would be reasonable to make HN's unpolished design the standard for communities of hackers...

kripy
Been down this road before where somebody pointed me to: http://ihackernews.com/
pfarrell
I only browse hn using ihackernews now. I feel like im cheating every time I do, but I have accepted this well executed solution to the problem of hn on mobile rather than waste my energy trying to convince strangers to alter their site.
[deleted]
(comment deleted)
the_cat_kittles
I use http://hackerwebapp.com/, its great.

edit: I just realized you are talking about not being able to vote on things easily- sadly you cant do that with hackerwebapp, but it is still a really good mobile site.

dbaupp
Just sticking this at the end of the CSS file seems to help (obviously the 800px could be adjusted downward if that is deemed too wide for filtering mobile devices):

  @media screen and (max-width: 800px), handheld and (max-width: 800px) {
    img[src="grayarrow.gif"], img[src="graydown.gif"] {
      width: 20px;
      height: 20px;
    }
  }
(It'd be nice if the images were unicode symbols, e.g. http://www.fileformat.info/info/unicode/char/25b2/index.htm)

And possibly putting the following in the <head>, so that the screen starts zoomed to a reasonable level.

  <meta name="viewport" content="width=device-width, initial-scale=1">
rebelde
I've always thought that we need to make it very easy for HN: somebody, please post some CSS that is short, simple and does the job; so simple and elegant that they will have no choice but to copy and paste it into the news.css file.

EDIT: dbaupp did something while I was writing this. Great.

faramarz
I spent an hr hacking away at this no-class, no id, table within a table within a table layout.

I didn't make the fonts scale to mobile screen ratio because I know a lot of people like to have the ability to pinch in and out.

PG, if you're reading this, all you have to do is dump this at the bottom of your css file.

  @media (max-width: 740px) { 
  	body { padding: 0; margin: 0; width: 100%; }
  	body table{ width:100%; }
  	body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(even) .pagetop  { 
  		position: absolute; top: 4px; left:30px; z-index:100; width: 100%; text-align: left; }
  	body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(odd) .pagetop  { 
  		position: absolute; top: 45px; left:30px; z-index:100;text-align: left; color: #fff;}
  	body table tr td:nth-child(1) { height: 70px; vertical-align:top; padding: 1px;}
  	body table tr td:nth-child(1) td:nth-child(1) { height: auto; padding: 0;}
  	textarea { width: 100%; }
  	.pagetop { color: #ff6600; }
  	.pagetop b { display: block; float: left; clear: both; width: 100%; margin-bottom:4px }
  	.pagetop a { display: block; margin-right: 10px;float: left; }
  	body img {width: 20px; height: 20px;   }
  	body img:after { display: block;color:#000; font-size: 20px;}
  	pre  {max-width: 100%; width: 300px; word-wrap:break-word; overflow: auto; }
  	a  {word-wrap:break-word;  }
  }
End result is this: https://www.dropbox.com/s/t2893r570ef429t/hn-css.jpg
jQueryIsAwesome
Me too; arrows are just CSS to avoid pixelation.

The code can be found here: https://gist.github.com/AltIvan/5243025

It looks like: http://i.imgur.com/iYrfuOf.png

I know that the login button disappeared but it ask you to login in when you try to reply, up-vote or submit.

faramarz
Love the css work. Much more efficient way of targeting.

Thanks for sharing, I'm taking some cues from this.

dbaupp
This is awesome!

Although Firefox seems to ignore media queries that don't have a medium type (just using `@media all and (max-...) { .. }` fixes that though), and using the prefix search of `a[id^="up_"]` is probably more efficient than the full substring search of `id*="up_"`.

[dead] robwgibbons
Absolutely not hard, but PG is too busy/lazy to care about making improvements to HN. The people here who argue it's "hacker tradition" to embrace minimalism/build browser extensions yourself to make HN actually modern are only enabling PG's unforgivable laziness.

Honestly PG, "unknown or expired link" should not be a thing anymore. Not to mention how slow this shit gets.

For a community composed of basically the best programmers in the world, HN really sucks. I say this all with pain as I am a HN-lover.

sgdesign
You're better off just using one of the many great mobile-optimized versions of HN out there. I don't think HN will ever have a mobile version, although I would love to be proven wrong.
techtalsky
Well, sigh, as usual a bunch of chatter about it and not a word from YC. Well, it was worth a try.