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

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

108 pointstechtalsky39 comments

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.

View on HN

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

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.

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_"`.

Fixes done.

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

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

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

And the accidental down-votes despite my best efforts and intentions.

One line of JS would fix this:

    if (/dir=down&/.test(node.href) && !confirm("Confirm downvote:")) return;

That would have the unintended and probably undesirable effect of decreasing purposeful down votes.

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.

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?

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

Yet they used getElementById in the JS anyway.

<blink>HELLO WEB!</blink>

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

I'm not aware of browser extensions for Safari or Chrome on the iPhone.

Since this is about mobile, it really would need to be an improvement to the site itself.

These aren't extensions, but mobile optimized versions of the site.

http://ihackernews.com

http://hn.gethifi.com/

http://hackerwebapp.com

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

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.

Been down this road before where somebody pointed me to: http://ihackernews.com/

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.

It looks like this scrapes, as opposed go being real time.

Someone above posted a link to http://m.news.ycombinator.com.moovapp.com

I think after being improved a little bit it could do exactly what you're looking for.

I use this[1] Hacker News app on Android. I think it's beautiful and it works really well for me.

Haven't found anything comparable on iOS.

[1]https://play.google.com/store/apps/details?id=com.airlocksof...

I've been using cheeaun's version to read from mobile: http://cheeaun.github.com/hackerweb It will be great to see it integrated into HN

Wow, love the look and feel of this one. A new favorite!

I scratched my own itch a few weeks ago.

Check out:

https://m.news.ycombinator.com.moovapp.com/

I took a weekend crack at it recently using moovweb's sdk:

http://console.moovweb.com

It's far from complete, but already much more usable.

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.

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/

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.

Idea is worth adding to http://hnwishlist.com, although it does already have an entry titled "Include a mobile/responsive version".

Well, sigh, as usual a bunch of chatter about it and not a word from YC. Well, it was worth a try.

Make one and send it to pg.

Maybe it would be easier if he open sources HN, as a stylesheet alone won't cut it when the layout is table-based.

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

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?

yes yes yes yes

Does anybody else see post replies rendered in seemingly random sized fonts in mobile chrome or firefox?

It is bug in Firefox's text inflation routines: https://bugzilla.mozilla.org/show_bug.cgi?id=707195

I see it in Chrome all the time.

edit: here's the default view for this specific comment:

http://i.imgur.com/xqOb6uD.png

Reply on news.ycombinator.com