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

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

ifelse.org

22 pointsdonohoe18 comments

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

From donohoe's CSS here: 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; }

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.

I've made a mobile version of hn here http://toadjaw.com/hn

You guys are welcome to the CSS if you like the font sizes I'm using.

I dig the upgrades you made this morning. thanks again for making that web app!

Thanks! Had some free time on my hands yesterday.

There is an iPhone app already: (not mine) 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.

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.

I click the wrong arrow quite often on my netbook. On my phone... fuggettaboutit

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.

I double the size of the voting arrows but they are a little blurry. I'll address that when I have more time

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.

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

(I wrote and tested this fix on my iPad with the help of atomic web's view source option)

Cool, I'll give it a nice over later and update it

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

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

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

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

Reply on news.ycombinator.com