While I definitely support the larger format, I'd like to see the top bar laid out in a more mobile-friendly manner. Currently it feels like I've done Ctrl + Plus on the page a few too many times, rather than the site being properly optimised. Shrink the font by one notch and I'm reasonably happy. I realise that this is a work in progress though.
I'm on Firefox Mobile right now on my tablet, a Samsung Galaxy Tab Pro 8.4. The full site looks perfectly good with the only exception that "click targets" are annoyingly small.
My suggestion is that each user should be able to set his desired text size / DPI resolution per device (tracked via cookies of course), so that I can have properly clickable comment links and upvote buttons and so on on my tablet, and keep everything as before from my laptop.
Keep - but dang et. al. can you make the comments link target touch area slightly bigger somehow? It's way to easy to launch the article link when you're trying to tap the comments link.
One thing I'd do is find a way to minimize the detail line below the headline. It doesn't need to be as large - it tends to wrap into a second line (at least on my iOS 9.1 iPhone 5s).
The detail line also doesn't need to be as verbose, IMO...
e.g.:
200 points by foobar 8 hours ago | flag | 192 comments
Although I would recommend keeping the "192 comments" link at least as large as it currently is. That's probably the 2nd-most tapped-on link (after the link to the source itself), and it's fairly difficult to aim correctly on mobile. Making it even smaller will make it harder to tap.
I always go to comments before clicking on the article link. While I'm reading, post can go away from current HN page and it is hard to locate it again.
Ps. iPhone4 is not compatible with new layout at all.
It's a good step! I have suggestions to clean it up:
1- You should add a margin on the left and right side so that the content doesn't bleed to the edge of the screen. (10px would keep it aligned with the input bar on iOS Safari).
2- The floating login link looks weird, I would just add it along the rest of the links below "Hacker News". To keep it tight, only show the Submit link if the user is logged in.
3- Add margin to the logo and make it bigger. Also, the entire orange bar could be made more spacious.
The main difference I notice is that I can no longer double-tap to zoom on the main page. I can learn to get used to pinch zooming, but it will be more difficult to use HN with one hand on my large phone.
I have to zoom because otherwise it's impossible to click the correct links.
It would be helpful to have '{n} comments' closer to the left under thr headline in a consistent location so one's left thumb can more easily reach that. Other than that this looks like an improvement.
Make the "post" page more mobile friendly. Currently I need to scroll a lot to read the content. When I mean post page, I mean the page that comes up when you click on a post.
May be add a very teeny little margin. Again I know HN is more towards KISS, so you can ignore me here.
Apart from that, the rest works great on iPhone6. Good job.
298 comments
[ 3.4 ms ] story [ 291 ms ] threadIf we're going to keep these changes we'll upgrade the remaining pages soon.
For those not on mobile, here is what the new layout looks like on an iPhone 6s on iOS 9.0.1. ==> http://imgur.com/5LgB1xB.jpg
Here is what the comment page looks like ==> http://i.imgur.com/ugOASR5.png
This is the viewport bug when you try to enter a comment ==> http://i.imgur.com/i0Ekiod.png and http://i.imgur.com/T0NDIFc.png
@media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus { font-size: 16px; } }
It uses a css selector only available on iOS devices and enables a larger font to prevent zoom.
[Original concept] http://stackoverflow.com/a/16255670/209005
I only wish there was some collaborative environment we could use to request changes to the code be pulled in and utilized.
While I definitely support the larger format, I'd like to see the top bar laid out in a more mobile-friendly manner. Currently it feels like I've done Ctrl + Plus on the page a few too many times, rather than the site being properly optimised. Shrink the font by one notch and I'm reasonably happy. I realise that this is a work in progress though.
Great start though! My vote goes to 'Keep'.
(iOS 9, iPhone 5, Safari)
Personally, I'd like the old mobile display back!!
Edit - I noticed that the OP was logged out in the screenshot, so I tried it again. Here is an image of the screen when I am not logged in:
http://imgur.com/xuhywK6
Here is the image of the screen when I am logged in:
http://imgur.com/kHjbFWz
The only difference between the two cases is that I was too lazy to log out, so I just pulled up the page in private mode.
I wish I had an iPhone 6 as I'd like to try this case with the OP's environment.
My suggestion is that each user should be able to set his desired text size / DPI resolution per device (tracked via cookies of course), so that I can have properly clickable comment links and upvote buttons and so on on my tablet, and keep everything as before from my laptop.
http://i.imgur.com/83wdzFy.gif
This viewport bug appears when I just open the comment page.
One thing I'd do is find a way to minimize the detail line below the headline. It doesn't need to be as large - it tends to wrap into a second line (at least on my iOS 9.1 iPhone 5s).
The detail line also doesn't need to be as verbose, IMO...
e.g.:
could be simplified tohttps://en.wikipedia.org/wiki/Fitts%27s_law
Ps. iPhone4 is not compatible with new layout at all.
1- You should add a margin on the left and right side so that the content doesn't bleed to the edge of the screen. (10px would keep it aligned with the input bar on iOS Safari).
2- The floating login link looks weird, I would just add it along the rest of the links below "Hacker News". To keep it tight, only show the Submit link if the user is logged in.
3- Add margin to the logo and make it bigger. Also, the entire orange bar could be made more spacious.
I have to zoom because otherwise it's impossible to click the correct links.
1. Possibly too much whitespace left/right of content.
2. Are the rank numbers necessary, or could they be moved to the meta-detail?
3. Bigger upvote and comment targets would be nice.
Make the "post" page more mobile friendly. Currently I need to scroll a lot to read the content. When I mean post page, I mean the page that comes up when you click on a post.
May be add a very teeny little margin. Again I know HN is more towards KISS, so you can ignore me here.
Apart from that, the rest works great on iPhone6. Good job.