

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

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

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

~~~
jQueryIsAwesome
Fixes done.

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

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

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

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

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

------
neeee
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...](https://play.google.com/store/apps/details?id=com.airlocksoftware.hackernews)

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

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

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

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

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

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

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

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

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

------
jpinkerton88
yes yes yes yes

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

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

~~~
k3n
I see it in Chrome all the time.

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

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

