6 ms·
Ask HN: Help me make HN work well on the iPhone
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.)
- johns 18y agoOffer the icombinator.net guy a little something.
- jeremyw 18y agoActually, 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 18y agoEh, still not a reason as to why the basics of your theme couldn't be applied here, no? Just my two cents. shrug
- rksprst 18y agoAnother 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 18y agoI've really enjoyed icombinator.
- jeremyw 18y agoHeh, 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/news.html http://lookerupper.com/hn/comments.html http://lookerupper.com/hn/comments.html Obviously not an optimal iPhone interface, but enough for reading/login/voting.
- aschobel 18y agoScreen shot of the first page on Android: http://static.3banana.com/pics/lookerupper_news_android-1.0_r2.png 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-1.0_r2.png http://static.3banana.com/pics/lookerupper_comments_android-...
- jeremyw 18y agoCan 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/Reference/SafariHTMLRef/Articles/InputTypesMetaKeys.html#//apple_ref/html/const/viewport http://developer.apple.com/documentation/appleapplications/R...
- TrevorJ 18y agoFor 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.
- gojomo 18y agoHere'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 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 18y agoI 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 18y ago[deleted]
- nuclear_eclipse 18y agoThat'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.
- zacharydanger 18y agoI can't seem to login from my (dev) G1 either.
- amackera 18y agoMe neither :(
- icode 18y agoWhy 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.
- markup 18y agoBeside the other URLs suggested may I point you to http://developer.apple.com/webapps/ http://developer.apple.com/webapps/ ?
- swombat 18y agoI 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 18y agonot 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 18y agoThe content already does stretch across the screen for iPhones. I'm probably misunderstanding you, though.
- sounddust 18y agoI 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 18y agoOh. Double-tap on any headline to fit the content to the screen. Works like a charm.
- thehigherlife 18y agoYes, but it would be nice if the page just loaded like that instead.
- adoyle 18y agoBigger 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.
- deleted 18y ago[deleted]
- notauser 18y agoOutput all the data as lists and wrap it in IUI: http://code.google.com/p/iui/ http://code.google.com/p/iui/
- cosmok 18y agoI 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-web-application-javascript-ui-libraryframeworks http://stackoverflow.com/questions/215390/available-iphone-w...
- dustineichler 18y agoi agree this is probably the easiest way to get this done otherwise. http://code.google.com/p/iui/ http://code.google.com/p/iui/
- bulanga 18y agoany 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 18y agoThis 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 18y ago11pm PST or 7am GMT. Not everyone lives in EST (although I do).
- ig0rskee 18y agoPaul, 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 http://yc.mobify.me Hope you like it! Team Mobify.Me
- DougBTX 18y agoSurprisingly good, though feature requests abound: format comments pages, colours (!), unicode support.
- ig0rskee 18y agoThanks for the feedback, most of these will be rolled out shortly. Glad you liked it!
- steveplace 18y agoProbably 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 18y agoNo 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 18y agoIt looks great on my mobile device (iPhone). What device are you looking at it through?
- waleedka 18y agoThe 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 18y agoThe 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 18y agoPlease 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 18y agoThe proposed CSS only triggers for small-screen mobile devices, and as the test pages indicate, it improves readability.
- palish 18y agoIt 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 18y agoYou'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 18y agoI hacked up dalampati.com/ihacker/ a while ago, but it's just the consumption-side of HN.
- bestes 18y agoAside 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 18y agoThe 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 18y agoJust toss a view into your code that uses iUi
- umjames 18y agoPardon 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 17y agoWhy don't you use Intersquash.com?