HN Explorer

Ask HN: Help me make HN work well on the iPhone

80 points by pg ↗ HN
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.

http://www.archub.org/wohl.txt

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

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

65 comments

[ 4.1 ms ] story [ 140 ms ] thread
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.

Klonoar
Eh, still not a reason as to why the basics of your theme couldn't be applied here, no?

Just my two cents. shrug

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.
awt
I've really enjoyed icombinator.
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_...

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

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.
joshuarr
You've never been to a pink floyd show on mushrooms...
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 ⇑ and ⇓ in lieu of IMGs.)

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.
[deleted]
(comment deleted)
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.
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.

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.

sounddust
not sure what else you need.

If the user agent matches an iPhone, then make the borders a few pixels wide and make the content stretch across the screen. Then it would be pretty much perfect.

palish
The content already does stretch across the screen for iPhones. I'm probably misunderstanding you, though.
sounddust
I just mean that on the iPhone, the white borders take up a ridiculous amount of space that could be used for text. It's my only complaint about viewing this site on the iPhone.
palish
Oh. Double-tap on any headline to fit the content to the screen. Works like a charm.
thehigherlife
Yes, but it would be nice if the page just loaded like that instead.
adoyle
Bigger upvote arrows. Everything else is largely ok as is. I don't recommend a wholesale style change. Tweak one thing at a time and see how it looks.
hrabago
I often browse HN from my iPhone as well, and my main problem is readability. Its viewport sets the width to 980, and at the screensize of the phone, the text becomes too small.

I have a bookmarklet that tries to set the width to 480. It works really well for the front page, but not so much for comment pages when there are lost of nested comments.

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

[deleted]
(comment deleted)
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...

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

DougBTX
Surprisingly good, though feature requests abound: format comments pages, colours (!), unicode support.
ig0rskee
Thanks for the feedback, most of these will be rolled out shortly. Glad you liked it!
steveplace
Probably the best timing of a product launch I've seen in a while.

You just filled a need for the guy who says "make something people want."

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
natch
Not to nitpick, but for the record, Nokia is a Finnish company, not Asian.
katamole
I think he was making the point that Nokia has dominance in Asia (as opposed the the iphone in the US).
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.
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.
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.
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!

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.
charlesju
Just toss a view into your code that uses iUi
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.
jmonegro
Why don't you use Intersquash.com?