
Ask HN: Help me make HN work well on the iPhone - pg
I feel bad that I still haven't produced a variant of HN that works well on an iPhone.  A helpful user just sent me what he says is the minimum I'd have to do.<p>http://www.archub.org/wohl.txt<p>But I've learned that code people send by email generally doesn't work.  ("It doesn't work." "Oops, I forgot, you also have to..."  "It still doesn't work." etc.)<p>So I'd appreciate it if someone would produce a verbatim, tested snapshot of the HN frontpage that shows the minimum amount of stuff I'd have to change to make the site work decently on an iPhone.  (I know I need bigger arrows; you can make those too if you want.)
======
jeremyw
Heh, you wound me sir. I had pulled down HN and tested the mods.

Here are the URLs to test on the phone.

<http://lookerupper.com/hn/news.html>
<http://lookerupper.com/hn/comments.html>

Obviously not an optimal iPhone interface, but enough for
reading/login/voting.

~~~
aschobel
Screen shot of the first page on Android:
[http://static.3banana.com/pics/lookerupper_news_android-1.0_...](http://static.3banana.com/pics/lookerupper_news_android-1.0_r2.png)

Screen shot of the second page on Android, it seems to be a bit too wide.
[http://static.3banana.com/pics/lookerupper_comments_android-...](http://static.3banana.com/pics/lookerupper_comments_android-1.0_r2.png)

~~~
jeremyw
Can you try fiddling with the properties in the following viewport ref? Unless
one forces min/max scale values, the iPhone seems to scale on width overage to
keep the full page in view, nicely.

[http://developer.apple.com/documentation/appleapplications/R...](http://developer.apple.com/documentation/appleapplications/Reference/SafariHTMLRef/Articles/InputTypesMetaKeys.html#//apple_ref/html/const/viewport)

------
ig0rskee
Paul,

What you actually want is a mobile projection of the HN site! iPhone is the
dominant device in the US but I am sure you want to open up to Asia's Nokia,
Google's Android and the BlackBerry as well.

We launched Mobify.Me in a post earlier today and here's a mobile version of
HN done in around 5 minutes (as it's very late here in Vancouver). All you'd
have to do is point a DNS entry for m.ycombinator.com to:

<http://yc.mobify.me>

Hope you like it!

Team Mobify.Me

~~~
palish
No offense, but that site is terrible:

\- All that has changed is the front page, which already displayed fine on
mobile devices. Every other page (comments, etc) is unchanged. Comments
sometimes have rendering problems on mobile devices (they're sometimes way too
wide), so it seems like the Comments pages should be modified, not the front
page.

\- Valuable information has been stripped, including login status and current
karma count.

\- The header color has been stripped.

\- Items should be spaced further apart.

~~~
adammichaelc
It looks great on my mobile device (iPhone). What device are you looking at it
through?

~~~
sgk284
Eh... it's mediocre at best. Use mobile google reader on safari to see a great
experience.

~~~
ig0rskee
It's probably because I suck at CSS =) For an example of a mobified site
styled by a CSS pro over a couple of hours check out <http://spin.mobify.me> .
Perhaps you can do a better job yourself - our platform is an open service.

~~~
palish
Keep trying! I didn't mean to dishearten, just to give feedback. Everything
sucks when it's first released, almost without exception.

~~~
ig0rskee
Hey, @johnboxall just put a few more minutes into it, looks a lot better.
Check it out and give us more feedback! Thanks

~~~
sgk284
Nice improvements.

------
johns
Offer the icombinator.net guy a little something.

~~~
jeremyw
Actually, my reason for writing pg is that icombinator crashes often
(especially rendering comments) and hides several site features in trying to
create a pleasing interface, whereas I did the minimal necessary for sizing
and all the features of HN are untouched.

But thank you, icombinator author. And the folks before them (blanking on the
YC funded company) that offered something similar, for a time.

~~~
rksprst
Another problem (besides for python errors if comments > 50) I have (with
icombinator.net) is that after reading comments when you click back to go to
the home page it scrolls you all the way up top so that you lose your place.
Annoying if you're reading the 60th story and have to "load more" again just
to get back to where you were.

------
swombat
I often browse HN from my iPhone and it works great... not sure what else you
need.

Oh, actually, just one thing - links in the message body. Since iPhones can't
copy/paste, those might as well not be there. Otherwise, it seems pretty
functional to me... I've browsed articles and comments, posted comments,
checked my threads for responses... all worked absolutely fine.

~~~
cstejerean
Bigger arrows for up/down votes. It's pretty hard to hit the right one on the
iphone.

~~~
gojomo
My other comment includes a link to a demo of larger, better spaced voting
arrows for the iPhone.

The grandparent issue -- clickable links in top text -- can be fixed with a
bookmarklet, even on the iPhone:

<http://news.ycombinator.com/item?id=430725>

------
iamelgringo
I have an Android G1 and the site actually functions rather well for me. The
only problem that I have, is that I can't log in. I don't know why.

~~~
nuclear_eclipse
That's odd, because I've had no problems at all logging in with my G1, as well
as posting comments. However, there was quite a bit of scrolling involved,
even in the landscape view mode.

------
bestes
Aside from the issues mentioned (#1 up/down vote arrows too small _and_ too
close together, #2 screen is too wide, which makes the text too small, #3
links are useless without copy and paste unless they are live or super easy to
remember): #5 When you click into the comment or reply box, the iPhone goes
into a super-slow mode when trying to type. I found that if I can pinch and
make it smaller, then everything works just fine. But, it's hard to do quickly
because you have to grab space outside of the actual comment box. #6 Flash. I
_hate_ clicking on a link to be taken to some lame Flash-based site. Some kind
of warning or flag or something so I don't waste my time. This would be nice
on the desktop too, but it's quick enough that it isn't a big deal. #7 The
"home" page link is pretty hard to hit all the time. #8 The comments link is
often hard to hit (without hitting the story right below).

I do about 80% of my HNing on the iPhone, so any improvements would be huge.
Thanks for looking into this, Paul!

------
icode
Why not just make HN work in any screen size? Then it will work on IPhone and
any other device as well. You just have to get rid of things with absolute
size and replace them with sizes relative to their container. Maybe the
textarea im writing this into is the only thing that has to be changed.

And then testing is easy too. Just resize your window.

------
TrevorJ
For what it is worth, I have browsed HN on my palm Treo, which has a tiny
screen and is pretty far behind what I'd consider state-of-the-art mobile
browsing and the user experience is functional when on the HN site.

~~~
Zev
Functional doesn't mean Optimal.

~~~
palish
There is no such thing as an "optimal experience".

~~~
Zev
That doesn't mean you should never try to make your UI/UX as good as it can
possibly get.

~~~
palish
I'd rather have new site features than unnecessary iPhone improvements, to be
honest.

~~~
Zev
Displaying in an easy to use manner on mobile devices _is_ a new feature.

------
breily
The only improvement I can think of is to set the pre areas to wrap. Right now
they completely ruin browsing on the iphone, as they make the screen way too
wide and this makes the font way too small.

------
gojomo
Here's an addition to the prior suggestions that shows scaling up and spacing
out the voting arrows in the mobile CSS:

<http://xavvy.com/news.yc/comments-arrows.html>

In HTML, the up and down arrow A elements get classes; in the CSS, the IMGs
are stretched and the down arrow bumped down a bit.

(And the last comment shows a failed experiment in using &uArr; and &dArr; in
lieu of IMGs.)

------
bulanga
any chance you could get it working on the Wii? Sometimes I like to sit back
in my sofa and browse HN from the Wii. It renders ok but could do with a few
tweaks. I usually use the Column mode for browsing where the width of the page
in made to match that of the screeen i.e no horizontal scrolling needed. I
don't think I'm the only one accessing HN from this console?

------
Alex3917
The biggest problem with HN on the iPhone is just that typing the comments
takes too long. What we really need is to modify the spelling autocomplete to
take account of our most commonly used phrases. So if the user starts typing
s-i-r the thing knows they are actually trying to type "sir ken robinson" and
just completes the phrase for them.

------
notauser
Output all the data as lists and wrap it in IUI:

<http://code.google.com/p/iui/>

~~~
cosmok
I am using IUI on a site that I developed for personal use (I use the RSS
feeds from some of the sites that I frequent and display the news items from
them).

IUI is good, but, the only problem that I have been having is that it doesn't
retain browsing history after I visit an external link.

There are some other good libraries that can be used for HN. Please have a
look at this: [http://stackoverflow.com/questions/215390/available-
iphone-w...](http://stackoverflow.com/questions/215390/available-iphone-web-
application-javascript-ui-libraryframeworks)

------
palish
Please keep HN as it is (or expose a way to turn off the new CSS). I browse HN
daily from my iPhone, and it works fine. Also, pages load extremely quickly
because of the minimalist site design, which I love.

Basically, you've already met your goal, which is to "make HN work well on the
iPhone" -- it currently works great.

~~~
gojomo
The proposed CSS only triggers for small-screen mobile devices, and as the
test pages indicate, it improves readability.

~~~
palish
It should still be optional. The most frustrating thing about browsing the web
on the iPhone is when people create special versions of websites for it
without providing an option to get to the original site. Keep in mind that the
iPhone was _designed_ to browse the web as-is.

~~~
gojomo
You're right; that's frustrating. But have you looked at the proposal mockups?
They're nothing like that -- they fix design issues with the original site
that prevent it from scaling down well. An option to turn them off would be
superfluous.

------
arjunb
I hacked up dalampati.com/ihacker/ a while ago, but it's just the consumption-
side of HN.

------
euroclydon
This has got to be some kind of test: Who's up at 2:00 AM on Saturday morning
and willing to donate modified HTML/CSS to HN?

Is the winner going to be a new moderator? Get a HN T-Shirt? Get a 7x7 pixel
image of their face hidden on the site somewhere?

~~~
Zev
11pm PST or 7am GMT. Not everyone lives in EST (although I do).

------
umjames
Pardon my ignorance, but what's specifically wrong with the HN site on the
iPhone? I've been accessing it since the first gen iPhone came out, and I
haven't noticed any problems.

------
waleedka
The implementation that Ashwin from Buxfer built for the iPhone was great.
Simple, fast, and already tested. Maybe you can use it, or borrow parts of it.

------
markup
Beside the other URLs suggested may I point you to
<http://developer.apple.com/webapps/> ?

------
charlesju
Just toss a view into your code that uses iUi

------
jmonegro
Why don't you use Intersquash.com?

