Ask HN: Help me make HN work well on the iPhone | Hacker News Reader

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

80 pointspg63 comments

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

View on HN

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.

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

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

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

Surprisingly good, though feature requests abound: format comments pages, colours (!), unicode support.

Thanks for the feedback, most of these will be rolled out shortly. Glad you liked it!

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

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.

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

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

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.

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

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

Nice improvements.

Not to nitpick, but for the record, Nokia is a Finnish company, not Asian.

I think he was making the point that Nokia has dominance in Asia (as opposed the the iphone in the US).

Offer the icombinator.net guy a little something.

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.

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

Just my two cents. shrug

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.

I've really enjoyed icombinator.

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.

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.

The content already does stretch across the screen for iPhones. I'm probably misunderstanding you, though.

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.

Oh. Double-tap on any headline to fit the content to the screen. Works like a charm.

Yes, but it would be nice if the page just loaded like that instead.

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.

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.

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

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

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.

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.

I can't seem to login from my (dev) G1 either.

Me neither :(

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!

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.

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.

Functional doesn't mean Optimal.

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

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

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

Displaying in an easy to use manner on mobile devices is a new feature.

You've never been to a pink floyd show on mushrooms...

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.

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

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?

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.

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

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

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

i agree this is probably the easiest way to get this done otherwise. http://code.google.com/p/iui/

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.

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

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.

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.

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

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?

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

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.

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.

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

Just toss a view into your code that uses iUi

Why don't you use Intersquash.com?

Reply on news.ycombinator.com