3 ms·

Is that Hacker News web page optimized for iPad? Yes it is

22 points by donohoe 16y ago

pg 16y ago
If I were to render different frontpages for different clients, what font sizes should I use on the iPad instead of the current ones?
- pt 16y ago
  From donohoe's CSS here: http://ifelse.org/projects/ipad/hn/hn.css http://ifelse.org/projects/ipad/hn/hn.css .pagetop { font-size:12pt; } .title { font-size:14.5pt; } .subtext { font-size:12pt; } .comhead { font-size:10pt; } table table img { width:19px; height:19px; }
- carbocation 16y ago
  If you decide to do this, please consider using a larger font size on the iPhone, too. For my browsing habits, that would be greatly appreciated, though perhaps others find the font size on the iPhone to be OK.
  - ronnier 16y ago
    I've made a mobile version of hn here http://toadjaw.com/hn http://toadjaw.com/hn You guys are welcome to the CSS if you like the font sizes I'm using.
    - aaronbrethorst 16y ago
      I dig the upgrades you made this morning. thanks again for making that web app!
      - ronnier 16y ago
        Thanks! Had some free time on my hands yesterday.
  - Toucan 16y ago
    There is an iPhone app already: (not mine) http://itunes.apple.com/us/app/hacker-news/id339408916?mt=8 http://itunes.apple.com/us/app/hacker-news/id339408916?mt=8 A lot of the complaints are for older versions, you can at least vote now.
- joubert 16y ago
  The font sizes/styles don't bother me. What is a pain are the voting arrows - they are so tiny that i sometimes tap the wrong one, and there's no way to undo one's vote.
  - iamelgringo 16y ago
    I click the wrong arrow quite often on my netbook. On my phone... fuggettaboutit
  - dugmartin 16y ago
    About 30% of the time I fat finger and click on the story link instead of the comments on my iPad. I don't know if that would be fixed with a bigger font or a bit more padding between the story and the comments link.
  - donohoe 16y ago
    I double the size of the voting arrows but they are a little blurry. I'll address that when I have more time
- andrewljohnson 16y ago
  When I reformat pages in my online iPhone app user manual for use on mobile devices, I go with 2.5em. I prefer to read horsey big text on my mobile devices of all stripes.
watmough 16y ago
This is a neat idea. Could it be extended to allow setting a per-site preference?
- donohoe 16y ago
  Could be difficult depending on how sites implement CSS. Some would be much easier that others, but hard to find one solution for all.
gaiusparx 16y ago
Looks like the only thing missing is a nice looking icon 57x57 "apple-touch-icon.png".
- ronnier 16y ago
  Here, have mine http://toadjaw.com/static/sites/hn/y-icon.png http://toadjaw.com/static/sites/hn/y-icon.png
rythie 16y ago
The table should be 100%, updated code: javascript:function hn(){if(location.host=="news.ycombinator.com"){var d=document,t=d.createElement("l"+"ink"),z=d.createElement("l"+"ink"),b=d.body,l=d.location;try{if(!b){throw(0);}z.setAttribute("rel","stylesheet");z.setAttribute("type","text/css");z.setAttribute("href",l.protocol+"//ifelse.org/projects/ipad/hn/hn.css");b.appendChild(z); t.setAttribute("rel","apple-touch-icon");t.setAttribute("href",l.protocol+"//ifelse.org/projects/ipad/hn/icon.png");b.appendChild(t);b.getElementsByTagName('table')[0].setAttribute('width','100%');}catch(e){alert("Please wait until the page has loaded.");}}else{location.href="http://news.ycombinator.com/news;}}hn();void(0) http://news.ycombinator.com/news;}}hn();void(0); (I wrote and tested this fix on my iPad with the help of atomic web's view source option)
- donohoe 16y ago
  Cool, I'll give it a nice over later and update it

22 points by donohoe 16y ago

pg 16y ago

If I were to render different frontpages for different clients, what font sizes should I use on the iPad instead of the current ones?

pt 16y ago
From donohoe's CSS here: http://ifelse.org/projects/ipad/hn/hn.css http://ifelse.org/projects/ipad/hn/hn.css .pagetop { font-size:12pt; } .title { font-size:14.5pt; } .subtext { font-size:12pt; } .comhead { font-size:10pt; } table table img { width:19px; height:19px; }
carbocation 16y ago
If you decide to do this, please consider using a larger font size on the iPhone, too. For my browsing habits, that would be greatly appreciated, though perhaps others find the font size on the iPhone to be OK.
- ronnier 16y ago
  I've made a mobile version of hn here http://toadjaw.com/hn http://toadjaw.com/hn You guys are welcome to the CSS if you like the font sizes I'm using.
  - aaronbrethorst 16y ago
    I dig the upgrades you made this morning. thanks again for making that web app!
    - ronnier 16y ago
      Thanks! Had some free time on my hands yesterday.
- Toucan 16y ago
  There is an iPhone app already: (not mine) http://itunes.apple.com/us/app/hacker-news/id339408916?mt=8 http://itunes.apple.com/us/app/hacker-news/id339408916?mt=8 A lot of the complaints are for older versions, you can at least vote now.
joubert 16y ago
The font sizes/styles don't bother me. What is a pain are the voting arrows - they are so tiny that i sometimes tap the wrong one, and there's no way to undo one's vote.
- iamelgringo 16y ago
  I click the wrong arrow quite often on my netbook. On my phone... fuggettaboutit
- dugmartin 16y ago
  About 30% of the time I fat finger and click on the story link instead of the comments on my iPad. I don't know if that would be fixed with a bigger font or a bit more padding between the story and the comments link.
- donohoe 16y ago
  I double the size of the voting arrows but they are a little blurry. I'll address that when I have more time
andrewljohnson 16y ago
When I reformat pages in my online iPhone app user manual for use on mobile devices, I go with 2.5em. I prefer to read horsey big text on my mobile devices of all stripes.

watmough 16y ago

This is a neat idea. Could it be extended to allow setting a per-site preference?

donohoe 16y ago
Could be difficult depending on how sites implement CSS. Some would be much easier that others, but hard to find one solution for all.

gaiusparx 16y ago

Looks like the only thing missing is a nice looking icon 57x57 "apple-touch-icon.png".

ronnier 16y ago
Here, have mine http://toadjaw.com/static/sites/hn/y-icon.png http://toadjaw.com/static/sites/hn/y-icon.png

rythie 16y ago

The table should be 100%, updated code: javascript:function hn(){if(location.host=="news.ycombinator.com"){var d=document,t=d.createElement("l"+"ink"),z=d.createElement("l"+"ink"),b=d.body,l=d.location;try{if(!b){throw(0);}z.setAttribute("rel","stylesheet");z.setAttribute("type","text/css");z.setAttribute("href",l.protocol+"//ifelse.org/projects/ipad/hn/hn.css");b.appendChild(z); t.setAttribute("rel","apple-touch-icon");t.setAttribute("href",l.protocol+"//ifelse.org/projects/ipad/hn/icon.png");b.appendChild(t);b.getElementsByTagName('table')[0].setAttribute('width','100%');}catch(e){alert("Please wait until the page has loaded.");}}else{location.href="http://news.ycombinator.com/news;}}hn();void(0) http://news.ycombinator.com/news;}}hn();void(0); (I wrote and tested this fix on my iPad with the help of atomic web's view source option)

donohoe 16y ago
Cool, I'll give it a nice over later and update it