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:
Here is the image of the screen when I am logged in:
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.
This viewport bug appears when I just open the comment page.
Actually, I'd like that change on larger devices as well. I've often misvoted on my Surface. As large touchscreens become more popular (iPad Pro, the Surface line, etc), I could see this becoming a problem for more users.
Edit: I see white margins on my iPhone 5, but not on my iPhone 6. It looks like you need to tweak the media query in the following css:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
...
The iPhone 5's device width is 320px. Changing that 375 to something lower should fix the issue.I totally disagree with it, fwiw.
Well at least they're doing something to address it now.
In any case, I still disagree with the lack of a reverse vote option, especially when upvoting also serves as an archival mechanism, and downvoting removes the opportunity to use that functionality permanently.
> especially when upvoting also serves as an archival mechanism
Right - it's not even about _changing_ votes. Just an hour or so ago I accidentally upvoted the wrong submission (on mobile), so now that's stored in my "saved stories"; nothing I can do about it.What about placing the vote buttons on the left side of the ranking number?
There would be less of a chance to misclick and end up clicking the article link instead. You would also have the opportunity to make more room for the vote buttons since you can then afford to place the ranking number closer to the article title, since the ranking number is non-interactive.
There are surely hundreds of web designers who'd be more than happy to submit their proposals for fixing the mobile markup for free. It's disappointing to see that the website that I spend the most time on on my phone still didn't have a mobile markup till today. Thank you for doing this. Now, please let's move forward, not backward.
- The tap targets for the menu at the top (new, threads, etc) is too small. You can make it bigger, and put the more little-used items into a "more" button.
- The tap target to get to the comments and flagging are way too small. Flagging isn't common, so that could be more hidden. Comments could be a right arrow button to the right of the title link. Comments are really important in HN, so it should be easy to get to.
- Upvote target is way too small.
- Body text for comments are too small.
In essence, I recommend restarting from scratch with a new template for mobile. Just making some css tweaks is a good first step, but maintaining a separate template that optimizes for mobile will be worth it.
It's not a huge improvement, but it's slightly better.
I'd actually sent HN a long review of mobile experience on a 10" tablet acouple of days ago and received a response from dang earlier tonight tipping me off to this. I'm not sure I'd have noticed without that.
In vertical orientation, viewport width is better, and an annoying glitch where font size changed apparently randomly on some nested comments is gone.
Overall UI/UX of links and controlls needs improvement. Especially voting arrows. I'm told an undo is in the works.
My view is that HN's basic page layout needs a full revamp at least internally, to give better styling control via CSS. This doesn't mean huge theme changes, though that's also possible.
Building the page around a sane line length would be a really good start.
What issues are the result of braindead mobile browsers (lack of ctrl-+ font zoom, click registration errors, left/right click distinction, click vs select, etc.) I don't know, though I suspect that's part of it.
Again: for virtually all content, max width of ~35-45em, with a slight margin (I really don't like text flush with screen edge except on the very narrowest of displays, 1-4em margin responsive across a set of displays from >30em to ~70 would be about right).
Zoomable font size holding page to fit within viewport would be a big gain.
Screenshot: https://m.imgur.com/5rCdRdI
Mind that's a 10" display. Fonts are small for my eyes. Context-zooming on main content helps somewhat, but only marginally.
Since we are talking about mobile, I'd focus on improving the arrows - I've downvoted way too many comments due to that.
[1] http://i.imgur.com/akAyUxP.jpg [2] http://i.imgur.com/NWVSHMW.jpg
Looks almost identical on WP 10 (Edge).
> I've downvoted way too many comments due to that.
I don't vote on my phone due to this.
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
could be simplified to 200 pts by foobar 8h ago | flag | 192c 200 pt, foobar (8h) | flag | 192 cmts +200 by foobar | flag | comment (192 in 8h)Ps. iPhone4 is not compatible with new layout at all.
In the images [1] and [2] below are the screenshots (taken on an iPhone 5 with the latest iOS) of HN homepage (where the changes seems to have been published) and article page (where it seems to be unchanged) to illustrate the problems:
1. There is a padding in the body (the white space around the content) that wastes precious screen real state.
2. The font size in relation to the screen width was increased without the proper adjustments in the layout. That caused:
a. The top links to become cluttered and disorganized
b. Both the top and bottom links to span multiple lines without the proper spacing between then, making it easier to click the wrong link
c. The article links and other information to reach the end of the line more often and, associated with the lack of right padding in that area, makes it touch and sometimes spill over the right margin over the white background.
It is very important to have a better layout for mobile devices on HN specially because it is very hard to interact with the site (upvote, click articles or submit) but IMO it should be properly designed, implemented and tested in multiple devices and OS before deployment.
This last point is the most important of all. It is very tempting to implement responsive design via media queries and to neglect tests in the bottom and top range causing screens too wide or too narrow to fail.
Apologies for the long and public post. Hope it helps
I'm on android chrome and below is what I'm seeing, it would be great to remove the white space on the sides like others have shown it is on the iphone...
It's the one feature that keeps me from switching from https://cheeaun.github.io/hackerweb/ on mobile, or uninstalling the Hacker News Enhancement Suite in Chrome.
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.
Now that you're returning to different results for mobile vs not: how about Upvote on the left (where it is) and downvote on the right of "hours ago"? I don't want the buttons bigger (and I suspect others don't either) but I would prefer not to accidentally up/downvote incorrectly.
I like the desktop version better than the new version (android/chrome). I like the tiny fonts for reading. Hitting tiny UI elements is hard, but zooming in then hitting is easy enough. The new big fonts + huge front page margins means much less content visible.
Tips for mobile developers:
Don't make it impossible to zoom.
Don't make it hard/impossible to get to the desktop version.
Don't make it hard/impossible to view in landscape (I am amazed at the "rotate your device" popups)
Don't make your popups impossible to dismiss on mobile (can't get to the X due to size/positioning)
Don't download megabytes of javascript to display a small amount of text content.
Do support "reader view" (in mobile Safari) or equivalent, so I can get a view that is simply readable AND accessible. Sorry that this overrides your hard work, but really I just want to be able to read your content. Your ads are fine, if they don't use all my bandwidth.
I have to zoom because otherwise it's impossible to click the correct links.
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.
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.
This comment form could also use work. It doesn't fit the width of the screen, so I have to pinch/scroll to see what I've written then maneuver back to type. Nor does it auto expand or allow manual resizing. Just trying to scroll risks pull-to-refresh in Chrome for iOS or some embedded WebKit browsers.
I'd also say the navigation could be addressed. The first comment about sizing is a start, but the separate site and account navigation lists don't have enough space now, let alone once you up the font. Some sort of collapsing/hidden/drop down menu might need to be considered if you intend to keep 8 independent links with sufficient padding for accurate tapping.
A good start, but still not there IMO.
There is a web app, namely HackerWeb, which even though lacks enough functionality but looks more humane and real. Try that out; and if not copy it, atleast take hints to improve your version of the site.
One more thing, why don't you guys come up with an online open contest, and let the community hack a newer version? That'll be fun, and make your lives a little easier as well.
Other than that, it's a big improvement.
Don't bail, but maybe redesign the whole page, and get rid of the tables in the markup?
For the header, I'd consider splitting it into two lines, like this - http://i.imgur.com/7EAROA8.png. That is, keep top line for user-specific items, and put the rest in the bottom line. This also means moving "submit" to the top and hiding it when a user is not logged in.
I think it would be cool to open up API even more and let community create amazing apps for you. Maybe create a contest for people to develop native apps? Perhaps, a winner could get an interview to get into YC or YCF.
Now it feels kind of crowded, lots of wrapped text.
Seems I'm in the minority though. Agree that the up/down arrows are still quite small, but I'm not sure how you could fix that, you don't have much room to work in.
iOS 9.1 on iPhone 6.
This is much more readable on Android/Chrome Moto G, will try more later.
* Please add a way to turn it off, showdead-style. I miss the old style.
Also below 375px it seems to revert to the desktop layout (?!?).
So the graphical design is fine, but the CSS implementation could use some major improvements.
I'd say it's better than before (don't have to zoom in) just a little tweek and will be perfect.
Also, I don't think the numbers on the left add much value and may be better replaced with bigger up vote button.
But this is terrible, I'm sorry. As others have said, there have been dozens of great HN mobile versions done by the community. Why not endorse one?
I appreciate what you're doing, and it seems an improvement for use on a small screen - but on an iphone 6+ it is much worse. Everything was a great balance before (and the comment pages are still readable), but now the front page is terrible.
The giant font causes titles to span multiple lines and breaks the flow of each item. It is much harder to read than before. Also it was one of the few sites that used a natural size font on the 6+ display...
Any chance we could get something like ?fontsize=14 on the end of the url for such specific tweaking?
I don't like how comments are displayed, why is there no auto word-wrap?
Review the pull requests.
You'll have a fantastic mobile layout in a day or two.
Even better, why not just ask for community help? There are already a few skins/viewer sites already that do this just fine that you can takeover or just ask for some volunteers.
This site is very very simple and would take just a few hours or perhaps a weekend of time to get a nice new layout. Why not be efficient and end up with a better product?
Would like the comments button a bit bigger, and inside the comments to have a max-width set so that I don't have to scroll left and right.
Overall pretty nice, no more need to zoom in every time I open HN.
It's got to be possible to override zoom (pinch out gesture) and have it only change the font size, so there's no text clipping. The buttons would be much simpler and easy to control though.
If we're going to keep these changes we'll upgrade the remaining pages soon.
But, yeah I'd keep it for sure. Definitely an improvement
Curious why it doesn't work when I shrink my desktop browser window though -- is it actually a separate "mobile version" that is only served to certain devices (instead of just having some breakpoints at narrower widths)?
One caveat is the text entry box for entering a comment is a fair amount wider than the screen in either orientation. I hope this can be fixed.
https://i.imgur.com/bDrJSHI.png
Firefox on Android running on a Nexus 5
But once you zoom out it seems fine. And it's much more usable than the old view.
Also worth stressing: so far it looks better than the status quo everywhere it's different.
iphone6 / ios9 / chrome
issues in nav header:
(1) "submit" link wraps so it's under "new", shld be same line as "ask | jobs | "
(2) username (karma) | logout has similar issue; "logout" wraps
That aside, the homepage looks good. I'd like the new look be kept, with the comment page rewritten.
Suggestion: Increase the width of the index table and remove the body margins. The table with the id `hnmain` should have it's width changed from 75% to 100%, and this CSS should be added: `body { margin: 0; };`
It needs minor tweaks to make it uniformly readable across arbitary screen sizes, but in general this just made my day!
I still have to zoom in to up-vote or click on comments though, but that do not bother me.
EDIT: Ah. It's a different story on iPhone 6s Plus than say, 5s.
The screen is zoomed in slightly by default, however, but a quick pinch to zoom out makes it all fit well on the screen at a good size.
Yes, this is frustrating.
But anyways keep.
there are currently many third party apps.
Easier to read by far, but requires some side scrolling for most comments.
Please keep.
Keep it, please!
Let me suggest a few things:
* I'm confused as to why you're using tables for layout? Might want to consider something more modern, and use tables just for tabular data, and use divs, classes, and CSS for handling the layout: http://learnlayout.com/ You can get a lot done without using tables and <center> tags, etc.
* The width on your table is 85%, why not 100%? Let that bad boy go to the edge of the viewport, on mobile every pixel counts.
* I'd suggest adding this to your 'body' css, make that content go to the edge of the viewport:
margin: 0; padding: 0;
* I see a lot in inline styles in your table, you might want to consider taking those out, and just throwing them into your CSS stylesheet. Those are the most specific, and override everything. Maintaining that will be hard, and painful. Unless you have some historic, or those are dynamically entered for good reason by your CMS, I'd take them out.
* <tr class="spacer" style="height:5px"></tr> Things like this could be better improved by removing, and just adding padding to the element you really wanted to add some breathing room around
* <span class="score" id="score_10487419">318 points</span> Perhaps this is a personal preference but I prefer classes over ids in CSS. Classes are more easily overridden, and have less headaches than ids on large websites http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-...
* <span class="deadmark"></span> Reason for these? Looking at it, I'm not sure what value it might provide. If it's something that isn't pertinent to that item on the page, I'd consider not rendering it, as there is nothing in it, and you, as a general rule shouldn't use spans or divs to solely help you lay things out on the page
* <td colspan="2"></td> As I see you have these there, since you're laying out with a table, I'd encourage you to not do that. Tables are markup heavy, and you'd find you could bring your page weight down if you did not use tables for layout. See http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-...
Specifically for mobile:
* Responsive Design: https://developers.google.com/web/fundamentals/design-and-ui...
* Touch Targets: http://www.smashingmagazine.com/2012/02/finger-friendly-desi...
I hope some of those tips are helpful. Keep going! Keep learning!
EDIT: My initial post was from my phone. Now I'm on my workstation and I see the markup here is antiquated, pre-1998 HTML. No wonder this is so horrid. You should be ashamed but, still, I could do better.
Dang btw:
- https://developer.chrome.com/devtools/docs/device-mode
- https://developer.mozilla.org/en-US/docs/Tools/Valence / https://developer.mozilla.org/en-US/docs/Tools/Responsive_De...
You probably answered this elsewhere, but I can't find it. What has kept you from using a CSS framework?